Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): improve save/as workflow hook

Browse Source 
Use a persistent updating toast to indicate saving progress.
This commit is contained in:
psychedelicious 2023-12-06 19:27:33 +11:00
parent 5b5a71d40c
commit 283bb73418
2 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
View File

@ -1,9 +1,9 @@
import { useAppToaster } from 'app/components/Toaster';
import { ToastId, useToast } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks';
import { useWorkflow } from 'features/nodes/hooks/useWorkflow';
import { workflowLoaded } from 'features/nodes/store/actions';
import { zWorkflowV2 } from 'features/nodes/types/workflow';
import { useCallback } from 'react';
import { useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import {
useCreateWorkflowMutation,
@ -24,33 +24,40 @@ export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
const workflow = useWorkflow();
const [updateWorkflow, updateWorkflowResult] = useUpdateWorkflowMutation();
const [createWorkflow, createWorkflowResult] = useCreateWorkflowMutation();
const toaster = useAppToaster();
const toast = useToast();
const toastRef = useRef<ToastId | undefined>();
const saveWorkflow = useCallback(async () => {
toastRef.current = toast({
title: t('workflows.savingWorkflow'),
status: 'loading',
duration: null,
isClosable: false,
});
try {
if (workflow.id) {
const data = await updateWorkflow(workflow).unwrap();
const updatedWorkflow = zWorkflowV2.parse(data.workflow);
dispatch(workflowLoaded(updatedWorkflow));
toaster({
title: t('workflows.workflowSaved'),
status: 'success',
});
} else {
const data = await createWorkflow(workflow).unwrap();
const createdWorkflow = zWorkflowV2.parse(data.workflow);
dispatch(workflowLoaded(createdWorkflow));
toaster({
title: t('workflows.workflowSaved'),
status: 'success',
});
}
toast.update(toastRef.current, {
title: t('workflows.workflowSaved'),
status: 'success',
duration: 1000,
isClosable: true,
});
} catch (e) {
toaster({
toast.update(toastRef.current, {
title: t('workflows.problemSavingWorkflow'),
status: 'error',
duration: 1000,
isClosable: true,
});
}
}, [workflow, updateWorkflow, dispatch, toaster, t, createWorkflow]);
}, [workflow, updateWorkflow, dispatch, toast, t, createWorkflow]);
return {
saveWorkflow,
isLoading: updateWorkflowResult.isLoading || createWorkflowResult.isLoading,

23
invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
View File

@ -1,9 +1,9 @@
import { useAppToaster } from 'app/components/Toaster';
import { ToastId, useToast } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks';
import { useWorkflow } from 'features/nodes/hooks/useWorkflow';
import { workflowLoaded } from 'features/nodes/store/actions';
import { zWorkflowV2 } from 'features/nodes/types/workflow';
import { useCallback } from 'react';
import { useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useCreateWorkflowMutation } from 'services/api/endpoints/workflows';
@ -26,9 +26,16 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
const dispatch = useAppDispatch();
const workflow = useWorkflow();
const [createWorkflow, createWorkflowResult] = useCreateWorkflowMutation();
const toaster = useAppToaster();
const toast = useToast();
const toastRef = useRef<ToastId | undefined>();
const saveWorkflowAs = useCallback(
async ({ name: newName, onSuccess, onError }: SaveWorkflowAsArg) => {
toastRef.current = toast({
title: t('workflows.savingWorkflow'),
status: 'loading',
duration: null,
isClosable: false,
});
try {
workflow.id = undefined;
workflow.name = newName;
@ -36,19 +43,23 @@ export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
const createdWorkflow = zWorkflowV2.parse(data.workflow);
dispatch(workflowLoaded(createdWorkflow));
onSuccess && onSuccess();
toaster({
toast.update(toastRef.current, {
title: t('workflows.workflowSaved'),
status: 'success',
duration: 1000,
isClosable: true,
});
} catch (e) {
onError && onError();
toaster({
toast.update(toastRef.current, {
title: t('workflows.problemSavingWorkflow'),
status: 'error',
duration: 1000,
isClosable: true,
});
}
},
[workflow, dispatch, toaster, t, createWorkflow]
[toast, workflow, createWorkflow, dispatch, t]
);
return {
saveWorkflowAs,