From d570edcf07ce86d7ada8f6f0e21824275263da7d Mon Sep 17 00:00:00 2001
From: Rafi <Rafi993@users.noreply.github.com>
Date: Mon, 21 Sep 2020 13:44:26 +0530
Subject: [PATCH] Showing date in listing tile (#10217)

* Showing date in listing tile

* Displaying date in listing tile

1. Sending created_at in listing search API
2. Global util functions for short and long date formatting
3. New date util functions extend timestampToLocalDateTime
4. Converting div to time tag
5. Adding title attribute for date

* originally_published_at column

* Displaying originally_published_at date

* Fixing test in modal

* Fixing all listing test

* Fixing casing of dateTime

* Adding tests for originally_published_at

* Reverting to bumped_at

* Backfilling only published listing

* Removing ReIndexListingWithOriginallyPublishedAt
---
 app/assets/stylesheets/views/listings.scss        |  6 ++++++
 app/controllers/concerns/listings_toolkit.rb      |  1 +
 .../listings/__tests__/AllListings.test.jsx       |  9 +++++++++
 app/javascript/listings/__tests__/Modal.test.jsx  | 11 +++++++++++
 .../listings/__tests__/SingleListing.test.jsx     | 12 ++++++++++++
 app/javascript/listings/singleListing/Header.jsx  | 15 +++++++++++++--
 app/serializers/search/listing_serializer.rb      |  1 +
 app/views/layouts/admin.html.erb                  |  4 ++--
 app/views/shell/_top.html.erb                     |  4 ++--
 config/elasticsearch/mappings/listings.json       |  3 +++
 ...7114525_originally_published_at_for_listing.rb |  5 +++++
 db/schema.rb                                      |  3 ++-
 db/seeds.rb                                       |  1 +
 ...00917115821_backfill_listing_published_date.rb | 11 +++++++++++
 spec/requests/listings_spec.rb                    |  7 +++++++
 15 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 db/migrate/20200917114525_originally_published_at_for_listing.rb
 create mode 100644 lib/data_update_scripts/20200917115821_backfill_listing_published_date.rb

diff --git a/app/assets/stylesheets/views/listings.scss b/app/assets/stylesheets/views/listings.scss
index 20f64b4a8..17e550b94 100644
--- a/app/assets/stylesheets/views/listings.scss
+++ b/app/assets/stylesheets/views/listings.scss
@@ -28,4 +28,10 @@
   &__tags {
     min-height: var(--su-4);
   }
+
+  &__date {
+    font-size: 0.85em;
+    min-height: var(--su-4);
+    color: var(--card-color-tertiary);
+  }
 }
diff --git a/app/controllers/concerns/listings_toolkit.rb b/app/controllers/concerns/listings_toolkit.rb
index 52485182f..13de7134a 100644
--- a/app/controllers/concerns/listings_toolkit.rb
+++ b/app/controllers/concerns/listings_toolkit.rb
@@ -100,6 +100,7 @@ module ListingsToolkit
       # save the listing
       @listing.bumped_at = Time.current
       @listing.published = true
+      @listing.originally_published_at = Time.current
 
       # since we can't raise active record errors in this transaction
       # due to the fact that we need to display them in the :new view,
diff --git a/app/javascript/listings/__tests__/AllListings.test.jsx b/app/javascript/listings/__tests__/AllListings.test.jsx
index 1e3923e22..898dcfdad 100644
--- a/app/javascript/listings/__tests__/AllListings.test.jsx
+++ b/app/javascript/listings/__tests__/AllListings.test.jsx
@@ -2,6 +2,7 @@ import { h } from 'preact';
 import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
 import AllListings from '../components/AllListings';
