chore: test api standings of single race

src/app/MainFilters.tsx

@@ -20,9 +20,9 @@ import {
   handleSeasonChangeAtom,
   handleSessionChangeAtom,
   raceAtom,
-  raceNamesDropdownAtom,
   resultUrlAtom,
   seasonAtom,
+  seasonRacesAtom,
   sessionAtom,
   sessionsAtom,
   telemetryDisableAtom,
@@ -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) => {

src/app/results/StandingsTimeline.tsx

@@ -19,6 +19,7 @@ export const StandingsTimeline = ({
               (standing as ConstructorStandingSchema)?.Constructor?.name
             }
           >
+            {i !== 0 && <hr />}
             {/* ! Use Flex order ! Yay */}
             <PositionMarker pos={positionEnding(standing.position)} odd={odd} />
             <TimelineMarker />
@@ -127,11 +128,7 @@ const TimelineMarker = () => (
       fill='currentColor'
       className='h-4 w-4'
     >
-      <path
-        fillRule='evenodd'
-        clipRule='evenodd'
-        d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75'
-      />
+      <circle cx='10' cy='10' r='6' />
     </svg>
   </div>
 );

src/app/results/[season]/[round]/page.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useAtom } from 'jotai';
+
+import { Tabs } from '@/app/ui/Tabs';
+import {
+  constructorStandingsAtom,
+  driverStandingsAtom,
+  fetchStandings,
+} from '@/atoms/results';
+
+// import { RaceSchedule } from '../../RaceResults';
+import { StandingsTimeline } from '../../StandingsTimeline';
+
+export default function ResultsPage() {
+  useAtom(fetchStandings);
+  const [constructorStandings] = useAtom(constructorStandingsAtom);
+  const [driverStandings] = useAtom(driverStandingsAtom);
+
+  return (
+    <main>
+      <Tabs
+        headers={['Drivers', 'Constructors']}
+        containers={[
+          <StandingsTimeline key='Driver Standings' data={driverStandings} />,
+          <StandingsTimeline
+            key='Constructor Standings'
+            data={constructorStandings}
+          />,
+        ]}
+      />
+    </main>
+  );
+}

src/app/ui/Nav.tsx

@@ -8,7 +8,7 @@ export const Nav = () => (
       </Link>
     </div>
     <div className='navbar-center hidden lg:flex'>
-      <ul className='menu menu-horizontal px-1'>
+      <ul className='menu menu-horizontal gap-2 px-1'>
         <li>
           <a>Schedule</a>
         </li>

src/atoms/results.tsx

@@ -3,9 +3,9 @@ import { atomEffect } from 'jotai-effect';
 
 import { fetchAPI } from '../app/lib/utils';
 
-export const raceAtom = atom('All Races');
+export const raceAtom = atom<ScheduleSchema | 'All Races'>('All Races');
 export const seasonRacesAtom = atom<ScheduleSchema[]>([]);
-export const seasonAtom = atom('2023');
+export const seasonAtom = atom<string>('2023');
 export const allSeasonsAtom = atom<string[]>([]);
 export const driverAtom = atom('All Drivers');
 export const driversAtom = atom<string[]>([]);
@@ -16,17 +16,6 @@ export const resultUrlAtom = atom('/results');
 export const constructorStandingsAtom = atom<ConstructorStandingSchema[]>([]);
 export const driverStandingsAtom = atom<DriverStandingSchema[]>([]);
 
-// Derived Atoms
-
-// Dropdown values for races
-// Returns string[] of race event names
-export const raceNamesDropdownAtom = atom((get) => {
-  const data = get(seasonRacesAtom).map((race) => race.EventName);
-  // Add All Races option
-  data.unshift('All Races');
-  return data;
-});
-
 // Effect Atoms
 // Get Seasons values, this is done clientside
 // Dependencies: seasonsAtom
@@ -40,7 +29,8 @@ export const fetchSeasons = atomEffect((get, set) => {
 // Get Races per year
 // Dependencies: seasonAtom
 export const fetchRaces = atomEffect((get, set) => {
-  fetchAPI('schedule?year=' + get(seasonAtom)).then((data) => {
+  const params = get(seasonAtom) && `?year=${get(seasonAtom)}`;
+  fetchAPI('schedule' + params).then((data) => {
     set(seasonRacesAtom, data);
   });
 });
@@ -56,17 +46,17 @@ export const fetchSessions = atomEffect((_get, set) => {
 
 // Get Driver & Constructor Standings
 export const fetchStandings = atomEffect((get, set) => {
-  fetchAPI('standings').then(
+  const year = get(seasonAtom) && `?year=${get(seasonAtom)}`;
+  const round =
+    typeof get(raceAtom) !== 'string'
+      ? `&round=${(get(raceAtom) as ScheduleSchema).RoundNumber}`
+      : '';
+  fetchAPI('standings' + year + round).then(
     ({
-      season,
       DriverStandings,
       ConstructorStandings,
     }: DataConfigSchema['standings']) => {
-      if (season.toString() !== get(seasonAtom)) {
-        // Todo: Resolve error by setting the year with get(seasonAtom) in original fetch
-        return;
-      }
-
+      // Include Drivers in Constructors Info
       const constructors = ConstructorStandings.map((cs) => {
         const { name } = cs.Constructor;
         return {
@@ -111,10 +101,13 @@ export const handleSeasonChangeAtom = atom(
 // Update Values when a Race changes
 export const handleRaceChangeAtom = atom(
   null,
-  async (get, set, update: string) => {
+  async (get, set, update: ScheduleSchema) => {
     set(raceAtom, update);
     set(driverAtom, 'All Drivers');
-    set(resultUrlAtom, '/results/' + get(seasonAtom) + '/' + update);
+    set(
+      resultUrlAtom,
+      '/results/' + get(seasonAtom) + '/' + update.RoundNumber,
+    );
 
     return get(resultUrlAtom);
   },
@@ -157,6 +150,6 @@ export const handleSessionChangeAtom = atom(
 );
 
 // Handle click of results button in <MainFilters/>
-export const handleResultsAtom = atom(null, (get, set) => {
-  set(seasonRacesAtom, get(seasonRacesAtom));
+export const handleResultsAtom = atom(null, (_get, _set) => {
+  // set(seasonRacesAtom, get(seasonRacesAtom));
 });