fix homepage hydration and chat date rendering (#63)

* fix homepage hydration and route prefetch noise

* refine homepage demo links and labels

* remove homepage prefetch overrides

* remove applink wrapper

* address pr review feedback

* refine chat date rendering

* close remaining chat hydration gaps

* address final copilot feedback

Author: dnywh

e2e/home.spec.ts

@@ -0,0 +1,72 @@
+import { expect, test } from "@playwright/test";
+
+test("homepage hydrates without chat date mismatches", async ({
+  browser,
+  page,
+}) => {
+  const { baseURL, extraHTTPHeaders, locale } = test.info().project.use;
+
+  if (typeof baseURL !== "string") {
+    throw new Error("Expected Playwright baseURL to be configured");
+  }
+
+  const pageErrors: string[] = [];
+  const consoleErrors: string[] = [];
+
+  page.on("pageerror", (error) => {
+    pageErrors.push(error.message);
+  });
+
+  page.on("console", (message) => {
+    if (message.type() === "error") {
+      consoleErrors.push(message.text());
+    }
+  });
+
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await expect(
+    page.getByRole("heading", {
+      name: "Find a home for your food scraps, wherever you are",
+    })
+  ).toBeVisible();
+
+  const serverContext = await browser.newContext({
+    baseURL,
+    extraHTTPHeaders,
+    javaScriptEnabled: false,
+    locale,
+  });
+  const serverPage = await serverContext.newPage();
+  await serverPage.goto("/");
+  const serverDayLabels = await serverPage
+    .getByTestId("chat-day-label")
+    .allTextContents();
+  const serverTimestamps = await serverPage
+    .getByTestId("chat-message-timestamp")
+    .allTextContents();
+  await serverContext.close();
+
+  await page.waitForLoadState("networkidle");
+  await expect
+    .poll(async () => page.getByTestId("chat-day-label").allTextContents())
+    .toEqual(["Yesterday", "Today"]);
+
+  const hydratedDayLabels = await page
+    .getByTestId("chat-day-label")
+    .allTextContents();
+  const hydratedTimestamps = await page
+    .getByTestId("chat-message-timestamp")
+    .allTextContents();
+
+  expect(serverDayLabels).toEqual(["Thu, May 1", "Fri, May 2"]);
+  expect(hydratedDayLabels).toEqual(["Yesterday", "Today"]);
+  expect(hydratedTimestamps).toEqual(serverTimestamps);
+  expect(
+    pageErrors.some((message) => message.includes("Minified React error #418"))
+  ).toBeFalsy();
+  expect(
+    consoleErrors.some((message) =>
+      message.includes("Minified React error #418")
+    )
+  ).toBeFalsy();
+});

e2e/listings.spec.ts

@@ -78,9 +78,10 @@ test("listing edit saves and restores seeded business fields", async ({
     email: HOST_EMAIL,
     redirectTo: BUSINESS_LISTING_EDIT_PATH,
   });
-  await expect(page.getByTestId("listing-write-form")).toBeVisible();
-  const descriptionInput = page.locator("#description");
-  const visibilityInput = page.locator("#visibility");
+  const listingWriteForm = page.getByTestId("listing-write-form");
+  await expect(listingWriteForm).toBeVisible();
+  const descriptionInput = listingWriteForm.locator("#description").first();
+  const visibilityInput = listingWriteForm.locator("#visibility");
   const originalDescription = await descriptionInput.inputValue();
   const originalVisibility = await visibilityInput.inputValue();
   const updatedDescription =
@@ -105,20 +106,33 @@ test("listing edit saves and restores seeded business fields", async ({
   await updateNavigation;
 
   await page.goto(BUSINESS_LISTING_EDIT_PATH);
-  await expect(page.locator("#description")).toHaveValue(updatedDescription);
-  await expect(page.locator("#visibility")).toHaveValue(updatedVisibility);
+  await expect(listingWriteForm.locator("#description").first()).toHaveValue(
+    updatedDescription
+  );
+  await expect(listingWriteForm.locator("#visibility")).toHaveValue(
+    updatedVisibility
+  );
 
-  await page.locator("#description").fill(originalDescription);
-  await page.locator("#visibility").selectOption(originalVisibility);
+  await listingWriteForm
+    .locator("#description")
+    .first()
+    .fill(originalDescription);
+  await listingWriteForm
+    .locator("#visibility")
+    .selectOption(originalVisibility);
 
   await Promise.all([
     page.waitForURL(/\/listings\/demo-inner-west-cafe\?status=updated$/),
     page.getByTestId("listing-write-submit").click(),
   ]);
 
   await page.goto(BUSINESS_LISTING_EDIT_PATH);
-  await expect(page.locator("#description")).toHaveValue(originalDescription);
-  await expect(page.locator("#visibility")).toHaveValue(originalVisibility);
+  await expect(listingWriteForm.locator("#description").first()).toHaveValue(
+    originalDescription
+  );
+  await expect(listingWriteForm.locator("#visibility")).toHaveValue(
+    originalVisibility
+  );
 });
 
 test("residential listing edit leaves avatar management on the profile page", async ({

package.json

@@ -14,9 +14,10 @@
     "supabase:diff": "supabase db diff",
     "i18n:check": "node scripts/check-i18n-messages.mjs",
     "typecheck": "tsc -p tsconfig.typecheck.json --noEmit",
-    "check": "npm run i18n:check && npm run format:check",
+    "check": "npm run i18n:check && npm run format:check && npm run test:unit",
+    "test:unit": "node --test --experimental-strip-types src/utils/dateUtils.test.ts",
     "test:e2e": "playwright test",
-    "pretest:e2e:prod": "if [ -d .next ]; then echo '.next exists, skipping build'; else npm run build; fi",
+    "pretest:e2e:prod": "npm run build",
     "test:e2e:prod": "playwright test --config=playwright.prod.config.ts",
     "test:e2e:debug": "playwright test --headed --workers=1",
     "format": "prettier --write .",

src/app/(core)/(interact)/(centered)/listings/[slug]/page.tsx

@@ -61,6 +61,7 @@ export default async function ListingPage({
 }) {
   const { slug } = await params;
   const { user, listing } = await getListingData(slug);
+  const referenceNow = new Date().toISOString();
 
   if (!listing) {
     notFound();
@@ -70,7 +71,7 @@ export default async function ListingPage({
 
   return (
     <StyledMain>
-      <ListingRead user={user} listing={listing} />
+      <ListingRead user={user} listing={listing} referenceNow={referenceNow} />
     </StyledMain>
   );
 }

src/app/(core)/(interact)/(stretched)/chats/[[...threadId]]/page.tsx

@@ -85,6 +85,7 @@ export default async function ChatsPage({ params }: ChatsPageProps) {
   const { threadId: threadIdSegments } = await params;
   const threadId = threadIdSegments?.[0] ?? null;
   const redirectPath = threadId ? `/chats/${threadId}` : "/chats";
+  const referenceNow = new Date().toISOString();
 
   const supabase = await createClient();
   const {
@@ -198,6 +199,7 @@ export default async function ChatsPage({ params }: ChatsPageProps) {
       initialThreads={typedThreads}
       initialThreadId={threadId}
       selectedThread={selectedThread}
+      referenceNow={referenceNow}
     />
   );
 }

src/app/(core)/(interact)/(stretched)/map/page.tsx

@@ -58,12 +58,14 @@ export async function generateMetadata({
 export default async function Page({ searchParams }: MapPageProps) {
   const listingSlug = (await searchParams)?.listing;
   const { user, listing } = await getInitialData(listingSlug);
+  const referenceNow = new Date().toISOString();
 
   return (
     <MapPageClient
       user={user}
       initialListingSlug={listingSlug ?? null}
       initialListing={listing}
+      referenceNow={referenceNow}
     />
   );
 }

src/components/ChatMessage/ChatMessage.tsx

@@ -51,14 +51,23 @@ const Timestamp = styled.p`
 function ChatMessage({
   direction,
   message,
+  locale,
+  timeZone,
 }: {
   direction: ChatDirection;
   message: { content: string; created_at: string };
+  locale: string;
+  timeZone: string;
 }) {
   return (
     <ChatMessageContainer $direction={direction}>
       <ChatBubble $direction={direction}>{message.content}</ChatBubble>
-      <Timestamp>{formatTimestamp(message.created_at)}</Timestamp>
+      <Timestamp data-testid="chat-message-timestamp">
+        {formatTimestamp(message.created_at, {
+          locale,
+          timeZone,
+        })}
+      </Timestamp>
     </ChatMessageContainer>
   );
 }

src/components/ChatPageClient/ChatPageClient.tsx

@@ -66,11 +66,13 @@ export default function ChatPageClient({
   initialThreads,
   initialThreadId,
   selectedThread,
+  referenceNow,
 }: {
   user: User;
   initialThreads: ChatThreadListItem[];
   initialThreadId?: string | null;
   selectedThread?: ChatThreadView | null;
+  referenceNow: string;
 }) {
   const t = useTranslations("Chat");
   const { setTabBarProps } = useTabBar();
@@ -105,6 +107,7 @@ export default function ChatPageClient({
             user={user}
             listing={selectedThread.listing}
             existingThread={selectedThread}
+            referenceNow={referenceNow}
           />
         ) : (
           <ChatWindowEmptyState>

src/components/ChatWindow/ChatWindow.tsx

@@ -14,12 +14,17 @@ import {
   markChatThreadRead,
   sendChatMessage,
 } from "@/components/ChatWindow/chatWindowController";
-import { formatWeekday } from "@/utils/dateUtils";
+import { DEMO_CHAT_REFERENCE_TIME } from "@/data/demo/threads";
+import {
+  CHAT_RENDER_TIME_ZONE,
+  formatWeekday,
+  getChatDateKey,
+} from "@/utils/dateUtils";
 
 import { styled } from "next-yak";
 import { useUnreadMessages } from "@/contexts/UnreadMessagesContext";
 import { useInlineMutation } from "@/hooks/useInlineMutation";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import type {
   ChatListing,
   ChatMessageRecord,
@@ -30,15 +35,45 @@ import type {
 import type { DemoListing } from "@/types/listing";
 import type { FormSubmitEvent } from "@/types/events";
 
-type ChatWindowProps = {
+type SharedChatWindowProps = {
   isDrawer?: boolean;
   user: User | null;
   listing: ChatListing | DemoListing;
   existingThread?: ChatThreadRecord | ChatThreadView | null;
-  isDemo?: boolean;
 };
 
+type DemoChatWindowProps = SharedChatWindowProps & {
+  isDemo: true;
+  referenceNow?: never;
+};
+
+type NonDemoChatWindowProps = SharedChatWindowProps & {
+  isDemo?: false;
+  referenceNow: string;
+};
+
+type ChatWindowProps = DemoChatWindowProps | NonDemoChatWindowProps;
+
 const DIRECTIONS_FOR_DEMO = ["sent", "received"] as const;
+type ChatRenderOptions = {
+  locale: string;
+  now?: string;
+  timeZone: string;
+  useRelativeDayLabels: boolean;
+};
+
+const defaultChatRenderOptions: ChatRenderOptions = {
+  locale: "en",
+  now: undefined,
+  timeZone: CHAT_RENDER_TIME_ZONE,
+  useRelativeDayLabels: false,
+};
+
+function getClientTimeZone() {
+  return (
+    Intl.DateTimeFormat().resolvedOptions().timeZone ?? CHAT_RENDER_TIME_ZONE
+  );
+}
 
 const StyledChatWindow = styled.div`
   height: 100%;
@@ -115,8 +150,10 @@ const ChatWindow = memo(function ChatWindow({
   listing,
   existingThread = null,
   isDemo = false,
+  referenceNow,
 }: ChatWindowProps) {
   const t = useTranslations();
+  const locale = useLocale();
   const supabase = useMemo(() => (isDemo ? null : createClient()), [isDemo]);
   const { setUnreadCount, markThreadAsRead } = useUnreadMessages();
   const realListing = isDemo ? null : (listing as ChatListing);
@@ -130,6 +167,34 @@ const ChatWindow = memo(function ChatWindow({
   const [messages, setMessages] = useState<ChatMessageRecord[]>(
     getThreadMessages(existingThread)
   );
+  const [clientTimeZone, setClientTimeZone] = useState<string | null>(null);
+  const chatRenderOptions = useMemo<ChatRenderOptions>(
+    () =>
+      isDemo
+        ? {
+            locale,
+            now: DEMO_CHAT_REFERENCE_TIME,
+            timeZone: CHAT_RENDER_TIME_ZONE,
+            useRelativeDayLabels: clientTimeZone !== null,
+          }
+        : {
+            ...defaultChatRenderOptions,
+            locale,
+            now: referenceNow,
+            timeZone: clientTimeZone ?? CHAT_RENDER_TIME_ZONE,
+            useRelativeDayLabels: clientTimeZone !== null,
+          },
+    [clientTimeZone, isDemo, locale, referenceNow]
+  );
+  const messageDateKeys = useMemo(
+    () =>
+      messages.map((chatMessage) =>
+        getChatDateKey(chatMessage.created_at, {
+          timeZone: chatRenderOptions.timeZone,
+        })
+      ),
+    [messages, chatRenderOptions.timeZone]
+  );
 
   function resolveChatErrorMessage(errorMessage: string | null) {
     if (!errorMessage) {
@@ -150,6 +215,10 @@ const ChatWindow = memo(function ChatWindow({
     return errorMessage;
   }
 
+  useEffect(() => {
+    setClientTimeZone(getClientTimeZone());
+  }, []);
+
   useEffect(() => {
     setThreadId(existingThread?.id ?? null);
     setMessages(getThreadMessages(existingThread));
@@ -333,18 +402,26 @@ const ChatWindow = memo(function ChatWindow({
         )}
 
         {messages.map((chatMessage, index) => {
+          const currentDateKey = messageDateKeys[index];
+          const previousDateKey = messageDateKeys[index - 1];
           const showDateHeader =
-            index === 0 ||
-            new Date(chatMessage.created_at).toDateString() !==
-              new Date(messages[index - 1].created_at).toDateString();
+            index === 0 || currentDateKey !== previousDateKey;
           const showInitiationHeader = index === 0;
 
           return (
             <Day key={isDemo ? index : chatMessage.id}>
               {showDateHeader || showInitiationHeader ? (
                 <DayHeader>
                   {showDateHeader && (
-                    <h3>{formatWeekday(chatMessage.created_at)}</h3>
+                    <h3 data-testid="chat-day-label">
+                      {formatWeekday(chatMessage.created_at, {
+                        locale: chatRenderOptions.locale,
+                        now: chatRenderOptions.now,
+                        timeZone: chatRenderOptions.timeZone,
+                        useRelativeDayLabels:
+                          chatRenderOptions.useRelativeDayLabels,
+                      })}
+                    </h3>
                   )}
                   {showInitiationHeader && (
                     <p>
@@ -373,6 +450,8 @@ const ChatWindow = memo(function ChatWindow({
                       : "received"
                 }
                 message={chatMessage}
+                locale={chatRenderOptions.locale}
+                timeZone={chatRenderOptions.timeZone}
               />
             </Day>
           );