refactor: add updatedAt prop to ConferenceCard and enhance date handling in utils

Author: cak

src/features/conferences/ConferenceCard.tsx

@@ -7,13 +7,22 @@ import { formatDateRange, toDate, tzAbbrev } from "@/lib/utils/dates";
 
 export const ConferenceCard = React.memo(function ConferenceCard({
   conference,
+  updatedAt,
 }: {
   conference: HTConference;
+  updatedAt?: Date;
 }) {
   const start = toDate(conference.start_timestamp) ?? toDate(conference.start_date);
   const end = toDate(conference.end_timestamp) ?? toDate(conference.end_date);
   const range = formatDateRange(start, end, conference.timezone);
   const tz = tzAbbrev(conference.timezone);
+  const updatedLabel = updatedAt
+    ? new Intl.DateTimeFormat(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }).format(updatedAt)
+    : undefined;
 
   return (
     <Link
@@ -35,6 +44,12 @@ export const ConferenceCard = React.memo(function ConferenceCard({
             {tz && <span className="uppercase">{tz}</span>}
           </p>
         )}
+
+        {updatedAt && updatedLabel && (
+          <p className="mt-2 text-xs font-medium text-neutral-500">
+            Updated <time dateTime={updatedAt.toISOString()}>{updatedLabel}</time>
+          </p>
+        )}
       </article>
     </Link>
   );

src/features/conferences/DisplayConferences.tsx

@@ -2,36 +2,50 @@ import { useMemo } from "react";
 
 import type { HTConference } from "@/types/db";
 
-import { ConferenceCard } from "./ConferenceCard";
+import { type DateLike, toDate } from "@/lib/utils/dates";
 
-/** Firestore / date helpers */
-type FirestoreTimestampLike = { toDate: () => Date };
-type DateLike = Date | string | number | FirestoreTimestampLike | null | undefined;
+import { ConferenceCard } from "./ConferenceCard";
 
-function isFirestoreTimestamp(v: unknown): v is FirestoreTimestampLike {
-  return typeof (v as { toDate?: unknown })?.toDate === "function";
-}
 function toMillis(value: DateLike): number {
-  if (!value) return 0;
-  if (value instanceof Date) return value.getTime();
-  if (typeof value === "number") return value;
-  if (typeof value === "string") return new Date(value).getTime();
-  if (isFirestoreTimestamp(value)) return value.toDate().getTime();
-  return 0;
+  return toDate(value)?.getTime() ?? 0;
 }
 
 type ConferenceWithDates<T> = T & {
   start_timestamp?: DateLike;
+  end_timestamp?: DateLike;
   start_date?: DateLike;
+  end_date?: DateLike;
+  start_timestamp_str?: DateLike;
+  end_timestamp_str?: DateLike;
+  begin_tsz?: DateLike;
+  end_tsz?: DateLike;
   updated_at?: DateLike;
+  updated_timestamp?: DateLike;
+  updated_tsz?: DateLike;
+  updated?: DateLike;
   modified?: DateLike;
 };
 
 const startMs = (c: ConferenceWithDates<HTConference>) =>
-  toMillis(c.start_timestamp ?? c.start_date);
+  toMillis(c.start_timestamp ?? c.start_timestamp_str ?? c.start_date ?? c.begin_tsz);
+
+const endMs = (c: ConferenceWithDates<HTConference>) =>
+  toMillis(c.end_timestamp ?? c.end_timestamp_str ?? c.end_date ?? c.end_tsz);
 
 const updatedMs = (c: ConferenceWithDates<HTConference>) =>
-  toMillis(c.updated_at ?? c.modified ?? c.start_timestamp ?? c.start_date);
+  toMillis(
+    c.updated_at ??
+      c.updated_timestamp ??
+      c.updated_tsz ??
+      c.updated ??
+      c.modified ??
+      c.start_timestamp ??
+      c.start_timestamp_str ??
+      c.start_date,
+  );
+
+const updatedDate = (c: ConferenceWithDates<HTConference>) =>
+  toDate(c.updated_at ?? c.updated_timestamp ?? c.updated_tsz ?? c.updated ?? c.modified);
 
 const byStartAsc = (a: HTConference, b: HTConference) =>
   startMs(a as ConferenceWithDates<HTConference>) - startMs(b as ConferenceWithDates<HTConference>);
@@ -46,12 +60,18 @@ const byUpdatedDesc = (a: HTConference, b: HTConference) =>
 export function DisplayConferences({ conferences }: { conferences: HTConference[] }) {
   const { upcoming, updated, past } = useMemo(() => {
     const now = Date.now();
-    const future = conferences.filter(
-      (c) => startMs(c as ConferenceWithDates<HTConference>) >= now,
-    );
-    const history = conferences.filter(
-      (c) => startMs(c as ConferenceWithDates<HTConference>) < now,
-    );
+    const future = conferences.filter((c) => {
+      const conf = c as ConferenceWithDates<HTConference>;
+      const endsAt = endMs(conf);
+      const startsAt = startMs(conf);
+      return (endsAt || startsAt) >= now;
+    });
+    const history = conferences.filter((c) => {
+      const conf = c as ConferenceWithDates<HTConference>;
+      const endsAt = endMs(conf);
+      const startsAt = startMs(conf);
+      return (endsAt || startsAt) < now;
+    });
 
     const THIRTY_DAYS = 1000 * 60 * 60 * 24 * 30;
 
@@ -106,7 +126,10 @@ export function DisplayConferences({ conferences }: { conferences: HTConference[
           <CardsGrid>
             {updated.map((c) => (
               <CardWrap key={c.id}>
-                <ConferenceCard conference={c} />
+                <ConferenceCard
+                  conference={c}
+                  updatedAt={updatedDate(c as ConferenceWithDates<HTConference>)}
+                />
               </CardWrap>
             ))}
           </CardsGrid>

src/lib/utils/dates.ts

@@ -1,11 +1,37 @@
-export function toDate(v?: string | Date | { seconds: number; nanoseconds?: number } | null) {
+type TimestampParts = { seconds: number; nanoseconds?: number };
+type FirestoreTimestampLike = { toDate: () => Date };
+
+export type DateLike = string | number | Date | TimestampParts | FirestoreTimestampLike | null;
+
+function isFirestoreTimestampLike(value: unknown): value is FirestoreTimestampLike {
+  return typeof (value as { toDate?: unknown })?.toDate === "function";
+}
+
+function isTimestampParts(value: unknown): value is TimestampParts {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    typeof (value as { seconds?: unknown }).seconds === "number"
+  );
+}
+
+function validDate(date: Date): Date | undefined {
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+export function toDate(v?: DateLike) {
   if (!v) return undefined;
   if (v instanceof Date) return v;
+  if (typeof v === "number") return validDate(new Date(v));
   if (typeof v === "string") {
     const d = new Date(v);
-    return Number.isNaN(d.getTime()) ? undefined : d;
+    return validDate(d);
+  }
+  if (isFirestoreTimestampLike(v)) return validDate(v.toDate());
+  if (isTimestampParts(v)) {
+    const nanoseconds = v.nanoseconds ?? 0;
+    return validDate(new Date(v.seconds * 1000 + Math.floor(nanoseconds / 1_000_000)));
   }
-  if ("seconds" in v) return new Date(v.seconds * 1000);
   return undefined;
 }