From 4545f3209fe0328a90cc165ed0f56ed356e512da Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 21 Jun 2023 20:40:12 +1000
Subject: [PATCH] fix(ui): fix bug with image deletion not removing image from
 gallery

---
 .../middleware/listenerMiddleware/index.ts    |  2 ++
 .../listeners/boardIdSelected.ts              | 28 +++++++++++++++++++
 .../listeners/imageDeleted.ts                 |  4 +--
 .../components/ImageGalleryContent.tsx        | 11 --------
 4 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
index 15fd48fbb2..4ec185bd83 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
@@ -77,6 +77,7 @@ import {
   addImageAddedToBoardFulfilledListener,
   addImageAddedToBoardRejectedListener,
 } from './listeners/imageAddedToBoard';
+import { addBoardIdSelectedListener } from './listeners/boardIdSelected';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -191,3 +192,4 @@ addUpdateImageUrlsOnConnectListener();
 // Boards
 addImageAddedToBoardFulfilledListener();
 addImageAddedToBoardRejectedListener();
+addBoardIdSelectedListener();
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
new file mode 100644
index 0000000000..3889130a9c
--- /dev/null
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts
@@ -0,0 +1,28 @@
+import { log } from 'app/logging/useLogger';
+import { startAppListening } from '..';
+import { boardIdSelected } from 'features/gallery/store/boardSlice';
+import { selectImagesAll } from 'features/gallery/store/imagesSlice';
+import { receivedPageOfImages } from 'services/thunks/image';
+
+const moduleLog = log.child({ namespace: 'boards' });
+
+export const addBoardIdSelectedListener = () => {
+  startAppListening({
+    actionCreator: boardIdSelected,
+    effect: (action, { getState, dispatch }) => {
+      const boardId = action.payload;
+      const state = getState();
+      const { categories } = state.images;
+
+      const images = selectImagesAll(state).filter((i) => {
+        const isInCategory = categories.includes(i.image_category);
+        const isInSelectedBoard = boardId ? i.board_id === boardId : true;
+        return isInCategory && isInSelectedBoard;
+      });
+
+      if (images.length === 0) {
+        dispatch(receivedPageOfImages({ categories, boardId }));
+      }
+    },
+  });
+};
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
index 32bfcbba07..224aa0d2aa 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
@@ -14,7 +14,7 @@ import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { api } from 'services/apiSlice';
 
-const moduleLog = log.child({ namespace: 'addRequestedImageDeletionListener' });
+const moduleLog = log.child({ namespace: 'image' });
 
 /**
  * Called when the user requests an image deletion
@@ -30,7 +30,7 @@ export const addRequestedImageDeletionListener = () => {
       const state = getState();
       const selectedImage = state.gallery.selectedImage;
 
-      if (selectedImage && selectedImage === image_name) {
+      if (selectedImage === image_name) {
         const ids = selectImagesIds(state);
 
         const deletedImageIndex = ids.findIndex(
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index bd69425525..866a68f0b6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -211,17 +211,6 @@ const ImageGalleryContent = () => {
     dispatch(setGalleryView('assets'));
   }, [dispatch]);
 
-  useEffect(() => {
-    if (images.length < 20) {
-      dispatch(
-        receivedPageOfImages({
-          categories,
-          boardId: selectedBoardId,
-        })
-      );
-    }
-  }, [categories, dispatch, images.length, selectedBoardId]);
-
   return (
     <VStack
       sx={{