feat: implement useNormalizedParams hook for consistent parameter handling across components

Author: cak

src/features/event/Event.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "react-router";
+import { useEffect, useState } from "react";
 import {
   getConferenceByCode,
   getEventById,
@@ -20,17 +19,10 @@ import LoadingPage from "@/components/LoadingPage";
 import ErrorPage from "@/components/ErrorPage";
 import { HTFooter } from "@/components/HTFooter";
 import EventDetails from "./EventDetails";
+import { useNormalizedParams } from "@/lib/utils/params";
 
 export function Event() {
-  const [searchParams] = useSearchParams();
-
-  const { confCode, eventId } = useMemo(
-    () => ({
-      confCode: searchParams.get("conf") ?? undefined,
-      eventId: searchParams.get("event") ?? undefined,
-    }),
-    [searchParams]
-  );
+  const { confCode, eventId } = useNormalizedParams();
 
   const [event, setEvent] = useState<ProcessedEvent | null>(null);
   const [people, setPeople] = useState<HTPerson[]>([]);

src/features/person/Person.tsx

@@ -1,17 +1,15 @@
 import { useEffect, useState, Suspense, startTransition } from "react";
-import { useSearchParams } from "react-router";
 import { getConferenceByCode, getEventsByIds, getSpeakerById } from "@/lib/db";
 import type { HTConference, HTEvent, HTPerson } from "@/types/db";
 import { ConferenceHeader } from "@/components/ConferenceHeader";
 import LoadingPage from "@/components/LoadingPage";
 import ErrorPage from "@/components/ErrorPage";
 import { HTFooter } from "@/components/HTFooter";
 import PersonDetails from "./PersonDetails";
+import { useNormalizedParams } from "@/lib/utils/params";
 
 export function Person() {
-  const [searchParams] = useSearchParams();
-  const confCode = searchParams.get("conf");
-  const personId = searchParams.get("person");
+  const { confCode, personId } = useNormalizedParams();
 
   const [person, setPerson] = useState<HTPerson | null>(null);
   const [conference, setConference] = useState<HTConference | null>(null);
@@ -79,10 +77,10 @@ export function Person() {
     <div className="min-h-dvh flex flex-col">
       {conference && <ConferenceHeader conference={conference} />}
       <main className="flex-1">
-        {person && confCode ? (
+        {person && conference ? (
           <Suspense fallback={<LoadingPage message="Loading people..." />}>
             <PersonDetails
-              confCode={confCode}
+              conference={conference}
               person={person}
               events={events}
             />

src/features/schedule/Schedule.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState, lazy, Suspense, startTransition } from "react";
-import { useSearchParams } from "react-router";
 import { getConferenceByCode, getEvents, getTags } from "@/lib/db";
 import { buildScheduleBucketsByDay } from "@/lib/utils/schedule";
 import type { GroupedSchedule } from "@/types/ht";
@@ -8,12 +7,12 @@ import { ConferenceHeader } from "@/components/ConferenceHeader";
 import LoadingPage from "@/components/LoadingPage";
 import ErrorPage from "@/components/ErrorPage";
 import { HTFooter } from "@/components/HTFooter";
+import { useNormalizedParams } from "@/lib/utils/params";
 
 const EventsList = lazy(() => import("./EventsList"));
 
 export function Schedule() {
-  const [searchParams] = useSearchParams();
-  const confCode = searchParams.get("conf");
+  const { confCode } = useNormalizedParams();
 
   const [grouped, setGrouped] = useState<GroupedSchedule | null>(null);
   const [conference, setConference] = useState<HTConference | null>(null);

src/lib/utils/params.ts

@@ -0,0 +1,11 @@
+import { useSearchParams } from "react-router";
+
+export function useNormalizedParams() {
+  const [sp] = useSearchParams();
+  const confCode = sp.get("conf")?.trim().toUpperCase(); // case-insensitive conf
+  const event = sp.get("event");
+  const person = sp.get("person");
+  const eventId = event && /^\d+$/.test(event) ? Number(event) : undefined;
+  const personId = person && /^\d+$/.test(person) ? Number(person) : undefined;
+  return { confCode, eventId, personId };
+}