From e93917404071a4ff59c3eeb3b0571dc3483a40fe Mon Sep 17 00:00:00 2001
From: Oliver Booth <me@olivr.me>
Date: Thu, 10 Aug 2023 16:21:35 +0100
Subject: [PATCH] refactor: delegate timestamp render to UI class

---
 src/ts/UI.ts  | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++
 src/ts/app.ts | 49 +---------------------------------------------
 2 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/src/ts/UI.ts b/src/ts/UI.ts
index 1bca4ed..58130a5 100644
--- a/src/ts/UI.ts
+++ b/src/ts/UI.ts
@@ -71,6 +71,7 @@ class UI {
         UI.addHighlighting(element);
         UI.addBootstrapTooltips(element);
         UI.renderTeX(element);
+        UI.renderTimestamps(element);
         UI.unescapeMarkTags(element);
     }
 
@@ -131,6 +132,59 @@ class UI {
         });
     }
 
+    /**
+     * Renders Discord-style <t:timestamp:format> tags.
+     * @param element The element to search for timestamps in.
+     */
+    public static renderTimestamps(element?: Element) {
+        element = element || document.body;
+        const timestamps = element.querySelectorAll("span[data-timestamp][data-format]");
+        timestamps.forEach((timestamp) => {
+            const seconds = parseInt(timestamp.getAttribute("data-timestamp"));
+            const format = timestamp.getAttribute("data-format");
+            const date = new Date(seconds * 1000);
+
+            const shortTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"});
+            const shortDateString = date.toLocaleDateString([], {day: "2-digit", month: "2-digit", year: "numeric"});
+            const longTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit", second: "2-digit"});
+            const longDateString = date.toLocaleDateString([], {day: "numeric", month: "long", year: "numeric"});
+            const weekday = date.toLocaleString([], {weekday: "long"});
+            timestamp.setAttribute("title", `${weekday}, ${longDateString} ${shortTimeString}`);
+
+            switch (format) {
+                case "t":
+                    timestamp.textContent = shortTimeString;
+                    break;
+
+                case "T":
+                    timestamp.textContent = longTimeString;
+                    break;
+
+                case "d":
+                    timestamp.textContent = shortDateString;
+                    break;
+
+                case "D":
+                    timestamp.textContent = longDateString;
+                    break;
+
+                case "f":
+                    timestamp.textContent = `${longDateString} at ${shortTimeString}`
+                    break;
+
+                case "F":
+                    timestamp.textContent = `${weekday}, ${longDateString} at ${shortTimeString}`
+                    break;
+
+                case "R":
+                    setInterval(() => {
+                        timestamp.textContent = TimeUtility.formatRelativeTimestamp(date);
+                    }, 1000);
+                    break;
+            }
+        });
+    }
+
     /**
      * Unescapes all <mark> tags in <pre> <code> blocks.
      * @param element The element to search for <pre> <code> blocks in.
diff --git a/src/ts/app.ts b/src/ts/app.ts
index 7373dc1..99346ba 100644
--- a/src/ts/app.ts
+++ b/src/ts/app.ts
@@ -1,5 +1,4 @@
-import API from "./API";
-import TimeUtility from "./TimeUtility";
+import API from "./API";
 import UI from "./UI";
 
 declare const Handlebars: any;
@@ -32,50 +31,4 @@ declare const Handlebars: any;
     }
 
     UI.updateUI();
-
-    const timestamps = document.querySelectorAll("span[data-timestamp][data-format]");
-    timestamps.forEach((timestamp) => {
-        const seconds = parseInt(timestamp.getAttribute("data-timestamp"));
-        const format = timestamp.getAttribute("data-format");
-        const date = new Date(seconds * 1000);
-
-        const shortTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"});
-        const shortDateString = date.toLocaleDateString([], {day: "2-digit", month: "2-digit", year: "numeric"});
-        const longTimeString = date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit", second: "2-digit"});
-        const longDateString = date.toLocaleDateString([], {day: "numeric", month: "long", year: "numeric"});
-        const weekday = date.toLocaleString([], {weekday: "long"});
-        timestamp.setAttribute("title", `${weekday}, ${longDateString} ${shortTimeString}`);
-
-        switch (format) {
-            case "t":
-                timestamp.textContent = shortTimeString;
-                break;
-
-            case "T":
-                timestamp.textContent = longTimeString;
-                break;
-
-            case "d":
-                timestamp.textContent = shortDateString;
-                break;
-
-            case "D":
-                timestamp.textContent = longDateString;
-                break;
-
-            case "f":
-                timestamp.textContent = `${longDateString} at ${shortTimeString}`
-                break;
-
-            case "F":
-                timestamp.textContent = `${weekday}, ${longDateString} at ${shortTimeString}`
-                break;
-
-            case "R":
-                setInterval(() => {
-                    timestamp.textContent = TimeUtility.formatRelativeTimestamp(date);
-                }, 1000);
-                break;
-        }
-    });
 })();