+import '../../../assets/javascripts/utilities/localDateTime';
 
 const firstListing = {
   id: 20,
@@ -85,7 +86,15 @@ const getProps = () => ({
 
 const renderAllListings = () => render(<AllListings {...getProps()} />);
 
+/* eslint-disable no-unused-vars */
+/* global globalThis timestampToLocalDateTimeLong timestampToLocalDateTimeShort */
+
 describe('<AllListings />', () => {
+  afterAll(() => {
+    delete globalThis.timestampToLocalDateTimeLong;
+    delete globalThis.timestampToLocalDateTimeShort;
+  });
+
   it('should have no a11y violations', async () => {
     const { container } = renderAllListings();
     const results = await axe(container);
diff --git a/app/javascript/listings/__tests__/Modal.test.jsx b/app/javascript/listings/__tests__/Modal.test.jsx
index 37e1a50fd..19a06e27c 100644
--- a/app/javascript/listings/__tests__/Modal.test.jsx
+++ b/app/javascript/listings/__tests__/Modal.test.jsx
@@ -3,7 +3,16 @@ import { render } from '@testing-library/preact';
 import { axe } from 'jest-axe';
 import Modal from '../components/Modal';
 
+import '../../../assets/javascripts/utilities/localDateTime';
+
+/* eslint-disable no-unused-vars */
+/* global globalThis timestampToLocalDateTimeLong timestampToLocalDateTimeShort */
 describe('<Modal />', () => {
+  afterAll(() => {
+    delete globalThis.timestampToLocalDateTimeLong;
+    delete globalThis.timestampToLocalDateTimeShort;
+  });
+
   const getDefaultListing = () => ({
     id: 22,
     category: 'misc',
@@ -12,6 +21,8 @@ describe('<Modal />', () => {
       '\u003cp\u003eEius et ullam. Dolores et qui. Quis \u003cstrong\u003equi\u003c/strong\u003e omnis.\u003c/p\u003e\n',
     slug: 'illo-iure-quos-perspiciatis-5hk7',
     title: 'Illo iure quos perspiciatis.',
+    bumped_at: '2020-09-06T14:15:02.977Z',
+    originally_published_at: '2020-09-06T14:15:02.977Z',
     user_id: 7,
     tags: ['go', 'git'],
     author: {
diff --git a/app/javascript/listings/__tests__/SingleListing.test.jsx b/app/javascript/listings/__tests__/SingleListing.test.jsx
index ee6d1815b..cea8b1e40 100644
--- a/app/javascript/listings/__tests__/SingleListing.test.jsx
+++ b/app/javascript/listings/__tests__/SingleListing.test.jsx
@@ -1,7 +1,9 @@
 import { h } from 'preact';
 import { axe } from 'jest-axe';
 import { render } from '@testing-library/preact';
+import '@testing-library/jest-dom';
 
+import '../../../assets/javascripts/utilities/localDateTime';
 import { SingleListing } from '../singleListing/SingleListing';
 
 const listing = {
@@ -14,6 +16,8 @@ const listing = {
   slug: 'illo-iure-quos-perspiciatis-5hk7',
   title: 'Illo iure quos perspiciatis.',
   user_id: 7,
+  bumped_at: '2020-09-06T14:15:02.977Z',
+  originally_published_at: '2020-09-06T14:15:02.977Z',
   tags: ['go', 'git'],
   author: {
     name: 'Mrs. Yoko Christiansen',
@@ -23,7 +27,15 @@ const listing = {
   },
 };
 
+/* eslint-disable no-unused-vars */
+/* global globalThis timestampToLocalDateTimeLong timestampToLocalDateTimeShort */
+
 describe('<SingleListing />', () => {
+  afterAll(() => {
+    delete globalThis.timestampToLocalDateTimeLong;
+    delete globalThis.timestampToLocalDateTimeShort;
+  });
+
   const renderSingleListing = () =>
     render(
       <SingleListing
diff --git a/app/javascript/listings/singleListing/Header.jsx b/app/javascript/listings/singleListing/Header.jsx
index a3b150ff7..efce7c3b2 100644
--- a/app/javascript/listings/singleListing/Header.jsx
+++ b/app/javascript/listings/singleListing/Header.jsx
@@ -1,11 +1,22 @@
 import PropTypes from 'prop-types';
 import { h } from 'preact';
+import DateTime from '../../shared/components/dateTime';
 import listingPropTypes from './listingPropTypes';
 import DropdownMenu from './DropdownMenu';
 import TagLinks from './TagLinks';
 
 const Header = ({ listing, currentUserId, onTitleClick, onAddTag }) => {
-  const { id, user_id: userId, category, slug, title } = listing;
+  const {
+    id,
+    user_id: userId,
+    category,
+    slug,
+    title,
+    bumped_at,
+    originally_published_at,
+  } = listing;
+  const listingDate = bumped_at ? bumped_at : originally_published_at;
+
   return (
     <header className="mb-3">
       <h2 className="fs-2xl fw-bold lh-tight mb-1 pr-8">
@@ -19,7 +30,7 @@ const Header = ({ listing, currentUserId, onTitleClick, onAddTag }) => {
           {title}
         </a>
       </h2>
-
+      <DateTime dateTime={listingDate} className="single-listing__date" />
       <TagLinks tags={listing.tags} onClick={onAddTag} />
 
       <DropdownMenu listing={listing} isOwner={currentUserId === userId} />
diff --git a/app/serializers/search/listing_serializer.rb b/app/serializers/search/listing_serializer.rb
index 327ef39de..4ae3ab4e9 100644
--- a/app/serializers/search/listing_serializer.rb
+++ b/app/serializers/search/listing_serializer.rb
@@ -6,6 +6,7 @@ module Search
                :category,
                :contact_via_connect,
                :expires_at,
+               :originally_published_at,
                :location,
                :processed_html,
                :published,
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 777d41f1e..aa939ef7e 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -25,8 +25,8 @@
 
 </head>
 <body class="admin"
-  data-honybadger-key="<%= ApplicationConfig['HONEYBADGER_JS_API_KEY'] %>"
-  data-release-footprint="<%= ApplicationConfig['RELEASE_FOOTPRINT'] %>"
+  data-honybadger-key="<%= ApplicationConfig["HONEYBADGER_JS_API_KEY"] %>"
+  data-release-footprint="<%= ApplicationConfig["RELEASE_FOOTPRINT"] %>"
   data-ga-tracking="<%= SiteConfig.ga_tracking_id %>">
   >
   <header class="top-bar" id="top-bar" role="banner">
diff --git a/app/views/shell/_top.html.erb b/app/views/shell/_top.html.erb
index 6c16ecc6b..23733a678 100644
--- a/app/views/shell/_top.html.erb
+++ b/app/views/shell/_top.html.erb
@@ -55,8 +55,8 @@
         class="<%= SiteConfig.default_font.tr("_", "-") %>-article-body"
         data-pusher-key="<%= ApplicationConfig["PUSHER_KEY"] %>"
         data-app-name="<%= ApplicationConfig["APP_NAME"] %>"
-        data-honybadger-key="<%= ApplicationConfig['HONEYBADGER_JS_API_KEY'] %>"
-        data-release-footprint="<%= ApplicationConfig['RELEASE_FOOTPRINT'] %>"
+        data-honybadger-key="<%= ApplicationConfig["HONEYBADGER_JS_API_KEY"] %>"
+        data-release-footprint="<%= ApplicationConfig["RELEASE_FOOTPRINT"] %>"
         data-ga-tracking="<%= SiteConfig.ga_tracking_id %>">
         <div id="body-styles">
           <style>
diff --git a/config/elasticsearch/mappings/listings.json b/config/elasticsearch/mappings/listings.json
index f48d27bb5..e832e30af 100644
--- a/config/elasticsearch/mappings/listings.json
+++ b/config/elasticsearch/mappings/listings.json
@@ -22,6 +22,9 @@
       "type": "text",
       "copy_to": "listing_search"
     },
+    "originally_published_at": {
+      "type": "date"
+    },
     "bumped_at": {
       "type": "date"
     },
diff --git a/db/migrate/20200917114525_originally_published_at_for_listing.rb b/db/migrate/20200917114525_originally_published_at_for_listing.rb
new file mode 100644
index 000000000..5ce7ce5cb
--- /dev/null
+++ b/db/migrate/20200917114525_originally_published_at_for_listing.rb
@@ -0,0 +1,5 @@
+class OriginallyPublishedAtForListing < ActiveRecord::Migration[6.0]
+  def change
+    add_column :classified_listings, :originally_published_at, :datetime
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index b9498d84e..1f34979df 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_09_14_145500) do
+ActiveRecord::Schema.define(version: 2020_09_17_114525) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "citext"
@@ -374,6 +374,7 @@ ActiveRecord::Schema.define(version: 2020_09_14_145500) do
     t.datetime "last_buffered"
     t.string "location"
     t.bigint "organization_id"
+    t.datetime "originally_published_at"
     t.text "processed_html"
     t.boolean "published"
     t.string "slug"
diff --git a/db/seeds.rb b/db/seeds.rb
index d4a9345c1..3e834ddee 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -487,6 +487,7 @@ seeder.create_if_none(Listing) do
         listing_category_id: category_id,
         contact_via_connect: true,
         published: true,
+        originally_published_at: Time.current,
         bumped_at: Time.current,
         tag_list: Tag.order(Arel.sql("RANDOM()")).first(2).pluck(:name),
       )
diff --git a/lib/data_update_scripts/20200917115821_backfill_listing_published_date.rb b/lib/data_update_scripts/20200917115821_backfill_listing_published_date.rb
new file mode 100644
index 000000000..6b83e9cda
--- /dev/null
+++ b/lib/data_update_scripts/20200917115821_backfill_listing_published_date.rb
@@ -0,0 +1,11 @@
+module DataUpdateScripts
+  class BackfillListingPublishedDate
+    def run
+      return unless Listing.column_names.include?("originally_published_at")
+
+      Listing.where(published: true).find_each do |listing|
+        listing.update!(originally_published_at: listing.created_at)
+      end
+    end
+  end
+end
diff --git a/spec/requests/listings_spec.rb b/spec/requests/listings_spec.rb
index e7c226df2..a05059204 100644
--- a/spec/requests/listings_spec.rb
+++ b/spec/requests/listings_spec.rb
@@ -423,6 +423,13 @@ RSpec.describe "/listings", type: :request do
         expect(listing_draft.reload.published).to eq(true)
       end
 
+      it "publishes a draft and ensures it has originally_published_at" do
+        cost = listing_draft.cost
+        create_list(:credit, cost, user: user)
+        put "/listings/#{listing_draft.id}", params: params
+        expect(listing_draft.reload.originally_published_at).not_to eq(nil)
+      end
+
       it "publishes an org draft and charges org credits if first publish" do
         cost = org_listing_draft.cost
         create_list(:credit, cost, organization: organization)