refactor(ui): move clear queue hook to separate file

invoke-ai · Dec 2, 2024 · db1e247 · db1e247
1 parent ca8313e
commit db1e247
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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 (
     <ConfirmationAlertDialog

diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx
@@ -4,11 +4,11 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
 
-import { useClearQueue } from './ClearQueueConfirmationAlertDialog';
+import { useClearQueueDialog } from './ClearQueueConfirmationAlertDialog';
 
 export const ClearQueueIconButton = memo((_) => {
   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
@@ -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
@@ -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
@@ -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();