Merge branch 'dev' into cypress

Slick-Telemetry · Jan 24, 2024 · c4667fd · c4667fd
2 parents 4d5fa3b + 0aac508
commit c4667fd
Show file tree

Hide file tree

Showing 15 changed files with 482 additions and 245 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+pnpm typecheck
 npx lint-staged
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
+    "axios": "latest",
     "clsx": "latest",
     "jotai": "latest",
     "jotai-effect": "latest",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/MainFilters.tsx b/src/app/MainFilters.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 
 import { Dropdown } from './ui/Dropdown';
 import {
+  allSeasonsAtom,
   driverAtom,
   driversAtom,
   fetchDriver,
@@ -19,10 +20,9 @@ import {
   handleSeasonChangeAtom,
   handleSessionChangeAtom,
   raceAtom,
-  raceNamesDropdownAtom,
   resultUrlAtom,
   seasonAtom,
-  seasonsAtom,
+  seasonRacesAtom,
   sessionAtom,
   sessionsAtom,
   telemetryDisableAtom,
@@ -36,7 +36,7 @@ type actionT = {
 const SeasonDropdown = ({ action }: actionT) => {
   const [season] = useAtom(seasonAtom);
   const [, handleSeasonChange] = useAtom(handleSeasonChangeAtom);
-  const [seasons] = useAtom(seasonsAtom);
+  const [seasons] = useAtom(allSeasonsAtom);
 
   const handleAction = (val: string) => {
     handleSeasonChange(val).then((url: string) => {
@@ -51,16 +51,26 @@ const SeasonDropdown = ({ action }: actionT) => {
 const RaceDropdown = ({ action }: actionT) => {
   const [race] = useAtom(raceAtom);
   const [, handleRaceChange] = useAtom(handleRaceChangeAtom);
-  const [races] = useAtom(raceNamesDropdownAtom);
+  const [races] = useAtom(seasonRacesAtom);
 
   const handleAction = (val: string) => {
-    handleRaceChange(val).then((url: string) => {
-      action(url);
-    });
+    const match = races.find((race) => race.EventName === val);
+    if (match) {
+      handleRaceChange(match).then((url: string) => {
+        action(url);
+      });
+    }
   };
 
   useAtom(fetchRaces);
-  return <Dropdown value={race} items={races} action={handleAction} />;
+
+  return (
+    <Dropdown
+      value={typeof race === 'string' ? race : race.EventName}
+      items={races.map((race) => race.EventName)}
+      action={handleAction}
+    />
+  );
 };
 
 const DriverDropdown = ({ action }: actionT) => {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,11 @@
 import clsx from 'clsx';
+import { Provider } from 'jotai';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 
 import './globals.css';
 
+import { fetchAPI } from './lib/utils';
 import { Nav } from './ui/Nav';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -13,40 +15,25 @@ export const metadata: Metadata = {
   description: 'Formula 1 Data Analysis',
 };
 
-const checkServer = async () => {
-  // Check if server exists
-  // Cannot use jotai on server component, aka RootLayout
-  const data = fetch('http://0.0.0.0:80', { cache: 'no-store' }).then(
-    (res) => {
-      if (!res.ok) {
-        return null;
-      }
-      return true;
-    },
-    () => {
-      return null;
-    },
-  );
-
-  return data;
-};
-
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const server = await checkServer();
+  const server = await fetchAPI('', true);
 
   return (
     <html lang='en'>
       <body
         className={clsx('min-h-screen px-4', inter.className, {
           server: server,
+          // noServer: !server,
         })}
       >
-        <Nav />
-        {children}
+        <Provider>
+          <Nav />
+          {children}
+        </Provider>
       </body>
     </html>
   );