Convert to ember-dayjs

web/app/components/doc/row.hbs

@@ -20,7 +20,7 @@
       @route="authenticated.document"
       @model="{{@docID}}"
       @query={{hash draft=@isDraft}}
-      class="flex  space-x-4 no-underline"
+      class="flex space-x-4 no-underline"
     >
       <div
         class="relative flex flex-shrink-0 items-center w-[40px] h-[56px] hds-surface-mid
@@ -83,5 +83,7 @@
   <Hds::Table::Td class="owner">
     <Person @ignoreUnknown={{true}} @imgURL={{@avatar}} @email={{@owner}} />
   </Hds::Table::Td>
-  <Hds::Table::Td class="created">{{@createdDate}}</Hds::Table::Td>
+  <Hds::Table::Td class="created">
+    {{dayjs-format @createdDate "D MMM YYYY"}}
+  </Hds::Table::Td>
 </Hds::Table::Tr>

web/app/components/doc/tile.hbs

@@ -7,7 +7,7 @@
   @docNumber (string): document number
   @isOwner eg. 'true' (false by default) - optional
   @isResult eg. 'true' (false by default) - optional
-  @modifiedAgo (string): e.g. 'Modified 3 days ago'
+  @modifiedAgo (number): e.g. 1516586508
   @owner (string): owner of document
   @productArea eg. 'Waypoint' or 'Design Systems' etc
   @snippet: HTML string - optional
@@ -76,11 +76,10 @@
 
   <div class="flex flex-col items-start space-y-1 pb-1 max-w-full">
     <Person @ignoreUnknown={{true}} @imgURL={{@avatar}} @email={{@owner}} />
