WIP gallery scrolls to image hash

package.json

@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "develop": "gatsby develop",
-    "start": "gatsby develop -H 0.0.0.0",
+    "start": "cross-env NODE_OPTIONS=--no-experimental-fetch gatsby develop -H 0.0.0.0",
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
@@ -63,6 +63,7 @@
     "use-breakpoint": "^2.0.1"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "prettier": "2.3.2"
   }
 }

src/components/GalleryImage/GalleryImage.js

@@ -108,7 +108,7 @@ const GalleryImage = ({ data, pageContext }) => {
           </Link>
           <Link
             className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-            to="/photogallery/"
+            to={`/photogallery/#${image.base}`}
           >
             gallery <span className="bg-gray-300 text-black">esc</span>
           </Link>

src/components/MasonryGallery.js

@@ -16,7 +16,32 @@ const MasonryGallery = ({
     [aspectTargetsByBreakpoint]
   );
 
-  const { breakpoint } = useBreakpoint(breakpoints, "sm");
+  const { breakpoint } = useBreakpoint(breakpoints, "xs");
+  console.log("🚀 ~ file: MasonryGallery.js ~ line 20 ~ breakpoint", breakpoint)
+
+  // const [scrolled, setScrolled] = React.useState(false);
+  const scrollIntoView = React.useCallback(() => {
+    if (!window.location.hash) {
+      return;
+    }
+    const el = document.getElementById(window.location.hash.split("#")[1]);
+    if (!el) {
+      return;
+    }
+    console.log("el", el);
+    el.scrollIntoView();
+    console.log(
+      "🚀 ~ file: MasonryGallery.js ~ line 21 ~ scrollIntoView ~ el.offsetTop",
+      el.offsetTop
+    );
+    if (el.offsetTop > window.innerHeight && window.scrollY === 0) {
+      // queue another
+    }
+  }, []);
+
+  React.useEffect(() => {
+    scrollIntoView();
+  }, [scrollIntoView, breakpoint]);
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images),
@@ -84,6 +109,7 @@ const MasonryGallery = ({
         return (
           <Link
             className="border border-black inline-block"
+            id={image.base}
             key={`${image.base}`}
             state={{ modal: true }}
             style={{

src/pages/photogallery.js

@@ -44,13 +44,13 @@ const GalleryPage = ({ data }) => {
         </h1>
         <div className="mx-auto">
           <MasonryGallery
-            images={images}
             aspectsByBreakpoint={{
               sm: 3.6,
               md: 4,
               lg: 5,
               xl: 6.1,
             }}
+            images={images}
           />
         </div>
       </div>

yarn.lock

@@ -4080,6 +4080,13 @@ cross-env@^6.0.3:
   dependencies:
     cross-spawn "^7.0.0"
 
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 cross-fetch@3.1.4:
   version "3.1.4"
   resolved "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz"
@@ -4087,7 +4094,7 @@ cross-fetch@3.1.4:
   dependencies:
     node-fetch "2.6.1"
 
-cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==