Improve date rendering with toggleable rendering

package.json

@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "axios": "^1.2.2",
+    "date-fns": "^2.29.3",
     "immutability-helper": "^3.1.1",
     "ipaddr.js": "^2.0.1",
     "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.57.1",
+    "usehooks-ts": "^2.9.1",
     "zod": "^3.20.2"
   },
   "devDependencies": {

src/components/DynamicDate.tsx

@@ -0,0 +1,30 @@
+import type {FunctionComponent} from "react";
+import {useBoolean} from "usehooks-ts";
+import {format, formatDistanceToNow} from "date-fns";
+
+type DynamicDateProps = {
+    value: Date | number;
+    absoluteFormat?: string;
+}
+
+/**
+ * A component for a toggleable switch between the absolute & human-relative date.
+ * @param value The date to be displayed, the Date value, or
+ * @param absoluteFormat Optional - the date-fns format string to use for the absolute date rendering.
+ */
+const DynamicDate: FunctionComponent<DynamicDateProps> = ({value, absoluteFormat}) => {
+    const {value: showAbsolute, toggle: toggleFormat} = useBoolean(true);
+
+    const date = new Date(value);
+    return (
+        <button onClick={toggleFormat}>
+            <span title={date.toISOString()}>
+                {showAbsolute
+                    ? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss")
+                    : formatDistanceToNow(date, {includeSeconds: true, addSuffix: true})}
+            </span>
+        </button>
+    )
+}
+
+export default DynamicDate;

src/components/Events.tsx

@@ -1,6 +1,7 @@
 import type {FunctionComponent} from "react";
-import type {Event} from "@/schema";
+import type {Event} from "@/types";
 import {Fragment} from "react";
+import DynamicDate from "@/components/DynamicDate";
 
 export type EventsProps = {
     data: Event[];
@@ -13,9 +14,7 @@ const Events: FunctionComponent<EventsProps> = ({data}) => {
                     {eventAction}:
                 </dt>
                 <dd>
-                    <span
+                    <DynamicDate value={new Date(eventDate)}/>
-                        title={eventDate.toString()}>{eventDate.toString()}
-                    </span>
                     {eventActor != null ? ` (by ${eventActor})` : null}
                 </dd>
             </Fragment>

yarn.lock

@@ -604,6 +604,11 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+date-fns@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2420,6 +2425,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+usehooks-ts@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.9.1.tgz#953d3284851ffd097432379e271ce046a8180b37"
+  integrity sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"