[deploy] Add local_date helper to handle dates with respect of user timezone (#9285)

* Add local_date helper to handle dates with respect of user timezone

* Fix date timezone bug for articles/show

* Fix date_helper to meet system specs requirements

app/assets/javascripts/initializePage.js

@@ -10,7 +10,8 @@
   initializeUserProfilePage, initializePodcastPlayback, initializeDrawerSliders,
   initializeHeroBannerClose, initializeOnboardingTaskCard, initScrolling,
   nextPage:writable, fetching:writable, done:writable, adClicked:writable,
-  initializePaymentPointers, initializeSpecialNavigationFunctionality, initializeBroadcast
+  initializePaymentPointers, initializeSpecialNavigationFunctionality, initializeBroadcast,
+  initializeDateHelpers
 */
 
 function callInitializers() {
@@ -60,6 +61,7 @@ function callInitializers() {
   initializeDrawerSliders();
   initializeHeroBannerClose();
   initializeOnboardingTaskCard();
+  initializeDateHelpers();
 
   function freezeScrolling(event) {
     event.preventDefault();

app/assets/javascripts/initializers/initializeDateTimeHelpers.js

@@ -0,0 +1,18 @@
+/* global localizeTimeElements */
+
+'use strict';
+
+function initializeDateHelpers() {
+  // Date without year: Jul 12
+  localizeTimeElements(document.querySelectorAll('time.date-no-year'), {
+    month: 'short',
+    day: 'numeric',
+  });
+
+  // Full date: Jul 12, 2020
+  localizeTimeElements(document.querySelectorAll('time.date'), {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}

app/helpers/date_helper.rb

@@ -0,0 +1,11 @@
+module DateHelper
+  def local_date(datetime, show_year: true)
+    datetime = Time.zone.parse(datetime) if datetime.is_a?(String)
+
+    tag.time(
+      datetime.strftime("%b %e#{', %Y' if show_year}"),
+      datetime: datetime.utc.iso8601,
+      class: "date#{'-no-year' unless show_year}",
+    )
+  end
+end

app/views/articles/_user_metadata.html.erb

@@ -97,7 +97,7 @@
         Joined
       </div>
       <div class="value">
-        <%= @user.created_at.strftime("%b %e, %Y") %>
+        <%= local_date(@user.created_at) %>
       </div>
     </li>
   </ul>

app/views/articles/show.html.erb

@@ -152,7 +152,7 @@
 
               <span class="fs-s mb-4 s:mb-0">
                 <% if @article.published_timestamp.present? %>
-                  <time datetime="<%= @article.published_timestamp %>"><%= @article.readable_publish_date %></time>
+                  <%= local_date(@article.published_timestamp, show_year: false) %>
                 <% end %>
                 <% if @second_user.present? %>
                   <em>with <b><a href="<%= @second_user.path %>"><%= @second_user.name %></a></b></em>

spec/helpers/date_helper_spec.rb

@@ -0,0 +1,19 @@
+require "rails_helper"
+
+describe DateHelper do
+  describe ".local_date" do
+    it "renders date" do
+      time = Time.now.utc
+      date = time.strftime("%b %e, %Y")
+      tag = helper.local_date(time)
+      expect(tag).to eq "<time datetime=\"#{time.iso8601}\" class=\"date\">#{date}</time>"
+    end
+
+    it "renders date without year" do
+      time = Time.now.utc
+      date = time.strftime("%b %e")
+      tag = helper.local_date(time, show_year: false)
+      expect(tag).to eq "<time datetime=\"#{time.iso8601}\" class=\"date-no-year\">#{date}</time>"
+    end
+  end
+end

spec/system/articles/user_visits_an_article_spec.rb

@@ -39,7 +39,6 @@ RSpec.describe "Views an article", type: :system do
 
     it "embeds the published timestamp" do
       visit article.path
-
       selector = "article time[datetime='#{timestamp}']"
       expect(page).to have_selector(selector)
     end