fix(ui): edge cases when deleting, archiving, updating boards

Need to handle different cases where the selected or auto-add board is hidden - fall back to uncategorized in these situations.

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

@@ -11,36 +11,138 @@ import { boardsApi } from 'services/api/endpoints/boards';
 import { imagesApi } from 'services/api/endpoints/images';
 
 export const addArchivedOrDeletedBoardListener = (startAppListening: AppStartListening) => {
+  /**
+   * The auto-add board shouldn't be set to an archived board or deleted board. When we archive a board, delete
+   * a board, or change a the archived board visibility flag, we may need to reset the auto-add board.
+   */
   startAppListening({
     matcher: isAnyOf(
-      // Updating a board may change its archived status
-      boardsApi.endpoints.updateBoard.matchFulfilled,
       // If a board is deleted, we'll need to reset the auto-add board
       imagesApi.endpoints.deleteBoard.matchFulfilled,
-      imagesApi.endpoints.deleteBoardAndImages.matchFulfilled,
+      imagesApi.endpoints.deleteBoardAndImages.matchFulfilled
-      // When we change the visibility of archived boards, we may need to reset the auto-add board
-      shouldShowArchivedBoardsChanged
     ),
     effect: async (action, { dispatch, getState }) => {
-      /**
-       * The auto-add board shouldn't be set to an archived board or deleted board. When we archive a board, delete
-       * a board, or change a the archived board visibility flag, we may need to reset the auto-add board.
-       */
-
       const state = getState();
       const queryArgs = selectListBoardsQueryArgs(state);
       const queryResult = boardsApi.endpoints.listAllBoards.select(queryArgs)(state);
-      const autoAddBoardId = state.gallery.autoAddBoardId;
+      const { autoAddBoardId, selectedBoardId } = state.gallery;
 
       if (!queryResult.data) {
         return;
       }
 
+      let didReset = false;
+
       if (!queryResult.data.find((board) => board.board_id === autoAddBoardId)) {
+        dispatch(autoAddBoardIdChanged('none'));
+        didReset = true;
+      }
+      if (!queryResult.data.find((board) => board.board_id === selectedBoardId)) {
+        dispatch(boardIdSelected({ boardId: 'none' }));
+        didReset = true;
+      }
+      if (didReset) {
+        dispatch(galleryViewChanged('images'));
+      }
+    },
+  });
+
+  // If we archived a board, it may end up hidden. If it's selected or the auto-add board, we should reset those.
+  startAppListening({
+    matcher: boardsApi.endpoints.updateBoard.matchFulfilled,
+    effect: async (action, { dispatch, getState }) => {
+      const state = getState();
+      const queryArgs = selectListBoardsQueryArgs(state);
+      const queryResult = boardsApi.endpoints.listAllBoards.select(queryArgs)(state);
+      const { shouldShowArchivedBoards } = state.gallery;
+
+      if (!queryResult.data) {
+        return;
+      }
+
+      const wasArchived = action.meta.arg.originalArgs.changes.archived === true;
+
+      if (wasArchived && !shouldShowArchivedBoards) {
         dispatch(autoAddBoardIdChanged('none'));
         dispatch(boardIdSelected({ boardId: 'none' }));
         dispatch(galleryViewChanged('images'));
       }
     },
   });
+
+  // When we hide archived boards, if the selected or the auto-add board is archived, we should reset those.
+  startAppListening({
+    actionCreator: shouldShowArchivedBoardsChanged,
+    effect: async (action, { dispatch, getState }) => {
+      const shouldShowArchivedBoards = action.payload;
+
+      // We only need to take action if we have just hidden archived boards.
+      if (!shouldShowArchivedBoards) {
+        return;
+      }
+
+      const state = getState();
+      const queryArgs = selectListBoardsQueryArgs(state);
+      const queryResult = boardsApi.endpoints.listAllBoards.select(queryArgs)(state);
+      const { selectedBoardId, autoAddBoardId } = state.gallery;
+
+      if (!queryResult.data) {
+        return;
+      }
+
+      let didReset = false;
+
+      // Handle the case where selected board is archived
+      const selectedBoard = queryResult.data.find((b) => b.board_id === selectedBoardId);
+      if (selectedBoard && selectedBoard.archived) {
+        dispatch(boardIdSelected({ boardId: 'none' }));
+        didReset = true;
+      }
+
+      // Handle the case where auto-add board is archived
+      const autoAddBoard = queryResult.data.find((b) => b.board_id === autoAddBoardId);
+      if (autoAddBoard && autoAddBoard.archived) {
+        dispatch(autoAddBoardIdChanged('none'));
+        didReset = true;
+      }
+
+      // When resetting the auto-add board or selected board, we should also reset the view to images
+      if (didReset) {
+        dispatch(galleryViewChanged('images'));
+      }
+    },
+  });
+
+  /**
+   * When listing boards, if the selected or auto-add boards are no longer in the list, we should reset them.
+   */
+  startAppListening({
+    matcher: boardsApi.endpoints.listAllBoards.matchFulfilled,
+    effect: async (action, { dispatch, getState }) => {
+      const boards = action.payload;
+      const state = getState();
+      const { selectedBoardId, autoAddBoardId } = state.gallery;
+
+      let didReset = false;
+
+      // Handle the case where selected board isn't in the list of boards
+      const selectedBoard = boards.find((b) => b.board_id === selectedBoardId);
+      if (selectedBoard && selectedBoard.archived) {
+        dispatch(boardIdSelected({ boardId: 'none' }));
+        didReset = true;
+      }
+
+      // Handle the case where auto-add board isn't in the list of boards
+      const autoAddBoard = boards.find((b) => b.board_id === autoAddBoardId);
+      if (autoAddBoard && autoAddBoard.archived) {
+        dispatch(autoAddBoardIdChanged('none'));
+        didReset = true;
+      }
+
+      // When resetting the auto-add board or selected board, we should also reset the view to images
+      if (didReset) {
+        dispatch(galleryViewChanged('images'));
+      }
+    },
+  });
 };