From 0e089216bc9230a604d6e1605ca3f7f0c8718502 Mon Sep 17 00:00:00 2001 From: cris lombardo Date: Tue, 9 Jan 2024 16:17:52 -0500 Subject: [PATCH] feat: url updates when results change --- src/app/MainFilters.tsx | 92 ++++++++++++++++++------------ src/app/favicon.ico | Bin 25931 -> 15406 bytes src/app/page.tsx | 2 +- src/app/results/RaceResults.tsx | 5 +- src/app/results/[season]/page.tsx | 4 +- src/atoms/results.tsx | 82 ++++++++++++++++---------- 6 files changed, 114 insertions(+), 71 deletions(-) diff --git a/src/app/MainFilters.tsx b/src/app/MainFilters.tsx index e8fde82..4c43cb6 100644 --- a/src/app/MainFilters.tsx +++ b/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 ( - handleSeasonChange(val)} - /> - ); + return ; }; -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 ( - handleRaceChange(val)} - /> - ); + return ; }; -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 ( - handleDriverChange(val)} - /> + ); }; -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 ( - handleSessionChange(val)} - /> + ); }; 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 (
{/* */}
- - + +
- + in - +