refactored `updateTimestamps` out of Chat into the base App

Moved the definition of updateTimestamps from Chat into the library base
App along with the call to update on-page timestamps during the creation
of the App as a convenience.

Any element following the `data-dtp-timestamp` and
`data-dtp-timestamp-format` conventions will have its `textContent` set
to a client-local representation of that date/time.

app/views/chat/components/message.pug

@@ -36,7 +36,7 @@ mixin renderChatMessage (message, options = { })
 
     //- "time" is filled in by the JavaScript client using the browser's locale
     //- information so that "time" is always in the user's display timezone.
-    .chat-timestamp(data-dtp-timestamp= message.created).uk-text-small.uk-text-muted
+    .chat-timestamp(data-dtp-timestamp= message.created, data-dtp-timestamp-format= 'datetime').uk-text-small.uk-text-muted
 
     if Array.isArray(message.stickers) && (message.stickers.length > 0)
       each sticker in message.stickers

client/js/site-chat.js

@@ -61,8 +61,6 @@ export default class SiteChat {
       this.mutedUsers = window.localStorage.mutedUsers ? JSON.parse(window.localStorage.mutedUsers) : [ ];
       this.filterChatView();
     }
-
-    this.updateTimestamps();
   }
 
   async filterChatView ( ) {
@@ -183,7 +181,7 @@ export default class SiteChat {
     this.ui.isModifying = true;
     this.ui.messageList.insertAdjacentHTML('beforeend', message.html);
     this.trimMessages();
-    this.updateTimestamps();
+    this.app.updateTimestamps();
 
     if (isAtBottom) {
       /*
@@ -224,7 +222,7 @@ export default class SiteChat {
 
     this.ui.messageList.appendChild(systemMessage);
     this.trimMessages();
-    this.updateTimestamps();
+    this.app.updateTimestamps();
 
     if (this.ui.isAtBottom) {
       this.ui.messageList.scrollTo(0, this.ui.messageList.scrollHeight);
@@ -237,15 +235,6 @@ export default class SiteChat {
     }
   }
 
-  updateTimestamps ( ) {
-    const timestamps = document.querySelectorAll('[data-dtp-timestamp]');
-    timestamps.forEach((timestamp) => {
-      const created = timestamp.getAttribute('data-dtp-timestamp');
-      const format = timestamp.getAttribute('data-dtp-time-format');
-      timestamp.textContent = moment(created).format(format || 'MMM DD, YYYY, [at] hh:mm:ss a');
-    });
-  }
-
   createEmojiReact (message) {
     this.ui.reactions.create(message.reaction);
   }

lib/client/js/dtp-app.js

@@ -18,6 +18,8 @@ export default class DtpApp {
 
     this.log.debug('constructor', 'creating DisplayEngine instance');
     this.displayEngine = new DtpDisplayEngine();
+
+    this.updateTimestamps();
   }
 
   async connect (options) {
@@ -203,4 +205,38 @@ export default class DtpApp {
 
     return isValid;
   }
+
+  /**
+   * Finds every element with the `data-dtp-timestamp` attribute, and sets the
+   * text content of that element to the client-local representation of that
+   * timestamp using the formatting provided by the `data-dtp-timestamp-format`
+   * attribute.
+   */
+  updateTimestamps ( ) {
+    const nodeList = document.querySelectorAll("[data-dtp-timestamp]");
+    for (const ts of nodeList) {
+      const date = ts.getAttribute('data-dtp-timestamp');
+      if (!date) {
+        continue;
+      }
+
+      const format = ts.getAttribute('data-dtp-timestamp-format');
+      switch (format) {
+        case 'date':
+          ts.textContent = moment(date).format('MMM DD, YYYY');
+          break;
+        case 'datetime':
+          ts.textContent = moment(date).format('MMMM D, h:mm a');
+          break;
+        case 'fuzzy':
+          ts.textContent = moment(date).fromNow();
+          break;
+
+        case 'timestamp':
+        default:
+          ts.textContent = moment(date).format('hh:mm:ss a');
+          break;
+      }
+    }
+  }
 }