SideDrawer form: Reset fields when firestore doc updates

www/src/components/SideDrawer/Form/Autosave.tsx

@@ -6,42 +6,43 @@ import _omitBy from "lodash/omitBy";
 import _isUndefined from "lodash/isUndefined";
 import _reduce from "lodash/reduce";
 
-import { Control, useWatch } from "react-hook-form";
+import { Control, UseFormMethods, useWatch } from "react-hook-form";
 import { Values } from "./utils";
 
 import { useAppContext } from "contexts/AppContext";
 import { useFiretableContext, firetableUser } from "contexts/FiretableContext";
+import { FiretableState } from "hooks/useFiretable";
 
 export interface IAutosaveProps {
   control: Control;
-  defaultValues: Values;
   docRef: firebase.firestore.DocumentReference;
   row: any;
+  reset: UseFormMethods["reset"];
 }
 
+const getEditables = (values: Values, tableState?: FiretableState) =>
+  _pick(
+    values,
+    (tableState &&
+      (Array.isArray(tableState?.columns)
+        ? tableState?.columns
+        : Object.values(tableState?.columns)
+      ).map((c) => c.key)) ??
+      []
+  );
+
 export default function Autosave({
   control,
-  defaultValues,
   docRef,
   row,
+  reset,
 }: IAutosaveProps) {
   const { currentUser } = useAppContext();
   const { tableState } = useFiretableContext();
 
   const values = useWatch({ control });
 
-  const getEditables = (value) =>
-    _pick(
-      value,
-      (tableState &&
-        (Array.isArray(tableState?.columns)
-          ? tableState?.columns
-          : Object.values(tableState?.columns)
-        ).map((c) => c.key)) ??
-        []
-    );
-
-  const [debouncedValue] = useDebounce(getEditables(values), 1000, {
+  const [debouncedValue] = useDebounce(getEditables(values, tableState), 1000, {
     equalityFn: _isEqual,
   });
 
@@ -68,7 +69,10 @@ export default function Autosave({
         _ft_updatedBy,
         updatedBy: _ft_updatedBy,
       })
-      .then(() => console.log("Updated row", row.ref.id, updatedValues));
+      .then(() => {
+        console.log("Updated row", row.ref.id, updatedValues);
+        reset();
+      });
   }, [debouncedValue]);
 
   return null;

www/src/components/SideDrawer/Form/Reset.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import { UseFormMethods } from "react-hook-form";
+
+import { Values } from "./utils";
+
+export interface IResetProps
+  extends Pick<UseFormMethods, "formState" | "reset" | "getValues"> {
+  defaultValues: Values;
+}
+
+export default function Reset({
+  defaultValues,
+  formState,
+  reset,
+  getValues,
+}: IResetProps) {
+  useEffect(() => {
+    const resetValues = { ...defaultValues };
+    for (const [field, isDirty] of Object.entries(formState.dirtyFields)) {
+      if (isDirty) {
+        console.log(field, resetValues[field], getValues(field));
+        resetValues[field] = getValues(field);
+      }
+    }
+    reset(resetValues, { isDirty: true, dirtyFields: true });
+  }, [JSON.stringify(defaultValues)]);
+
+  return null;
+}

www/src/components/SideDrawer/Form/index.tsx

@@ -9,6 +9,7 @@ import { Values } from "./utils";
 import { getFieldProp } from "components/fields";
 import { IFieldConfig } from "components/fields/types";
 import Autosave from "./Autosave";
+import Reset from "./Reset";
 import FieldWrapper from "./FieldWrapper";
 
 import { useAppContext } from "contexts/AppContext";
@@ -39,13 +40,10 @@ export default function Form({ values }: IFormProps) {
   const { ref: docRef, ...rowValues } = values;
   const defaultValues = { ...initialValues, ...rowValues };
 
-  const { control } = useForm({ mode: "onBlur", defaultValues });
-
-  // Update field values when Firestore document updates
-  // useEffect(() => {
-  //   console.log("RESET", defaultValues);
-  //   reset(defaultValues);
-  // }, [reset, JSON.stringify(rowValues)]);
+  const { control, reset, formState, getValues, handleSubmit } = useForm({
+    mode: "onBlur",
+    defaultValues,
+  });
 
   // const { sideDrawerRef } = useFiretableContext();
   // useEffect(() => {
@@ -61,11 +59,12 @@ export default function Form({ values }: IFormProps) {
 
   return (
     <form>
-      <Autosave
-        control={control}
+      <Autosave control={control} docRef={docRef} row={values} reset={reset} />
+      <Reset
+        formState={formState}
+        reset={reset}
         defaultValues={defaultValues}
-        docRef={docRef}
-        row={values}
+        getValues={getValues}
       />
 
       <Grid container spacing={4} direction="column" wrap="nowrap">