update to use buildUseBoolean

invoke-ai · Sep 19, 2024 · 070ce99 · 070ce99
1 parent 05101f8
commit 070ce99
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 33 deletions.
diff --git a/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts b/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts
@@ -3,7 +3,7 @@ import { settingsSendToCanvasChanged } from 'features/controlLayers/store/canvas
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen';
 import { setActiveTab } from 'features/ui/store/uiSlice';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
 import { useCallback } from 'react';
 
 export type StudioDestination =
@@ -18,6 +18,8 @@ export const useHandleStudioDestination = () => {
   const dispatch = useAppDispatch();
   const imageViewer = useImageViewer();
 
+  const workflowLibraryModal = useWorkflowLibraryModal();
+
   const handleStudioDestination = useCallback(
     (destination: StudioDestination) => {
       switch (destination) {
@@ -39,7 +41,7 @@ export const useHandleStudioDestination = () => {
           break;
         case 'viewAllWorkflows':
           dispatch(setActiveTab('workflows'));
-          $isWorkflowLibraryModalOpen.set(true);
+          workflowLibraryModal.setFalse();
           break;
         case 'viewAllStylePresets':
           dispatch(setActiveTab('canvas'));
@@ -50,7 +52,7 @@ export const useHandleStudioDestination = () => {
           break;
       }
     },
-    [dispatch, imageViewer]
+    [dispatch, imageViewer, workflowLibraryModal]
   );
 
   return handleStudioDestination;

diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@invoke-ai/ui-library';
 import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
 import { memo, useCallback, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
@@ -9,11 +9,9 @@ import { PiUploadSimpleBold } from 'react-icons/pi';
 const UploadWorkflowButton = () => {
   const { t } = useTranslation();
   const resetRef = useRef<() => void>(null);
-  const onClose = useCallback(() => {
-    $isWorkflowLibraryModalOpen.set(false);
-  }, []);
+  const workflowLibraryModal = useWorkflowLibraryModal();
 
-  const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: onClose });
+  const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef, onSuccess: workflowLibraryModal.setFalse });
   const onDropAccepted = useCallback(
     (files: File[]) => {
       if (!files[0]) {

diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
@@ -1,6 +1,6 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
-import { memo, useCallback } from 'react';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFolderOpenBold } from 'react-icons/pi';
 
@@ -9,17 +9,15 @@ import WorkflowLibraryModal from './WorkflowLibraryModal';
 const WorkflowLibraryButton = () => {
   const { t } = useTranslation();
 
-  const onClick = useCallback(() => {
-    $isWorkflowLibraryModalOpen.set(true);
-  }, []);
+  const workflowLibraryModal = useWorkflowLibraryModal();
 
   return (
     <>
       <IconButton
         aria-label={t('workflows.workflowLibrary')}
         tooltip={t('workflows.workflowLibrary')}
         icon={<PiFolderOpenBold />}
-        onClick={onClick}
+        onClick={workflowLibraryModal.setTrue}
         pointerEvents="auto"
       />
       <WorkflowLibraryModal />

diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@@ -5,7 +5,7 @@ import dateFormat, { masks } from 'dateformat';
 import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
 import { useDeleteLibraryWorkflow } from 'features/workflowLibrary/hooks/useDeleteLibraryWorkflow';
 import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { WorkflowRecordListItemDTO } from 'services/api/types';
@@ -17,11 +17,12 @@ type Props = {
 const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
   const { t } = useTranslation();
   const workflowId = useAppSelector(selectWorkflowId);
-  const onClose = useCallback(() => {
-    $isWorkflowLibraryModalOpen.set(false);
-  }, []);
+  const workflowLibraryModal = useWorkflowLibraryModal();
+
   const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow(EMPTY_OBJECT);
-  const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
+  const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({
+    onSuccess: workflowLibraryModal.setFalse,
+  });
 
   const handleDeleteWorkflow = useCallback(() => {
     deleteWorkflow(workflowDTO.workflow_id);

diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
@@ -7,22 +7,17 @@ import {
   ModalHeader,
   ModalOverlay,
 } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
 import WorkflowLibraryContent from 'features/workflowLibrary/components/WorkflowLibraryContent';
-import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
-import { memo, useCallback } from 'react';
+import { useWorkflowLibraryModal } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const WorkflowLibraryModal = () => {
   const { t } = useTranslation();
-  const isWorkflowLibraryModalOpen = useStore($isWorkflowLibraryModalOpen);
-
-  const onClose = useCallback(() => {
-    $isWorkflowLibraryModalOpen.set(false);
-  }, []);
+  const workflowLibraryModal = useWorkflowLibraryModal();
 
   return (
-    <Modal isOpen={isWorkflowLibraryModalOpen} onClose={onClose} isCentered useInert={false}>
+    <Modal isOpen={workflowLibraryModal.isTrue} onClose={workflowLibraryModal.setFalse} isCentered useInert={false}>
       <ModalOverlay />
       <ModalContent w="80%" h="80%" minW="unset" minH="unset" maxW="1200px" maxH="664px">
         <ModalHeader>{t('workflows.workflowLibrary')}</ModalHeader>

diff --git a/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts b/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts
@@ -1,6 +1,3 @@
-import { atom } from 'nanostores';
+import { buildUseBoolean } from 'common/hooks/useBoolean';
 
-/**
- * Tracks whether or not the workflow library modal is open.
- */
-export const $isWorkflowLibraryModalOpen = atom<boolean>(false);
+export const [useWorkflowLibraryModal] = buildUseBoolean(false);