feat: query-factory, custom devtools to change data source

Author: lorenzocorallo

package.json

@@ -24,6 +24,8 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-router": "^1.139.16",
@@ -32,10 +34,12 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "next-themes": "^0.4.6",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-icons": "^5.5.0",
     "react-spinners": "^0.17.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "url-join": "^5.0.0"

pnpm-lock.yaml

@@ -2,7 +2,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { createRootRoute, Outlet } from "@tanstack/react-router"
 import { StrictMode } from "react"
 import { IconContext } from "react-icons"
+import DevSettings from "@/components/DevSettings"
 import Layout from "@/components/Layout"
+import { Toaster } from "@/components/ui/sonner"
 import ContextProvider from "@/contexts/ContextProvider"
 
 export const queryClient = new QueryClient()
@@ -20,7 +22,10 @@ function RootComponent() {
           <QueryClientProvider client={queryClient}>
             <Layout>
               <Outlet />
+
+              {import.meta.env.DEV && <DevSettings />}
             </Layout>
+            <Toaster richColors position="bottom-center" />
           </QueryClientProvider>
         </IconContext.Provider>
       </ContextProvider>

src/app/__root.tsx

@@ -179,13 +179,13 @@ export function getColumns(
       id: "sectionsResults",
       columns: rows[0].sectionsResults
         ? Object.keys(rows[0].sectionsResults).map((k) => ({
-          header: k,
-          accessorFn: (row) => row.sectionsResults?.[k],
-          cell: ({ getValue }) => {
-            const value = getValue()
-            return Formatter.displayScore(value)
-          },
-        }))
+            header: k,
+            accessorFn: (row) => row.sectionsResults?.[k],
+            cell: ({ getValue }) => {
+              const value = getValue()
+              return Formatter.displayScore(value)
+            },
+          }))
         : [],
     },
     {

src/app/_home/$school/$year/$id/-Table/columns.tsx

@@ -113,9 +113,9 @@ export default function Table({ table: _table, csvFilename: _ }: TableProps) {
                           {header.isPlaceholder
                             ? null
                             : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
                         </TableHead>
                       )
                     )

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

@@ -1,14 +1,14 @@
-import { queryOptions, useSuspenseQuery } from "@tanstack/react-query"
+import { useSuspenseQuery } from "@tanstack/react-query"
 import {
   createFileRoute,
   ErrorComponent,
   redirect,
 } from "@tanstack/react-router"
 import { useContext, useMemo, useState } from "react"
-import { queryClient } from "@/app/__root"
 import Page from "@/components/custom-ui/Page.tsx"
 import PathBreadcrumb from "@/components/PathBreadcrumb.tsx"
 import MobileContext from "@/contexts/MobileContext"
+import { useQueries } from "@/hooks/use-queries"
 import CustomMap from "@/utils/CustomMap"
 import { NotFoundError } from "@/utils/errors.ts"
 import type {
@@ -20,7 +20,6 @@ import { isSchool } from "@/utils/types/data/school"
 import { CourseCombobox } from "./-course-combobox"
 import LocationsSelect from "./-location-select"
 import Table from "./-Table"
-import { getDataUrl } from "@/utils/data"
 
 // function TEMP_getCoursesMap(
 //   ranking: NewRanking
@@ -120,18 +119,6 @@ function fallbackSelectedLocation(
   return locations[0]
 }
 
-function rankingOptions(id: string) {
-  return queryOptions({
-    queryKey: ["ranking", id],
-    queryFn: async () => {
-      const res = await fetch(getDataUrl(`/output/rankings/${id}.json`))
-      if (res.status === 404) throw new NotFoundError()
-      return res.json() as Promise<NewRanking>
-    },
-    staleTime: 5 * 1000,
-  })
-}
-
 function getCoursesMap(
   courses: NewRanking["courses"]
 ): CustomMap<string, string[]> {
@@ -160,8 +147,6 @@ export const Route = createFileRoute("/_home/$school/$year/$id/")({
       else throw redirect({ to: "/" })
     },
   },
-  loader: ({ params }) =>
-    queryClient.ensureQueryData(rankingOptions(params.id)),
   errorComponent: ({ error }) => {
     if (error instanceof NotFoundError) return <p>Ranking not found</p>
 
@@ -172,7 +157,8 @@ export const Route = createFileRoute("/_home/$school/$year/$id/")({
 
 function RouteComponent() {
   const params = Route.useParams()
-  const { data: ranking } = useSuspenseQuery(rankingOptions(params.id))
+  const queries = useQueries()
+  const { data: ranking } = useSuspenseQuery(queries.ranking(params.id))
 
   //   const res = await axios.get(
   //     "http://localhost:8120/2024_20102_491d_html.json"
@@ -259,13 +245,15 @@ function RouteComponent() {
 
   return (
     <Page
-      className={`flex items-center gap-4 px-0 ${isMobile ? "flex-col overflow-y-auto overflow-x-hidden" : ""
-        }`}
+      className={`flex items-center gap-4 px-0 ${
+        isMobile ? "flex-col overflow-y-auto overflow-x-hidden" : ""
+      }`}
       fullWidth
     >
       <div
-        className={`flex w-full max-w-7xl flex-col gap-4 px-4 ${isMobile ? "flex-col overflow-y-auto overflow-x-hidden" : ""
-          }`}
+        className={`flex w-full max-w-7xl flex-col gap-4 px-4 ${
+          isMobile ? "flex-col overflow-y-auto overflow-x-hidden" : ""
+        }`}
       >
         <PathBreadcrumb />
         <div className="flex w-full gap-4 max-sm:flex-col sm:items-center">

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

@@ -5,11 +5,10 @@ import PhaseFlag from "@/components/custom-ui/PhaseFlag"
 import { ButtonGrid } from "@/components/Homepage/ButtonGrid"
 import PathBreadcrumb from "@/components/PathBreadcrumb"
 import { Button } from "@/components/ui/button"
+import { useQueries } from "@/hooks/use-queries"
 import { getPhaseGroups, phaseGroupLabel, phaseLinkLabel } from "@/utils/phase"
 import type { PhaseLink } from "@/utils/types/data/phase"
-import type { BySchoolYearIndex } from "@/utils/types/data/ranking"
 import { isSchool } from "@/utils/types/data/school"
-import { getDataUrl } from "@/utils/data"
 
 export const Route = createFileRoute("/_home/$school/$year/")({
   component: RouteComponent,
@@ -23,14 +22,9 @@ export const Route = createFileRoute("/_home/$school/$year/")({
 
 function RouteComponent() {
   const { school, year } = Route.useParams()
-  const { data } = useQuery({
-    queryKey: ["index"],
-    queryFn: async () => {
-      const res = await fetch(getDataUrl("/output/indexes/bySchoolYear.json"))
-      return res.json() as Promise<BySchoolYearIndex>
-    },
-  })
-  if (!data) return null
+  const queries = useQueries()
+  const { data, isPending } = useQuery(queries.index)
+  if (!data || isPending) return null
   const yearData = data[school]?.[year] ?? []
 
   const groups = getPhaseGroups(yearData).entriesArr()

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

@@ -6,9 +6,8 @@ import Spinner from "@/components/custom-ui/Spinner"
 import { ButtonGrid } from "@/components/Homepage/ButtonGrid"
 import PathBreadcrumb from "@/components/PathBreadcrumb"
 import { Button } from "@/components/ui/button"
-import type { BySchoolYearIndex } from "@/utils/types/data/ranking"
+import { useQueries } from "@/hooks/use-queries"
 import { isSchool } from "@/utils/types/data/school"
-import { getDataUrl } from "@/utils/data"
 
 export const Route = createFileRoute("/_home/$school/")({
   component: RouteComponent,
@@ -23,15 +22,10 @@ export const Route = createFileRoute("/_home/$school/")({
 function RouteComponent() {
   const [clicked, setClicked] = useState(false)
   const { school } = Route.useParams()
-  const { data } = useQuery({
-    queryKey: ["index"],
-    queryFn: async () => {
-      const res = await fetch(getDataUrl("/output/indexes/bySchoolYear.json"))
-      return res.json() as Promise<BySchoolYearIndex>
-    },
-  })
+  const queries = useQueries()
+  const { data, isPending } = useQuery(queries.index)
 
-  if (!data) return null
+  if (!data || isPending) return null
   const years = Object.keys(data[school] ?? {}).map(Number)
 
   return clicked ? (