chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Store photo gallery sort and filter in URL

Browse Source
This commit is contained in:
Chuck Dries 2022-07-10 15:31:01 -07:00
parent fd4d148a07
commit 01d2452b12
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"

10
src/pages/photogallery.js
View File

@ -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 [sortKey, _setSortKey] = React.useState("rating");
const [keyword, _setKeyword] = useQueryParamString("filter", null);
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>

17
yarn.lock
View File

@ -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"