"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { goToAdminLogin } from "@/lib/admin-auth"; import { api } from "@/lib/api"; import { describeApiError, isSessionExpired } from "@/lib/api-errors"; import { CALENDARS, calendarById } from "@/lib/calendars"; import type { CalendarEvent } from "@/lib/types"; export type CalendarLoad = { status: "loading" } | { status: "ready" } | { status: "error"; message: string }; const initialLoads = (): Record => Object.fromEntries(CALENDARS.map((c) => [c.id, { status: "loading" } as CalendarLoad])); /** * Every calendar's events, loaded in parallel - there is no endpoint that * returns them all at once (docs/api-wishlist.md). * * Each calendar loads and fails on its own: one calendar the API cannot serve * shows an error on its chip instead of blanking the whole list. The admin feed * returns exactly the calendar's own events (it ignores `includes_calendars`), * so a calendar's slice of the list can be replaced by calendarId. * * A 401 on any of them means the session is gone, and goes to the login page. */ export function useEvents() { const [events, setEvents] = useState([]); const [loads, setLoads] = useState>(initialLoads); // Per-calendar request counter, so a slow response cannot overwrite a newer one. const generation = useRef>({}); const fetchCalendar = useCallback(async (calendarId: number) => { const calendar = calendarById(calendarId); if (!calendar) return; const mine = (generation.current[calendarId] = (generation.current[calendarId] ?? 0) + 1); try { const loaded = await api.getEvents(calendar.slug); if (generation.current[calendarId] !== mine) return; setEvents((current) => [...current.filter((e) => e.calendarId !== calendarId), ...loaded]); setLoads((current) => ({ ...current, [calendarId]: { status: "ready" } })); } catch (e) { if (generation.current[calendarId] !== mine) return; if (isSessionExpired(e)) { goToAdminLogin(); return; } setLoads((current) => ({ ...current, [calendarId]: { status: "error", message: describeApiError(e) } })); } }, []); useEffect(() => { for (const calendar of CALENDARS) { void fetchCalendar(calendar.id); } }, [fetchCalendar]); /** Reload one calendar, or all. Shows the loading state; existing events stay visible meanwhile. */ const reload = useCallback( (calendarId?: number) => { const ids = calendarId === undefined ? CALENDARS.map((c) => c.id) : [calendarId]; setLoads((current) => ({ ...current, ...Object.fromEntries(ids.map((id) => [id, { status: "loading" }])) })); for (const id of ids) { void fetchCalendar(id); } }, [fetchCalendar], ); /** Re-fetch without flagging the calendar as loading - after a write, to pick up server-side fields. */ const refresh = useCallback((calendarId: number) => void fetchCalendar(calendarId), [fetchCalendar]); /** Put a saved event into the list (new or changed), replacing any copy with the same id. */ const upsertEvent = useCallback((event: CalendarEvent) => { setEvents((current) => [...current.filter((e) => e.eventId !== event.eventId), event]); }, []); const removeEvent = useCallback((eventId: number) => { setEvents((current) => current.filter((e) => e.eventId !== eventId)); }, []); return { events, loads, reload, refresh, upsertEvent, removeEvent }; }