From 71c9cb96face87b3649ebc7d820b2f70f4bba7bf Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Tue, 1 Aug 2023 20:18:56 -0500
Subject: [PATCH] Uses url instead of `setState` for image gallery (#1133)
---
components/product/gallery.tsx | 60 +++++++++++++++++++---------------
1 file changed, 34 insertions(+), 26 deletions(-)
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 8636a1cc9..99742a917 100644
--- a/components/product/gallery.tsx
+++ b/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') {
- if (direction === 'next') {
- setCurrentImageIndex(currentImageIndex + 1 < images.length ? currentImageIndex + 1 : 0);
- } else {
- setCurrentImageIndex(currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1);
- }
- }
+ const nextSearchParams = new URLSearchParams(searchParams.toString());
+ const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
+ nextSearchParams.set('image', nextImageIndex.toString());
+ const nextUrl = createUrl(pathname, nextSearchParams);
+
+ 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}
- src={images[currentImageIndex]?.src as string}
+ alt={images[imageIndex]?.altText 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
- aria-label="Next product image"
- onClick={() => handleNavigate('next')}
- className={buttonClassName}
- >
+ <Link aria-label="Next product image" href={nextUrl} 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>