From 44674b996ac9cb1ee862b46498faa9c4e9ffd26a Mon Sep 17 00:00:00 2001 From: cris lombardo Date: Wed, 7 Feb 2024 00:13:10 -0500 Subject: [PATCH] fix: FRON-10 resolving issue with race and session endpoints --- README.md | 2 +- src/app/(features)/RaceSchedule.tsx | 9 +----- src/app/ui/MainFilters.tsx | 44 ++++++++++++++++++++--------- src/atoms/fetchCalls.tsx | 2 -- src/atoms/results.tsx | 31 ++++++++++++-------- src/constants.ts | 12 +++++++- src/utils/transformers.tsx | 19 +++++++++++++ 7 files changed, 82 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 0cbf0fd..1dbf7ab 100644 --- a/README.md +++ b/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 ├── `/` -> ??? diff --git a/src/app/(features)/RaceSchedule.tsx b/src/app/(features)/RaceSchedule.tsx index 3b44b2d..bff0555 100644 --- a/src/app/(features)/RaceSchedule.tsx +++ b/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 */}
{/* 10 Placeholder Cards */} - {mainEvents.map((race) => ( - - ))} + {races?.map((race) => )}
); diff --git a/src/app/ui/MainFilters.tsx b/src/app/ui/MainFilters.tsx index e486d3d..ff764ad 100644 --- a/src/app/ui/MainFilters.tsx +++ b/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 ( 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 ( - - ); + 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 ; }; diff --git a/src/atoms/fetchCalls.tsx b/src/atoms/fetchCalls.tsx index 42b2fae..3ec8054 100644 --- a/src/atoms/fetchCalls.tsx +++ b/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 ); diff --git a/src/atoms/results.tsx b/src/atoms/results.tsx index ad5f2ad..eac3103 100644 --- a/src/atoms/results.tsx +++ b/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'); } } }; diff --git a/src/constants.ts b/src/constants.ts index 69f76d3..87eefa8 100644 --- a/src/constants.ts +++ b/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 }; diff --git a/src/utils/transformers.tsx b/src/utils/transformers.tsx index e8747b3..f33e8e0 100644 --- a/src/utils/transformers.tsx +++ b/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) => {