From db1e247f20aa5b8cd9ba3e98007b144a96f810d0 Mon Sep 17 00:00:00 2001 From: Riku Date: Thu, 28 Nov 2024 10:30:56 +0100 Subject: [PATCH] refactor(ui): move clear queue hook to separate file --- .../web/src/common/hooks/useGlobalHotkeys.ts | 2 +- .../queue/components/ClearQueueButton.tsx | 4 +- .../ClearQueueConfirmationAlertDialog.tsx | 46 ++--------------- .../queue/components/ClearQueueIconButton.tsx | 4 +- .../components/QueueActionsMenuButton.tsx | 4 +- .../src/features/queue/hooks/useClearQueue.ts | 50 +++++++++++++++++++ .../FloatingParametersPanelButtons.tsx | 4 +- 7 files changed, 64 insertions(+), 50 deletions(-) create mode 100644 invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts diff --git a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts index f2ed9058851..8ea6f887453 100644 --- a/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts +++ b/invokeai/frontend/web/src/common/hooks/useGlobalHotkeys.ts @@ -1,6 +1,6 @@ import { useAppDispatch } from 'app/store/storeHooks'; -import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem'; +import { useClearQueue } from 'features/queue/hooks/useClearQueue'; import { useInvoke } from 'features/queue/hooks/useInvoke'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx index 297eb313e4d..72fc05723e5 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx @@ -4,13 +4,13 @@ import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiTrashSimpleFill } from 'react-icons/pi'; -import { useClearQueue } from './ClearQueueConfirmationAlertDialog'; +import { useClearQueueDialog } from './ClearQueueConfirmationAlertDialog'; type Props = ButtonProps; const ClearQueueButton = (props: Props) => { const { t } = useTranslation(); - const clearQueue = useClearQueue(); + const clearQueue = useClearQueueDialog(); return ( <> diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx index 442dcd6d2c4..d4306e9473d 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueConfirmationAlertDialog.tsx @@ -1,51 +1,15 @@ import { ConfirmationAlertDialog, Text } from '@invoke-ai/ui-library'; -import { useStore } from '@nanostores/react'; -import { useAppDispatch } from 'app/store/storeHooks'; import { useAssertSingleton } from 'common/hooks/useAssertSingleton'; import { buildUseBoolean } from 'common/hooks/useBoolean'; -import { listCursorChanged, listPriorityChanged } from 'features/queue/store/queueSlice'; -import { toast } from 'features/toast/toast'; -import { memo, useCallback, useMemo } from 'react'; +import { useClearQueue } from 'features/queue/hooks/useClearQueue'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useClearQueueMutation, useGetQueueStatusQuery } from 'services/api/endpoints/queue'; -import { $isConnected } from 'services/events/stores'; const [useClearQueueConfirmationAlertDialog] = buildUseBoolean(false); -export const useClearQueue = () => { - const { t } = useTranslation(); - const dispatch = useAppDispatch(); +export const useClearQueueDialog = () => { const dialog = useClearQueueConfirmationAlertDialog(); - const { data: queueStatus } = useGetQueueStatusQuery(); - const isConnected = useStore($isConnected); - const [trigger, { isLoading }] = useClearQueueMutation({ - fixedCacheKey: 'clearQueue', - }); - - const clearQueue = useCallback(async () => { - if (!queueStatus?.queue.total) { - return; - } - - try { - await trigger().unwrap(); - toast({ - id: 'QUEUE_CLEAR_SUCCEEDED', - title: t('queue.clearSucceeded'), - status: 'success', - }); - dispatch(listCursorChanged(undefined)); - dispatch(listPriorityChanged(undefined)); - } catch { - toast({ - id: 'QUEUE_CLEAR_FAILED', - title: t('queue.clearFailed'), - status: 'error', - }); - } - }, [queueStatus?.queue.total, trigger, dispatch, t]); - - const isDisabled = useMemo(() => !isConnected || !queueStatus?.queue.total, [isConnected, queueStatus?.queue.total]); + const { clearQueue, isLoading, isDisabled, queueStatus } = useClearQueue(); return { clearQueue, @@ -61,7 +25,7 @@ export const useClearQueue = () => { export const ClearQueueConfirmationsAlertDialog = memo(() => { useAssertSingleton('ClearQueueConfirmationsAlertDialog'); const { t } = useTranslation(); - const clearQueue = useClearQueue(); + const clearQueue = useClearQueueDialog(); return ( { const { t } = useTranslation(); - const clearQueue = useClearQueue(); + const clearQueue = useClearQueueDialog(); const cancelCurrentQueueItem = useCancelCurrentQueueItem(); // Show the single item clear button when shift is pressed diff --git a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx index e4ed61b5653..e85511368f4 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx @@ -1,7 +1,7 @@ import { IconButton, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { SessionMenuItems } from 'common/components/SessionMenuItems'; -import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog'; +import { useClearQueueDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { QueueCountBadge } from 'features/queue/components/QueueCountBadge'; import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor'; import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor'; @@ -17,7 +17,7 @@ export const QueueActionsMenuButton = memo(() => { const { t } = useTranslation(); const isPauseEnabled = useFeatureStatus('pauseQueue'); const isResumeEnabled = useFeatureStatus('resumeQueue'); - const clearQueue = useClearQueue(); + const clearQueue = useClearQueueDialog(); const { resumeProcessor, isLoading: isLoadingResumeProcessor, diff --git a/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts b/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts new file mode 100644 index 00000000000..5d5f7713f21 --- /dev/null +++ b/invokeai/frontend/web/src/features/queue/hooks/useClearQueue.ts @@ -0,0 +1,50 @@ +import { useStore } from '@nanostores/react'; +import { useAppDispatch } from 'app/store/storeHooks'; +import { listCursorChanged, listPriorityChanged } from 'features/queue/store/queueSlice'; +import { toast } from 'features/toast/toast'; +import { useCallback, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useClearQueueMutation, useGetQueueStatusQuery } from 'services/api/endpoints/queue'; +import { $isConnected } from 'services/events/stores'; + +export const useClearQueue = () => { + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const { data: queueStatus } = useGetQueueStatusQuery(); + const isConnected = useStore($isConnected); + const [trigger, { isLoading }] = useClearQueueMutation({ + fixedCacheKey: 'clearQueue', + }); + + const clearQueue = useCallback(async () => { + if (!queueStatus?.queue.total) { + return; + } + + try { + await trigger().unwrap(); + toast({ + id: 'QUEUE_CLEAR_SUCCEEDED', + title: t('queue.clearSucceeded'), + status: 'success', + }); + dispatch(listCursorChanged(undefined)); + dispatch(listPriorityChanged(undefined)); + } catch { + toast({ + id: 'QUEUE_CLEAR_FAILED', + title: t('queue.clearFailed'), + status: 'error', + }); + } + }, [queueStatus?.queue.total, trigger, dispatch, t]); + + const isDisabled = useMemo(() => !isConnected || !queueStatus?.queue.total, [isConnected, queueStatus?.queue.total]); + + return { + clearQueue, + isLoading, + queueStatus, + isDisabled, + }; +}; diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx index afdddf587c5..bf09f47c34b 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx @@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks'; import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'; import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer'; -import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog'; +import { useClearQueueDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { InvokeButtonTooltip } from 'features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip'; import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem'; import { useInvoke } from 'features/queue/hooks/useInvoke'; @@ -31,7 +31,7 @@ const FloatingSidePanelButtons = (props: Props) => { const shift = useShiftModifier(); const tab = useAppSelector(selectActiveTab); const imageViewer = useImageViewer(); - const clearQueue = useClearQueue(); + const clearQueue = useClearQueueDialog(); const { data: queueStatus } = useGetQueueStatusQuery(); const cancelCurrent = useCancelCurrentQueueItem();