Refactor react-query to zustand store

package.json

@@ -29,11 +29,11 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@tanstack/react-query": "^5.90.5",
     "classnames": "^2.5.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",

src/App.tsx

@@ -1,13 +1,14 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useEffect } from "react";
 
 import Main from "./Main";
+import { useStore } from "./store";
 
 export default function App() {
-  const queryClient = new QueryClient();
+  const fetchAll = useStore((s) => s.fetchAll);
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <Main />
-    </QueryClientProvider>
-  );
+  useEffect(() => {
+    fetchAll();
+  }, [fetchAll]);
+
+  return <Main />;
 }

src/api/api.ts

@@ -2,7 +2,7 @@ const baseUrl = "/api";
 const currentYear = new Date().getFullYear();
 // const currentYear = 2024;
 
-export const apiPaths = {
+const apiPaths = {
   driverStandings: `${currentYear}/driverstandings/`,
   constructorStandings: `${currentYear}/constructorstandings/`,
   raceSchedule: `${currentYear}/races/`,
@@ -11,31 +11,9 @@ export const apiPaths = {
   constructors: `${currentYear}/constructors/`,
 } as const;
 
-async function get(path: string) {
-  const response = await fetch(`${baseUrl}/${path}`);
-  return response.json();
-}
-
-export async function getDriverStandings() {
-  return get(apiPaths.driverStandings);
-}
+export type ApiEndpoint = keyof typeof apiPaths;
 
-export async function getConstructorStandings() {
-  return get(apiPaths.constructorStandings);
-}
-
-export async function getDrivers() {
-  return get(apiPaths.drivers);
-}
-
-export async function getConstructors() {
-  return get(apiPaths.constructors);
-}
-
-export async function getRaceSchedule() {
-  return get(apiPaths.raceSchedule);
-}
-
-export async function getRaceResults() {
-  return get(apiPaths.raceResults);
+export async function fetchApi<T>(endpoint: ApiEndpoint): Promise<T> {
+  const response = await fetch(`${baseUrl}/${apiPaths[endpoint]}`);
+  return response.json();
 }

src/api/transforms.ts

@@ -0,0 +1,126 @@
+import {
+  IConstructorStanding,
+  IConstructorStandings,
+  IDriverStanding,
+  IDriverStandings,
+  IRace,
+  IRaceSchedule,
+  ITime,
+} from "../types/api";
+import {
+  RaceEvent,
+  RaceTable,
+  RaceType,
+  StandingsList,
+} from "../types/entities";
+
+export function transformDriverStandings(data: IDriverStandings) {
+  if (!data?.MRData?.StandingsTable?.StandingsLists?.length) {
+    return;
+  }
+
+  const [standingsList] = data.MRData.StandingsTable.StandingsLists;
+
+  const driverStandings: StandingsList = {
+    ...standingsList,
+    round: Number(standingsList?.round),
+    DriverStandings: standingsList.DriverStandings.map(
+      (standing: IDriverStanding) => ({
+        ...standing,
+        points: Number(standing.points),
+        position: Number(standing.position),
+        wins: Number(standing.wins),
+        Driver: {
+          ...standing.Driver,
+          permanentNumber: Number(standing.Driver.permanentNumber),
+        },
+      }),
+    ),
+  };
+
+  return driverStandings;
+}
+
+export function transformConstructorStandings(data?: IConstructorStandings) {
+  if (!data?.MRData?.StandingsTable?.StandingsLists?.length) {
+    return;
+  }
+
+  const [standingsList] = data.MRData.StandingsTable.StandingsLists;
+
+  const constructorStandings: StandingsList = {
+    ...standingsList,
+    round: Number(standingsList.round),
+    ConstructorStandings: standingsList.ConstructorStandings.map(
+      (standing: IConstructorStanding) => ({
+        ...standing,
+        position: Number(standing.position),
+        points: Number(standing.points),
+        wins: Number(standing.wins),
+      }),
+    ),
+  };
+
+  return constructorStandings;
+}
+
+function dateTimeToDate(dateTime: ITime): Date {
+  return new Date(`${dateTime.date}T${dateTime.time}`);
+}
+
+export function transformRaceSchedule(
+  responseData: IRaceSchedule,
+): RaceTable | undefined {
+  if (!Array.isArray(responseData?.MRData?.RaceTable?.Races)) {
+    return;
+  }
+
+  const raceTable = responseData.MRData.RaceTable;
+
+  return {
+    ...raceTable,
+    season: Number(raceTable.season),
+    Races: raceTable.Races.map((race: IRace) => ({
+      ...race,
+      round: Number(race.round),
+      FirstPractice: dateTimeToDate(race.FirstPractice),
+      Qualifying: dateTimeToDate(race.Qualifying),
+      SecondPractice: race.SecondPractice
+        ? dateTimeToDate(race.SecondPractice)
+        : undefined,
+      ThirdPractice: race.ThirdPractice
+        ? dateTimeToDate(race.ThirdPractice)
+        : undefined,
+      Sprint: race.Sprint ? dateTimeToDate(race.Sprint) : undefined,
+      Circuit: {
+        ...race.Circuit,
+        Location: {
+          ...race.Circuit.Location,
+          lat: Number(race.Circuit.Location.lat),
+          long: Number(race.Circuit.Location.long),
+        },
+      },
+    })),
+  };
+}
+
+export function getEventsSchedule(raceSchedule: RaceTable): RaceEvent[] {
+  return raceSchedule.Races.reduce((eventList: RaceEvent[], current) => {
+    const id = current.round.toString();
+
+    if (current.Sprint) {
+      eventList.push({
+        Race: current,
+        eventType: RaceType.SPRINT_RACE,
+        id: id + "-s",
+      });
+    }
+
+    eventList.push({
+      Race: current,
+      eventType: RaceType.GRAND_PRIX,
+      id,
+    });
+    return eventList;
+  }, []);
+}