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

@@ -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);
+  }
 }

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,

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);

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: {

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

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} />

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,

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">

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>

config/elasticsearch/mappings/listings.json

@@ -22,6 +22,9 @@
       "type": "text",
       "copy_to": "listing_search"
     },
+    "originally_published_at": {
+      "type": "date"
+    },
     "bumped_at": {
       "type": "date"
     },

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

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"

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),
       )

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

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)