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;