fix(ui): refetch intermediates count when settings modal open

The `getIntermediatesCount` query is set to `refetchOnMountOrArgsChange`. The intention was for when the settings modal opens (i.e. mounts), the `getIntermediatesCount` query is refetched. But it doesn't work - modals only mount once, there is no lazy rendering for them.

So we have to imperatively refetch, by refetching as we open the modal.

Closes #5639
This commit is contained in:
psychedelicious 2024-02-03 10:50:44 +11:00
parent f972fe9836
commit c2af124622
2 changed files with 11 additions and 4 deletions

View File

@ -81,9 +81,10 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
hasPendingItems,
intermediatesCount,
isLoading: isLoadingClearIntermediates,
refetchIntermediatesCount,
} = useClearIntermediates(shouldShowClearIntermediates);
const { isOpen: isSettingsModalOpen, onOpen: onSettingsModalOpen, onClose: onSettingsModalClose } = useDisclosure();
const { isOpen: isSettingsModalOpen, onOpen: _onSettingsModalOpen, onClose: onSettingsModalClose } = useDisclosure();
const { isOpen: isRefreshModalOpen, onOpen: onRefreshModalOpen, onClose: onRefreshModalClose } = useDisclosure();
@ -99,6 +100,11 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
const clearStorage = useClearStorage();
const handleOpenSettingsModel = useCallback(() => {
refetchIntermediatesCount();
_onSettingsModalOpen();
}, [_onSettingsModalOpen, refetchIntermediatesCount]);
const handleClickResetWebUI = useCallback(() => {
clearStorage();
onSettingsModalClose();
@ -171,7 +177,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
return (
<>
{cloneElement(children, {
onClick: onSettingsModalOpen,
onClick: handleOpenSettingsModel,
})}
<Modal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} size="2xl" isCentered>

View File

@ -12,13 +12,14 @@ export type UseClearIntermediatesReturn = {
clearIntermediates: () => void;
isLoading: boolean;
hasPendingItems: boolean;
refetchIntermediatesCount: () => void;
};
export const useClearIntermediates = (shouldShowClearIntermediates: boolean): UseClearIntermediatesReturn => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { data: intermediatesCount } = useGetIntermediatesCountQuery(undefined, {
const { data: intermediatesCount, refetch: refetchIntermediatesCount } = useGetIntermediatesCountQuery(undefined, {
refetchOnMountOrArgChange: true,
skip: !shouldShowClearIntermediates,
});
@ -58,5 +59,5 @@ export const useClearIntermediates = (shouldShowClearIntermediates: boolean): Us
});
}, [t, _clearIntermediates, dispatch, hasPendingItems]);
return { intermediatesCount, clearIntermediates, isLoading, hasPendingItems };
return { intermediatesCount, clearIntermediates, isLoading, hasPendingItems, refetchIntermediatesCount };
};