fix(ui): handle selecting images/boards on invocation complete

This commit is contained in:
psychedelicious
2025-06-26 18:15:34 +10:00
parent 175c0147f8
commit 29462e62d2
3 changed files with 8 additions and 31 deletions

View File

@@ -1,16 +1,12 @@
import { isAnyOf } from '@reduxjs/toolkit';
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
import {
selectLastSelectedImage,
selectListImageNamesQueryArgs,
selectSelectedBoardId,
} from 'features/gallery/store/gallerySelectors';
import { selectListImageNamesQueryArgs, selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
import { boardIdSelected, galleryViewChanged, imageSelected } from 'features/gallery/store/gallerySlice';
import { imagesApi } from 'services/api/endpoints/images';
export const addBoardIdSelectedListener = (startAppListening: AppStartListening) => {
startAppListening({
matcher: isAnyOf(boardIdSelected, galleryViewChanged, imagesApi.endpoints.getImageNames.matchFulfilled),
matcher: isAnyOf(boardIdSelected, galleryViewChanged),
effect: async (action, { getState, dispatch, condition, cancelActiveListeners }) => {
// Cancel any in-progress instances of this listener, we don't want to select an image from a previous board
cancelActiveListeners();
@@ -23,16 +19,6 @@ export const addBoardIdSelectedListener = (startAppListening: AppStartListening)
const state = getState();
const board_id = selectSelectedBoardId(state);
const lastSelectedImage = selectLastSelectedImage(state);
if (
imagesApi.endpoints.getImageNames.matchFulfilled(action) &&
lastSelectedImage &&
action.meta.arg.originalArgs.board_id === board_id
) {
// We just loaded image names for the current board, and we have a last selected image
return;
}
const queryArgs = { ...selectListImageNamesQueryArgs(state), board_id };

View File

@@ -39,7 +39,6 @@ import { authToastMiddleware } from 'services/api/authToastMiddleware';
import type { JsonObject } from 'type-fest';
import { STORAGE_PREFIX } from './constants';
import { getDebugLoggerMiddleware } from './middleware/debugLoggerMiddleware';
import { actionSanitizer } from './middleware/devtools/actionSanitizer';
import { actionsDenylist } from './middleware/devtools/actionsDenylist';
import { stateSanitizer } from './middleware/devtools/stateSanitizer';
@@ -177,17 +176,7 @@ export const createStore = (uniqueStoreKey?: string, persist = true) =>
.concat(api.middleware)
.concat(dynamicMiddlewares)
.concat(authToastMiddleware)
.concat(
getDebugLoggerMiddleware({
filter: (action) => {
try {
return (action as UnknownAction).type.startsWith('api');
} catch {
return false;
}
},
})
)
// .concat(getDebugLoggerMiddleware())
.prepend(listenerMiddleware.middleware),
enhancers: (getDefaultEnhancers) => {
const _enhancers = getDefaultEnhancers().concat(autoBatchEnhancer());

View File

@@ -91,7 +91,7 @@ export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO: ImageDTO | nu
$progressImage.set(null);
}, [$progressEvent, $progressImage]);
const withProgress = shouldShowProgressInViewer && progressEvent && progressImage;
const withProgress = shouldShowProgressInViewer && progressImage !== null;
return (
<Flex
@@ -110,9 +110,11 @@ export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO: ImageDTO | nu
)}
{!imageDTO && <NoContentForViewer />}
{withProgress && (
<Flex w="full" h="full" position="absolute" alignItems="center" justifyContent="center" bg="base.900">
<Flex w="full" h="full" position="absolute" alignItems="center" justifyContent="center">
<ProgressImage progressImage={progressImage} />
<ProgressIndicator progressEvent={progressEvent} position="absolute" top={6} right={6} size={8} />
{progressEvent && (
<ProgressIndicator progressEvent={progressEvent} position="absolute" top={6} right={6} size={8} />
)}
</Flex>
)}
<Flex flexDir="column" gap={2} position="absolute" top={0} insetInlineStart={0} alignItems="flex-start">