-    {{#if (not (is-empty @modifiedAgo))}}
-      <p
-        class="hds-typography-body-100 hds-foreground-faint"
-      >{{@modifiedAgo}}</p>
-    {{/if}}
+    {{#let (multiply @modifiedTime 1000) as |unixTime|}}
+      <p class="text-color-foreground-faint">Modified
+        {{dayjs-from unixTime}}</p>
+    {{/let}}
   </div>
 
   <Hds::Badge @text={{this.productAreaName}} @icon={{this.productAreaIcon}} />

web/app/components/row-results.hbs

@@ -26,15 +26,15 @@
           <:body>
             {{#each @docs as |doc index|}}
               <Doc::Row
-                @avatar="{{get doc.ownerPhotos 0}}"
-                @createdDate="{{parse-date doc.created}}"
-                @docID="{{doc.objectID}}"
-                @docNumber="{{doc.docNumber}}"
-                @docType="{{doc.docType}}"
-                @owner="{{get doc.owners 0}}"
-                @productArea="{{doc.product}}"
-                @status="{{lowercase doc.status}}"
-                @title="{{doc.title}}"
+                @avatar={{get doc.ownerPhotos 0}}
+                @createdDate={{doc.created}}
+                @docID={{doc.objectID}}
+                @docNumber={{doc.docNumber}}
+                @docType={{doc.docType}}
+                @owner={{get doc.owners 0}}
+                @productArea={{doc.product}}
+                @status={{lowercase doc.status}}
+                @title={{doc.title}}
                 @isDraft={{@isDraft}}
               />
             {{/each}}

web/app/components/sidebar.hbs

@@ -302,14 +302,22 @@
         <small class="hds-typography-body-100 hds-foreground-faint">
           Created
         </small>
-        <p>{{or @document.createdDate "Unknown"}}</p>
+        <p>
+          {{#if @document.created}}
+            {{dayjs-format @document.created "D MMMM YYYY"}}
+          {{else}}
+            Unknown
+          {{/if}}
+        </p>
       </div>
 
       <div class="flex flex-col items-start space-y-2 px-3">
         <small class="hds-typography-body-100 hds-foreground-faint">
           Last modified
         </small>
-        <p>{{@document.lastModified}}</p>
+        {{#let (multiply @document.modifiedTime 1000) as |unixTime|}}
+          <p>{{dayjs-from unixTime}}</p>
+        {{/let}}
       </div>
 
       {{#each-in this.customEditableFields as |field attributes|}}

web/app/helpers/multiply.ts

@@ -0,0 +1,5 @@
+import { helper } from "@ember/component/helper";
+
+export default helper(function multiply([first, second]: [number, number]) {
+  return first * second;
+});

web/app/routes/application.js

@@ -9,6 +9,7 @@ export default class ApplicationRoute extends Route {
   @service("fetch") fetchSvc;
   @service flags;
   @service session;
+  @service dayjs;
 
   @action
   error(error) {
@@ -21,6 +22,26 @@ export default class ApplicationRoute extends Route {
   async beforeModel() {
     this.session.setup();
 
+    this.dayjs.extend("relativeTime");
+    this.dayjs.extend("updateLocale");
+    this.dayjs.self.updateLocale("en", {
+      relativeTime: {
+        future: "in %s",
+        past: "%s ago",
+        s: "A few seconds",
+        m: "1 minute",
+        mm: "%d minutes",
+        h: "1 hour",
+        hh: "%d hours",
+        d: "1 day",
+        dd: "%d days",
+        M: "1 month",
+        MM: "%d months",
+        y: "1 year",
+        yy: "%d years",
+      },
+    });
+
     // Flags read from the environment and set properties on the service this
     // could be done in an initializer, but this seems more natural these days
     this.flags.initialize();

web/app/routes/authenticated/dashboard.js

@@ -1,7 +1,6 @@
 import Route from "@ember/routing/route";
 import RSVP from "rsvp";
 import { inject as service } from "@ember/service";
-import timeAgo from "hermes/utils/time-ago";
 
 export default class DashboardRoute extends Route {
   @service algolia;
@@ -45,27 +44,7 @@ export default class DashboardRoute extends Route {
           " AND status:In-Review",
         hitsPerPage: 4,
       })
-      .then((result) => {
-        // Add modifiedAgo for each doc.
-        for (const hit of result.hits) {
-          this.fetchSvc
-            .fetch("/api/v1/documents/" + hit.objectID)
-            .then((resp) => resp.json())
-            .then((doc) => {
-              if (doc.modifiedTime) {
-                const modifiedDate = new Date(doc.modifiedTime * 1000);
-                hit.modifiedAgo = `Modified ${timeAgo(modifiedDate)}`;
-              }
-            })
-            .catch((err) => {
-              console.log(
-                `Error getting document waiting for review (${hit.objectID}):`,
-                err
-              );
-            });
-        }
-        return result.hits;
-      });
+      .then((result) => result.hits);
 
     // Get recently viewed docs from app data.
     const recentlyViewedDocIDs = await this.recentDocs.get.perform();
@@ -96,13 +75,8 @@ export default class DashboardRoute extends Route {
     const recentlyViewedDocs = recentlyViewedDocsPromise.then((promises) => {
       let recentlyViewedDocs = [];
 
-      promises.forEach((promise, index) => {
+      promises.forEach((promise) => {
         if (promise.status == "fulfilled") {
-          let doc = promise.value;
-          doc.modifiedAgo = `Modified ${timeAgo(
-            new Date(doc.modifiedTime * 1000)
-          )}`;
-
           recentlyViewedDocs.push(promise.value);
         }
       });

web/app/routes/authenticated/document.js

@@ -1,8 +1,6 @@
 import Route from "@ember/routing/route";
 import { inject as service } from "@ember/service";
-import timeAgo from "hermes/utils/time-ago";
 import RSVP from "rsvp";
-import parseDate from "hermes/utils/parse-date";
 
 const serializePeople = (people) =>
   people.map((p) => ({
@@ -82,12 +80,6 @@ export default class DocumentRoute extends Route {
         throw new Error(errorMessage);
       }
     }
-    if (!!doc.createdTime) {
-      doc.createdDate = parseDate(doc.createdTime * 1000, "long");
-    }
-
-    // Build strings for created and last-modified.
-    doc.lastModified = `${timeAgo(new Date(doc.modifiedTime * 1000))}`;
 
     // Record analytics.
     try {

web/app/templates/authenticated/dashboard.hbs

@@ -25,14 +25,14 @@
         {{#each this.docsWaitingForReview as |doc index|}}
           {{#if (lt index 4)}}
             <Doc::Tile
-              @avatar="{{get doc.ownerPhotos 0}}"
-              @docID="{{doc.objectID}}"
-              @docNumber="{{doc.docNumber}}"
-              @modifiedAgo="{{doc.modifiedAgo}}"
-              @owner="{{get doc.owners 0}}"
-              @productArea="{{doc.product}}"
-              @status="{{lowercase doc.status}}"
-              @title="{{doc.title}}"
+              @avatar={{get doc.ownerPhotos 0}}
+              @docID={{doc.objectID}}
+              @docNumber={{doc.docNumber}}
+              @modifiedTime={{doc.modifiedTime}}
+              @owner={{get doc.owners 0}}
+              @productArea={{doc.product}}
+              @status={{lowercase doc.status}}
+              @title={{doc.title}}
             />
           {{/if}}
         {{/each}}
@@ -54,14 +54,14 @@
         {{#each this.recentlyViewedDocs as |doc index|}}
           {{#if (lt index 4)}}
             <Doc::Tile
-              @avatar="{{get doc.ownerPhotos 0}}"
-              @docID="{{doc.objectID}}"
-              @docNumber="{{doc.docNumber}}"
-              @modifiedAgo="{{doc.modifiedAgo}}"
-              @owner="{{get doc.owners 0}}"
-              @productArea="{{doc.product}}"
-              @status="{{lowercase doc.status}}"
-              @title="{{doc.title}}"
+              @avatar={{get doc.ownerPhotos 0}}
+              @docID={{doc.objectID}}
+              @docNumber={{doc.docNumber}}
+              @modifiedTime={{doc.modifiedTime}}
+              @owner={{get doc.owners 0}}
+              @productArea={{doc.product}}
+              @status={{lowercase doc.status}}
+              @title={{doc.title}}
             />
           {{/if}}
         {{/each}}

web/ember-cli-build.js

@@ -31,6 +31,9 @@ module.exports = function (defaults) {
     "ember-simple-auth": {
       useSessionSetupMethod: true,
     },
+    "ember-dayjs": {
+      plugins: ["relativeTime", "updateLocale"],
+    },
   });
 
   // Use `app.import` to add additional libraries to the generated

web/tests/helpers/multiply-test.ts

@@ -0,0 +1,16 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+
+module("Integration | Helper | multiply", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it multiplies two numbers", async function (assert) {
+    await render(hbs`
+      {{multiply 5 10}} - {{multiply 1 10}} - {{multiply 10 10}}
+    `);
+
+    assert.dom().hasText("50 - 10 - 100");
+  });
+});