refactor: optimize caching and data retrieval for conferences, events, and schedules

Author: cak

src/features/bookmarks/Bookmarks.tsx

@@ -1,26 +1,38 @@
 import { useEffect, useState, lazy, Suspense, startTransition } from "react";
 import { Link, useSearchParams } from "react-router";
 
-import type { HTConference, HTEvent, HTTagGroup } from "@/types/db";
+import type { HTConference } from "@/types/db";
 import type { GroupedSchedule } from "@/types/ht";
 
 import { ConferenceHeader } from "@/components/ConferenceHeader";
 import ErrorPage from "@/components/ErrorPage";
 import { HTFooter } from "@/components/HTFooter";
 import LoadingPage from "@/components/LoadingPage";
-import { getConferenceByCode, getEvents, getTags } from "@/lib/db";
-import { buildScheduleBucketsByDay } from "@/lib/utils/schedule";
+import {
+  filterScheduleByEventIds,
+  getCachedConferenceSchedule,
+  getConferenceSchedule,
+} from "@/lib/db";
 import { loadConfBookmarks } from "@/lib/utils/storage";
 
 const EventsList = lazy(() => import("../schedule/EventsList"));
 
 export function Bookmarks() {
   const [searchParams] = useSearchParams();
-  const confCode = searchParams.get("conf");
+  const confCode = searchParams.get("conf")?.trim().toUpperCase() ?? null;
+  const [initial] = useState(() => {
+    if (!confCode) return null;
+    const schedule = getCachedConferenceSchedule(confCode);
+    if (!schedule) return null;
+    return {
+      conference: schedule.conference,
+      grouped: filterScheduleByEventIds(schedule.grouped, loadConfBookmarks(confCode)),
+    };
+  });
 
-  const [grouped, setGrouped] = useState<GroupedSchedule | null>(null);
-  const [conference, setConference] = useState<HTConference | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [grouped, setGrouped] = useState<GroupedSchedule | null>(initial?.grouped ?? null);
+  const [conference, setConference] = useState<HTConference | null>(initial?.conference ?? null);
+  const [loading, setLoading] = useState(!initial);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -41,40 +53,41 @@ export function Bookmarks() {
     async function run() {
       if (!confCode) {
         setError("Missing required URL parameters.");
+        setLoading(false);
         return;
       }
-      setLoading(true);
       setError(null);
-      setGrouped(null);
-      setConference(null);
+
+      const cachedSchedule = getCachedConferenceSchedule(confCode);
+      const bookmarks = loadConfBookmarks(confCode);
+      if (cachedSchedule) {
+        setConference(cachedSchedule.conference);
+        setGrouped(filterScheduleByEventIds(cachedSchedule.grouped, bookmarks));
+        setLoading(false);
+      } else {
+        setLoading(true);
+        setGrouped(null);
+        setConference(null);
+      }
 
       try {
-        const conf = await getConferenceByCode(confCode);
+        const schedule = await getConferenceSchedule(confCode);
         if (cancelled) return;
-        if (!conf) {
+        if (!schedule) {
           setError(`Conference not found.`);
           return;
         }
-        setConference(conf);
 
-        const bookmarks = loadConfBookmarks(confCode); // Set<number>
         if (bookmarks.size === 0) {
+          setConference(schedule.conference);
           setGrouped({});
           return;
         }
 
-        const [evs, tags] = await Promise.all([getEvents(confCode), getTags(confCode)]);
-        if (cancelled) return;
-
-        const tz = conf.timezone || "UTC";
-        const bookmarkedEvents = (evs as HTEvent[]).filter((e) => bookmarks.has(e.id));
-        const groupedSchedule = buildScheduleBucketsByDay(
-          bookmarkedEvents,
-          tags as HTTagGroup[],
-          tz,
-        );
+        const groupedSchedule = filterScheduleByEventIds(schedule.grouped, bookmarks);
 
         startTransition(() => {
+          setConference(schedule.conference);
           setGrouped(groupedSchedule);
         });
       } catch (e) {
@@ -91,7 +104,7 @@ export function Bookmarks() {
     };
   }, [confCode]);
 
-  if (loading) return <LoadingPage message="Loading bookmarks..." />;
+  if (loading && !grouped && !conference) return <LoadingPage message="Loading bookmarks..." />;
 
   if (error) return <ErrorPage msg={error} />;
 

src/features/event/Event.tsx

@@ -7,19 +7,51 @@ import { ConferenceHeader } from "@/components/ConferenceHeader";
 import ErrorPage from "@/components/ErrorPage";
 import { HTFooter } from "@/components/HTFooter";
 import LoadingPage from "@/components/LoadingPage";
-import { getConferenceByCode, getEventById, getSpeakersByIds, getTags } from "@/lib/db";
+import {
+  getCachedConferenceByCode,
+  getCachedConferenceSchedule,
+  getCachedEventById,
+  getCachedTags,
+  getConferenceByCode,
+  getEventById,
+  getSpeakersByIds,
+  getTags,
+} from "@/lib/db";
 import { useNormalizedParams } from "@/lib/utils/params";
-import { toProcessedEvent } from "@/lib/utils/schedule";
+import { buildAllTagIndex, toProcessedEvent } from "@/lib/utils/schedule";
 
 import EventDetails from "./EventDetails";
 
+function getCachedEventDetails(confCode: string, eventId: number) {
+  const schedule = getCachedConferenceSchedule(confCode);
+  const event = schedule?.grouped
+    ? Object.values(schedule.grouped)
+        .flat()
+        .find((candidate) => candidate.id === eventId)
+    : null;
+  if (schedule?.conference && event) return { conference: schedule.conference, event };
+
+  const conference = getCachedConferenceByCode(confCode);
+  const rawEvent = getCachedEventById(confCode, eventId);
+  const tags = getCachedTags(confCode);
+  if (!conference || !rawEvent || !tags) return null;
+
+  return {
+    conference,
+    event: toProcessedEvent(rawEvent, buildAllTagIndex(tags)),
+  };
+}
+
 export function Event() {
   const { confCode, eventId } = useNormalizedParams();
+  const [initial] = useState(() =>
+    confCode && eventId ? getCachedEventDetails(confCode, eventId) : null,
+  );
 
-  const [event, setEvent] = useState<ProcessedEvent | null>(null);
+  const [event, setEvent] = useState<ProcessedEvent | null>(initial?.event ?? null);
   const [people, setPeople] = useState<HTPerson[]>([]);
-  const [conference, setConference] = useState<HTConference | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [conference, setConference] = useState<HTConference | null>(initial?.conference ?? null);
+  const [loading, setLoading] = useState(!initial);
   const [error, setError] = useState<string | null>(null);
 
   // Title reflects state
@@ -39,6 +71,7 @@ export function Event() {
   useEffect(() => {
     if (!confCode || !eventId) {
       setError("Missing required URL parameters.");
+      setLoading(false);
     } else {
       setError(null);
     }
@@ -50,11 +83,21 @@ export function Event() {
     async function run() {
       if (!confCode || !eventId) return;
 
-      setLoading(true);
       setError(null);
-      setEvent(null);
-      setPeople([]);
-      setConference(null);
+
+      const cachedDetails = getCachedEventDetails(confCode, eventId);
+
+      if (cachedDetails) {
+        setConference(cachedDetails.conference);
+        setEvent(cachedDetails.event);
+        setPeople([]);
+        setLoading(false);
+      } else {
+        setLoading(true);
+        setEvent(null);
+        setPeople([]);
+        setConference(null);
+      }
 
       try {
         const conf = await getConferenceByCode(confCode);
@@ -108,7 +151,7 @@ export function Event() {
     };
   }, [confCode, eventId]);
 
-  if (loading) {
+  if (loading && !conference && !event) {
     return (
       <div className="flex min-h-screen flex-col bg-gray-950">
         <main className="flex-1">

src/features/schedule/Schedule.tsx

@@ -1,14 +1,13 @@
 import { useEffect, useState, lazy, Suspense, useTransition } from "react";
 
-import type { HTConference, HTEvent, HTTagGroup } from "@/types/db";
+import type { HTConference } from "@/types/db";
 import type { GroupedSchedule } from "@/types/ht";
 
 import { ConferenceHeader } from "@/components/ConferenceHeader";
 import ErrorPage from "@/components/ErrorPage";
 import LoadingPage from "@/components/LoadingPage";
-import { getConferenceByCode, getEvents, getTags } from "@/lib/db";
+import { getCachedConferenceSchedule, getConferenceSchedule } from "@/lib/db";
 import { useNormalizedParams } from "@/lib/utils/params";
-import { buildScheduleBucketsByDay } from "@/lib/utils/schedule";
 
 const EventsList = lazy(() => import("./EventsList"));
 let eventsListPreload: Promise<unknown> | null = null;
@@ -21,10 +20,16 @@ function preloadEventsList() {
 
 export function Schedule() {
   const { confCode } = useNormalizedParams();
+  const [initialSchedule] = useState(() =>
+    confCode ? getCachedConferenceSchedule(confCode) : null,
+  );
 
-  const [grouped, setGrouped] = useState<GroupedSchedule | null>(null);
-  const [conference, setConference] = useState<HTConference | null>(null);
+  const [grouped, setGrouped] = useState<GroupedSchedule | null>(initialSchedule?.grouped ?? null);
+  const [conference, setConference] = useState<HTConference | null>(
+    initialSchedule?.conference ?? null,
+  );
   const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(!initialSchedule);
   const [isPending, startTransition] = useTransition();
 
   useEffect(() => {
@@ -34,52 +39,60 @@ export function Schedule() {
   useEffect(() => {
     const id = window.setTimeout(() => {
       if (error) document.title = "Error · Schedule | Hacker Tracker";
-      else if (isPending && !grouped) document.title = "Loading schedule… | Hacker Tracker";
+      else if (loading && !grouped) document.title = "Loading schedule… | Hacker Tracker";
       else if (conference) document.title = `Schedule · ${conference.name} | Hacker Tracker`;
       else document.title = "Schedule | Hacker Tracker";
     }, 150); // small debounce
     return () => clearTimeout(id);
-  }, [conference, grouped, error, isPending]);
+  }, [conference, grouped, error, loading]);
 
   useEffect(() => {
     let cancelled = false;
 
     async function load() {
-      if (!confCode) return;
+      if (!confCode) {
+        setError("Missing required URL parameters.");
+        setLoading(false);
+        return;
+      }
       setError(null);
 
+      const cachedSchedule = getCachedConferenceSchedule(confCode);
+      if (cachedSchedule) {
+        setConference(cachedSchedule.conference);
+        setGrouped(cachedSchedule.grouped);
+        setLoading(false);
+      } else {
+        setConference(null);
+        setGrouped(null);
+        setLoading(true);
+      }
+
       try {
-        const conf = await getConferenceByCode(confCode);
+        const schedule = await getConferenceSchedule(confCode);
         if (cancelled) return;
 
-        if (!conf) {
+        if (!schedule) {
           setError("Conference not found.");
           return;
         }
 
-        const preload = preloadEventsList();
-
-        const [evs, tags] = await Promise.all([getEvents(confCode), getTags(confCode), preload]);
+        await preloadEventsList();
         if (cancelled) return;
 
-        const tz = conf.timezone || "UTC";
-        const groupedSchedule = buildScheduleBucketsByDay(
-          evs as HTEvent[],
-          tags as HTTagGroup[],
-          tz,
-        );
-
         startTransition(() => {
           if (!cancelled) {
-            setConference(conf);
-            setGrouped(groupedSchedule);
+            setConference(schedule.conference);
+            setGrouped(schedule.grouped);
           }
         });
       } catch (e) {
         if (!cancelled) {
           const msg = e instanceof Error ? e.message : "Failed to load schedule";
           setError(msg);
         }
+      } finally {
+        if (!cancelled) setLoading(false);
       }
     }
 
@@ -89,7 +102,7 @@ export function Schedule() {
     };
   }, [confCode]);
 
-  if (!grouped && !conference && !error && isPending) {
+  if (!grouped && !conference && !error && loading) {
     return <LoadingPage message="Loading schedule..." />;
   }
   if (error) return <ErrorPage msg={error} />;
@@ -99,7 +112,7 @@ export function Schedule() {
       {conference && <ConferenceHeader conference={conference} />}
 
       <main className="relative flex-1">
-        {isPending && (
+        {(loading || isPending) && grouped && (
           <div className="bg-background/40 pointer-events-none absolute inset-0 backdrop-blur-[1px] transition-opacity" />
         )}