From c6f935bf1a79bdec83946b8606aae8e31956c966 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 26 May 2023 16:53:13 +1000
Subject: [PATCH] feat(ui): improve gallery page handling

---
 .../middleware/listenerMiddleware/index.ts    | 14 ++++++++
 .../listeners/receivedResultImagesPage.ts     | 33 +++++++++++++++++++
 .../listeners/receivedUploadImagesPage.ts     | 33 +++++++++++++++++++
 .../web/src/services/thunks/gallery.ts        | 30 ++++++++++++-----
 4 files changed, 102 insertions(+), 8 deletions(-)
 create mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedResultImagesPage.ts
 create mode 100644 invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedUploadImagesPage.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 dae56804af..2996b0f34a 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts
@@ -54,6 +54,14 @@ import {
   addSessionInvokedPendingListener,
   addSessionInvokedRejectedListener,
 } from './listeners/sessionInvoked';
+import {
+  addReceivedResultImagesPageFulfilledListener,
+  addReceivedResultImagesPageRejectedListener,
+} from './listeners/receivedResultImagesPage';
+import {
+  addReceivedUploadImagesPageFulfilledListener,
+  addReceivedUploadImagesPageRejectedListener,
+} from './listeners/receivedUploadImagesPage';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -126,3 +134,9 @@ addSocketUnsubscribedListener();
 addSessionCreatedPendingListener();
 addSessionCreatedFulfilledListener();
 addSessionCreatedRejectedListener();
+
+// Gallery pages
+addReceivedResultImagesPageFulfilledListener();
+addReceivedResultImagesPageRejectedListener();
+addReceivedUploadImagesPageFulfilledListener();
+addReceivedUploadImagesPageRejectedListener();
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedResultImagesPage.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedResultImagesPage.ts
new file mode 100644
index 0000000000..5e4bff4b48
--- /dev/null
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedResultImagesPage.ts
@@ -0,0 +1,33 @@
+import { log } from 'app/logging/useLogger';
+import { startAppListening } from '..';
+import { receivedResultImagesPage } from 'services/thunks/gallery';
+import { serializeError } from 'serialize-error';
+
+const moduleLog = log.child({ namespace: 'gallery' });
+
+export const addReceivedResultImagesPageFulfilledListener = () => {
+  startAppListening({
+    actionCreator: receivedResultImagesPage.fulfilled,
+    effect: (action, { getState, dispatch }) => {
+      const page = action.payload;
+      moduleLog.info(
+        { data: { page } },
+        `Received ${page.items.length} results`
+      );
+    },
+  });
+};
+
+export const addReceivedResultImagesPageRejectedListener = () => {
+  startAppListening({
+    actionCreator: receivedResultImagesPage.rejected,
+    effect: (action, { getState, dispatch }) => {
+      if (action.payload) {
+        moduleLog.debug(
+          { data: { error: serializeError(action.payload.error) } },
+          'Problem receiving results'
+        );
+      }
+    },
+  });
+};
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedUploadImagesPage.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedUploadImagesPage.ts
new file mode 100644
index 0000000000..7b593987e5
--- /dev/null
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/receivedUploadImagesPage.ts
@@ -0,0 +1,33 @@
+import { log } from 'app/logging/useLogger';
+import { startAppListening } from '..';
+import { receivedUploadImagesPage } from 'services/thunks/gallery';
+import { serializeError } from 'serialize-error';
+
+const moduleLog = log.child({ namespace: 'gallery' });
+
+export const addReceivedUploadImagesPageFulfilledListener = () => {
+  startAppListening({
+    actionCreator: receivedUploadImagesPage.fulfilled,
+    effect: (action, { getState, dispatch }) => {
+      const page = action.payload;
+      moduleLog.info(
+        { data: { page } },
+        `Received ${page.items.length} uploads`
+      );
+    },
+  });
+};
+
+export const addReceivedUploadImagesPageRejectedListener = () => {
+  startAppListening({
+    actionCreator: receivedUploadImagesPage.rejected,
+    effect: (action, { getState, dispatch }) => {
+      if (action.payload) {
+        moduleLog.debug(
+          { data: { error: serializeError(action.payload.error) } },
+          'Problem receiving uploads'
+        );
+      }
+    },
+  });
+};
diff --git a/invokeai/frontend/web/src/services/thunks/gallery.ts b/invokeai/frontend/web/src/services/thunks/gallery.ts
index 9e7ee6d5c6..8a6505b6c2 100644
--- a/invokeai/frontend/web/src/services/thunks/gallery.ts
+++ b/invokeai/frontend/web/src/services/thunks/gallery.ts
@@ -1,12 +1,20 @@
 import { log } from 'app/logging/useLogger';
 import { createAppAsyncThunk } from 'app/store/storeUtils';
-import { ImagesService } from 'services/api';
+import { ImagesService, PaginatedResults_ImageDTO_ } from 'services/api';
 
 export const IMAGES_PER_PAGE = 20;
 
-const galleryLog = log.child({ namespace: 'gallery' });
+type ReceivedResultImagesPageThunkConfig = {
+  rejectValue: {
+    error: unknown;
+  };
+};
 
-export const receivedResultImagesPage = createAppAsyncThunk(
+export const receivedResultImagesPage = createAppAsyncThunk<
+  PaginatedResults_ImageDTO_,
+  void,
+  ReceivedResultImagesPageThunkConfig
+>(
   'results/receivedResultImagesPage',
   async (_arg, { getState, rejectWithValue }) => {
     const { page, pages, nextPage, upsertedImageCount } = getState().results;
@@ -22,13 +30,21 @@ export const receivedResultImagesPage = createAppAsyncThunk(
       perPage: IMAGES_PER_PAGE,
     });
 
-    galleryLog.info({ response }, `Received ${response.items.length} results`);
-
     return response;
   }
 );
 
-export const receivedUploadImagesPage = createAppAsyncThunk(
+type ReceivedUploadImagesPageThunkConfig = {
+  rejectValue: {
+    error: unknown;
+  };
+};
+
+export const receivedUploadImagesPage = createAppAsyncThunk<
+  PaginatedResults_ImageDTO_,
+  void,
+  ReceivedUploadImagesPageThunkConfig
+>(
   'uploads/receivedUploadImagesPage',
   async (_arg, { getState, rejectWithValue }) => {
     const { page, pages, nextPage, upsertedImageCount } = getState().uploads;
@@ -44,8 +60,6 @@ export const receivedUploadImagesPage = createAppAsyncThunk(
       perPage: IMAGES_PER_PAGE,
     });
 
-    galleryLog.info({ response }, `Received ${response.items.length} uploads`);
-
     return response;
   }
 );