From 39f317c8a9abe2f8b436daedc6fc12373e27526e Mon Sep 17 00:00:00 2001 From: cris lombardo Date: Mon, 8 Jan 2024 10:37:20 -0500 Subject: [PATCH] chore: include main filters and available server data for results ui --- src/app/results/RaceResults.tsx | 205 ++++++++++++------------------ src/app/results/SeasonResults.tsx | 31 +++++ src/app/results/[season]/page.tsx | 13 ++ src/app/results/layout.tsx | 40 +----- src/app/results/page.tsx | 30 +---- 5 files changed, 132 insertions(+), 187 deletions(-) create mode 100644 src/app/results/SeasonResults.tsx create mode 100644 src/app/results/[season]/page.tsx diff --git a/src/app/results/RaceResults.tsx b/src/app/results/RaceResults.tsx index 4b3423b..990afda 100644 --- a/src/app/results/RaceResults.tsx +++ b/src/app/results/RaceResults.tsx @@ -1,44 +1,61 @@ +import { useAtom } from 'jotai'; import Image from 'next/image'; +import { useMemo } from 'react'; -const TopThreeDummy = [ - { - name: 'Driver 1', - team: 'Team 1', - time: '1:23.456', - }, - { - name: 'Driver 2', - team: 'Team 3', - time: '1:24.456', - }, - { - name: 'Driver 3', - team: 'Team 2', - time: '1:25.456', - }, -]; +import { racesAtom } from '@/atoms/results'; -const TopThree = () => ( -
- {TopThreeDummy.map((driver) => ( -
-
-

{driver.name}

-

{driver.team}

+import { ISchedule } from '../lib/utils'; + +const ResultCard = ({ data }: { data: ISchedule }) => { + const eventDate = new Date(data.EventDate); + const eventPassed = new Date() > eventDate; + + return ( +
+
+
+ + 'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg' + } + src='/shoe.jpg' + alt='Shoes' + /> +
+
+

+ {data.OfficialEventName.slice(0, -5)} +

-

{driver.time}

- ))} -
-); -const ResultCard = () => ( -
-
-
+
+

+ {data.Location}, {data.Country} +
+ {eventDate.toDateString()} +

+ + {eventPassed && ( +
+ +
+ )} +
+
+ ); +}; + +const WinterTesting = ({ data }: { data: ISchedule }) => { + const eventDate = new Date(data.EventDate); + const eventPassed = new Date() > eventDate; + + return ( +
+
( alt='Shoes' />
-
-

Name of Grand Prix

-
-
- -
-

- Location -
- Time - Event Local & Client Local -

- - - -
- -
-
-
-); - -const WinterTesting = () => ( -
-
- - 'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg' - } - src='/shoe.jpg' - alt='Shoes' - /> -
-
-
-

Winter Testing

-

Sakhir, Bahrain

+
+
+

{data.OfficialEventName}

+

+ {data.Location}, {data.Country} +

+

{eventDate.toDateString()}

+
+ {eventPassed && ( + + Testing Results + + )}
- - Testing Results -
-
-); + ); +}; -// Loading animation -const shimmer = - 'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent'; +export const RaceSchedule = () => { + const [races] = useAtom(racesAtom); -//
-//
-// -// 'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg' -// } -// src='/shoe.jpg' -// alt='Shoes' -// /> -//
-//
-//
-//

Winter Testing

-//

Sakhir, Bahrain

-//
-// -// Testing Results -// -//
-//
-const WinterTestingSkeleton = () => ( -
-
-
-
-
-
-
-
-
-
-); + const winterTesting = useMemo( + () => races.find((race) => race.EventFormat === 'testing'), + [races], + ); + const mainEvents = useMemo( + () => races.filter((race) => race.EventFormat !== 'testing'), + [races], + ); -export const RaceResults = () => { return (
- - -
+ {/* If seasonAom === current/upcomming season, then add button to bring user to next event */} + {winterTesting && } +
{/* 10 Placeholder Cards */} - {Array.from(Array(10).keys()).map((item) => ( - + {mainEvents.map((race) => ( + ))}
diff --git a/src/app/results/SeasonResults.tsx b/src/app/results/SeasonResults.tsx new file mode 100644 index 0000000..c7291d2 --- /dev/null +++ b/src/app/results/SeasonResults.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { RaceSchedule } from './RaceResults'; +import { + constructorsData, + ConstuctorHeadings, + driverData, + DriverHeadings, +} from '../lib/placerholder-results'; +import { Table } from '../ui/Table'; +import { Tabs } from '../ui/Tabs'; + +const tabHeaders = ['Races', 'Drivers', 'Constructors']; +const tabs = [ + , + +
+ + , +
+
, + , +]; + +export default function ResultsPage() { + return ( +
+ +
+ ); +} diff --git a/src/app/results/[season]/page.tsx b/src/app/results/[season]/page.tsx new file mode 100644 index 0000000..623ac15 --- /dev/null +++ b/src/app/results/[season]/page.tsx @@ -0,0 +1,13 @@ +'use client'; + +import { useAtom } from 'jotai'; + +import ResultsPage from '../SeasonResults'; +import { handleSeasonChangeAtom } from '../../../atoms/results'; + +export default function Page({ params }: { params: { slug: string } }) { + const [, handleSeasonChange] = useAtom(handleSeasonChangeAtom); + handleSeasonChange(params.slug); + + return ; +} diff --git a/src/app/results/layout.tsx b/src/app/results/layout.tsx index b905a02..5070ae7 100644 --- a/src/app/results/layout.tsx +++ b/src/app/results/layout.tsx @@ -1,7 +1,6 @@ 'use client'; -import { f1Seasons } from '../lib/utils'; -import { Dropdown } from '../ui/Dropdown'; +import { MainFilters } from '../MainFilters'; // Default Next Layout export default function ResultsLayout({ @@ -11,41 +10,10 @@ export default function ResultsLayout({ }) { return ( <> - +
+ +
{children} ); } - -const seasons = f1Seasons(); -const dummyRaces = [ - 'All Races', - 'Bahrain', - 'Mexico', - 'Monaco', - 'Imola', - 'Spain', -]; -const dummyDrivers = [ - 'All Drivers', - 'Drive 1', - 'Drive 2', - 'Drive 3', - 'Drive 4', - 'Drive 5', -]; - -const ResultsNav = () => { - return ( -
-

Results:

- {}} /> - {}} /> - {}} - /> -
- ); -}; diff --git a/src/app/results/page.tsx b/src/app/results/page.tsx index ef5f2c4..daf84ed 100644 --- a/src/app/results/page.tsx +++ b/src/app/results/page.tsx @@ -1,31 +1,5 @@ -'use client'; - -import { RaceResults } from './RaceResults'; -import { - constructorsData, - ConstuctorHeadings, - driverData, - DriverHeadings, -} from '../lib/placerholder-results'; -import { Table } from '../ui/Table'; -import { Tabs } from '../ui/Tabs'; - -const tabHeaders = ['Races', 'Drivers', 'Constructors']; -const tabs = [ - , - -
-
- , -
-
, - , -]; +import ResultsPage from './SeasonResults'; export default function Page() { - return ( -
- -
- ); + return ; }