fix: FRON-10 resolving issue with race and session endpoints (#21) (#24)

README.md

@@ -104,7 +104,7 @@ This project is using [conventional commits](https://www.conventionalcommits.org
 `/`
 ├── Results of past seasons
 └──`[season]` -> year
-    └── `[location]` -> race location of race in season
+    └── `[event name]` -> event name of race in season
         └── `[session]` -> session of race
             └── `[driver]` -> driverId in race session
                 ├── `/` -> ???

src/app/(features)/RaceSchedule.tsx

@@ -1,15 +1,10 @@
 import { useAtom } from 'jotai';
 import Image from 'next/image';
-import { useMemo } from 'react';
 
 import { seasonRacesAtom } from '@/atoms/races';
 
 export const RaceSchedule = () => {
   const [races] = useAtom(seasonRacesAtom);
-  const mainEvents = useMemo(
-    () => (races ? races.filter((race) => race.EventFormat !== 'testing') : []),
-    [races],
-  );
 
   if (races && races.length === 0)
     return (
@@ -28,9 +23,7 @@ export const RaceSchedule = () => {
       {/* If seasonAom === current/upcomming season, then add button to bring user to next event */}
       <div className='mt-8 grid gap-8 md:grid-cols-2 xl:grid-cols-3 xl:gap-x-4'>
         {/* 10 Placeholder Cards */}
-        {mainEvents.map((race) => (
-          <ResultCard key={race.EventName} data={race} />
-        ))}
+        {races?.map((race) => <ResultCard key={race.EventName} data={race} />)}
       </div>
     </div>
   );

src/app/ui/MainFilters.tsx

@@ -130,6 +130,8 @@ const RaceDropdown = ({ action }: actionT) => {
 };
 
 const DriverDropdown = ({ action }: actionT) => {
+  const [race] = useAtom(raceAtom);
+  const [races] = useAtom(seasonRacesAtom);
   const [driver] = useAtom(driverAtom);
   const [, handleDriverChange] = useAtom(handleDriverChangeAtom);
   const [driverList] = useAtom(allDriversAtom);
@@ -139,20 +141,30 @@ const DriverDropdown = ({ action }: actionT) => {
     action();
   };
 
+  let items = null;
+
+  // If races it not default we need values
+  if (race === 'All Races' && races && races.length > 0) {
+    items = [];
+  }
+
+  // If race is default we return []
+  if (race !== 'All Races' && driverList) {
+    items = ['All Drivers', ...driverList.map((driver) => driver.FullName)];
+  }
+  // const items = (driverList && driverList.length > 0 && race !== 'All Races') ? [
+
   return (
     <Dropdown
       value={driver !== 'All Drivers' ? driver.FullName : driver}
-      items={
-        driverList && [
-          'All Drivers',
-          ...driverList.map((driver) => driver.FullName),
-        ]
-      }
+      items={items}
       action={handleAction}
     />
   );
 };
 const SessionDropdown = ({ action }: actionT) => {
+  const [race] = useAtom(raceAtom);
+  const [races] = useAtom(seasonRacesAtom);
   const [sessionName] = useAtom(sessionAtom);
   const [, handleSessionChange] = useAtom(handleSessionChangeAtom);
   const [sessionList] = useAtom(allSessionsAtom);
@@ -162,11 +174,17 @@ const SessionDropdown = ({ action }: actionT) => {
     action();
   };
 
-  return (
-    <Dropdown
-      value={sessionName}
-      items={sessionList && sessionList.reverse()}
-      action={handleAction}
-    />
-  );
+  let items = null;
+
+  // If races it not default we need values
+  if (race === 'All Races' && races && races.length > 0) {
+    items = [];
+  }
+
+  // If race is default we return []
+  if (race !== 'All Races' && sessionList) {
+    items = [...sessionList.reverse()];
+  }
+
+  return <Dropdown value={sessionName} items={items} action={handleAction} />;
 };

src/atoms/fetchCalls.tsx

@@ -30,8 +30,6 @@ export const fetchSeasons = atomEffect(
     }
 
     // This populates to show values are loaded
-    set(allSessionsAtom, []);
-    set(allDriversAtom, []);
   },
   // Dependencies: allSeasonsAtom
 );

src/atoms/results.tsx

@@ -3,6 +3,13 @@ import { atomEffect } from 'jotai-effect';
 import { usePathname } from 'next/navigation';
 import { useRef } from 'react';
 
+import {
+  formatRaceEventName,
+  formatRaceUrl,
+  formatSessionName,
+  formatSessionUrl,
+} from '@/utils/transformers';
+
 import { allDriversAtom, driverAtom } from './drivers';
 import { raceAtom, seasonRacesAtom } from './races';
 import { seasonAtom } from './seasons';
@@ -34,7 +41,7 @@ export const handleMainFilterSubmit = atom(null, (get) => {
   // Return if no race specified
   if (race === 'All Races') return url.join('/');
   // Add race location to url
-  else url.push(race.Location.toLowerCase());
+  else url.push(formatRaceUrl(race.EventName));
 
   // Return if no driver specified
   if (driver === 'All Drivers') return url.join('/');
@@ -45,13 +52,13 @@ export const handleMainFilterSubmit = atom(null, (get) => {
   if ((sessions && sessions.length === 0) || session === 'Race')
     return url.join('/');
   // Add session to url
-  else url.push(session.toLowerCase());
+  else url.push(formatSessionUrl(session));
 
   return url.join('/');
 });
 
 export const useParamToSetAtoms = () => {
-  const [season, location, driverId, sessionParam] = usePathname()
+  const [season, eventParam, driverId, sessionParam] = usePathname()
     .split('/')
     .slice(1);
 
@@ -76,17 +83,15 @@ export const useParamToSetAtoms = () => {
 
   if (!raceLoaded.current) {
     // If no location nothing to load/check
-    if (!location) {
+    if (!eventParam) {
       raceLoaded.current = true;
       return;
     }
-
     // if location and races to compare to
     if (races) {
       raceLoaded.current = true;
-      const raceMatch = races.find(
-        (r) => r.Location.toLowerCase() === location,
-      );
+      const eventName = formatRaceEventName(eventParam);
+      const raceMatch = races.find((r) => r.EventName === eventName);
       if (race === 'All Races' || raceMatch?.EventName !== race?.EventName) {
         setRace(raceMatch || 'All Races');
       }
@@ -102,8 +107,11 @@ export const useParamToSetAtoms = () => {
 
     // if drivers to compare to driverId
     if (drivers) {
+      if (eventParam && drivers.length === 0) return;
+
       driverLoaded.current = true;
       const driverMatch = drivers.find((d) => d.DriverId === driverId);
+
       if (driver === 'All Drivers' || driverMatch?.DriverId !== driver.DriverId)
         setDriver(driverMatch || 'All Drivers');
     }
@@ -116,12 +124,11 @@ export const useParamToSetAtoms = () => {
       return;
     }
 
-    // if dirver and driver to compare to
+    // if driver and driver to compare to
     if (sessions) {
       sessionLoaded.current = true;
-      setSession(
-        sessions.find((s) => s.toLowerCase() === sessionParam) || 'Race',
-      );
+      const session = formatSessionName(sessionParam);
+      setSession(sessions.find((s) => s === session) || 'Race');
     }
   }
 };

src/constants.ts

@@ -1,3 +1,13 @@
 const serverUrl = 'http://127.0.0.1:8081';
 
-export { serverUrl };
+const sessionUrlParams = {
+  'Practice 1': 'fp1',
+  'Practice 2': 'fp2',
+  'Practice 3': 'fp3',
+  'Sprint Shootout': 'sprint_quali',
+  Qualifying: 'quali',
+  Sprint: 'sprint',
+  Race: 'race',
+};
+
+export { serverUrl, sessionUrlParams };

src/utils/transformers.tsx

@@ -1,3 +1,22 @@
+import { sessionUrlParams } from '@/constants';
+
+export const formatRaceUrl = (raceName: string) =>
+  raceName.replace(' Grand Prix', '').replace(/ /g, '_').toLowerCase();
+
+export const formatRaceEventName = (val: string) =>
+  val
+    .split('_')
+    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
+    .join(' ') + ' Grand Prix';
+
+export const formatSessionUrl = (session: string) =>
+  sessionUrlParams[session as keyof typeof sessionUrlParams];
+
+export const formatSessionName = (val: string) =>
+  Object.keys(sessionUrlParams).find(
+    (key) => sessionUrlParams[key as keyof typeof sessionUrlParams] === val,
+  );
+
 export const formatConstructorResults = (drivers: DriverResult[]) =>
   drivers
     .reduce((cons, driver) => {