@vatvaghool/create-ipl-dashboard 0.1.0

package/template/app/hooks/dashboard/index.ts

@@ -0,0 +1 @@
+export { useDashboardModel } from "./useDashboardModel";

package/template/app/hooks/dashboard/useDashboardModel.ts

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+import { useDashboardData } from "../../hooks/useDashboardData";
+import { useDashboardStore } from "../../store/dashboardStore";
+import { buildDashboardModel } from "../../lib/dashboard/model";
+import type { DashboardModel } from "../../types/dashboard";
+
+export function useDashboardModel(): {
+  model: DashboardModel | null;
+  loading: boolean;
+  error: string | null;
+  lastSyncedAt: string | null;
+} {
+  const { loading, error } = useDashboardData();
+  const data = useDashboardStore((state) => state.data);
+  const lastSyncedAt = useDashboardStore((state) => state.lastSyncedAt);
+
+  const model = useMemo(() => buildDashboardModel(data), [data]);
+
+  return {
+    model,
+    loading,
+    error,
+    lastSyncedAt,
+  };
+}

package/template/app/hooks/dashboardCache.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import type { DashboardData } from "../types";
+
+const CACHE_KEY = "ipl:dashboard-cache:v1";
+
+type CachePayload = {
+  cachedAt: string;
+  data: DashboardData;
+};
+
+export const readDashboardCache = (): CachePayload | null => {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const raw = window.localStorage.getItem(CACHE_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as Partial<CachePayload> | null;
+    if (!parsed || typeof parsed !== "object") return null;
+    if (!parsed.data || typeof parsed.data !== "object") return null;
+    if (
+      typeof (parsed.data as { updatedAt?: unknown }).updatedAt === "string" &&
+      !("snapshot" in parsed.data)
+    ) {
+      return null;
+    }
+
+    const cachedAt =
+      typeof parsed.cachedAt === "string" ? parsed.cachedAt : undefined;
+
+    return {
+      cachedAt: cachedAt ?? new Date().toISOString(),
+      data: parsed.data as DashboardData,
+    };
+  } catch {
+    return null;
+  }
+};
+
+export const writeDashboardCache = (data: DashboardData) => {
+  if (typeof window === "undefined") return;
+
+  try {
+    const payload: CachePayload = {
+      cachedAt: new Date().toISOString(),
+      data,
+    };
+    window.localStorage.setItem(CACHE_KEY, JSON.stringify(payload));
+  } catch {
+    // ignore cache write failures (private mode, quota, etc.)
+  }
+};

package/template/app/hooks/dashboardPolling.ts

@@ -0,0 +1,53 @@
+import type { DashboardData } from "../types";
+
+export const DASHBOARD_POLL_INTERVAL_MS = 120000;
+
+type DashboardFetcher = typeof fetch;
+
+type DashboardPollerOptions = {
+  fetcher: DashboardFetcher;
+  onData: (data: DashboardData) => void;
+  onError?: (error: unknown) => void;
+  intervalMs?: number;
+};
+
+export const createDashboardPoller = ({
+  fetcher,
+  onData,
+  onError = console.error,
+  intervalMs = DASHBOARD_POLL_INTERVAL_MS,
+}: DashboardPollerOptions) => {
+  let active = true;
+  let previousSerialized = "";
+
+  const fetchData = async () => {
+    try {
+      const res = await fetcher(`/api/ipl?t=${Date.now()}`, {
+        cache: "no-store",
+      });
+
+      if (!res.ok) {
+        throw new Error(`Dashboard API failed with ${res.status}`);
+      }
+
+      const data = (await res.json()) as DashboardData;
+      const serialized = JSON.stringify(data);
+
+      if (active && serialized !== previousSerialized) {
+        previousSerialized = serialized;
+        onData(data);
+      }
+    } catch (error) {
+      onError(error);
+    }
+  };
+
+  const interval = setInterval(fetchData, intervalMs);
+
+  void fetchData();
+
+  return () => {
+    active = false;
+    clearInterval(interval);
+  };
+};

