feat: Store view state in URL for shareable links

mapper/src/App.js

@@ -280,9 +280,26 @@ function Menu({duration, setDuration, end, setEnd, slider, setSlider}) {
 }
 
 function App() {
-	const [duration, setDuration] = useState(durations[0]);
+	const params = new URLSearchParams(window.location.search);
-	const [end, setEnd] = useState(moment());
+	const initialDurationId = params.get('duration');
-	const [slider, setSlider] = useState([0, duration.num]);
+	const initialEndTimestamp = params.get('end');
+	const initialSliderValue = params.get('slider');
+
+	const initialDuration = (initialDurationId && durations[parseInt(initialDurationId, 10)]) ? durations[parseInt(initialDurationId, 10)] : durations[0];
+	const initialEnd = initialEndTimestamp ? moment.unix(initialEndTimestamp) : moment();
+	const initialSlider = initialSliderValue ? initialSliderValue.split(',').map(Number) : [0, initialDuration.num];
+
+	const [duration, setDuration] = useState(initialDuration);
+	const [end, setEnd] = useState(initialEnd);
+	const [slider, setSlider] = useState(initialSlider);
+
+	useEffect(() => {
+		const params = new URLSearchParams();
+		params.set('duration', duration.id);
+		params.set('end', end.unix());
+		params.set('slider', slider.join(','));
+		window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
+	}, [duration, end, slider]);
 
 	return (
 		<div>