refactor: main filter

main filters needs info from url params

src/app/results/RaceResults.tsx → 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 (
+      <div className='px-4 lg:px-0'>
+        <div className='mt-8 grid gap-8 md:grid-cols-2 xl:grid-cols-3 xl:gap-x-4'>
+          {/* 3 Placeholder Cards */}
+          {Array.from(Array(4).keys()).map((_, i) => (
+            <SkeletonResultCard key={'skeleton result card - ' + i} />
+          ))}
+        </div>
+      </div>
+    );
+
+  return (
+    <div className='px-4 lg:px-0'>
+      {/* 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 */}
+        {mainEvents.map((race) => (
+          <ResultCard key={race.EventName} data={race} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const SkeletonResultCard = () => (
+  <div className='card overflow-hidden p-4 shadow-xl'>
+    <div className='skeleton h-32 w-full'></div>
+
+    <div className='card-body p-0 pt-2'>
+      <div className='skeleton h-4 w-full'></div>
+      <div className='skeleton h-4 w-full'></div>
+
+      <div className='skeleton mx-auto h-[32px] w-[222px]'></div>
+    </div>
+  </div>
+);
+
 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 }) => {
     </div>
   );
 };
-
-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 (
-    <div className='px-4 lg:px-0'>
-      {/* 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 */}
-        {mainEvents.map((race) => (
-          <ResultCard key={race.EventName} data={race} />
-        ))}
-      </div>
-    </div>
-  );
-};

src/app/(features)/RaceTimeline.tsx

@@ -40,7 +40,9 @@ export const DriverResultsInfo = ({
       </div>
       {!subEl && (
         <h3 className='text-2xl font-bold'>
-          {driver.Time ? durationPlus + formatDuration(driver.Time) : driver.Status}
+          {driver.Time
+            ? durationPlus + formatDuration(driver.Time)
+            : driver.Status}
         </h3>
       )}
     </>

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 } }
     </main>
   );
 }
-
-// <Timeline>
-//   {constructorStandings.map((constructor, index, allConstructors) => (
-//     <TimelineElement
-//       key={constructor.Constructor.name}
-//       first={index === 0}
-//       last={index === allConstructors.length - 1}
-//       odd={index % 2 === 0}
-//     >
-//       <ConstructorResultsInfo con={constructor} />
-//     </TimelineElement>
-//   ))}
-// </Timeline>

src/app/results/layout.tsx → src/app/[season]/layout.tsx

@@ -10,7 +10,7 @@ export default function ResultsLayout({
 }) {
   return (
     <>
-      <div className='container mx-auto mb-4 rounded-box p-4 md:my-4'>
+      <div className='container mx-auto mb-4 rounded-box bg-base-300 p-4 px-2 md:my-4'>
         <MainFilters />
       </div>
       {children}

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 && <BsFillCaretDownFill />}

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 = () => {
         <SessionDropdown action={changePath} />
       </div>
 
-      <div className='flex gap-4'>
+      <div className='flex gap-4 px-2'>
         <button className='btn btn-primary btn-sm'>
           <a onClick={() => handleSubmit()}>Results</a>
         </button>
@@ -103,6 +97,7 @@ const SeasonDropdown = ({ action }: actionT) => {
   };
 
   useAtom(fetchSeasons);
+
   return <Dropdown value={season} items={seasons} action={handleAction} />;
 };
 
@@ -142,7 +137,6 @@ const DriverDropdown = ({ action }: actionT) => {
     });
   };
 
-  // useAtom(fetchDriver);
   return (
     <Dropdown
       value={driverName}