chore: FRON-9 main filter dropdowns have a loader

src/app/(features)/RaceSchedule.tsx

@@ -6,21 +6,16 @@ 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 ? races.filter((race) => race.EventFormat !== 'testing') : []),
     [races],
   );
 
-  if (races.length === 0)
+  if (races && 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 */}
+          {/* 4 Placeholder Cards */}
           {Array.from(Array(4).keys()).map((_, i) => (
             <SkeletonResultCard key={'skeleton result card - ' + i} />
           ))}
@@ -31,7 +26,6 @@ export const RaceSchedule = () => {
   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) => (
@@ -97,39 +91,3 @@ const ResultCard = ({ data }: { data: ScheduleSchema }) => {
     </div>
   );
 };
-
-const WinterTesting = ({ data }: { data: ScheduleSchema }) => {
-  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}
-          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: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>
-    </div>
-  );
-};

src/app/(features)/RaceTimeline.tsx

@@ -1,7 +1,11 @@
 import clsx from 'clsx';
 import { BsFillStarFill } from 'react-icons/bs';
 
-import { fastestLap, formatDuration, positionEnding } from '../../lib/utils';
+import {
+  fastestLap,
+  formatDuration,
+  positionEnding,
+} from '../../utils/helpers';
 
 export const DriverResultsInfo = ({
   driver,

src/app/(features)/StandingsTimeline.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { positionEnding } from '../../lib/utils';
+import { positionEnding } from '../../utils/helpers';
 
 export const DriverStandingInfo = ({
   driver,

src/app/[season]/[round]/page.tsx

@@ -24,7 +24,7 @@ export default function ResultsPage() {
         headers={['Drivers', 'Constructors']}
         containers={[
           <Timeline key='Driver Results'>
-            {drivers.map((driver, index, allDrivers) => (
+            {drivers?.map((driver, index, allDrivers) => (
               <TimelineElement
                 key={driver.FullName}
                 first={index === 0}

src/app/layout.tsx

@@ -6,7 +6,7 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 
 import { Nav } from './ui/Nav';
-import { fetchAPI } from '../lib/utils';
+import { fetchAPI } from '../utils/helpers';
 
 const inter = Inter({ subsets: ['latin'] });
 

src/app/ui/Dropdown.tsx

@@ -5,7 +5,7 @@ import { BsFillCaretDownFill } from 'react-icons/bs';
 
 interface IDropdown {
   value: string;
-  items: string[];
+  items: string[] | null;
   action: (item: string) => void;
 }
 
@@ -23,17 +23,23 @@ export const Dropdown = ({ value, items, action }: IDropdown) => {
         tabIndex={0}
         role='button'
         className={clsx(
-          { 'pointer-events-none opacity-50': items.length <= 0 },
+          { 'pointer-events-none opacity-50': items && items.length <= 1 },
           'btn btn-ghost btn-sm rounded-btn underline',
         )}
       >
-        {value} <BsFillCaretDownFill />
+        {items ? (
+          <>
+            {value} <BsFillCaretDownFill />
+          </>
+        ) : (
+          <span className='loading loading-spinner loading-sm text-primary'></span>
+        )}
       </div>
       <ul
         tabIndex={0}
         className='menu dropdown-content z-[1] mt-2 max-h-64 w-52 flex-nowrap overflow-scroll rounded-box bg-base-100 p-2 shadow lg:max-h-96'
       >
-        {items.map((item) => (
+        {items?.map((item) => (
           <li key={item} data-cy='dropdown-item'>
             <a onClick={() => handleClick(item)}>{item}</a>
           </li>

src/app/ui/MainFilters.tsx

@@ -8,12 +8,8 @@ import {
   driverAtom,
   handleDriverChangeAtom,
 } from '@/atoms/drivers';
-import {
-  fetchSchedule,
-  handleRaceChangeAtom,
-  raceAtom,
-  seasonRacesAtom,
-} from '@/atoms/races';
+import { useMainFiltersAtomFetch } from '@/atoms/fetchCalls';
+import { handleRaceChangeAtom, raceAtom, seasonRacesAtom } from '@/atoms/races';
 import {
   handleMainFilterSubmit,
   telemetryDisableAtom,
@@ -22,13 +18,11 @@ import {
 } from '@/atoms/results';
 import {
   allSeasonsAtom,
-  fetchSeasons,
   handleSeasonChangeAtom,
   seasonAtom,
 } from '@/atoms/seasons';
 import {
   allSessionsAtom,
-  fetchSessionResults,
   handleSessionChangeAtom,
   sessionAtom,
 } from '@/atoms/sessions';
@@ -58,12 +52,12 @@ export const MainFilters = () => {
     router.push('/' + url + (telemetry ? '/telemetry' : ''));
   };
 
-  useAtom(fetchSeasons);
-  useAtom(fetchSchedule);
-  useAtom(fetchSessionResults);
-
+  // hook to trigger if telemetry is disabled or not
   useAtom(toggleTelemetryDisableAtom);
 
+  // Fetch data when atoms change
+  useMainFiltersAtomFetch();
+
   // Handles hydration on page load
   useParamToSetAtoms();
 
@@ -117,7 +111,7 @@ const RaceDropdown = ({ action }: actionT) => {
   const [races] = useAtom(seasonRacesAtom);
 
   const handleAction = (val: string) => {
-    const match = races.find((race) => race.EventName === val);
+    const match = races && races.find((race) => race.EventName === val);
     if (match) {
       changeRace(match);
       action();
@@ -129,7 +123,7 @@ const RaceDropdown = ({ action }: actionT) => {
   return (
     <Dropdown
       value={race === 'All Races' ? race : race.EventName}
-      items={races.map((race) => race.EventName)}
+      items={races && ['All Races', ...races.map((race) => race.EventName)]}
       action={handleAction}
     />
   );
@@ -148,7 +142,12 @@ const DriverDropdown = ({ action }: actionT) => {
   return (
     <Dropdown
       value={driver !== 'All Drivers' ? driver.FullName : driver}
-      items={driverList.map((driver) => driver.FullName)}
+      items={
+        driverList && [
+          'All Drivers',
+          ...driverList.map((driver) => driver.FullName),
+        ]
+      }
       action={handleAction}
     />
   );
@@ -166,7 +165,7 @@ const SessionDropdown = ({ action }: actionT) => {
   return (
     <Dropdown
       value={sessionName}
-      items={sessionList.reverse()}
+      items={sessionList && sessionList.reverse()}
       action={handleAction}
     />
   );

src/app/ui/Timeline.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx';
 
-export const Timeline = ({ children }: { children: React.ReactNode[] }) => {
+export const Timeline = ({
+  children,
+}: {
+  children: React.ReactNode | React.ReactNode[];
+}) => {
   return (
     <ul className='timeline timeline-vertical timeline-snap-icon max-md:timeline-compact'>
       {children}

src/atoms/drivers.tsx

@@ -1,28 +1,16 @@
 import { atom } from 'jotai';
 
-import { raceAtom } from './races';
-import { seasonAtom } from './seasons';
-
-// Drivers
-export const allDriversAtom = atom<DriverResult[]>([]);
+export const allDriversAtom = atom<DriverResult[] | null>(null);
 export const driverAtom = atom<DriverResult | 'All Drivers'>('All Drivers');
 
 export const handleDriverChangeAtom = atom(
   null,
   async (get, set, driverName: string) => {
-    const baseUrl = '/' + get(seasonAtom);
-
-    const race = get(raceAtom);
-    const raceLoc = race !== 'All Races' && race.Location.toLowerCase();
-
     const drivers = get(allDriversAtom);
-    const driver = drivers.find((driver) => driver.FullName === driverName);
+    const driver = drivers?.find((driver) => driver.FullName === driverName);
 
     if (driver) {
       set(driverAtom, driver);
-      return baseUrl + (raceLoc && `/${raceLoc}/${driver.DriverId}`);
     }
-    //   return nagivation url
-    set(driverAtom, 'All Drivers');
   },
 );