feat(ui): update workflow library modal to use nanostore to track ope…

…n/close

invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx

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

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx

@@ -1,26 +1,29 @@
-import { IconButton, useDisclosure } from '@invoke-ai/ui-library';
-import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
-import { memo } from 'react';
+import { IconButton } from '@invoke-ai/ui-library';
+import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiFolderOpenBold } from 'react-icons/pi';
 
 import WorkflowLibraryModal from './WorkflowLibraryModal';
 
 const WorkflowLibraryButton = () => {
   const { t } = useTranslation();
-  const disclosure = useDisclosure();
+
+  const onClick = useCallback(() => {
+    $isWorkflowLibraryModalOpen.set(true);
+  }, []);
 
   return (
-    <WorkflowLibraryModalContext.Provider value={disclosure}>
+    <>
       <IconButton
         aria-label={t('workflows.workflowLibrary')}
         tooltip={t('workflows.workflowLibrary')}
         icon={<PiFolderOpenBold />}
-        onClick={disclosure.onOpen}
+        onClick={onClick}
         pointerEvents="auto"
       />
       <WorkflowLibraryModal />
-    </WorkflowLibraryModalContext.Provider>
+    </>
   );
 };
 

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx

@@ -3,9 +3,9 @@ import { EMPTY_OBJECT } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import dateFormat, { masks } from 'dateformat';
 import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
-import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
 import { useDeleteLibraryWorkflow } from 'features/workflowLibrary/hooks/useDeleteLibraryWorkflow';
 import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
+import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { WorkflowRecordListItemDTO } from 'services/api/types';
@@ -17,7 +17,9 @@ type Props = {
 const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
   const { t } = useTranslation();
   const workflowId = useAppSelector(selectWorkflowId);
-  const { onClose } = useWorkflowLibraryModalContext();
+  const onClose = useCallback(() => {
+    $isWorkflowLibraryModalOpen.set(false);
+  }, []);
   const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow(EMPTY_OBJECT);
   const { getAndLoadWorkflow, getAndLoadWorkflowResult } = useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
 

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx

@@ -7,16 +7,22 @@ import {
   ModalHeader,
   ModalOverlay,
 } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import WorkflowLibraryContent from 'features/workflowLibrary/components/WorkflowLibraryContent';
-import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
-import { memo } from 'react';
+import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const WorkflowLibraryModal = () => {
   const { t } = useTranslation();
-  const { isOpen, onClose } = useWorkflowLibraryModalContext();
+  const isWorkflowLibraryModalOpen = useStore($isWorkflowLibraryModalOpen);
+
+  const onClose = useCallback(() => {
+    $isWorkflowLibraryModalOpen.set(false);
+  }, []);
+
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered useInert={false}>
+    <Modal isOpen={isWorkflowLibraryModalOpen} onClose={onClose} isCentered useInert={false}>
       <ModalOverlay />
       <ModalContent w="80%" h="80%" minW="unset" minH="unset" maxW="1200px" maxH="664px">
         <ModalHeader>{t('workflows.workflowLibrary')}</ModalHeader>

invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts

@@ -0,0 +1,6 @@
+import { atom } from 'nanostores';
+
+/**
+ * Tracks whether or not the workflow library modal is open.
+ */
+export const $isWorkflowLibraryModalOpen = atom<boolean>(false);