From 59460df41ea84a7cdc1525cae45c77748f46c8a0 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Wed, 18 Sep 2024 10:48:39 -0400 Subject: [PATCH] feat(ui): update workflow library modal to use nanostore to track open/close --- .../components/UploadWorkflowButton.tsx | 8 +++++--- .../components/WorkflowLibraryButton.tsx | 17 ++++++++++------- .../components/WorkflowLibraryListItem.tsx | 6 ++++-- .../components/WorkflowLibraryModal.tsx | 14 ++++++++++---- .../context/WorkflowLibraryModalContext.ts | 4 ---- .../context/useWorkflowLibraryModalContext.ts | 10 ---------- .../store/isWorkflowLibraryModalOpen.ts | 6 ++++++ 7 files changed, 35 insertions(+), 30 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts delete mode 100644 invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts create mode 100644 invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/UploadWorkflowButton.tsx index 17f2b528256..5c42d028be7 100644 --- 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 { 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]) { diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx index 09a484f1e51..ccbbd19a035 100644 --- 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, 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'; @@ -8,19 +8,22 @@ import WorkflowLibraryModal from './WorkflowLibraryModal'; const WorkflowLibraryButton = () => { const { t } = useTranslation(); - const disclosure = useDisclosure(); + + const onClick = useCallback(() => { + $isWorkflowLibraryModalOpen.set(true); + }, []); return ( - + <> } - onClick={disclosure.onOpen} + onClick={onClick} pointerEvents="auto" /> - + ); }; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx index fcb63f07ae4..027b2d445b5 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx +++ b/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 }); diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx index ca3148d9cb1..16aeb693535 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx +++ b/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 ( - + {t('workflows.workflowLibrary')} diff --git a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts deleted file mode 100644 index 1da2fbee9c8..00000000000 --- a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type { UseDisclosureReturn } from '@invoke-ai/ui-library'; -import { createContext } from 'react'; - -export const WorkflowLibraryModalContext = createContext(null); diff --git a/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts b/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts deleted file mode 100644 index 27987834c85..00000000000 --- a/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext'; -import { useContext } from 'react'; - -export const useWorkflowLibraryModalContext = () => { - const context = useContext(WorkflowLibraryModalContext); - if (!context) { - throw new Error('useWorkflowLibraryContext must be used within a WorkflowLibraryContext.Provider'); - } - return context; -}; diff --git a/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts b/invokeai/frontend/web/src/features/workflowLibrary/store/isWorkflowLibraryModalOpen.ts new file mode 100644 index 00000000000..ea0d2487f48 --- /dev/null +++ b/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(false);