feat: zustand time (it allows prefetching pattern)

Author: lorenzocorallo

package.json

@@ -42,7 +42,8 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
-    "url-join": "^5.0.0"
+    "url-join": "^5.0.0",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",

pnpm-lock.yaml

@@ -5,14 +5,17 @@ import {
   redirect,
 } from "@tanstack/react-router"
 import { useContext, useMemo, useState } from "react"
+import { queryClient } from "@/app/__root"
 import Alert from "@/components/custom-ui/Alert"
 import Page from "@/components/custom-ui/Page.tsx"
 import Spinner from "@/components/custom-ui/Spinner"
 import PathBreadcrumb from "@/components/PathBreadcrumb.tsx"
 import MobileContext from "@/contexts/MobileContext"
 import { useQueries } from "@/hooks/use-queries"
+import { useSettingsStore } from "@/stores/settings-store"
 import CustomMap from "@/utils/CustomMap"
 import { NotFoundError } from "@/utils/errors.ts"
+import { getActiveQueries } from "@/utils/queries"
 import type {
   NewRanking,
   NewStudentResultCourse,
@@ -149,6 +152,11 @@ export const Route = createFileRoute("/_home/$school/$year/$id/")({
       else throw redirect({ to: "/" })
     },
   },
+  loader: ({ params }) => {
+    const state = useSettingsStore.getState()
+    const queries = getActiveQueries(state)
+    queryClient.prefetchQuery(queries.ranking(params.id))
+  },
   errorComponent: ({ error }) => {
     if (error instanceof NotFoundError) return <p>Ranking not found</p>
 

src/app/_home/$school/$year/$id/index.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
-import { useContext, useState } from "react"
+import { useState } from "react"
 import { LuCheck, LuPencil, LuRefreshCw } from "react-icons/lu"
 import { toast } from "sonner"
 import { Badge } from "@/components/ui/badge"
@@ -11,14 +11,13 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { SettingsContext } from "@/contexts/SettingsContext"
 import { useQueries } from "@/hooks/use-queries"
+import { useSettingsStore } from "@/stores/settings-store"
 import { DATA_SOURCE } from "@/utils/constants"
 import type { DataSource } from "@/utils/queries"
 
 export function SetDataSource() {
-  const { localPort, ref, dataSource, setDataSource } =
-    useContext(SettingsContext)
+  const { localPort, ref, dataSource, setDataSource } = useSettingsStore()
 
   return (
     <div className="flex w-full items-center gap-10">
@@ -58,7 +57,8 @@ export function SetDataSource() {
 function ChangeRef({ initialRef }: { initialRef: string }) {
   const [ref, setRef] = useState<string>(initialRef)
   const [open, setOpen] = useState<boolean>(false)
-  const { setRef: updateRef } = useContext(SettingsContext)
+
+  const { setRef: updateRef } = useSettingsStore()
 
   function handleUpdate(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -94,7 +94,7 @@ function ChangePort({ initialPort }: { initialPort: number }) {
   const [port, setPort] = useState<number>(initialPort)
   const [open, setOpen] = useState<boolean>(false)
   const error = port < 1000 || port > 65535 || Number.isNaN(port)
-  const { changeLocalPort } = useContext(SettingsContext)
+  const { changeLocalPort } = useSettingsStore()
 
   function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     const value = e.target.valueAsNumber

src/components/DevSettings/settings/set-data-source.tsx

@@ -1,16 +1,13 @@
 import { DarkModeProvider } from "./DarkModeContext"
 import { MobileProvider } from "./MobileContext"
-import { SettingsProvider } from "./SettingsContext"
 
 interface Props {
   children: React.ReactNode
 }
 export default function ContextProvider({ children }: Props) {
   return (
     <DarkModeProvider>
-      <SettingsProvider>
-        <MobileProvider>{children}</MobileProvider>
-      </SettingsProvider>
+      <MobileProvider>{children}</MobileProvider>
     </DarkModeProvider>
   )
 }

src/contexts/ContextProvider.tsx

@@ -1,14 +1,7 @@
-import { useContext, useMemo } from "react"
-import { SettingsContext } from "@/contexts/SettingsContext"
-import { queryFactory } from "@/utils/queries"
+import { useSettingsStore } from "@/stores/settings-store"
+import { getActiveQueries } from "@/utils/queries"
 
 export function useQueries() {
-  const { dataSource, ref, localPort } = useContext(SettingsContext)
-  return useMemo(
-    () =>
-      dataSource === "github"
-        ? queryFactory({ source: dataSource, ref })
-        : queryFactory({ source: "local", port: localPort }),
-    [dataSource, ref, localPort]
-  )
+  const settings = useSettingsStore()
+  return getActiveQueries(settings)
 }

src/contexts/SettingsContext.tsx

@@ -0,0 +1,29 @@
+import { create } from "zustand"
+import type { DataSource } from "@/utils/queries"
+
+export interface SettingsState {
+  dataSource: DataSource
+  localPort: number
+  ref: string
+  // Actions
+  setDataSource: (dataSource: DataSource) => void
+  changeLocalPort: (port: number) => void
+  setRef: (ref: string) => void
+}
+
+export const useSettingsStore = create<SettingsState>((set) => ({
+  // Initial State
+  dataSource: "github",
+  localPort: 6767,
+  ref: "main",
+
+  // Actions
+  setDataSource: (dataSource) => set({ dataSource }),
+
+  changeLocalPort: (port) => {
+    if (port < 1000 || port > 65535) return
+    set({ localPort: port })
+  },
+
+  setRef: (ref) => set({ ref }),
+}))

src/hooks/use-queries.tsx

@@ -1,5 +1,6 @@
 import { queryOptions } from "@tanstack/react-query"
 import urlJoin from "url-join"
+import type { SettingsState } from "@/stores/settings-store"
 import { type DATA_SOURCE, LINKS } from "./constants"
 import { NotFoundError } from "./errors"
 import type { BySchoolYearIndex, NewRanking } from "./types/data/ranking"
@@ -39,6 +40,7 @@ export const queryFactory = (opts: QueryFactoryOpts) => ({
     },
     retry: 2,
     retryDelay: 300,
+    staleTime: 120_000,
   }),
 
   ranking: (id: string) =>
@@ -52,5 +54,16 @@ export const queryFactory = (opts: QueryFactoryOpts) => ({
       },
       retry: 2,
       retryDelay: 300,
+      staleTime: 600_000,
     }),
 })
+
+export const getActiveQueries = (
+  settings: Pick<SettingsState, "dataSource" | "ref" | "localPort">
+) => {
+  const { dataSource, ref, localPort } = settings
+
+  return dataSource === "github"
+    ? queryFactory({ source: dataSource, ref })
+    : queryFactory({ source: "local", port: localPort })
+}