feat: url updates when results change

src/app/MainFilters.tsx

@@ -2,6 +2,7 @@
 
 import { useAtom } from 'jotai/react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import React from 'react';
 
 import { Dropdown } from './ui/Dropdown';
@@ -14,10 +15,11 @@ import {
   fetchSessions,
   handleDriverChangeAtom,
   handleRaceChangeAtom,
+  handleResultsAtom,
   handleSeasonChangeAtom,
   handleSessionChangeAtom,
   raceAtom,
-  racesDropdownAtom,
+  raceNamesDropdownAtom,
   resultUrlAtom,
   seasonAtom,
   seasonsAtom,
@@ -27,86 +29,104 @@ import {
   toggleTelemetryDisableAtom,
 } from '../atoms/results';
 
-const SeasonDropdown = () => {
+type actionT = {
+  action: (url: string) => void;
+};
+
+const SeasonDropdown = ({ action }: actionT) => {
   const [season] = useAtom(seasonAtom);
   const [, handleSeasonChange] = useAtom(handleSeasonChangeAtom);
   const [seasons] = useAtom(seasonsAtom);
 
+  const handleAction = (val: string) => {
+    handleSeasonChange(val).then((url: string) => {
+      action(url);
+    });
+  };
+
   useAtom(fetchSeasons);
-  return (
-    <Dropdown
-      value={season}
-      items={seasons}
-      action={(val) => handleSeasonChange(val)}
-    />
-  );
+  return <Dropdown value={season} items={seasons} action={handleAction} />;
 };
 
-const RaceDropdown = () => {
+const RaceDropdown = ({ action }: actionT) => {
   const [race] = useAtom(raceAtom);
   const [, handleRaceChange] = useAtom(handleRaceChangeAtom);
-  const [races] = useAtom(racesDropdownAtom);
+  const [races] = useAtom(raceNamesDropdownAtom);
+
+  const handleAction = (val: string) => {
+    handleRaceChange(val).then((url: string) => {
+      action(url);
+    });
+  };
 
   useAtom(fetchRaces);
-  return (
-    <Dropdown
-      value={race}
-      items={races}
-      action={(val) => handleRaceChange(val)}
-    />
-  );
+  return <Dropdown value={race} items={races} action={handleAction} />;
 };
 
-const DriverDropdown = () => {
+const DriverDropdown = ({ action }: actionT) => {
   const [driverName] = useAtom(driverAtom);
   const [, handleDriverChange] = useAtom(handleDriverChangeAtom);
   const [driverList] = useAtom(driversAtom);
+
+  const handleAction = (val: string) => {
+    handleDriverChange(val).then((url: string) => {
+      action(url);
+    });
+  };
+
   useAtom(fetchDriver);
   return (
-    <Dropdown
-      value={driverName}
-      items={driverList}
-      action={(val) => handleDriverChange(val)}
-    />
+    <Dropdown value={driverName} items={driverList} action={handleAction} />
   );
 };
-const SessionDropdown = () => {
+const SessionDropdown = ({ action }: actionT) => {
   const [sessionName] = useAtom(sessionAtom);
   const [, handleSessionChange] = useAtom(handleSessionChangeAtom);
   const [sessionList] = useAtom(sessionsAtom);
+
+  const handleAction = (val: string) => {
+    handleSessionChange(val).then((url: string) => {
+      action(url);
+    });
+  };
+
   useAtom(fetchSessions);
   return (
-    <Dropdown
-      value={sessionName}
-      items={sessionList}
-      action={(val) => handleSessionChange(val)}
-    />
+    <Dropdown value={sessionName} items={sessionList} action={handleAction} />
   );
 };
 export const MainFilters = () => {
+  const router = useRouter();
+
   useAtom(toggleTelemetryDisableAtom);
   const [telemetryDisable] = useAtom(telemetryDisableAtom);
   const [resultsUrl] = useAtom(resultUrlAtom);
-
+  const [, handleResultsClick] = useAtom(handleResultsAtom);
   useAtom(fetchSeasons);
 
+  const changePath = (url: string) => {
+    router.push(url);
+  };
+
   return (
     <div className='flex flex-col gap-2'>
       {/* <Dropdown value={} /> */}
       <div className='flex lg:gap-4'>
-        <SeasonDropdown />
-        <RaceDropdown />
+        <SeasonDropdown action={changePath} />
+        <RaceDropdown action={changePath} />
       </div>
 
       <div className='flex items-center lg:gap-4'>
-        <DriverDropdown />
+        <DriverDropdown action={changePath} />
         in
-        <SessionDropdown />
+        <SessionDropdown action={changePath} />
       </div>
 
       <div className='flex gap-4'>
         <button className='btn btn-primary btn-sm'>
-          <Link href={resultsUrl}>Results</Link>
+          <Link href={resultsUrl} onClick={() => handleResultsClick()}>
+            Results
+          </Link>
         </button>
         <button disabled={telemetryDisable} className='btn btn-sm'>
           Telemetry

src/app/page.tsx

@@ -12,7 +12,7 @@ export default function Home() {
 }
 
 const Hero = () => (
-  <div className='hero my-16 lg:my-20'>
+  <div className='hero my-16 lg:my-32'>
     <div className='hero-content gap-8  lg:w-4/5 lg:justify-start'>
       <div className='flex flex-col gap-8 '>
         <h1 className='text-5xl font-bold lg:text-7xl'>Slick Telemetry</h1>

src/app/results/RaceResults.tsx

@@ -2,7 +2,7 @@ import { useAtom } from 'jotai';
 import Image from 'next/image';
 import { useMemo } from 'react';
 
-import { racesAtom } from '@/atoms/results';
+import { seasonRacesAtom } from '@/atoms/results';
 
 import { ISchedule } from '../lib/utils';
 
@@ -86,7 +86,8 @@ const WinterTesting = ({ data }: { data: ISchedule }) => {
 };
 
 export const RaceSchedule = () => {
-  const [races] = useAtom(racesAtom);
+  const [races] = useAtom(seasonRacesAtom);
+  // console.log('races', races)
 
   const winterTesting = useMemo(
     () => races.find((race) => race.EventFormat === 'testing'),

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

@@ -5,9 +5,9 @@ import { useAtom } from 'jotai';
 import ResultsPage from '../SeasonResults';
 import { handleSeasonChangeAtom } from '../../../atoms/results';
 
-export default function Page({ params }: { params: { slug: string } }) {
+export default function Page({ params }: { params: { season: string } }) {
   const [, handleSeasonChange] = useAtom(handleSeasonChangeAtom);
-  handleSeasonChange(params.slug);
+  handleSeasonChange(params.season);
 
   return <ResultsPage />;
 }

src/atoms/results.tsx

@@ -4,7 +4,7 @@ import { atomEffect } from 'jotai-effect';
 import { fetchAPI, ISchedule } from '../app/lib/utils';
 
 export const raceAtom = atom('All Races');
-export const racesAtom = atom<ISchedule[]>([]);
+export const seasonRacesAtom = atom<ISchedule[]>([]);
 export const seasonAtom = atom('2023');
 export const seasonsAtom = atom<string[]>([]);
 export const driverAtom = atom('All Drivers');
@@ -14,16 +14,23 @@ export const sessionsAtom = atom<string[]>([]);
 export const telemetryDisableAtom = atom(true);
 export const resultUrlAtom = atom('/results');
 
-export const racesDropdownAtom = atom((get) =>
-  get(racesAtom).map((race) => race.EventName),
-);
+export const raceNamesDropdownAtom = atom((get) => {
+  const data = get(seasonRacesAtom).map((race) => race.EventName);
+  // Add All Races option
+  data.unshift('All Races');
+  return data;
+});
 
 export const fetchSeasons = atomEffect((get, set) => {
-  fetchAPI('seasons').then((data) => set(seasonsAtom, data));
+  if (get(seasonsAtom).length <= 0) {
+    fetchAPI('seasons').then((data) => set(seasonsAtom, data));
+  }
 });
 
 export const fetchRaces = atomEffect((get, set) => {
-  fetchAPI('schedule/' + get(seasonAtom)).then((data) => set(racesAtom, data));
+  fetchAPI('schedule/' + get(seasonAtom)).then((data) => {
+    set(seasonRacesAtom, data);
+  });
 });
 
 export const fetchDriver = atomEffect((get, set) => {
@@ -33,38 +40,47 @@ export const fetchSessions = atomEffect((get, set) => {
   fetchAPI('sessions').then((data) => set(sessionsAtom, data));
 });
 
-export const handleSeasonChangeAtom = atom(null, (get, set, update: string) => {
-  set(seasonAtom, update);
-  set(raceAtom, 'All Races');
-  set(driverAtom, 'All Drivers');
-  set(sessionAtom, 'Race');
-  set(resultUrlAtom, '/results/' + update);
+export const handleSeasonChangeAtom = atom(
+  null,
+  async (get, set, update: string) => {
+    set(seasonAtom, update);
+    set(raceAtom, 'All Races');
+    set(driverAtom, 'All Drivers');
+    set(sessionAtom, 'Race');
+    set(resultUrlAtom, '/results/' + update);
 
-  // Todo: Update RacesAtom
-});
+    return get(resultUrlAtom);
+  },
+);
 
-export const handleRaceChangeAtom = atom(null, (get, set, update: string) => {
-  set(raceAtom, update);
-  set(driverAtom, 'All Drivers');
-  set(resultUrlAtom, '/results/' + get(seasonAtom) + '/' + update);
+export const handleRaceChangeAtom = atom(
+  null,
+  async (get, set, update: string) => {
+    set(raceAtom, update);
+    set(driverAtom, 'All Drivers');
+    set(resultUrlAtom, '/results/' + get(seasonAtom) + '/' + update);
 
-  // Todo: Update DriversAtom
-});
+    return get(resultUrlAtom);
+  },
+);
 
-export const handleDriverChangeAtom = atom(null, (get, set, update: string) => {
-  set(driverAtom, update);
-  set(sessionAtom, 'Race');
-  set(
-    resultUrlAtom,
-    '/results/' + get(seasonAtom) + '/' + get(raceAtom) + '/' + update,
-  );
+export const handleDriverChangeAtom = atom(
+  null,
+  async (get, set, update: string) => {
+    set(driverAtom, update);
+    set(sessionAtom, 'Race');
+    set(
+      resultUrlAtom,
+      '/results/' + get(seasonAtom) + '/' + get(raceAtom) + '/' + update,
+    );
 
-  // Todo: Update SessionsAtom
-});
+    return get(resultUrlAtom);
+  },
+);
 
 export const handleSessionChangeAtom = atom(
   null,
-  (get, set, update: string) => {
+  async (get, set, update: string) => {
     set(sessionAtom, update);
     set(
       resultUrlAtom,
@@ -77,9 +93,15 @@ export const handleSessionChangeAtom = atom(
         '/' +
         update,
     );
+
+    return get(resultUrlAtom);
   },
 );
 
+export const handleResultsAtom = atom(null, (get, set) => {
+  set(seasonRacesAtom, get(seasonRacesAtom));
+});
+
 export const toggleTelemetryDisableAtom = atomEffect((get, set) => {
   // Telemetry is disabled if no race and driver are selected
   set(