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 2c551c5f2d..abb17d1eec 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts @@ -80,6 +80,8 @@ import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas'; import { addUserInvokedImageToImageListener } from './listeners/userInvokedImageToImage'; import { addUserInvokedNodesListener } from './listeners/userInvokedNodes'; import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage'; +import { addImagesStarredListener } from './listeners/imagesStarred'; +import { addImagesUnstarredListener } from './listeners/imagesUnstarred'; export const listenerMiddleware = createListenerMiddleware(); @@ -121,6 +123,10 @@ addImageDeletedRejectedListener(); addDeleteBoardAndImagesFulfilledListener(); addImageToDeleteSelectedListener(); +// Image starred +addImagesStarredListener(); +addImagesUnstarredListener(); + // User Invoked addUserInvokedCanvasListener(); addUserInvokedNodesListener(); diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesStarred.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesStarred.ts new file mode 100644 index 0000000000..b5e7f5f087 --- /dev/null +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesStarred.ts @@ -0,0 +1,30 @@ +import { imagesApi } from 'services/api/endpoints/images'; +import { startAppListening } from '..'; +import { selectionChanged } from '../../../../../features/gallery/store/gallerySlice'; +import { ImageDTO } from '../../../../../services/api/types'; + +export const addImagesStarredListener = () => { + startAppListening({ + matcher: imagesApi.endpoints.starImages.matchFulfilled, + effect: async (action, { dispatch, getState }) => { + const { images: starredImages } = action.payload; + + const state = getState(); + + const { selection } = state.gallery; + const updatedSelection: ImageDTO[] = []; + + selection.forEach((selectedImageDTO) => { + if (starredImages.includes(selectedImageDTO.image_name)) { + updatedSelection.push({ + ...selectedImageDTO, + starred: true, + }); + } else { + updatedSelection.push(selectedImageDTO); + } + }); + dispatch(selectionChanged(updatedSelection)); + }, + }); +}; diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesUnstarred.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesUnstarred.ts new file mode 100644 index 0000000000..c8fc8c7c8b --- /dev/null +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imagesUnstarred.ts @@ -0,0 +1,30 @@ +import { imagesApi } from 'services/api/endpoints/images'; +import { startAppListening } from '..'; +import { selectionChanged } from '../../../../../features/gallery/store/gallerySlice'; +import { ImageDTO } from '../../../../../services/api/types'; + +export const addImagesUnstarredListener = () => { + startAppListening({ + matcher: imagesApi.endpoints.unstarImages.matchFulfilled, + effect: async (action, { dispatch, getState }) => { + const { images: unstarredImages } = action.payload; + + const state = getState(); + + const { selection } = state.gallery; + const updatedSelection: ImageDTO[] = []; + + selection.forEach((selectedImageDTO) => { + if (unstarredImages.includes(selectedImageDTO.image_name)) { + updatedSelection.push({ + ...selectedImageDTO, + starred: false, + }); + } else { + updatedSelection.push(selectedImageDTO); + } + }); + dispatch(selectionChanged(updatedSelection)); + }, + }); +}; diff --git a/invokeai/frontend/web/src/services/api/endpoints/images.ts b/invokeai/frontend/web/src/services/api/endpoints/images.ts index e697badad2..7c849e45aa 100644 --- a/invokeai/frontend/web/src/services/api/endpoints/images.ts +++ b/invokeai/frontend/web/src/services/api/endpoints/images.ts @@ -391,7 +391,7 @@ export const imagesApi = api.injectEndpoints({ * Star a list of images. */ starImages: build.mutation< - void, + { images: string[] }, { images: ImageDTO[] } >({ query: ({ images }) => ({ @@ -498,7 +498,7 @@ export const imagesApi = api.injectEndpoints({ * Unstar a list of images. */ unstarImages: build.mutation< - void, + { images: string[] }, { images: ImageDTO[] } >({ query: ({ images }) => ({