diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts index c3e789ff6e..a2ac34969f 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts @@ -1,20 +1,20 @@ import { log } from 'app/logging/useLogger'; import { + ASSETS_CATEGORIES, + IMAGE_CATEGORIES, boardIdSelected, + galleryViewChanged, imageSelected, } from 'features/gallery/store/gallerySlice'; -import { - getBoardIdQueryParamForBoard, - getCategoriesQueryParamForBoard, -} from 'features/gallery/store/util'; import { imagesApi } from 'services/api/endpoints/images'; import { startAppListening } from '..'; +import { isAnyOf } from '@reduxjs/toolkit'; const moduleLog = log.child({ namespace: 'boards' }); export const addBoardIdSelectedListener = () => { startAppListening({ - actionCreator: boardIdSelected, + matcher: isAnyOf(boardIdSelected, galleryViewChanged), effect: async ( action, { getState, dispatch, condition, cancelActiveListeners } @@ -22,12 +22,21 @@ export const addBoardIdSelectedListener = () => { // Cancel any in-progress instances of this listener, we don't want to select an image from a previous board cancelActiveListeners(); - const _board_id = action.payload; - // when a board is selected, we need to wait until the board has loaded *some* images, then select the first one + const state = getState(); - const categories = getCategoriesQueryParamForBoard(_board_id); - const board_id = getBoardIdQueryParamForBoard(_board_id); - const queryArgs = { board_id, categories }; + const board_id = boardIdSelected.match(action) + ? action.payload + : state.gallery.selectedBoardId; + + const galleryView = galleryViewChanged.match(action) + ? action.payload + : state.gallery.galleryView; + + // when a board is selected, we need to wait until the board has loaded *some* images, then select the first one + const categories = + galleryView === 'images' ? IMAGE_CATEGORIES : ASSETS_CATEGORIES; + + const queryArgs = { board_id: board_id ?? 'none', categories }; // wait until the board has some images - maybe it already has some from a previous fetch // must use getState() to ensure we do not have stale state