feat(ui): organise gallery slice

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts

@@ -1,10 +1,10 @@
 import { log } from 'app/logging/useLogger';
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
+import { selectFilteredImages } from 'features/gallery/store/gallerySelectors';
 import {
   imageRemoved,
   imageSelected,
-  selectFilteredImages,
 } from 'features/gallery/store/gallerySlice';
 import {
   imageDeletionConfirmed,

invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx

@@ -8,7 +8,7 @@ import {
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
-import { selectLastSelectedImage } from 'features/gallery/store/gallerySlice';
+import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
 import { isEqual } from 'lodash-es';
 import { memo, useMemo } from 'react';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';

invokeai/frontend/web/src/features/gallery/components/ImageGalleryGrid.tsx

@@ -29,7 +29,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { RootState, stateSelector } from 'app/store/store';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { selectFilteredImages } from 'features/gallery/store/gallerySlice';
+import { selectFilteredImages } from 'features/gallery/store/gallerySelectors';
 import { VirtuosoGrid } from 'react-virtuoso';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 import { receivedPageOfImages } from 'services/api/thunks/image';

invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx

@@ -4,7 +4,6 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   imageSelected,
-  selectFilteredImages,
   selectImagesById,
 } from 'features/gallery/store/gallerySlice';
 import { clamp, isEqual } from 'lodash-es';
@@ -13,6 +12,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 import { receivedPageOfImages } from 'services/api/thunks/image';
+import { selectFilteredImages } from '../store/gallerySelectors';
 
 const nextPrevButtonTriggerAreaStyles: ChakraProps['sx'] = {
   height: '100%',

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

@@ -1,3 +1,49 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { keyBy } from 'lodash-es';
+import { imagesAdapter, initialGalleryState } from './gallerySlice';
 
 export const gallerySelector = (state: RootState) => state.gallery;
+
+export const selectFilteredImagesLocal = createSelector(
+  (state: typeof initialGalleryState) => state,
+  (galleryState) => {
+    const allImages = imagesAdapter.getSelectors().selectAll(galleryState);
+    const { categories, selectedBoardId } = galleryState;
+
+    const filteredImages = allImages.filter((i) => {
+      const isInCategory = categories.includes(i.image_category);
+      const isInSelectedBoard = selectedBoardId
+        ? i.board_id === selectedBoardId
+        : true;
+      return isInCategory && isInSelectedBoard;
+    });
+
+    return filteredImages;
+  }
+);
+
+export const selectFilteredImages = createSelector(
+  (state: RootState) => state,
+  (state) => {
+    return selectFilteredImagesLocal(state.gallery);
+  },
+  defaultSelectorOptions
+);
+
+export const selectFilteredImagesAsObject = createSelector(
+  selectFilteredImages,
+  (filteredImages) => keyBy(filteredImages, 'image_name')
+);
+
+export const selectFilteredImagesIds = createSelector(
+  selectFilteredImages,
+  (filteredImages) => filteredImages.map((i) => i.image_name)
+);
+
+export const selectLastSelectedImage = createSelector(
+  (state: RootState) => state,
+  (state) => state.gallery.selection[state.gallery.selection.length - 1],
+  defaultSelectorOptions
+);

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

@@ -1,19 +1,15 @@
 import type { PayloadAction, Update } from '@reduxjs/toolkit';
-import {
-  createEntityAdapter,
-  createSelector,
-  createSlice,
-} from '@reduxjs/toolkit';
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { dateComparator } from 'common/util/dateComparator';
-import { keyBy, uniq } from 'lodash-es';
+import { uniq } from 'lodash-es';
 import { boardsApi } from 'services/api/endpoints/boards';
 import {
   imageUrlsReceived,
   receivedPageOfImages,
 } from 'services/api/thunks/image';
 import { ImageCategory, ImageDTO } from 'services/api/types';
+import { selectFilteredImagesLocal } from './gallerySelectors';
 
 export const imagesAdapter = createEntityAdapter<ImageDTO>({
   selectId: (image) => image.image_name,
@@ -224,45 +220,3 @@ export const {
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;
-
-export const selectFilteredImagesLocal = createSelector(
-  (state: typeof initialGalleryState) => state,
-  (galleryState) => {
-    const allImages = imagesAdapter.getSelectors().selectAll(galleryState);
-    const { categories, selectedBoardId } = galleryState;
-
-    const filteredImages = allImages.filter((i) => {
-      const isInCategory = categories.includes(i.image_category);
-      const isInSelectedBoard = selectedBoardId
-        ? i.board_id === selectedBoardId
-        : true;
-      return isInCategory && isInSelectedBoard;
-    });
-
-    return filteredImages;
-  }
-);
-
-export const selectFilteredImages = createSelector(
-  (state: RootState) => state,
-  (state) => {
-    return selectFilteredImagesLocal(state.gallery);
-  },
-  defaultSelectorOptions
-);
-
-export const selectFilteredImagesAsObject = createSelector(
-  selectFilteredImages,
-  (filteredImages) => keyBy(filteredImages, 'image_name')
-);
-
-export const selectFilteredImagesIds = createSelector(
-  selectFilteredImages,
-  (filteredImages) => filteredImages.map((i) => i.image_name)
-);
-
-export const selectLastSelectedImage = createSelector(
-  (state: RootState) => state,
-  (state) => state.gallery.selection[state.gallery.selection.length - 1],
-  defaultSelectorOptions
-);