Context Pattern Fix Implementation Plan

/**
 * ReservationDraftContext — provides reservation draft state via Convex
 * FIXED: 2026-05-10 - useContextSelector pattern, proper defaults
 */
 
"use client";
 
import {
  createContext,
  useEffect,
  useState,
  useCallback,
  type ReactNode,
} from "react";
import { useQuery, useMutation } from "convex/react";
import { useDebounceCallback } from "usehooks-ts";
import { api } from "@packages/backend/convex/_generated/api";
import { consola } from "consola";
import type { BookingStep } from "~/lib/constants/booking-steps";
 
const DEBOUNCE_MS = 500;
 
interface ReservationDraft {
  _id: string;
  eventId?: string;
  ticketType?: "DINNER_THEATRE" | "SHOW_ONLY";
  quantity?: number;
  addOns?: Array<{ addOnId: string; quantity: number }>;
  currentStep?: BookingStep;
  expiresAt?: number;
  [key: string]: unknown;
}
 
interface ReservationDraftContextValue {
  draft: ReservationDraft | null | undefined;
  isLoading: boolean;
  createError: string | null;
  updateField: (field: string, value: unknown) => void;
  setStep: (step: BookingStep) => void;
  complete: () => void;
}
 
const defaultContextValue: ReservationDraftContextValue = {
  draft: null,
  isLoading: true,
  createError: null,
  updateField: () => {},
  setStep: () => {},
  complete: () => {},
};
 
const ReservationDraftContext =
  createContext<ReservationDraftContextValue>(defaultContextValue);
 
export { ReservationDraftContext };
 
export function ReservationDraftProvider({
  children,
}: {
  children: ReactNode;
}) {
  const draft = useQuery(api.domains.reservations.bookingDrafts.getBySession);
  const createDraft = useMutation(
    api.domains.reservations.bookingDrafts.getOrCreate,
  );
  const updateDraft = useMutation(
    api.domains.reservations.bookingDrafts.updateDraft,
  );
  const deleteDraft = useMutation(
    api.domains.reservations.bookingDrafts.deleteDraft,
  );
 
  const [createError, setCreateError] = useState<string | null>(null);
 
  // Ensure draft exists on mount
  useEffect(() => {
    const initDraft = async () => {
      try {
        await createDraft({});
      } catch (err) {
        const message = err instanceof Error ? err.message : String(err);
        setCreateError(message);
        consola.error("Failed to create reservation draft", { error: err });
      }
    };
    initDraft();
  }, [createDraft]);
 
  // Debounced field update
  const updateField = useDebounceCallback((field: string, value: unknown) => {
    updateDraft({ data: { [field]: value } });
  }, DEBOUNCE_MS);
 
  // Immediate update for step changes (no debounce)
  const setStep = useCallback(
    (step: BookingStep) => {
      updateDraft({ data: { currentStep: step } });
    },
    [updateDraft],
  );
 
  // Cleanup on completion
  const complete = useCallback(() => {
    deleteDraft({});
  }, [deleteDraft]);
 
  const value: ReservationDraftContextValue = {
    draft,
    isLoading: draft === undefined,
    createError,
    updateField,
    setStep,
    complete,
  };
 
  return (
    <ReservationDraftContext.Provider value={value}>
      {children}
    </ReservationDraftContext.Provider>
  );
}

git add apps/frontend/contexts/reservation-draft-context.tsx apps/frontend/hooks/use-reservation-draft.ts
git commit -m "fix(context): useContextSelector pattern for ReservationDraftContext
 
- createContext with proper default values (not null)
- removed wrapper hook useReservationDraftContext
- delete use-reservation-draft.ts (wrapper hooks banned)"

// BEFORE
import { useReservationDraftContext } from "~/contexts/reservation-draft-context";
const { draft, isLoading } = useReservationDraftContext();

// AFTER
import { ReservationDraftContext } from "~/contexts/reservation-draft-context";
import { useContextSelector } from "use-context-selector";
 
const draft = useContextSelector(ReservationDraftContext, (s) => s.draft);
const isLoading = useContextSelector(
  ReservationDraftContext,
  (s) => s.isLoading,
);

git add apps/frontend/[affected-consumer-files]
git commit -m "fix(context): useContextSelector directly in ReservationDraftContext consumers"

// ipsoc checked: 2026-05-08
// SoC: Centralized dashboard state - wraps nuqs for selectedEvent and role
// Premium UI: AURORA glass styling
 
"use client";
 
import { createContext, useMemo, useCallback, type ReactNode } from "react";
import { useQuery } from "convex/react";
import { useQueryState } from "nuqs";
import { api } from "@packages/backend/convex/_generated/api";
 
type Role = "ADMIN" | "STAFF";
 
