diff --git a/src/App.tsx b/src/App.tsx index f08f461..96896d8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,7 @@ import { AboutPage } from './components/aboutpage'; import { ExercisesPage } from './components/exercisespage'; import { ExerciseManagementPage} from './components/exercise-managementpage'; import { CreateExercisePage } from './components/exercise-creation'; -import { Routes, Route, Link, useLocation } from 'react-router-dom'; +import { Routes, Route, Link, useLocation, Navigate } from 'react-router-dom'; import ExerciseData from './interfaces/exerciseData'; import { getDatabase } from 'firebase/database'; import { ref, get, query, DataSnapshot, orderByKey } from 'firebase/database'; @@ -187,9 +187,9 @@ function App() { }> }/> }/> - }/> - }/> - }/> + }/> + }/> + }/> }/> }/> }/> diff --git a/src/components/exercisespage.tsx b/src/components/exercisespage.tsx index 4d0b7fe..9806ad7 100644 --- a/src/components/exercisespage.tsx +++ b/src/components/exercisespage.tsx @@ -2,6 +2,7 @@ import '../styles/exercises/index.css'; import { Exercise } from './exercise'; import ExerciseData from '../interfaces/exerciseData'; import React, { useState, useEffect, useCallback } from 'react'; +import { useSearchParams } from 'react-router-dom'; import { Button } from 'react-bootstrap'; import { AppSidebar } from './sidebar'; @@ -341,6 +342,33 @@ export function ExercisesPage({ if (!stillExists) setSelExercise(undefined); }, [allExData, selExercise]); + const [searchParams, setSearchParams] = useSearchParams(); + + useEffect(() => { // set searchParams on load + setTags(searchParams.get("tags")?.split(",") || tags); + setTranspos((searchParams.get("transpos") === "true") || transpos); + setDiff(searchParams.get("diff") || diff); + setVoices(Number(searchParams.get("voices")) || voices); + setMeter(searchParams.get("meter") || meter); + setTypes(searchParams.get("types") || types); + + // we want this to only run on component mount, this gets rid of the eslint warning + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + useEffect(() => { // update searchParams on filter change + const newSearchParams = new URLSearchParams(); + + newSearchParams.set("tags", tags.filter(t => !!t).toString()); + newSearchParams.set("transpos", transpos.toString()); + newSearchParams.set("diff", diff.toString()); + newSearchParams.set("voices", voices.toString()); + newSearchParams.set("meter", meter.toString()); + newSearchParams.set("types", types.toString()); + + setSearchParams(newSearchParams); + }, [tags, transpos, diff, voices, meter, types, setSearchParams]); + const navButtonsVisible = filteredExercises.length > 0 && selExercise !== undefined; const disablePrevNav = currentExerciseIndex <= 0; const disableNextNav = currentExerciseIndex === -1 || currentExerciseIndex >= filteredExercises.length - 1;