diff --git a/src/app/results/RaceResults.tsx b/src/app/(features)/RaceSchedule.tsx similarity index 81% rename from src/app/results/RaceResults.tsx rename to src/app/(features)/RaceSchedule.tsx index ea7aec7..db2971e 100644 --- a/src/app/results/RaceResults.tsx +++ b/src/app/(features)/RaceSchedule.tsx @@ -4,6 +4,57 @@ import { useMemo } from 'react'; import { seasonRacesAtom } from '@/atoms/races'; +export const RaceSchedule = () => { + const [races] = useAtom(seasonRacesAtom); + + const winterTesting = useMemo( + () => races.find((race) => race.EventFormat === 'testing'), + [races], + ); + const mainEvents = useMemo( + () => races.filter((race) => race.EventFormat !== 'testing'), + [races], + ); + + if (races.length === 0) + return ( +
+
+ {/* 3 Placeholder Cards */} + {Array.from(Array(4).keys()).map((_, i) => ( + + ))} +
+
+ ); + + return ( +
+ {/* If seasonAom === current/upcomming season, then add button to bring user to next event */} + {winterTesting && } +
+ {/* 10 Placeholder Cards */} + {mainEvents.map((race) => ( + + ))} +
+
+ ); +}; + +const SkeletonResultCard = () => ( +
+
+ +
+
+
+ +
+
+
+); + const ResultCard = ({ data }: { data: ScheduleSchema }) => { const eventDate = new Date(data.EventDate); const eventPassed = new Date() > eventDate; @@ -82,29 +133,3 @@ const WinterTesting = ({ data }: { data: ScheduleSchema }) => { ); }; - -export const RaceSchedule = () => { - const [races] = useAtom(seasonRacesAtom); - - const winterTesting = useMemo( - () => races.find((race) => race.EventFormat === 'testing'), - [races], - ); - const mainEvents = useMemo( - () => races.filter((race) => race.EventFormat !== 'testing'), - [races], - ); - - return ( -
- {/* If seasonAom === current/upcomming season, then add button to bring user to next event */} - {winterTesting && } -
- {/* 10 Placeholder Cards */} - {mainEvents.map((race) => ( - - ))} -
-
- ); -}; diff --git a/src/app/(features)/RaceTimeline.tsx b/src/app/(features)/RaceTimeline.tsx index 7d55857..b45cba5 100644 --- a/src/app/(features)/RaceTimeline.tsx +++ b/src/app/(features)/RaceTimeline.tsx @@ -40,7 +40,9 @@ export const DriverResultsInfo = ({ {!subEl && (

- {driver.Time ? durationPlus + formatDuration(driver.Time) : driver.Status} + {driver.Time + ? durationPlus + formatDuration(driver.Time) + : driver.Status}

)} diff --git a/src/app/[season]/[location]/page.tsx b/src/app/[season]/[location]/page.tsx index d353e03..1bd34b6 100644 --- a/src/app/[season]/[location]/page.tsx +++ b/src/app/[season]/[location]/page.tsx @@ -1,45 +1,44 @@ 'use client'; import { useAtom } from 'jotai'; +import { useEffect } from 'react'; -import { ConstructorResultsInfo, DriverResultsInfo } from '@/app/(features)/RaceTimeline'; +import { + ConstructorResultsInfo, + DriverResultsInfo, +} from '@/app/(features)/RaceTimeline'; import { Tabs } from '@/app/ui/Tabs'; import { Timeline, TimelineElement } from '@/app/ui/Timeline'; -import { allDriversAtom } from '@/atoms/drivers'; -import { fetchSessionResults } from '@/atoms/sessions'; -import { - constructorStandingsAtom, - driverStandingsAtom, - fetchStandings, -} from '@/atoms/standings'; import { allConstructorAtom } from '@/atoms/constructors'; -import { useParams } from 'next/navigation'; -import { useRouter } from 'next/router'; +import { allDriversAtom } from '@/atoms/drivers'; import { raceAtom, seasonRacesAtom } from '@/atoms/races'; -import { useEffect } from 'react'; +import { fetchSessionResults } from '@/atoms/sessions'; // import { RaceSchedule } from '../../RaceResults'; // import { handleRaceChangeAtom, seasonRacesAtom } from '@/atoms/races'; -export default function ResultsPage({ params }: { params: { location: string } }) { - - - const [races] = useAtom(seasonRacesAtom) - const [_, setRace] = useAtom(raceAtom) +export default function ResultsPage({ + params, +}: { + params: { location: string }; +}) { + const [races] = useAtom(seasonRacesAtom); + const [_, setRace] = useAtom(raceAtom); useEffect(() => { - setRace(races.find(race => race.Location === params.location) || 'All Races') - }, [races]) + setRace( + races.find((race) => race.Location === params.location) || 'All Races', + ); + }, [races, params.location, setRace]); // useAtom(fetchStandings); // useAtom(fetchSessionResults); useAtom(fetchSessionResults); - const [constructorStandings] = useAtom(constructorStandingsAtom); - const [driverStandings] = useAtom(driverStandingsAtom); + // const [constructorStandings] = useAtom(constructorStandingsAtom); + // const [driverStandings] = useAtom(driverStandingsAtom); const [drivers] = useAtom(allDriversAtom); const [constructors] = useAtom(allConstructorAtom); - console.log('data', [drivers, constructors]) // const [driverStandings] = useAtom(driverStandingsAtom); // const [, handleRaceChange] = useAtom(handleRaceChangeAtom); @@ -88,16 +87,3 @@ export default function ResultsPage({ params }: { params: { location: string } } ); } - -// -// {constructorStandings.map((constructor, index, allConstructors) => ( -// -// -// -// ))} -// diff --git a/src/app/results/layout.tsx b/src/app/[season]/layout.tsx similarity index 75% rename from src/app/results/layout.tsx rename to src/app/[season]/layout.tsx index 174c3ab..2bc8625 100644 --- a/src/app/results/layout.tsx +++ b/src/app/[season]/layout.tsx @@ -10,7 +10,7 @@ export default function ResultsLayout({ }) { return ( <> -
+
{children} diff --git a/src/app/ui/Dropdown.tsx b/src/app/ui/Dropdown.tsx index 61f1217..ffbbb21 100644 --- a/src/app/ui/Dropdown.tsx +++ b/src/app/ui/Dropdown.tsx @@ -24,7 +24,7 @@ export const Dropdown = ({ value, items, action }: IDropdown) => { role='button' className={clsx( { 'pointer-events-none opacity-50': items.length <= 0 }, - 'btn btn-ghost btn-sm rounded-btn px-0 underline', + 'btn btn-ghost btn-sm rounded-btn underline', )} > {value} {items.length > 0 && } diff --git a/src/app/ui/MainFilters.tsx b/src/app/ui/MainFilters.tsx index 749f2f8..9501a58 100644 --- a/src/app/ui/MainFilters.tsx +++ b/src/app/ui/MainFilters.tsx @@ -16,11 +16,7 @@ import { raceAtom, seasonRacesAtom, } from '@/atoms/races'; -import { - handleMainFilterSubmit, - telemetryDisableAtom, - toggleTelemetryDisableAtom, -} from '@/atoms/results'; +import { handleMainFilterSubmit, telemetryDisableAtom } from '@/atoms/results'; import { allSeasonsAtom, fetchSeasons, @@ -29,7 +25,6 @@ import { } from '@/atoms/seasons'; import { allSessionsAtom, - fetchSessionResults, handleSessionChangeAtom, sessionAtom, } from '@/atoms/sessions'; @@ -45,12 +40,11 @@ export const MainFilters = () => { const pathname = usePathname(); const [telemetryDisable] = useAtom(telemetryDisableAtom); - // const [resultsUrl] = useAtom(resultUrlAtom); const [, handleResultsSubmit] = useAtom(handleMainFilterSubmit); - useAtom(toggleTelemetryDisableAtom); - useAtom(fetchSeasons); - useAtom(fetchSessionResults); + // useAtom(fetchSeasons); + // useAtom(toggleTelemetryDisableAtom); + // useAtom(fetchSessionResults); const changePath = (url: string) => { // If not home page auto change page @@ -59,7 +53,7 @@ export const MainFilters = () => { const handleSubmit = () => { const url = handleResultsSubmit(); - router.push(url); + router.push('/' + url); }; return ( @@ -75,7 +69,7 @@ export const MainFilters = () => {
-
+
@@ -103,6 +97,7 @@ const SeasonDropdown = ({ action }: actionT) => { }; useAtom(fetchSeasons); + return ; }; @@ -142,7 +137,6 @@ const DriverDropdown = ({ action }: actionT) => { }); }; - // useAtom(fetchDriver); return ( ( -
-
- - Slick Telemetry - -
-
- -
-
-
-
- - - -
-
    +import { seasonAtom } from '@/atoms/seasons'; + +export const Nav = () => { + const router = useRouter(); + const [season] = useAtom(seasonAtom); + + const handleSubmit = () => { + router.push('/' + season); + }; + + return ( +
    +
    + + Slick Telemetry + +
    +
    +
    -
    -
    -

    - 53 days until Winter Testing -

    +
    +
    +
    + + + +
    + +
    +
    +
    +

    + 53 days until Winter Testing +

    +
    -
    -); + ); +}; diff --git a/src/atoms/constructors.tsx b/src/atoms/constructors.tsx index 6eeed99..ae143d2 100644 --- a/src/atoms/constructors.tsx +++ b/src/atoms/constructors.tsx @@ -1,4 +1,4 @@ -import { atom } from "jotai"; +import { atom } from 'jotai'; // Constructor Results -export const allConstructorAtom = atom([]); \ No newline at end of file +export const allConstructorAtom = atom([]); diff --git a/src/atoms/results.tsx b/src/atoms/results.tsx index 1d4f816..360a8aa 100644 --- a/src/atoms/results.tsx +++ b/src/atoms/results.tsx @@ -5,7 +5,6 @@ import { allDriversAtom, driverAtom } from './drivers'; import { raceAtom } from './races'; import { seasonAtom } from './seasons'; import { allSessionsAtom, sessionAtom } from './sessions'; -import { useParams } from 'next/navigation'; // Telemetry Active export const telemetryDisableAtom = atom(true); @@ -42,7 +41,6 @@ export const handleMainFilterSubmit = atom(null, (get) => { return url.join('/'); }); - // export const handleParams = atomEffect((get, set) => { -// }) \ No newline at end of file +// }) diff --git a/src/atoms/sessions.tsx b/src/atoms/sessions.tsx index 47b73e6..571b18b 100644 --- a/src/atoms/sessions.tsx +++ b/src/atoms/sessions.tsx @@ -3,10 +3,10 @@ import { atomEffect } from 'jotai-effect'; import { fetchAPI } from '@/lib/utils'; +import { allConstructorAtom } from './constructors'; import { allDriversAtom, driverAtom } from './drivers'; import { raceAtom } from './races'; import { seasonAtom } from './seasons'; -import { allConstructorAtom } from './constructors'; /** * @description Format constructors results based on Driver results from race @@ -65,16 +65,15 @@ export const sessionAtom = atom('Race'); // Set allDriversAtom to drivers from session export const fetchSessionResults = atomEffect((get, set) => { const race = get(raceAtom); - console.log('fetch', race) // Confirm race has been selected if (race && race !== 'All Races') { - const sessions = get(sessionAtom); + const sessions = get(allSessionsAtom); let url = `results/${get(seasonAtom)}/${race.RoundNumber}`; // If sessions available find session round and add to url if (sessions.length > 0) { - const sessionRound = get(allSessionsAtom).indexOf(get(sessionAtom)) + 1; + const sessionRound = sessions.indexOf(get(sessionAtom)) + 1; url += `?session=${sessionRound}`; } diff --git a/src/lib/utils.tsx b/src/lib/utils.tsx index 2b65655..9d28c23 100644 --- a/src/lib/utils.tsx +++ b/src/lib/utils.tsx @@ -43,9 +43,7 @@ export const fastestLap = (position: number, points: number) => { } }; -export const formatDuration = ( - durationInMilliseconds: number, -) => { +export const formatDuration = (durationInMilliseconds: number) => { // Pad single-digit values with leading zeros const pad = (value: number) => { return value < 10 ? '0' + value : value; @@ -62,11 +60,13 @@ export const formatDuration = ( else if (hours === 0 && minutes === 0 && seconds === 0) return '0.' + pad(milliseconds); else if (hours === 0 && minutes === 0) - return seconds + '.' + pad(milliseconds) + return seconds + '.' + pad(milliseconds); else if (hours === 0) - return minutes + ':' + pad(seconds) + '.' + pad(milliseconds) + return minutes + ':' + pad(seconds) + '.' + pad(milliseconds); else - return hours + ':' + pad(minutes) + ':' + pad(seconds) + '.' + pad(milliseconds) + return ( + hours + ':' + pad(minutes) + ':' + pad(seconds) + '.' + pad(milliseconds) + ); }; export const sessionTitles = (event: ScheduleSchema) => { diff --git a/tsconfig.json b/tsconfig.json index e59724b..4b8fa2e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,13 +15,13 @@ "incremental": true, "plugins": [ { - "name": "next" - } + "name": "next", + }, ], "paths": { - "@/*": ["./src/*"] - } + "@/*": ["./src/*"], + }, }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "exclude": ["node_modules"], }