From a430527d2fbfeff34b534beb0a6e23ade719a9a0 Mon Sep 17 00:00:00 2001
From: desiprisg <george.desipris.56@gmail.com>
Date: Thu, 7 Nov 2024 11:54:15 +0200
Subject: [PATCH] feat(dashboard): Save immediately when a step is added

---
 .../workflow-editor-provider.tsx              |  8 ++++-
 apps/dashboard/src/hooks/use-form-autosave.ts | 29 +++++++++----------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
index 875f745d395..718a4353c8b 100644
--- a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
+++ b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
@@ -28,7 +28,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/primitives/alert-dialog';
-import { Button, buttonVariants } from '@/components/primitives/button';
+import { buttonVariants } from '@/components/primitives/button';
 import { RiAlertFill } from 'react-icons/ri';
 import { Separator } from '@/components/primitives/separator';
 
@@ -128,6 +128,12 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
       updateWorkflow({ id: workflow._id, workflow: { ...workflow, ...data } as any });
     },
     enabled: !isReadOnly,
+    shouldSaveImmediately: (previousData, data) => {
+      const currentStepsLength = data?.steps?.length ?? 0;
+      const wasStepsLengthAltered = previousData.steps != null && currentStepsLength !== previousData.steps?.length;
+
+      return wasStepsLengthAltered;
+    },
   });
 
   const addStep = useCallback(
diff --git a/apps/dashboard/src/hooks/use-form-autosave.ts b/apps/dashboard/src/hooks/use-form-autosave.ts
index e0361130f17..9e68e0e8a8d 100644
--- a/apps/dashboard/src/hooks/use-form-autosave.ts
+++ b/apps/dashboard/src/hooks/use-form-autosave.ts
@@ -1,21 +1,25 @@
-import { FieldValues, SubmitHandler, UseFormReturn, useWatch } from 'react-hook-form';
+import { DeepPartialSkipArrayKey, FieldValues, SubmitHandler, UseFormReturn, useWatch } from 'react-hook-form';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useDebounce } from './use-debounce';
 import { useDataRef } from './use-data-ref';
-import { useCallback, useRef } from 'react';
+import { useRef } from 'react';
 
 export const useFormAutoSave = <T extends FieldValues>({
   onSubmit,
   form,
   enabled = true,
+  shouldSaveImmediately,
 }: {
   onSubmit: SubmitHandler<T>;
   form: UseFormReturn<T>;
   enabled?: boolean;
+  shouldSaveImmediately?: (
+    watchedData: DeepPartialSkipArrayKey<T>,
+    previousWatchedData: DeepPartialSkipArrayKey<T> | null
+  ) => boolean;
 }) => {
   const onSubmitRef = useDataRef(onSubmit);
   const { formState, control, handleSubmit } = form;
-  const previousStepsLength = useRef<number | null>(null);
 
   const watchedData = useWatch<T>({
     control,
@@ -29,29 +33,22 @@ export const useFormAutoSave = <T extends FieldValues>({
 
   const debouncedSave = useDebounce(save, 500);
 
-  const checkStepsDeleted = useCallback(() => {
-    const currentStepsLength = watchedData.steps?.length ?? 0;
-    const wasStepDeleted = previousStepsLength.current !== null && currentStepsLength < previousStepsLength.current;
-
-    previousStepsLength.current = currentStepsLength;
-
-    return wasStepDeleted;
-  }, [watchedData]);
+  const previousWatchedData = useRef<DeepPartialSkipArrayKey<T> | null>(null);
 
   useDeepCompareEffect(() => {
     if (!formState.isDirty) {
-      // set the previous steps length to the current steps length upon mount
-      previousStepsLength.current = watchedData.steps?.length ?? 0;
-
+      previousWatchedData.current = watchedData;
       return;
     }
 
-    const wasStepsDeleted = checkStepsDeleted();
+    const immediateSave = shouldSaveImmediately?.(watchedData, previousWatchedData.current) || false;
 
-    if (wasStepsDeleted) {
+    if (immediateSave) {
       save();
     } else {
       debouncedSave();
     }
+
+    previousWatchedData.current = watchedData;
   }, [watchedData]);
 };