Skip to content

Commit

Permalink
feat(dashboard): Save immediately when a step is added
Browse files Browse the repository at this point in the history
  • Loading branch information
desiprisg committed Nov 7, 2024
1 parent 3573b1d commit a430527
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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(
Expand Down
29 changes: 13 additions & 16 deletions apps/dashboard/src/hooks/use-form-autosave.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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]);
};

0 comments on commit a430527

Please sign in to comment.