From 757adcf3853d78fd3d4aecaab3914c072ced95c4 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Thu, 9 May 2024 22:09:42 -0500
Subject: [PATCH] Use react-timeago for DynamicDate component, improve relative
 timing display

---
 package.json                          | 1 +
 src/components/common/DynamicDate.tsx | 8 +++-----
 yarn.lock                             | 5 +++++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f78fbb3..66d01e7 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.42.1",
     "react-ogp": "^0.0.3",
+    "react-timeago": "^7.2.0",
     "sass": "^1.57.1",
     "true-myth": "^7.1.0",
     "usehooks-ts": "^2.9.1",
diff --git a/src/components/common/DynamicDate.tsx b/src/components/common/DynamicDate.tsx
index 75d57e1..b187835 100644
--- a/src/components/common/DynamicDate.tsx
+++ b/src/components/common/DynamicDate.tsx
@@ -1,6 +1,7 @@
 import type { FunctionComponent } from "react";
 import { useBoolean } from "usehooks-ts";
 import { format, formatDistanceToNow } from "date-fns";
+import TimeAgo from "react-timeago";
 
 type DynamicDateProps = {
   value: Date | number;
@@ -23,11 +24,8 @@ const DynamicDate: FunctionComponent<DynamicDateProps> = ({
     <button onClick={toggleFormat}>
       <span title={date.toISOString()}>
         {showAbsolute
-          ? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss")
-          : formatDistanceToNow(date, {
-              includeSeconds: true,
-              addSuffix: true,
-            })}
+          ? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss xxx")
+          : <TimeAgo date={date} />}
       </span>
     </button>
   );
diff --git a/yarn.lock b/yarn.lock
index 4198d25..56a8cab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2032,6 +2032,11 @@ react-ogp@^0.0.3:
   resolved "https://registry.yarnpkg.com/react-ogp/-/react-ogp-0.0.3.tgz#f3d49ff49e593576778f6a11824a4ccb2d8b427d"
   integrity sha512-+m5my7G6dxzN79e1e/M5VV2MmM2sXrTqs+hfL8sFHsjWn4PMv3P8eD/aMSHPibvp6BYsiFCeWMMSzcqUCIQr9w==
 
+react-timeago@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-7.2.0.tgz#ae929d7423a63cbc3dc228e49d22fbf586d459ca"
+  integrity sha512-2KsBEEs+qRhKx/kekUVNSTIpop3Jwd7SRBm0R4Eiq3mPeswRGSsftY9FpKsE/lXLdURyQFiHeHFrIUxLYskG5g==
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"