From 76b1f241d70e66c43e52f52aeddf83970c0757ac Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 31 May 2024 20:45:10 +1000
Subject: [PATCH] fix(ui): useGalleryNavigation callback typing issue

---
 .../gallery/components/NextPrevImageButtons.tsx      |  6 +++---
 .../features/gallery/hooks/useGalleryNavigation.ts   | 12 ++++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
index 9949fb5bd5..19368455e3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
@@ -14,7 +14,7 @@ const nextPrevButtonStyles: ChakraProps['sx'] = {
 const NextPrevImageButtons = () => {
   const { t } = useTranslation();
 
-  const { handleLeftImage, handleRightImage, isOnFirstImage, isOnLastImage } = useGalleryNavigation();
+  const { prevImage, nextImage, isOnFirstImage, isOnLastImage } = useGalleryNavigation();
 
   const {
     areMoreImagesAvailable,
@@ -30,7 +30,7 @@ const NextPrevImageButtons = () => {
             aria-label={t('accessibility.previousImage')}
             icon={<PiCaretLeftBold size={64} />}
             variant="unstyled"
-            onClick={handleLeftImage}
+            onClick={prevImage}
             boxSize={16}
             sx={nextPrevButtonStyles}
           />
@@ -42,7 +42,7 @@ const NextPrevImageButtons = () => {
             aria-label={t('accessibility.nextImage')}
             icon={<PiCaretRightBold size={64} />}
             variant="unstyled"
-            onClick={handleRightImage}
+            onClick={nextImage}
             boxSize={16}
             sx={nextPrevButtonStyles}
           />
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
index 177d7c7318..ce6b152577 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
@@ -110,6 +110,8 @@ type UseGalleryNavigationReturn = {
   handleRightImage: (alt?: boolean) => void;
   handleUpImage: (alt?: boolean) => void;
   handleDownImage: (alt?: boolean) => void;
+  prevImage: () => void;
+  nextImage: () => void;
   isOnFirstImage: boolean;
   isOnLastImage: boolean;
   areImagesBelowCurrent: boolean;
@@ -202,6 +204,14 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
     [handleNavigation]
   );
 
+  const nextImage = useCallback(() => {
+    handleRightImage();
+  }, [handleRightImage]);
+
+  const prevImage = useCallback(() => {
+    handleLeftImage();
+  }, [handleLeftImage]);
+
   return {
     handleLeftImage,
     handleRightImage,
@@ -210,5 +220,7 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
     isOnFirstImage,
     isOnLastImage,
     areImagesBelowCurrent,
+    nextImage,
+    prevImage,
   };
 };