Add two-way URL binding for exercise filters

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() {
             <Route path="/" element={<HomePage/>}></Route>
             <Route path="/exercises" element={<ExercisesPage allExData = {allExData} setAllExData = {setAllExData} defaultTags={[]} scoresRet={scoresRetrieved}/>}/>
             <Route path="/about" element={<AboutPage/>}/>
-            <Route path="/exercises/intonation" element={<ExercisesPage allExData = {allExData} setAllExData = {setAllExData} defaultTags={["Intonation"]} scoresRet={scoresRetrieved}/>}/>
-            <Route path="/exercises/pitch" element={<ExercisesPage allExData = {allExData} setAllExData = {setAllExData} defaultTags={["Pitch"]} scoresRet={scoresRetrieved}/>}/>
-            <Route path="/exercises/rhythm" element={<ExercisesPage allExData = {allExData} setAllExData = {setAllExData} defaultTags={["Rhythm"]} scoresRet={scoresRetrieved}></ExercisesPage>}/>
+            <Route path="/exercises/intonation" element={<Navigate replace to="/exercises?tags=Intonation"/>}/>
+            <Route path="/exercises/pitch" element={<Navigate replace to="/exercises?tags=Pitch"/>}/>
+            <Route path="/exercises/rhythm" element={<Navigate replace to="/exercises?tags=Rhythm"/>}/>
             <Route path="exercise-management" element={<ExerciseManagementPage allExData = {allExData} setAllExData = {setAllExData} fetch={refreshExercises} authorized={authorized} setAuthorized={updateAuthorized}/>}/>
             <Route path="/exercise-management/create" element={<CreateExercisePage allExData={allExData} setAllExData={setAllExData} refreshExercises={refreshExercises}/>}/>
             <Route path="/help" element={<HelpPage authorized={authorized} setAuthorized={updateAuthorized}/>}/>

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;