feat(ui): improve gallery page handling

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();

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'
+        );
+      }
+    },
+  });
+};

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'
+        );
+      }
+    },
+  });
+};

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;
   }
 );