From 9e94b80741da449c28d42f37692654ffca1e170f Mon Sep 17 00:00:00 2001
From: Pavel Tkachenko <tpepost@gmail.com>
Date: Thu, 16 Jul 2020 20:45:44 +0600
Subject: [PATCH] [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      |  4 +++-
 .../initializers/initializeDateTimeHelpers.js | 18 ++++++++++++++++++
 app/helpers/date_helper.rb                    | 11 +++++++++++
 app/views/articles/_user_metadata.html.erb    |  2 +-
 app/views/articles/show.html.erb              |  2 +-
 spec/helpers/date_helper_spec.rb              | 19 +++++++++++++++++++
 .../articles/user_visits_an_article_spec.rb   |  1 -
 7 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/javascripts/initializers/initializeDateTimeHelpers.js
 create mode 100644 app/helpers/date_helper.rb
 create mode 100644 spec/helpers/date_helper_spec.rb

diff --git a/app/assets/javascripts/initializePage.js b/app/assets/javascripts/initializePage.js
index 02472b132..b467a015f 100644
--- a/app/assets/javascripts/initializePage.js
+++ b/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();
diff --git a/app/assets/javascripts/initializers/initializeDateTimeHelpers.js b/app/assets/javascripts/initializers/initializeDateTimeHelpers.js
new file mode 100644
index 000000000..b72e1a908
--- /dev/null
+++ b/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',
+  });
+}
diff --git a/app/helpers/date_helper.rb b/app/helpers/date_helper.rb
new file mode 100644
index 000000000..e92821e91
--- /dev/null
+++ b/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
diff --git a/app/views/articles/_user_metadata.html.erb b/app/views/articles/_user_metadata.html.erb
index 7f51ff9a1..d85e6329c 100644
--- a/app/views/articles/_user_metadata.html.erb
+++ b/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>
diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb
index 43572072d..ec6d54f17 100644
--- a/app/views/articles/show.html.erb
+++ b/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>
diff --git a/spec/helpers/date_helper_spec.rb b/spec/helpers/date_helper_spec.rb
new file mode 100644
index 000000000..5869fa0aa
--- /dev/null
+++ b/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
diff --git a/spec/system/articles/user_visits_an_article_spec.rb b/spec/system/articles/user_visits_an_article_spec.rb
index 04ff6174e..623ce4148 100644
--- a/spec/system/articles/user_visits_an_article_spec.rb
+++ b/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