fix: resolve hydration mismatch on relative time display (#130) (#139)

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

src/components/relative-time.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { readFileSync } from "fs";
+import { join } from "path";
+import { formatRelativeDate } from "./relative-time";
+
+describe("formatRelativeDate", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('returns "just now" for dates less than 1 minute ago', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2024-06-15T12:00:30Z"));
+    expect(formatRelativeDate("2024-06-15T12:00:00Z")).toBe("just now");
+  });
+
+  it("returns minutes ago for dates less than 1 hour ago", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2024-06-15T12:47:00Z"));
+    expect(formatRelativeDate("2024-06-15T12:00:00Z")).toBe("47m ago");
+  });
+
+  it("returns hours ago for dates less than 24 hours ago", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2024-06-15T15:00:00Z"));
+    expect(formatRelativeDate("2024-06-15T12:00:00Z")).toBe("3h ago");
+  });
+
+  it("returns days ago for dates less than 7 days ago", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2024-06-18T12:00:00Z"));
+    expect(formatRelativeDate("2024-06-15T12:00:00Z")).toBe("3d ago");
+  });
+
+  it("returns formatted date for dates 7+ days ago", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2024-06-25T12:00:00Z"));
+    expect(formatRelativeDate("2024-06-15T12:00:00Z")).toBe("Jun 15");
+  });
+});
+
+describe("RelativeTime hydration safety", () => {
+  it("uses suppressHydrationWarning to prevent hydration mismatch errors", () => {
+    const source = readFileSync(
+      join(__dirname, "relative-time.tsx"),
+      "utf-8",
+    );
+
+    // The component must use suppressHydrationWarning on the span element
+    // so React ignores the text content difference between SSR and client.
+    expect(source).toContain("suppressHydrationWarning");
+  });
+
+  it("uses useEffect with setInterval to keep the display current", () => {
+    const source = readFileSync(
+      join(__dirname, "relative-time.tsx"),
+      "utf-8",
+    );
+
+    expect(source).toMatch(/useEffect\(/);
+    expect(source).toMatch(/setInterval\(/);
+  });
+});

src/components/relative-time.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useReducer } from "react";
+
+interface RelativeTimeProps {
+  dateStr: string;
+  className?: string;
+}
+
+/**
+ * Renders a relative time string (e.g. "5m ago") with suppressHydrationWarning
+ * to avoid React hydration mismatches. The server and client may compute
+ * slightly different values because time advances between SSR and hydration.
+ * The interval keeps the display current after mount.
+ */
+export function RelativeTime({ dateStr, className }: RelativeTimeProps) {
+  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
+
+  useEffect(() => {
+    const interval = setInterval(forceUpdate, 60_000);
+    return () => clearInterval(interval);
+  }, [dateStr]);
+
+  return (
+    <span className={className} suppressHydrationWarning>
+      {formatRelativeDate(dateStr)}
+    </span>
+  );
+}
+
+export function formatRelativeDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  });
+}

src/components/workspace-home.tsx

@@ -6,6 +6,7 @@ import { toast } from "sonner";
 import { createClient } from "@/lib/supabase/client";
 import { captureSupabaseError } from "@/lib/sentry";
 import { Button } from "@/components/ui/button";
+import { RelativeTime } from "@/components/relative-time";
 
 interface WorkspaceHomeProps {
   workspace: { id: string; name: string; slug: string };
@@ -95,31 +96,15 @@ export function WorkspaceHome({
             <span className="flex-1 truncate">
               {page.title || "Untitled"}
             </span>
-            <span className="text-xs text-muted-foreground">
-              {formatRelativeDate(page.updated_at)}
-            </span>
+            <RelativeTime
+              dateStr={page.updated_at}
+              className="text-xs text-muted-foreground"
+            />
           </button>
         ))}
       </div>
     </div>
   );
 }
 
-function formatRelativeDate(dateStr: string): string {
-  const date = new Date(dateStr);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  const diffHours = Math.floor(diffMs / 3600000);
-  const diffDays = Math.floor(diffMs / 86400000);
-
-  if (diffMins < 1) return "just now";
-  if (diffMins < 60) return `${diffMins}m ago`;
-  if (diffHours < 24) return `${diffHours}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
 
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-  });
-}