Uses url instead of setState for image gallery (#1133)

components/product/gallery.tsx

@@ -2,33 +2,40 @@
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import { GridTileImage } from 'components/grid/tile';
+import { createUrl } from 'lib/utils';
 import Image from 'next/image';
-import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
 
 export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const imageSearchParam = searchParams.get('image');
+  const imageIndex = imageSearchParam ? parseInt(imageSearchParam) : 0;
 
-  function handleNavigate(direction: 'next' | 'previous') {
+  const nextSearchParams = new URLSearchParams(searchParams.toString());
-    if (direction === 'next') {
+  const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
-      setCurrentImageIndex(currentImageIndex + 1 < images.length ? currentImageIndex + 1 : 0);
+  nextSearchParams.set('image', nextImageIndex.toString());
-    } else {
+  const nextUrl = createUrl(pathname, nextSearchParams);
-      setCurrentImageIndex(currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1);
+
-    }
+  const previousSearchParams = new URLSearchParams(searchParams.toString());
-  }
+  const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1;
+  previousSearchParams.set('image', previousImageIndex.toString());
+  const previousUrl = createUrl(pathname, previousSearchParams);
 
   const buttonClassName =
-    'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white';
+    'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
 
   return (
     <div className="mr-8 h-full">
       <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
-        {images[currentImageIndex] && (
+        {images[imageIndex] && (
           <Image
             className="relative h-full w-full object-contain"
             height={600}
             width={600}
-            alt={images[currentImageIndex]?.altText as string}
+            alt={images[imageIndex]?.altText as string}
-            src={images[currentImageIndex]?.src as string}
+            src={images[imageIndex]?.src as string}
             priority={true}
           />
         )}
@@ -36,21 +43,17 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
         {images.length > 1 ? (
           <div className="absolute bottom-[15%] flex w-full justify-center">
             <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
-              <button
+              <Link
                 aria-label="Previous product image"
-                onClick={() => handleNavigate('previous')}
+                href={previousUrl}
                 className={buttonClassName}
               >
                 <ArrowLeftIcon className="h-5" />
-              </button>
+              </Link>
               <div className="mx-1 h-6 w-px bg-neutral-500"></div>
-              <button
+              <Link aria-label="Next product image" href={nextUrl} className={buttonClassName}>
-                aria-label="Next product image"
-                onClick={() => handleNavigate('next')}
-                className={buttonClassName}
-              >
                 <ArrowRightIcon className="h-5" />
-              </button>
+              </Link>
             </div>
           </div>
         ) : null}
@@ -59,13 +62,18 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       {images.length > 1 ? (
         <div className="flex items-center justify-center gap-2 overflow-auto py-1">
           {images.map((image, index) => {
-            const isActive = index === currentImageIndex;
+            const isActive = index === imageIndex;
+            const imageSearchParams = new URLSearchParams(searchParams.toString());
+
+            imageSearchParams.set('image', index.toString());
+
             return (
-              <button
+              <Link
                 aria-label="Enlarge product image"
                 key={image.src}
                 className="h-auto w-20"
-                onClick={() => setCurrentImageIndex(index)}
+                href={createUrl(pathname, imageSearchParams)}
+                scroll={false}
               >
                 <GridTileImage
                   alt={image.altText}
@@ -74,7 +82,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
                   height={600}
                   active={isActive}
                 />
-              </button>
+              </Link>
             );
           })}
         </div>