feat: add filter state as url query parameter

There is some uncertainty if browsers will be able to handle the length of the URL with this feature enabled. The range seems to be anywhere from ~2000 to ~4000. I've tested successfully on:
- macOS: Safari, Chrome, Edge
- Windows: Chrome, Edge
- iOS: Chrome, Safari
- Android: Chrome

This may require a config tweak in IIS: https://www.saotn.org/the-length-url-request-exceeds-configured-maxurllength-value/#how-to-increase-the-maximum-maxurllength-setting-in-web-config

Ref #13

src/hooks/useFilterReducer.js

@@ -1,4 +1,6 @@
+import { useEffect } from 'react';
 import { useImmerReducer } from 'use-immer';
+import { JsonParam, useQueryParams, withDefault } from 'use-query-params';
 import { addOrRemove } from '../components/utils';
 import config from '../services/config';
 
@@ -180,6 +182,26 @@ export const initialState = {
   },
 };
 
+// I'm passing in each filter prop as a separate param to try
+// and cut down on the length of the URL
+
+const queryParams = {};
+for (const key in initialState) {
+  queryParams[key] = withDefault(JsonParam, initialState[key]);
+}
 export default function useFilterReducer() {
-  return useImmerReducer(reducer, initialState);
+  const [urlState, setUrlState] = useQueryParams(queryParams, {
+    removeDefaultsFromUrl: true,
+  });
+  const [state, dispatch] = useImmerReducer(
+    reducer,
+    urlState && Object.keys(urlState).length === Object.keys(initialState).length ? urlState : initialState
+  );
+
+  useEffect(() => {
+    setUrlState(state);
+    console.log(`url length: ${document.location.href.length}`);
+  }, [setUrlState, state]);
+
+  return [state, dispatch];
 }