WIP gallery scrolls to image hash

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>