diff --git a/.yarn/cache/@types-lodash-npm-4.14.191-67a04a969b-ba0d5434e1.zip b/.yarn/cache/@types-lodash-npm-4.14.191-67a04a969b-ba0d5434e1.zip new file mode 100644 index 0000000..a327ae8 Binary files /dev/null and b/.yarn/cache/@types-lodash-npm-4.14.191-67a04a969b-ba0d5434e1.zip differ diff --git a/.yarn/cache/@types-lodash.debounce-npm-4.0.7-efe92bf273-e873b2d77f.zip b/.yarn/cache/@types-lodash.debounce-npm-4.0.7-efe92bf273-e873b2d77f.zip new file mode 100644 index 0000000..3dbd004 Binary files /dev/null and b/.yarn/cache/@types-lodash.debounce-npm-4.0.7-efe92bf273-e873b2d77f.zip differ diff --git a/package.json b/package.json index 55dd6d6..d830a0a 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "gatsby-source-filesystem": "^5.0.0", "gatsby-transformer-sharp": "^5.0.0", "kebab-case": "^1.0.1", + "lodash.debounce": "^4.0.8", "node-iptc": "^1.0.5", "node-vibrant": "3.1.6", "postcss": "^8.4.19", @@ -60,6 +61,7 @@ }, "devDependencies": { "@types/chroma-js": "^2.1.4", + "@types/lodash.debounce": "^4.0.7", "@types/node": "^18.8.3", "@types/ramda": "^0.28.15", "@types/react": "^18.0.21", diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx index af2a935..c96f169 100644 --- a/src/pages/photogallery.tsx +++ b/src/pages/photogallery.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as R from "ramda"; import { graphql, Link, navigate, PageProps } from "gatsby"; import { Helmet } from "react-helmet"; +import debounce from "lodash.debounce"; // import { Picker, Item } from "@adobe/react-spectrum"; import MasonryGallery from "../components/MasonryGallery"; @@ -86,31 +87,26 @@ const GalleryPage = ({ [filterKeyword, hash, showDebug] ); - const removeHash = React.useCallback(() => { - if (!hash.length) { - return; - } - // const url = new URL( - // typeof window !== "undefined" - // ? window.location.href.toString() - // : "https://chuckdries.com/photogallery/" - // ); + const removeHash = React.useCallback( + () => { + if (!hash.length) { + return; + } + navigate( + getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""), + { replace: true, state: { suppressAutoscroll: true } } + ); + // window.removeEventListener("scroll", removeHash); + }, + [hash, sortKey, filterKeyword, showDebug] + ); - // url.hash = ""; - // window.history.replaceState(null, "", url.href.toString()); - navigate(getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug}, ""), { replace: true }) - window.removeEventListener("wheel", removeHash); - window.removeEventListener("touchmove", removeHash); - }, [hash, sortKey, filterKeyword, showDebug]); - - React.useEffect(() => { - window.addEventListener("wheel", removeHash); - window.addEventListener("touchmove", removeHash); - return () => { - window.removeEventListener("wheel", removeHash); - window.removeEventListener("touchmove", removeHash); - } - }, [removeHash]); + // React.useEffect(() => { + // window.addEventListener("scroll", removeHash); + // return () => { + // window.removeEventListener("scroll", removeHash); + // }; + // }, [removeHash]); React.useEffect(() => { // hacky but it works for now @@ -124,12 +120,18 @@ const GalleryPage = ({ console.log("⚠️failed to find hash"); return; } - console.log("scrolling into view manually"); + console.log("scrolling into view manually", el.offsetTop); el.scrollIntoView({ block: hash.startsWith("all") ? "start" : "center", }); + setTimeout(() => { + removeHash(); + }, 500) }); - }, [hash]); + }, [ + hash, + removeHash + ]); const images: GalleryImage[] = React.useMemo(() => { const sort = diff --git a/src/styles/global.css b/src/styles/global.css index 23822b3..b5b94ba 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -92,6 +92,7 @@ body { @apply bg-gray-100; + overflow: auto; /* @apply bg-black; */ /* @apply text-white; */ } diff --git a/src/utils.ts b/src/utils.ts index 025841a..1388419 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useCallback, useRef } from "react"; import { pathOr } from "ramda"; // import kebabCase from 'lodash/kebabCase'; @@ -150,3 +150,29 @@ export function compareDates( const diff = -1 * (date1.getTime() - date2.getTime()); return diff; } + + +/** + * Returns a memoized function that will only call the passed function when it hasn't been called for the wait period + * @param func The function to be called + * @param wait Wait period after function hasn't been called for + * @returns A memoized function that is debounced + */ +export const useDebouncedCallback = (func: Function, wait: number) => { + // Use a ref to store the timeout between renders + // and prevent changes to it from causing re-renders + const timeout = useRef>(); + + return useCallback( + (...args: any) => { + const later = () => { + clearTimeout(timeout.current!); + func(...args); + }; + + clearTimeout(timeout.current ?? undefined); + timeout.current = setTimeout(later, wait); + }, + [func, wait] + ); +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4597e0f..31e9be7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4560,6 +4560,22 @@ __metadata: languageName: node linkType: hard +"@types/lodash.debounce@npm:^4.0.7": + version: 4.0.7 + resolution: "@types/lodash.debounce@npm:4.0.7" + dependencies: + "@types/lodash": "*" + checksum: e873b2d77f89010876baba3437ef826b17221b98948e00b5590828334a481dea1c8f9d28543210e564adc53199584f42c3cb171f8b6c3614fefc0b4e0888679c + languageName: node + linkType: hard + +"@types/lodash@npm:*": + version: 4.14.191 + resolution: "@types/lodash@npm:4.14.191" + checksum: ba0d5434e10690869f32d5ea49095250157cae502f10d57de0a723fd72229ce6c6a4979576f0f13e0aa9fbe3ce2457bfb9fa7d4ec3d6daba56730a51906d1491 + languageName: node + linkType: hard + "@types/lodash@npm:^4.14.53": version: 4.14.170 resolution: "@types/lodash@npm:4.14.170" @@ -6464,6 +6480,7 @@ __metadata: "@react-spectrum/provider": ^3.6.0 "@spectrum-icons/workflow": ^4.0.4 "@types/chroma-js": ^2.1.4 + "@types/lodash.debounce": ^4.0.7 "@types/node": ^18.8.3 "@types/ramda": ^0.28.15 "@types/react": ^18.0.21 @@ -6495,6 +6512,7 @@ __metadata: gatsby-source-filesystem: ^5.0.0 gatsby-transformer-sharp: ^5.0.0 kebab-case: ^1.0.1 + lodash.debounce: ^4.0.8 node-iptc: ^1.0.5 node-vibrant: 3.1.6 postcss: ^8.4.19