store sort and filterkeyword in urls and history state instead of localstorage

src/components/GalleryImage/GalleryImage.js

@@ -21,6 +21,7 @@ import {
   getHelmetSafeBodyStyle,
   hasName,
   getCanonicalSize,
+  getGalleryPageUrl,
 } from "../../utils";
 import MetadataItem from "./MetadataItem";
 
@@ -35,33 +36,64 @@ const logKeyShortcut = (keyCode) => {
   }
 };
 
-const GalleryImage = ({ data, pageContext }) => {
+const GalleryImage = ({
+  data,
+  location: {
+    state: { sortedImageList, currentIndex, filterKeyword, sortKey },
+  },
+}) => {
   const image = data.file;
   const ar = getAspectRatio(image);
 
   const [zoom, setZoom] = useState(false);
 
+  const nextIndex =
+    sortedImageList && currentIndex < sortedImageList.length
+      ? currentIndex + 1
+      : null;
+  const prevIndex =
+    sortedImageList && currentIndex > 0 ? currentIndex - 1 : null;
+
+  const nextImage = sortedImageList && sortedImageList[nextIndex];
+  const prevImage = sortedImageList && sortedImageList[prevIndex];
+
   React.useEffect(() => {
     const keyListener = (e) => {
       switch (e.code) {
         case "ArrowRight": {
           logKeyShortcut(e.code);
-          if (pageContext.nextImage) {
-            navigate(`/photogallery/${pageContext.nextImage}/`);
+          if (nextImage) {
+            navigate(`/photogallery/${nextImage}/`, {
+              state: {
+                currentIndex: currentIndex + 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              },
+            });
           }
           return;
         }
         case "ArrowLeft": {
           logKeyShortcut(e.code);
-          if (pageContext.prevImage) {
-            navigate(`/photogallery/${pageContext.prevImage}/`);
+          if (prevImage) {
+            navigate(`/photogallery/${prevImage}/`, {
+              state: {
+                currentIndex: currentIndex - 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              },
+            });
           }
           return;
         }
         case "Escape":
         case "KeyG": {
           logKeyShortcut(e.code);
-          navigate(`/photogallery/#${image.base}`);
+          navigate(
+            getGalleryPageUrl({ keyword: filterKeyword, sortKey }, image.base)
+          );
         }
       }
     };
@@ -69,7 +101,15 @@ const GalleryImage = ({ data, pageContext }) => {
     return () => {
       document.removeEventListener("keydown", keyListener);
     };
-  }, [pageContext, image.base]);
+  }, [
+    nextImage,
+    prevImage,
+    image.base,
+    currentIndex,
+    sortedImageList,
+    filterKeyword,
+    sortKey,
+  ]);
 
   const name = getName(image);
   const { meta, dateTaken: dt } = getMeta(image);
@@ -118,22 +158,37 @@ const GalleryImage = ({ data, pageContext }) => {
           </Link>
           <Link
             className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-            to={`/photogallery/#${image.base}`}
+            to={getGalleryPageUrl(
+              { keyword: filterKeyword, sortKey },
+              image.base
+            )}
           >
             gallery <span className="bg-gray-300 text-black">esc</span>
           </Link>
-          {pageContext.prevImage && (
+          {prevImage && (
             <Link
               className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-              to={`/photogallery/${pageContext.prevImage}/`}
+              state={{
+                currentIndex: currentIndex - 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              }}
+              to={`/photogallery/${prevImage}/`}
             >
               previous <span className="bg-gray-300 text-black">&#11104;</span>
             </Link>
           )}
-          {pageContext.nextImage && (
+          {nextImage && (
             <Link
               className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-              to={`/photogallery/${pageContext.nextImage}/`}
+              state={{
+                currentIndex: currentIndex + 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              }}
+              to={`/photogallery/${nextImage}/`}
             >
               next <span className="bg-gray-300 text-black">&#11106;</span>
             </Link>

src/components/MasonryGallery.js

@@ -13,11 +13,12 @@ const MasonryGallery = ({
   aspectsByBreakpoint: aspectTargetsByBreakpoint,
   debugHue,
   debugRating,
+  linkState,
 }) => {
   const breakpoints = React.useMemo(
     () => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
     [aspectTargetsByBreakpoint]
-    );
+  );
 
   const { breakpoint } = useBreakpoint(breakpoints, "sm");
 
@@ -65,81 +66,89 @@ const MasonryGallery = ({
     [aspectRatios, targetAspect]
   );
 
+  const sortedImageList = React.useMemo(
+    () => images.map((image) => image.base),
+    [images]
+  );
+
   let cursor = 0;
   return (
     <>
-    {/* {breakpoint} */}
-    <div
-      className="w-full flex items-center flex-wrap"
-      style={{
-        position: "relative",
-      }}
-    >
-      {images.map((image, i) => {
-        let currentRow = rows[cursor];
-        if (rows[i]) {
-          cursor = i;
-          currentRow = rows[i];
-        }
-        const rowAspectRatioSum = currentRow.aspect;
-        const ar = getAspectRatio(image);
-        let width;
-        let height = `calc(100vw / ${rowAspectRatioSum} - 10px)`;
-        if (rowAspectRatioSum < targetAspect * 0.66) {
-          // incomplete row, render stuff at "ideal" sizes instead of filling width
-          width = `calc(100vw / ${targetAspect / ar})`;
-          height = "unset";
-        } else {
-          const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
-          width = `${widthNumber}%`;
-        }
-        return (
-          <Link
-            className={classNames(
-              "border-4 overflow-hidden",
-              debugHue && "border-8"
-            )}
-            id={image.base}
-            key={`${image.base}`}
-            state={{ modal: true }}
-            style={{
-              height,
-              width,
-              // borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
-              // borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`
-              borderColor: debugHue
-                ? `hsl(
+      <div
+        className="w-full flex items-center flex-wrap"
+        style={{
+          position: "relative",
+        }}
+      >
+        {images.map((image, i) => {
+          let currentRow = rows[cursor];
+          if (rows[i]) {
+            cursor = i;
+            currentRow = rows[i];
+          }
+          const rowAspectRatioSum = currentRow.aspect;
+          const ar = getAspectRatio(image);
+          let width;
+          let height = `calc(100vw / ${rowAspectRatioSum} - 10px)`;
+          if (rowAspectRatioSum < targetAspect * 0.66) {
+            // incomplete row, render stuff at "ideal" sizes instead of filling width
+            width = `calc(100vw / ${targetAspect / ar})`;
+            height = "unset";
+          } else {
+            const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
+            width = `${widthNumber}%`;
+          }
+          return (
+            <Link
+              className={classNames(
+                "border-4 overflow-hidden",
+                debugHue && "border-8"
+              )}
+              id={image.base}
+              key={`${image.base}`}
+              state={{
+                ...linkState,
+                sortedImageList,
+                currentIndex: i,
+              }}
+              style={{
+                height,
+                width,
+                // borderColor: `hsl(${image.fields.imageMeta.dominantHue}, 100%, 50%)`
+                // borderColor: `rgb(${image.fields.imageMeta.vibrant.Vibrant.join(',')})`
+                borderColor: debugHue
+                  ? `hsl(
                     ${image.fields.imageMeta.dominantHue[0]},
                     ${image.fields.imageMeta.dominantHue[1] * 100}%,
                     ${image.fields.imageMeta.dominantHue[2] * 100}%
                   )`
-                : "black",
-            }}
-            to={`/photogallery/${image.base}`}
-          >
-            {debugHue && (
-              <span className="text-white z-20 absolute bg-black">
-                hsl(
-                {image.fields.imageMeta.dominantHue[0]},{" "}
-                {(image.fields.imageMeta.dominantHue[1] * 100).toFixed(2)}%,{" "}
-                {(image.fields.imageMeta.dominantHue[2] * 100).toFixed(2)}% )
-              </span>
-            )}
-            {debugRating && (
-              <span className="text-white z-20 absolute bg-black">
-                rating: {image.fields.imageMeta.meta.Rating}
-              </span>
-            )}
-            <GatsbyImage
-              alt={getName(image)}
-              className="w-full h-full"
-              image={getImage(image)}
-              objectFit="cover"
-            />
-          </Link>
-        );
-      })}
-    </div>
+                  : "black",
+              }}
+              to={`/photogallery/${image.base}`}
+            >
+              {debugHue && (
+                <span className="text-white z-20 absolute bg-black">
+                  hsl(
+                  {image.fields.imageMeta.dominantHue[0]},{" "}
+                  {(image.fields.imageMeta.dominantHue[1] * 100).toFixed(2)}%,{" "}
+                  {(image.fields.imageMeta.dominantHue[2] * 100).toFixed(2)}% )
+                </span>
+              )}
+              {debugRating && (
+                <span className="text-white z-20 absolute bg-black">
+                  rating: {image.fields.imageMeta.meta.Rating}
+                </span>
+              )}
+              <GatsbyImage
+                alt={getName(image)}
+                className="w-full h-full"
+                image={getImage(image)}
+                objectFit="cover"
+              />
+            </Link>
+          );
+        })}
+      </div>
     </>
   );
 };