From cbc84274b1ee5779150e8b04c534cf83dd088623 Mon Sep 17 00:00:00 2001
From: Aries <urchinzhou@gmail.com>
Date: Sat, 14 Dec 2024 19:29:24 +0800
Subject: [PATCH] add delete button to image previwer in gallery (#7170)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add delete button to image previwer in gallery

* delete the last image and display the first one

* fix bug - delete the last image

* feat: optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
Co-authored-by: 杨国璇 <ygx@192.168.1.7>
---
 frontend/src/metadata/views/gallery/main.js | 33 ++++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/src/metadata/views/gallery/main.js b/frontend/src/metadata/views/gallery/main.js
index 747b4ea9de..0bb6516bb0 100644
--- a/frontend/src/metadata/views/gallery/main.js
+++ b/frontend/src/metadata/views/gallery/main.js
@@ -275,15 +275,17 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
     setSelectedImages(prev => prev.length < 2 ? [image] : [...prev]);
   }, [imageItems]);
 
-  const moveToPrevImage = () => {
+  const moveToPrevImage = useCallback(() => {
     const imageItemsLength = imageItems.length;
     setImageIndex((prevState) => (prevState + imageItemsLength - 1) % imageItemsLength);
-  };
+    setSelectedImages([imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength]]);
+  }, [imageItems, imageIndex]);
 
-  const moveToNextImage = () => {
+  const moveToNextImage = useCallback(() => {
     const imageItemsLength = imageItems.length;
     setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
-  };
+    setSelectedImages([imageItems[(imageIndex + 1) % imageItemsLength]]);
+  }, [imageItems, imageIndex]);
 
   const handleImageSelection = useCallback((selectedImages) => {
     setSelectedImages(selectedImages);
@@ -340,6 +342,28 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
     }
   }, [handleImageSelection, updateSelectedImage]);
 
+  const deleteImage = useCallback(() => {
+    const image = selectedImages[0];
+    const index = imageItems.findIndex(item => item.id === image.id);
+    onDelete(selectedImages);
+
+    const newImageItems = imageItems.filter(item => item.id !== image.id);
+    let newSelectedImage;
+
+    if (newImageItems.length === 0) {
+      setSelectedImages([]);
+      setIsImagePopupOpen(false);
+      setImageIndex(0);
+    } else {
+      const newIndex = index >= newImageItems.length ? 0 : index;
+      newSelectedImage = newImageItems[newIndex];
+      setImageIndex(newIndex);
+    }
+
+    setSelectedImages(newSelectedImage ? [newSelectedImage] : []);
+    updateSelectedImage(newSelectedImage);
+  }, [selectedImages, imageItems, onDelete, updateSelectedImage]);
+
   return (
     <>
       <div
@@ -385,6 +409,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
             closeImagePopup={closeImagePopup}
             moveToPrevImage={moveToPrevImage}
             moveToNextImage={moveToNextImage}
+            onDeleteImage={deleteImage}
           />
         </ModalPortal>
       )}