chore: include main filters and available server data for results ui

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 = () => (
-  <div className='mb-2 grid grid-rows-3 border-t border-black'>
-    {TopThreeDummy.map((driver) => (
-      <div
-        key={driver.name}
-        className='grid grid-cols-2 items-center border-b border-black bg-base-300 px-4 py-2'
-      >
-        <div className='flex flex-col'>
-          <p>{driver.name}</p>
-          <p className='text-sm'>{driver.team}</p>
+import { ISchedule } from '../lib/utils';
+
+const ResultCard = ({ data }: { data: ISchedule }) => {
+  const eventDate = new Date(data.EventDate);
+  const eventPassed = new Date() > eventDate;
+
+  return (
+    <div className='card overflow-hidden bg-base-100 shadow-xl'>
+      <div className='relative flex min-h-32 items-end p-4 '>
+        <figure className='absolute inset-0 z-0 bg-gradient-to-tr from-base-100'>
+          <Image
+            width={928}
+            height={548}
+            className='w-full mix-blend-overlay'
+            loader={() =>
+              'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg'
+            }
+            src='/shoe.jpg'
+            alt='Shoes'
+          />
+        </figure>
+        <div className='relative z-0'>
+          <h3 className='card-title max-w-64'>
+            {data.OfficialEventName.slice(0, -5)}
+          </h3>
         </div>
-        <p>{driver.time}</p>
       </div>
-    ))}
-  </div>
-);
 
-const ResultCard = () => (
-  <div className='card overflow-hidden bg-base-100 shadow-xl'>
-    <div className='relative flex min-h-32 items-end p-4 '>
-      <figure className='absolute inset-0 z-0 bg-gradient-to-tr from-base-100'>
+      <div className='card-body px-0 pb-4 pt-2'>
+        <p className='px-4'>
+          {data.Location}, {data.Country}
+          <br />
+          {eventDate.toDateString()}
+        </p>
+
+        {eventPassed && (
+          <div className='card-actions justify-center'>
+            <button className='btn btn-primary btn-sm btn-wide'>Results</button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const WinterTesting = ({ data }: { data: ISchedule }) => {
+  const eventDate = new Date(data.EventDate);
+  const eventPassed = new Date() > eventDate;
+
+  return (
+    <div className='card relative min-h-48 justify-center overflow-hidden rounded-2xl p-4'>
+      <figure className='absolute inset-0 z-0 flex items-center justify-end bg-gradient-to-r from-base-100'>
         <Image
           width={928}
           height={548}
@@ -50,102 +67,44 @@ const ResultCard = () => (
           alt='Shoes'
         />
       </figure>
-      <div className='relative z-0'>
-        <h3 className='card-title '>Name of Grand Prix</h3>
-      </div>
-    </div>
-
-    <div className='card-body px-0 pb-4 pt-2'>
-      <p className='px-4'>
-        Location
-        <br />
-        Time - Event Local & Client Local
-      </p>
-
-      <TopThree />
-
-      <div className='card-actions justify-center'>
-        <button className='btn btn-primary btn-sm btn-wide'>Results</button>
-      </div>
-    </div>
-  </div>
-);
-
-const WinterTesting = () => (
-  <div className='card relative min-h-32 justify-center overflow-hidden rounded-2xl p-4'>
-    <figure className='absolute inset-0 z-0 flex items-center justify-end bg-gradient-to-r from-base-100'>
-      <Image
-        width={928}
-        height={548}
-        className='w-full mix-blend-overlay'
-        loader={() =>
-          'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg'
-        }
-        src='/shoe.jpg'
-        alt='Shoes'
-      />
-    </figure>
-    <div className='relative z-0 flex flex-col gap-4 lg:flex-row lg:items-center'>
-      <div>
-        <h3>Winter Testing</h3>
-        <p>Sakhir, Bahrain</p>
+      <div className='relative z-0 flex flex-col gap-4 lg:items-start'>
+        <div>
+          <h3>{data.OfficialEventName}</h3>
+          <p>
+            {data.Location}, {data.Country}
+          </p>
+          <p>{eventDate.toDateString()}</p>
+        </div>
+        {eventPassed && (
+          <a role='button' className='btn btn-sm'>
+            Testing Results
+          </a>
+        )}
       </div>
-      <a role='button' className='btn btn-sm'>
-        Testing Results
-      </a>
     </div>
-  </div>
-);
+  );
+};
 
-// 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);
 
-//   <div className={clsx('card relative min-h-32 justify-center overflow-hidden rounded-2xl p-4', shimmer)}>
-//   <figure className='absolute inset-0 z-0 flex items-center justify-end bg-gradient-to-r from-base-100'>
-//     <Image
-//       width={928}
-//       height={548}
-//       className='w-full mix-blend-overlay'
-//       loader={() =>
-//         'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg'
-//       }
-//       src='/shoe.jpg'
-//       alt='Shoes'
-//     />
-//   </figure>
-//   <div className='relative z-0 flex flex-col gap-4 lg:flex-row lg:items-center'>
-//     <div>
-//       <h3>Winter Testing</h3>
-//       <p>Sakhir, Bahrain</p>
-//     </div>
-//     <a role='button' className='btn btn-sm'>
-//       Testing Results
-//     </a>
-//   </div>
-// </div>
-const WinterTestingSkeleton = () => (
-  <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
-    <div className='mb-4 h-8 w-36 rounded-md bg-gray-100' />
-    <div className='rounded-xl bg-gray-100 p-4'>
-      <div className='sm:grid-cols-13 mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4' />
-      <div className='flex items-center pb-2 pt-6'>
-        <div className='h-5 w-5 rounded-full bg-gray-200' />
-        <div className='ml-2 h-4 w-20 rounded-md bg-gray-200' />
-      </div>
-    </div>
-  </div>
-);
+  const winterTesting = useMemo(
+    () => races.find((race) => race.EventFormat === 'testing'),
+    [races],
+  );
+  const mainEvents = useMemo(
+    () => races.filter((race) => race.EventFormat !== 'testing'),
+    [races],
+  );
 
-export const RaceResults = () => {
   return (
     <div className='px-4 lg:px-0'>
-      <WinterTestingSkeleton />
-      <WinterTesting />
-      <div className='mt-4 grid gap-4 md:grid-cols-2 2xl:grid-cols-3'>
+      {/* If seasonAom === current/upcomming season, then add button to bring user to next event */}
+      {winterTesting && <WinterTesting data={winterTesting} />}
+      <div className='mt-8 grid gap-8 md:grid-cols-2 xl:grid-cols-3 xl:gap-x-4'>
         {/* 10 Placeholder Cards */}
-        {Array.from(Array(10).keys()).map((item) => (
-          <ResultCard key={item} />
+        {mainEvents.map((race) => (
+          <ResultCard key={race.EventName} data={race} />
         ))}
       </div>
     </div>

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 = [
+  <RaceSchedule key='Race Results' />,
+
+  <div key='Drivers Championship' className='rounded bg-base-100 p-4'>
+    <Table headings={DriverHeadings} data={driverData} />
+  </div>,
+  <div key='Constructors Championship' className='rounded bg-base-100 p-4'>
+    <Table headings={ConstuctorHeadings} data={constructorsData} />,
+  </div>,
+];
+
+export default function ResultsPage() {
+  return (
+    <main className='min-h-screen'>
+      <Tabs headers={tabHeaders} containers={tabs} />
+    </main>
+  );
+}

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 <ResultsPage />;
+}

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 (
     <>
-      <ResultsNav />
+      <div className='container mx-auto mb-4 rounded-box bg-base-300 p-4 lg:my-4'>
+        <MainFilters />
+      </div>
       {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 (
-    <div className='container navbar mx-auto my-4 flex-col items-start rounded-box bg-base-300 lg:flex-row lg:items-center'>
-      <h2 className='p-2 text-lg font-bold'>Results:</h2>
-      <Dropdown value={seasons[0]} items={seasons} action={() => {}} />
-      <Dropdown value={dummyRaces[0]} items={dummyRaces} action={() => {}} />
-      <Dropdown
-        value={dummyDrivers[0]}
-        items={dummyDrivers}
-        action={() => {}}
-      />
-    </div>
-  );
-};

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 = [
-  <RaceResults key='Race Results' />,
-
-  <div key='Drivers Championship' className='rounded bg-base-100 p-4'>
-    <Table headings={DriverHeadings} data={driverData} />
-  </div>,
-  <div key='Constructors Championship' className='rounded bg-base-100 p-4'>
-    <Table headings={ConstuctorHeadings} data={constructorsData} />,
-  </div>,
-];
+import ResultsPage from './SeasonResults';
 
 export default function Page() {
-  return (
-    <main className='min-h-screen'>
-      <Tabs headers={tabHeaders} containers={tabs} />
-    </main>
-  );
+  return <ResultsPage />;
 }