Remove local_time gem, and add similar (#2875)

Gemfile

@@ -32,7 +32,6 @@ gem 'http_accept_language'
 gem 'httplog'
 gem 'kaminari'
 gem 'link_header'
-gem 'local_time'
 gem 'nokogiri'
 gem 'oj'
 gem 'ostatus2', '~> 2.0'

Gemfile.lock

@@ -105,13 +105,6 @@ GEM
     cocaine (0.5.8)
       climate_control (>= 0.0.3, < 1.0)
     coderay (1.1.1)
-    coffee-rails (4.2.1)
-      coffee-script (>= 2.2.0)
-      railties (>= 4.0.0, < 5.2.x)
-    coffee-script (2.4.1)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.12.2)
     colorize (0.8.1)
     concurrent-ruby (1.0.5)
     connection_pool (2.2.1)
@@ -224,8 +217,6 @@ GEM
       letter_opener (~> 1.0)
       railties (>= 3.2)
     link_header (0.0.8)
-    local_time (1.0.3)
-      coffee-rails
     lograge (0.5.0)
       actionpack (>= 4, <= 5.1.0)
       activesupport (>= 4, <= 5.1.0)
@@ -509,7 +500,6 @@ DEPENDENCIES
   letter_opener
   letter_opener_web
   link_header
-  local_time
   lograge
   microformats2
   nokogiri

app/javascript/packs/public.js

@@ -1,16 +1,70 @@
 import emojify from 'mastodon/emoji';
 import { length } from 'stringz';
+import { default as dateFormat } from 'date-fns/format';
+import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
 
 window.jQuery = window.$ = require('jquery');
 require('jquery-ujs');
 require.context('../images/', true);
 
+const parseFormat = (format) => format.replace(/%(\w)/g, (_, modifier) => {
+  switch (modifier) {
+  case '%':
+    return '%';
+  case 'a':
+    return 'ddd';
+  case 'A':
+    return 'ddd';
+  case 'b':
+    return 'MMM';
+  case 'B':
+    return 'MMMM';
+  case 'd':
+    return 'DD';
+  case 'H':
+    return 'HH';
+  case 'I':
+    return 'hh';
+  case 'l':
+    return 'H';
+  case 'm':
+    return 'M';
+  case 'M':
+    return 'mm';
+  case 'p':
+    return 'A';
+  case 'S':
+    return 'ss';
+  case 'w':
+    return 'd';
+  case 'y':
+    return 'YY';
+  case 'Y':
+    return 'YYYY';
+  default:
+    return `%${modifier}`;
+  }
+});
+
 $(() => {
   $.each($('.emojify'), (_, content) => {
     const $content = $(content);
     $content.html(emojify($content.html()));
   });
 
+  $('time[data-format]').each((_, content) => {
+    const $content = $(content);
+    const format = parseFormat($content.data('format'));
+    const formattedDate = dateFormat($content.attr('datetime'), format);
+    $content.text(formattedDate);
+  });
+
+  $('time.time-ago').each((_, content) => {
+    const $content = $(content);
+    const timeAgo = distanceInWordsStrict(new Date(), $content.attr('datetime'), { addSuffix: true });
+    $content.text(timeAgo);
+  });
+
   $('.video-player video').on('click', e => {
     if (e.target.paused) {
       e.target.play();

app/views/stream_entries/_detailed_status.html.haml

@@ -14,7 +14,6 @@
         %a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more')
     %div.e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl?(status.content) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status)
 
-
   - unless status.media_attachments.empty?
     - if status.media_attachments.first.video?
       .video-player
@@ -32,7 +31,7 @@
   %div.detailed-status__meta
     %data.dt-published{ value: status.created_at.to_time.iso8601 }
     = link_to TagManager.instance.url_for(status), class: 'detailed-status__datetime u-url u-uid', target: stream_link_target, rel: 'noopener' do
-      %span= local_time(status.created_at, format: :default)
+      %time{ datetime: status.created_at.iso8601, title: l(status.created_at), data: { format: t('time.formats.default') } }= l(status.created_at)
     ·
     - if status.application
       - if status.application.website.blank?

app/views/stream_entries/_simple_status.html.haml

@@ -1,7 +1,8 @@
 .status.light
   .status__header
     .status__meta
-      = link_to local_time_ago(status.created_at), TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', title: l(status.created_at), target: stream_link_target, rel: 'noopener'
+      = link_to TagManager.instance.url_for(status), class: 'status__relative-time u-url u-uid', target: stream_link_target, rel: 'noopener' do
+        %time.time-ago{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at)
       %data.dt-published{ value: status.created_at.to_time.iso8601 }
 
     = link_to TagManager.instance.url_for(status.account), class: 'status__display-name p-author h-card', target: stream_link_target, rel: 'noopener' do

package.json

@@ -42,6 +42,7 @@
     "coffee-script": "^1.12.5",
     "compression-webpack-plugin": "^0.4.0",
     "css-loader": "^0.28.0",
+    "date-fns": "^1.28.4",
     "dotenv": "^4.0.0",
     "emojione": "^2.2.7",
     "emojione-picker": "^2.2.1",

yarn.lock

@@ -2120,6 +2120,10 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^1.28.4:
+  version "1.28.4"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.28.4.tgz#7938aec34ba31fc8bd134d2344bc2e0bbfd95165"
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"