Store photo gallery sort and filter in URL

package.json

@@ -61,6 +61,7 @@
     "react-div-100vh": "^0.7.0",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
+    "react-use-query-param-string": "^2.0.3",
     "sass": "^1.34.0",
     "tailwindcss": "^2.1.2",
     "use-breakpoint": "^2.0.1"

src/pages/photogallery.js

@@ -7,6 +7,7 @@ import { Picker, Item } from "@adobe/react-spectrum";
 
 import MasonryGallery from "../components/MasonryGallery";
 import KeywordsPicker from "../components/KeywordsPicker";
+import { useQueryParamString } from "react-use-query-param-string";
 
 const SORT_KEYS = {
   hue: ["fields", "imageMeta", "vibrantHue"],
@@ -16,8 +17,9 @@ const SORT_KEYS = {
 };
 
 const GalleryPage = ({ data }) => {
-  const [keyword, _setKeyword] = React.useState(null);
+  const [keyword, _setKeyword] = useQueryParamString("filter", null);
-  const [sortKey, _setSortKey] = React.useState("rating");
+  const [sortKey, _setSortKey] = useQueryParamString("sort", "rating");
+  const [showDebug, _setShowDebug] = useQueryParamString("debug", false);
 
   const setKeyword = React.useCallback(
     (keyword) => {
@@ -81,10 +83,6 @@ const GalleryPage = ({ data }) => {
     [data, sortKey, keyword]
   );
 
-  const showDebug =
-    typeof window !== "undefined" &&
-    window.location.search.includes("debug=true");
-
   return (
     <>
       <Helmet>

yarn.lock

@@ -12282,6 +12282,16 @@ query-string@^6.13.8, query-string@^6.14.1:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
+query-string@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.1.tgz#754620669db978625a90f635f12617c271a088e1"
+  integrity sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
@@ -12471,6 +12481,13 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-use-query-param-string@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-use-query-param-string/-/react-use-query-param-string-2.0.3.tgz#e1b986f9c49c5b9caad7a6a1c3c5a8f0bb841483"
+  integrity sha512-6rAimAH+IL0Ghq9EDs0Ywg0E51eeT1Uo6wY+JbwUEQvLiKfMKY8lsHlEqLtEj6udnVFUA4kEspGf2LBxpiknVw==
+  dependencies:
+    query-string "^7.1.1"
+
 react@^17.0.1:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"