package/template/app/hooks/snapshotCache.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import type { ScrapedDashboardPayload } from "../types";
+
+const CACHE_KEY = "ipl:snapshot-cache:v1";
+
+type CachePayload = {
+  cachedAt: string;
+  snapshot: ScrapedDashboardPayload;
+};
+
+export const readSnapshotCache = (): CachePayload | null => {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const raw = window.localStorage.getItem(CACHE_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as Partial<CachePayload> | null;
+    if (!parsed || typeof parsed !== "object") return null;
+    if (!parsed.snapshot || typeof parsed.snapshot !== "object") return null;
+
+    const cachedAt =
+      typeof parsed.cachedAt === "string" ? parsed.cachedAt : undefined;
+
+    return {
+      cachedAt: cachedAt ?? new Date().toISOString(),
+      snapshot: parsed.snapshot as ScrapedDashboardPayload,
+    };
+  } catch {
+    return null;
+  }
+};
+
+export const writeSnapshotCache = (snapshot: ScrapedDashboardPayload) => {
+  if (typeof window === "undefined") return;
+
+  try {
+    const payload: CachePayload = {
+      cachedAt: new Date().toISOString(),
+      snapshot,
+    };
+    window.localStorage.setItem(CACHE_KEY, JSON.stringify(payload));
+  } catch {
+    // ignore cache write failures (private mode, quota, etc.)
+  }
+};

package/template/app/hooks/useDashboardData.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  DASHBOARD_SYNC_INTERVAL_MS,
+  useDashboardStore,
+} from "../store/dashboardStore";
+
+export function useDashboardData() {
+  const hydrateFromCache = useDashboardStore((state) => state.hydrateFromCache);
+  const fetchDashboard = useDashboardStore((state) => state.fetchDashboard);
+  const data = useDashboardStore((state) => state.data);
+  const loading = useDashboardStore((state) => state.loading);
+  const error = useDashboardStore((state) => state.error);
+
+  useEffect(() => {
+    hydrateFromCache();
+    void fetchDashboard();
+
+    const interval = window.setInterval(() => {
+      void fetchDashboard();
+    }, DASHBOARD_SYNC_INTERVAL_MS);
+
+    return () => window.clearInterval(interval);
+  }, [fetchDashboard, hydrateFromCache]);
+
+  return { data, loading, error };
+}

package/template/app/layout.tsx

@@ -0,0 +1,75 @@
+import type { Metadata } from "next";
+import { Analytics } from "@vercel/analytics/next";
+import {
+  Caveat,
+  JetBrains_Mono,
+  Nunito,
+  Patrick_Hand,
+} from "next/font/google";
+import "./globals.css";
+
+const bodyFont = Nunito({
+  variable: "--font-sans",
+  subsets: ["latin"],
+  weight: ["400", "600", "700"],
+  display: "swap",
+});
+
+const displayFont = Caveat({
+  variable: "--font-display",
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  display: "swap",
+});
+
+const monoFont = JetBrains_Mono({
+  variable: "--font-mono",
+  subsets: ["latin"],
+  weight: ["400", "600"],
+  display: "swap",
+});
+
+const noteFont = Patrick_Hand({
+  variable: "--font-note",
+  subsets: ["latin"],
+  weight: ["400"],
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "IPL 2026 — Fantasy Scorebook",
+  description:
+    "A hand-drawn, scribbled notebook for IPL 2026 fantasy league standings, captain picks, and match mayhem.",
+};
+
+const themeInitScript = `
+(() => {
+  try {
+    const key = "ipl:theme";
+    const stored = window.localStorage.getItem(key);
+    const preferred = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    const theme = stored === "light" || stored === "dark" ? stored : preferred;
+    document.documentElement.dataset.theme = theme;
+  } catch {}
+}).call(this);
+`;
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${bodyFont.variable} ${displayFont.variable} ${monoFont.variable} ${noteFont.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  );
+}