From 6c96b90922f1132bc9c357268fbdd07eb5d75964 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 28 Sep 2016 17:47:40 +0100
Subject: [PATCH] Make relative timestamps update automatically
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It’s weird to be on a page that says ‘2 seconds ago’ and stays stuck
there.

We don’t want to AJAX the whole page because it would get in the way of
interacting with the list of notifications.

This commit adds the venerable jQuery Timeago[1] plugin to keep the
relative times accurate and fresh.

1. http://timeago.yarp.com/
---
 app/assets/javascripts/main.js     | 2 ++
 app/templates/views/api/index.html | 4 +++-
 gulpfile.babel.js                  | 3 ++-
 package.json                       | 3 ++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 23cde7b51..24fe38039 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,3 +1,5 @@
+$(() => $("time.timeago").timeago());
+
 $(() => GOVUK.modules.start());
 
 $(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));
diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
index d3f5872de..fb114b032 100644
--- a/app/templates/views/api/index.html
+++ b/app/templates/views/api/index.html
@@ -75,7 +75,9 @@
               {{notification.key_name}}
             </div>
             <div class="column-half api-notifications-item-time">
-              {{ notification.created_at|format_delta }}
+              <time class="timeago" datetime="{{ notification.created_at }}">
+                {{ notification.created_at|format_delta }}
+              </time>
             </div>
           </div>
         </summary>
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 3cc847b2c..273ca84f8 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -74,7 +74,8 @@ gulp.task('javascripts', () => gulp
     paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
     paths.npm + 'jquery/dist/jquery.min.js',
     paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
-    paths.npm + 'diff-dom/diffDOM.js'
+    paths.npm + 'diff-dom/diffDOM.js',
+    paths.npm + 'timeago/jquery.timeago.js'
   ]))
   .pipe(plugins.concat('all.js'))
   .pipe(gulp.dest(paths.dist + 'javascripts/'))
diff --git a/package.json b/package.json
index b2b9d3002..f087e864d 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,8 @@
     "gulp-uglify": "1.5.1",
     "hogan": "1.0.2",
     "jquery": "1.11.2",
-    "query-command-supported": "1.0.0"
+    "query-command-supported": "1.0.0",
+    "timeago": "1.5.3"
   },
   "devDependencies": {
     "gulp-css-url-adjuster": "0.2.3",