FRON-10 Document site url endpoints (#18)

* chore: FRON-10 main filter url navigation

* chore: FRON-10 adding placeholder pages

README.md

@@ -15,6 +15,7 @@ Table of Contents:
   - [Contribution Guidelines](#contribution-guidelines)
 - [Tests](#tests)
 - [Deployment](#deployment)
+- [URL Structure](#url-structure)
 - [Resources](#resources)
 
 ## Setting up the project
@@ -97,6 +98,19 @@ This project is using [conventional commits](https://www.conventionalcommits.org
 
 // TODO [vercel](https://vercel.com/)
 
+## URL Structure
+
+```
+`/`
+├── Results of past seasons
+└──`[season]` -> year
+    └── `[location]` -> race location of race in season
+        └── `[session]` -> session of race
+            └── `[driver]` -> driverId in race session
+                ├── `/` -> ???
+                └── `/telemetry` -> ???
+```
+
 ## Resources
 
 Key tools in use: `daisy-ui`, `tailwindcss`, `react`, `nextjs`, `pnpm`, `cypress`

src/app/[season]/[location]/[driver]/[session]/page.tsx

@@ -0,0 +1,7 @@
+export default function SessionPage({
+  params,
+}: {
+  params: { session: string };
+}) {
+  return <h1>{params.session}</h1>;
+}

src/app/[season]/[location]/[driver]/[session]/telemetry/page.tsx

@@ -0,0 +1,3 @@
+export default function TelemetryPage() {
+  return <h1>Telemetry</h1>;
+}

src/app/[season]/[location]/[driver]/page.tsx

@@ -0,0 +1,3 @@
+export default function DriverPage({ params }: { params: { driver: string } }) {
+  return <h1>{params.driver}</h1>;
+}

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

@@ -25,34 +25,18 @@ export default function ResultsPage({
   const [races] = useAtom(seasonRacesAtom);
   const [_, setRace] = useAtom(raceAtom);
 
+  // On Mount we need to update the race to use the url params
   useEffect(() => {
     setRace(
-      races.find((race) => race.Location === params.location) || 'All Races',
+      races.find((race) => race.Location.toLowerCase() === params.location) ||
+        'All Races',
     );
   }, [races, params.location, setRace]);
-  // useAtom(fetchStandings);
-  // useAtom(fetchSessionResults);
   useAtom(fetchSessionResults);
 
-  // const [constructorStandings] = useAtom(constructorStandingsAtom);
-  // const [driverStandings] = useAtom(driverStandingsAtom);
   const [drivers] = useAtom(allDriversAtom);
   const [constructors] = useAtom(allConstructorAtom);
 
-  // const [driverStandings] = useAtom(driverStandingsAtom);
-
-  // const [, handleRaceChange] = useAtom(handleRaceChangeAtom);
-  // const [allRaces] = useAtom(seasonRacesAtom)
-
-  // if (!params) return <></>;
-  // Get all
-
-  // if (allRaces && allRaces.length > 0) {
-  //   console.log('all races', allRaces[parseInt(params.round) - 1])
-
-  //   handleRaceChange(allRaces[parseInt(params.round) - 1]);
-  // }
-
   return (
     <main>
       <Tabs

src/app/ui/MainFilters.tsx

@@ -1,9 +1,7 @@
 'use client';
 
 import { useAtom } from 'jotai/react';
-// import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
-import React from 'react';
 
 import {
   allDriversAtom,
@@ -16,7 +14,11 @@ import {
   raceAtom,
   seasonRacesAtom,
 } from '@/atoms/races';
-import { handleMainFilterSubmit, telemetryDisableAtom } from '@/atoms/results';
+import {
+  handleMainFilterSubmit,
+  telemetryDisableAtom,
+  toggleTelemetryDisableAtom,
+} from '@/atoms/results';
 import {
   allSeasonsAtom,
   fetchSeasons,
@@ -25,6 +27,7 @@ import {
 } from '@/atoms/seasons';
 import {
   allSessionsAtom,
+  fetchSessionResults,
   handleSessionChangeAtom,
   sessionAtom,
 } from '@/atoms/sessions';
@@ -43,17 +46,18 @@ export const MainFilters = () => {
   const [, handleResultsSubmit] = useAtom(handleMainFilterSubmit);
 
   // useAtom(fetchSeasons);
-  // useAtom(toggleTelemetryDisableAtom);
+  useAtom(toggleTelemetryDisableAtom);
   // useAtom(fetchSessionResults);
 
   const changePath = (url: string) => {
     // If not home page auto change page
     if (pathname !== '/') router.push(url);
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (e: React.MouseEvent) => {
+    const telemetry = (e.target as HTMLButtonElement).innerHTML === 'Telemetry';
     const url = handleResultsSubmit();
-    router.push('/' + url);
+    router.push('/' + url + (telemetry && '/telemetry'));
   };
 
   return (
@@ -70,10 +74,11 @@ export const MainFilters = () => {
       </div>
 
       <div className='flex gap-4 px-2'>
-        <button className='btn btn-primary btn-sm'>
-          <a onClick={() => handleSubmit()}>Results</a>
+        <button onClick={handleSubmit} className='btn btn-primary btn-sm'>
+          Results
         </button>
         <button
+          onClick={handleSubmit}
           disabled={telemetryDisable}
           className='btn btn-secondary btn-sm'
         >
@@ -127,7 +132,7 @@ const RaceDropdown = ({ action }: actionT) => {
 };
 
 const DriverDropdown = ({ action }: actionT) => {
-  const [driverName] = useAtom(driverAtom);
+  const [driver] = useAtom(driverAtom);
   const [, handleDriverChange] = useAtom(handleDriverChangeAtom);
   const [driverList] = useAtom(allDriversAtom);
 
@@ -139,7 +144,7 @@ const DriverDropdown = ({ action }: actionT) => {
 
   return (
     <Dropdown
-      value={driverName}
+      value={driver !== 'All Drivers' ? driver.FullName : driver}
       items={driverList.map((driver) => driver.FullName)}
       action={handleAction}
     />
@@ -150,6 +155,8 @@ const SessionDropdown = ({ action }: actionT) => {
   const [, handleSessionChange] = useAtom(handleSessionChangeAtom);
   const [sessionList] = useAtom(allSessionsAtom);
 
+  useAtom(fetchSessionResults);
+
   const handleAction = (val: string) => {
     handleSessionChange(val).then((url: string) => {
       action(url);

src/atoms/drivers.tsx

@@ -5,14 +5,25 @@ import { seasonAtom } from './seasons';
 
 // Drivers
 export const allDriversAtom = atom<DriverResult[]>([]);
-export const driverAtom = atom('All Drivers');
+export const driverAtom = atom<DriverResult | 'All Drivers'>('All Drivers');
 
 export const handleDriverChangeAtom = atom(
   null,
-  async (get, set, update: string) => {
-    set(driverAtom, update);
+  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);
+
+    if (driver) {
+      set(driverAtom, driver);
+      return baseUrl + (raceLoc && `/${raceLoc}/${driver.DriverId}`);
+    }
     //   return nagivation url
-    return '/' + get(seasonAtom) + '/' + get(raceAtom) + '/' + update;
+    set(driverAtom, 'All Drivers');
+    return baseUrl + (raceLoc && `/${raceLoc}`);
   },
 );

src/atoms/races.tsx

@@ -40,6 +40,6 @@ export const handleRaceChangeAtom = atom(
     set(sessionAtom, lastSession(raceEvent));
 
     // return navigation url
-    return '/' + get(seasonAtom) + '/' + raceEvent.Location;
+    return '/' + get(seasonAtom) + '/' + raceEvent.Location.toLowerCase();
   },
 );

src/atoms/results.tsx

@@ -1,7 +1,7 @@
 import { atom } from 'jotai';
 import { atomEffect } from 'jotai-effect';
 
-import { allDriversAtom, driverAtom } from './drivers';
+import { driverAtom } from './drivers';
 import { raceAtom } from './races';
 import { seasonAtom } from './seasons';
 import { allSessionsAtom, sessionAtom } from './sessions';
@@ -17,30 +17,31 @@ export const toggleTelemetryDisableAtom = atomEffect((get, set) => {
 });
 
 export const handleMainFilterSubmit = atom(null, (get) => {
-  const url = [get(seasonAtom)];
+  const season = get(seasonAtom);
   const race = get(raceAtom);
   const driver = get(driverAtom);
+  const session = get(sessionAtom);
+  const url = [];
 
+  // Return if no race specified
+  if (!season) return;
+  // Add season to url
+  else url.push(season);
+
+  // Return if no race specified
   if (race === 'All Races') return url.join('/');
-  else url.push(race.Location);
+  // Add race location to url
+  else url.push(race.Location.toLowerCase());
 
+  // Return if no driver specified
   if (driver === 'All Drivers') return url.join('/');
-  else {
-    const driverInfo = get(allDriversAtom).find(
-      (driver) => driver.FullName === get(driverAtom),
-    );
-    if (driverInfo) url.push(driverInfo.DriverId);
-    else return url.join('/');
-  }
+  // Add driver id to url
+  else url.push(driver.DriverId);
 
+  // Return if no sessions
   if (get(allSessionsAtom).length === 0) return url.join('/');
-  else {
-    const sessionIndex = get(allSessionsAtom).indexOf(get(sessionAtom)) + 1;
-    url.push(sessionIndex.toString());
-  }
+  // Add session to url
+  else url.push(session.toLowerCase());
+
   return url.join('/');
 });
-
-// export const handleParams = atomEffect((get, set) => {
-
-// })

src/atoms/sessions.tsx

@@ -59,7 +59,7 @@ const formatConstructorResults = (drivers: DriverResult[]) =>
 
 // Sessions
 export const allSessionsAtom = atom<string[]>([]);
-export const sessionAtom = atom('Race');
+export const sessionAtom = atom<string>('Race');
 
 // Get session results
 // Set allDriversAtom to drivers from session
@@ -95,6 +95,6 @@ export const handleSessionChangeAtom = atom(
 
     // return navigation url
     return `/${get(seasonAtom)}/${get(raceAtom)}/
-    ${get(driverAtom)}/${session}`;
+    ${get(driverAtom)}/${session.toLowerCase()}`;
   },
 );

src/lib/utils.tsx

@@ -80,9 +80,13 @@ export const sessionTitles = (event: ScheduleSchema) => {
 };
 
 export const lastSession = (event: ScheduleSchema) => {
-  if (event.Session5 !== 'None') return event.Session5;
-  else if (event.Session4 !== 'None') return event.Session4;
-  else return event.Session3;
+  let session = 'None';
+
+  if (event.Session5 !== 'None') session = event.Session5;
+  else if (event.Session4 !== 'None') session = event.Session4;
+  else session = event.Session3;
+
+  return session;
 };
 
 export const fetchAPI = async (