interface DashboardContextValue {
  // Event selection (from nuqs)
  selectedEventId: string | null;
  setSelectedEventId: (id: string | null) => void;
  // Role (from nuqs)
  role: Role;
  setRole: (role: Role) => void;
  // Derived: full event object
  selectedEvent: {
    _id: string;
    showId: string;
    showTitle: string;
    date: string;
    time: string;
    status: string;
  } | null;
  // Loading states
  isEventsLoading: boolean;
}
 
const defaultContextValue: DashboardContextValue = {
  selectedEventId: null,
  setSelectedEventId: () => {},
  role: "ADMIN",
  setRole: () => {},
  selectedEvent: null,
  isEventsLoading: true,
};
 
const DashboardContext =
  createContext<DashboardContextValue>(defaultContextValue);
 
export { DashboardContext };
 
interface EventWithShow {
  _id: string;
  showId: string;
  showTitle: string;
  date: string;
  time: string;
  status: string;
}
 
function findNearestEvent(events: EventWithShow[]): string | null {
  if (events.length === 0) return null;
 
  const today = new Date().toISOString().split("T")[0];
  const currentTime = new Date().toTimeString().slice(0, 5);
 
  for (const event of events) {
    if (event.date > today) return event._id;
    if (event.date === today && event.time >= currentTime) return event._id;
  }
 
  return events[0]._id;
}
 
export function DashboardProvider({ children }: { children: ReactNode }) {
  const [selectedEventId, setSelectedEventId] = useQueryState("eventId");
  const [role, setRole] = useQueryState("role", {
    defaultValue: "ADMIN",
    serialize: (value) => value,
    parse: (value) => value as Role,
  });
 
  const events = useQuery(api.domains.shows.events.listForDashboard) as
    | EventWithShow[]
    | undefined;
 
  const isEventsLoading = events === undefined;
 
  // Auto-select nearest event on mount if none selected
  const effectiveSelectedEventId = useMemo(() => {
    if (selectedEventId) return selectedEventId;
    if (!events || events.length === 0) return null;
    return findNearestEvent(events);
  }, [selectedEventId, events]);
 
  // Update URL when auto-selected
  if (
    effectiveSelectedEventId &&
    effectiveSelectedEventId !== selectedEventId &&
    !selectedEventId
  ) {
    setTimeout(() => {
      setSelectedEventId(effectiveSelectedEventId);
    }, 0);
  }
 
  const selectedEvent = useMemo(
    () => events?.find((e) => e._id === effectiveSelectedEventId) ?? null,
    [events, effectiveSelectedEventId],
  );
 
  const handleSetSelectedEventId = useCallback(
    (id: string | null) => {
      setSelectedEventId(id || null);
    },
    [setSelectedEventId],
  );
 
  const handleSetRole = useCallback(
    (newRole: Role) => {
      setRole(newRole);
    },
    [setRole],
  );
 
  const value: DashboardContextValue = {
    selectedEventId: effectiveSelectedEventId,
    setSelectedEventId: handleSetSelectedEventId,
    role: role as Role,
    setRole: handleSetRole,
    selectedEvent,
    isEventsLoading,
  };
 
  return (
    <DashboardContext.Provider value={value}>
      {children}
    </DashboardContext.Provider>
  );
}

git add apps/frontend/components/admin/dashboard-context.tsx
git commit -m "fix(context): useContextSelector pattern for DashboardContext
 
- createContext with proper default values (not null)
- removed wrapper hook useDashboard
- export DashboardContext directly for useContextSelector"

import { useDashboard } from "~/components/admin/dashboard-context";
const { role, setRole } = useDashboard();

import { DashboardContext } from "~/components/admin/dashboard-context";
import { useContextSelector } from "use-context-selector";
 
const role = useContextSelector(DashboardContext, (s) => s.role);
const setRole = useContextSelector(DashboardContext, (s) => s.setRole);

import { useDashboard } from "~/components/admin/dashboard-context";
// ... inside component:
useDashboard(); // triggers auto-select logic

import { DashboardContext } from "~/components/admin/dashboard-context";
import { useContextSelector } from "use-context-selector";
 
// ... inside component:
// Get selectedEventId to trigger auto-select effect
const selectedEventId = useContextSelector(
  DashboardContext,
  (s) => s.selectedEventId,
);

git add apps/frontend/components/admin/role-switcher.tsx apps/frontend/components/admin/event-selector.tsx
git commit -m "fix(context): useContextSelector directly in DashboardContext consumers"

git add -A
git commit -m "fix(context): complete context pattern migration
 
- ReservationDraftContext and DashboardContext now use useContextSelector
- All consumers use useContextSelector directly (no wrapper hooks)
- All contexts have proper default values (not null)"