fix: improve client side logic for formbuilder

Author: tefkah

Diff for: core/app/components/FormBuilder/FormBuilder.tsx

@@ -3,8 +3,7 @@
 import type { DragEndEvent } from "@dnd-kit/core";
 
 import * as React from "react";
-import { useCallback, useReducer, useRef } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useMemo, useReducer, useRef } from "react";
 import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import {
@@ -15,7 +14,8 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useFieldArray, useForm } from "react-hook-form";
 
-import type { Stages } from "db/public";
+import type { FormElementsId, NewFormElements, Stages } from "db/public";
+import { formElementsInitializerSchema } from "db/public";
 import { logger } from "logger";
 import { Form, FormControl, FormField, FormItem } from "ui/form";
 import { useUnsavedChangesWarning } from "ui/hooks";
@@ -35,6 +35,7 @@ import { ElementPanel } from "./ElementPanel";
 import { FormBuilderProvider } from "./FormBuilderContext";
 import { FormElement } from "./FormElement";
 import { formBuilderSchema, isButtonElement } from "./types";
+import { useIsChanged } from "./useIsChanged";
 
 const elementPanelReducer: React.Reducer<PanelState, PanelEvent> = (prevState, event) => {
 	const { eventName } = event;
@@ -107,13 +108,68 @@ type Props = {
 	stages: Stages[];
 };
 
+/**
+ * Only sends the dirty fields to the server
+ */
+const preparePayload = ({
+	formValues,
+	defaultValues,
+}: {
+	defaultValues: Omit<FormBuilderSchema, "id">;
+	formValues: FormBuilderSchema;
+}) => {
+	const { upserts, deletes } = formValues.elements.reduce<{
+		upserts: NewFormElements[];
+		deletes: FormElementsId[];
+	}>(
+		(acc, element, index) => {
+			if (element.deleted) {
+				if (element.elementId) {
+					acc.deletes.push(element.elementId);
+				}
+			} else if (!element.elementId) {
+				// Newly created elements have no elementId
+				acc.upserts.push(
+					formElementsInitializerSchema.parse({ formId: formValues.formId, ...element })
+				);
+			} else if (element.updated) {
+				// check whether the element is reeeaally updated minus the updated field
+				const { updated: _, id: _id, ...elementWithoutUpdated } = element;
+				const { updated, id, ...defaultElement } =
+					defaultValues.elements.find((e) => e.elementId === element.elementId) ?? {};
+
+				if (JSON.stringify(defaultElement) === JSON.stringify(elementWithoutUpdated)) {
+					return acc;
+				}
+
+				acc.upserts.push(
+					formElementsInitializerSchema.parse({
+						...element,
+						formId: formValues.formId,
+						id: element.elementId,
+					})
+				); // TODO: only update changed columns
+			}
+			return acc;
+		},
+		{ upserts: [], deletes: [] }
+	);
+
+	const access = formValues.access !== defaultValues.access ? formValues.access : undefined;
+
+	return {
+		formId: formValues.formId,
+		upserts,
+		deletes,
+		access,
+	};
+};
+
 export function FormBuilder({ pubForm, id, stages }: Props) {
-	const router = useRouter();
-	const pathname = usePathname();
-	const params = useSearchParams();
-	const form = useForm<FormBuilderSchema>({
-		resolver: zodResolver(formBuilderSchema),
-		values: {
+	const [isChanged, setIsChanged] = useIsChanged();
+
+	const defaultValues = useMemo(() => {
+		return {
 			elements: pubForm.elements.map((e) => {
 				// Do not include extra fields here
 				const { slug, id, fieldName, ...rest } = e;
@@ -122,7 +178,12 @@ export function FormBuilder({ pubForm, id, stages }: Props) {
 			}),
 			access: pubForm.access,
 			formId: pubForm.id,
-		},
+		};
+	}, [pubForm]);
+
+	const form = useForm<FormBuilderSchema>({
+		resolver: zodResolver(formBuilderSchema),
+		values: defaultValues,
 	});
 
 	const sidebarRef = useRef(null);
@@ -145,22 +206,25 @@ export function FormBuilder({ pubForm, id, stages }: Props) {
 		control: form.control,
 	});
 
+	const formValues = form.getValues();
+
 	useUnsavedChangesWarning(form.formState.isDirty);
 
+	const payload = useMemo(
+		() => preparePayload({ formValues, defaultValues }),
+		[formValues, defaultValues]
+	);
+
 	React.useEffect(() => {
-		const newParams = new URLSearchParams(params);
-		if (form.formState.isDirty) {
-			newParams.set("unsavedChanges", "true");
-		} else {
-			newParams.delete("unsavedChanges");
-		}
-		router.replace(`${pathname}?${newParams.toString()}`, { scroll: false });
-	}, [form.formState.isDirty, params]);
+		setIsChanged(
+			payload.upserts.length > 0 || payload.deletes.length > 0 || payload.access != null
+		);
+	}, [payload]);
 
 	const runSaveForm = useServerAction(saveForm);
+
 	const onSubmit = async (formData: FormBuilderSchema) => {
-		//TODO: only submit dirty fields
-		const result = await runSaveForm(formData);
+		const result = await runSaveForm(payload);
 		if (didSucceed(result)) {
 			toast({
 				className: "rounded border-emerald-100 bg-emerald-50",
@@ -250,7 +314,7 @@ export function FormBuilder({ pubForm, id, stages }: Props) {
 				dispatch={dispatch}
 				slug={pubForm.slug}
 				stages={stages}
-				isDirty={form.formState.isDirty}
+				isDirty={isChanged}
 			>
 				<Tabs defaultValue="builder" className="pr-[380px]">
 					<div className="px-6">

Diff for: core/app/components/FormBuilder/SaveFormButton.tsx

@@ -3,13 +3,16 @@
 import { Button } from "ui/button";
 import { cn } from "utils";
 
+import { useIsChanged } from "./useIsChanged";
+
 type Props = {
 	form: string;
 	className?: string;
 	disabled?: boolean;
 };
 
 export const SaveFormButton = ({ form, className, disabled }: Props) => {
+	const [isChanged] = useIsChanged();
 	return (
 		<Button
 			variant="default"
@@ -18,7 +21,7 @@ export const SaveFormButton = ({ form, className, disabled }: Props) => {
 			form={form}
 			type="submit"
 			data-testid="save-form-button"
-			disabled={disabled}
+			disabled={!isChanged}
 		>
 			Save
 		</Button>

Diff for: core/app/components/FormBuilder/useIsChanged.tsx

@@ -0,0 +1,13 @@
+import { parseAsBoolean, useQueryState } from "nuqs";
+
+export const useIsChanged = () => {
+	const [isChanged, setIsChanged] = useQueryState(
+		"unsavedChanges",
+		parseAsBoolean.withDefault(false).withOptions({
+			history: "replace",
+			scroll: false,
+		})
+	);
+
+	return [isChanged, setIsChanged] as const;
+};