rehydrate selectedImage URL when results and uploads are fetched

Author: Mary Hipp

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -2,6 +2,10 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { Image } from 'app/types/invokeai';
 import { imageReceived, thumbnailReceived } from 'services/thunks/image';
+import {
+  receivedResultImagesPage,
+  receivedUploadImagesPage,
+} from '../../../services/thunks/gallery';
 
 type GalleryImageObjectFitType = 'contain' | 'cover';
 
@@ -86,6 +90,30 @@ export const gallerySlice = createSlice({
         state.selectedImage.thumbnail = thumbnailPath;
       }
     });
+    builder.addCase(receivedResultImagesPage.fulfilled, (state, action) => {
+      // rehydrate selectedImage URL when results list comes in
+      // solves case when outdated URL is in local storage
+      if (state.selectedImage) {
+        const selectedImageInResults = action.payload.items.find(
+          (image) => image.image_name === state.selectedImage!.name
+        );
+        if (selectedImageInResults) {
+          state.selectedImage.url = selectedImageInResults.image_url;
+        }
+      }
+    });
+    builder.addCase(receivedUploadImagesPage.fulfilled, (state, action) => {
+      // rehydrate selectedImage URL when results list comes in
+      // solves case when outdated URL is in local storage
+      if (state.selectedImage) {
+        const selectedImageInResults = action.payload.items.find(
+          (image) => image.image_name === state.selectedImage!.name
+        );
+        if (selectedImageInResults) {
+          state.selectedImage.url = selectedImageInResults.image_url;
+        }
+      }
+    });
   },
 });