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

store sort and filter keys exclusively in url

Browse Source
This commit is contained in:
Chuck Dries 2023-03-08 08:36:42 -08:00
parent 8effec79b1
commit a90ec328f6
2 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/pages/photogallery.tsx
View File

@ -1,6 +1,6 @@
import * as React from "react"; import * as React from "react";
import * as R from "ramda"; import * as R from "ramda";
import { graphql, Link, PageProps } from "gatsby"; import { graphql, Link, navigate, PageProps } from "gatsby";
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
// import { Picker, Item } from "@adobe/react-spectrum"; // import { Picker, Item } from "@adobe/react-spectrum";
@ -47,10 +47,13 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
const hash = location.hash ? location.hash.replace("#", "") : ""; const hash = location.hash ? location.hash.replace("#", "") : "";
const params = new URLSearchParams(location.search);
const filterKeyword = params.get('filter')
const sortKey = params.get('sort') ?? "rating"
console.log("🚀 ~ file: photogallery.tsx:51 ~ GalleryPage ~ params:", params)
const [hashCleared, setHashCleared] = React.useState(false); // eslint-disable-line no-unused-vars const [hashCleared, setHashCleared] = React.useState(false); // eslint-disable-line no-unused-vars
// ^ used just to force a re-render with the cleared hash value (I know, it's a smell for sure) // ^ used just to force a re-render with the cleared hash value (I know, it's a smell for sure)
const [filterKeyword, _setKeyword] = React.useState(null as string | null);
const [sortKey, _setSortKey] = React.useState("rating" as string);
const showDebug = const showDebug =
typeof window !== "undefined" && typeof window !== "undefined" &&
window.location.search.includes("debug=true"); window.location.search.includes("debug=true");
@ -67,14 +70,15 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
// do nothing // do nothing
} }
} }
_setKeyword(newKeyword); // _setKeyword(newKeyword);
window.history.replaceState( // window.history.replaceState(
null, // null,
"", // "",
getGalleryPageUrl({ keyword: newKeyword, sortKey }, hash) // getGalleryPageUrl({ keyword: newKeyword, sortKey }, hash)
); // );
navigate(getGalleryPageUrl({ keyword: newKeyword, sortKey }, hash))
}, },
[_setKeyword, sortKey, hash] [sortKey, hash]
); );
const setSortKey = React.useCallback( const setSortKey = React.useCallback(
@ -86,14 +90,15 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
} catch (e) { } catch (e) {
// do nothing // do nothing
} }
_setSortKey(newSortKey); // _setSortKey(newSortKey);
window.history.pushState( // window.history.pushState(
null, // null,
"", // "",
getGalleryPageUrl({ sortKey: newSortKey, keyword: filterKeyword }, hash) // getGalleryPageUrl({ sortKey: newSortKey, keyword: filterKeyword }, hash)
); // );
navigate(getGalleryPageUrl({ sortKey: newSortKey, keyword: filterKeyword }, hash), { replace: true })
}, },
[_setSortKey, filterKeyword, hash] [filterKeyword, hash]
); );
const removeHash = React.useCallback(() => { const removeHash = React.useCallback(() => {
@ -104,11 +109,16 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
); );
url.hash = ""; url.hash = "";
window.history.pushState(null, "", url.href.toString()); // window.history.pushState(null, "", url.href.toString());
navigate(url.href.toString());
window.removeEventListener("wheel", removeHash); window.removeEventListener("wheel", removeHash);
setHashCleared(true); setHashCleared(true);
}, []); }, []);
React.useEffect(() => {
window.addEventListener("wheel", removeHash);
}, [removeHash]);
const scrollIntoView = React.useCallback(() => { const scrollIntoView = React.useCallback(() => {
if (!hash) { if (!hash) {
return; return;
@ -120,23 +130,22 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
el.scrollIntoView({ el.scrollIntoView({
block: hash.startsWith('all') ? "start" : "center", block: hash.startsWith('all') ? "start" : "center",
}); });
window.addEventListener("wheel", removeHash);
}, [hash, removeHash]); }, [hash, removeHash]);
React.useEffect(() => { React.useEffect(() => {
const url = new URL(window.location.toString()); // const url = new URL(window.location.toString());
const sortKeyFromUrl = url.searchParams.get("sort"); // const sortKeyFromUrl = url.searchParams.get("sort");
if (sortKeyFromUrl) { // if (sortKeyFromUrl) {
_setSortKey(sortKeyFromUrl); // _setSortKey(sortKeyFromUrl);
} else { // } else {
_setSortKey('rating') // _setSortKey('rating')
} // }
const filterKeyFromUrl = url.searchParams.get("filter"); // const filterKeyFromUrl = url.searchParams.get("filter");
if (filterKeyFromUrl) { // if (filterKeyFromUrl) {
_setKeyword(filterKeyFromUrl); // // _setKeyword(filterKeyFromUrl);
} // }
// hacky but it works for now // hacky but it works for now
setTimeout(() => { setTimeout(() => {

4
src/utils.ts
View File

@ -101,7 +101,7 @@ export const getShutterFractionFromExposureTime = (exposureTime: number) => {
interface galleryPageUrlProps { interface galleryPageUrlProps {
keyword: string | null; keyword: string | null;
sortKey: string; sortKey: string | null;
} }
export const getGalleryPageUrl = ( export const getGalleryPageUrl = (
@ -123,7 +123,7 @@ export const getGalleryPageUrl = (
} }
} }
if (sortKey !== undefined) { if (sortKey !== undefined) {
if (sortKey === "rating") { if (sortKey === "rating" || sortKey === null) {
url.searchParams.delete("sort"); url.searchParams.delete("sort");
} else { } else {
url.searchParams.set("sort", sortKey); url.searchParams.set("sort", sortKey);