SideDrawer Form: fix react-hook-form state calls

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

@@ -12,11 +12,12 @@ import { Values } from "./utils";
 import { useFiretableContext } from "contexts/FiretableContext";
 import { FiretableState } from "hooks/useFiretable";
 
-export interface IAutosaveProps
-  extends Pick<UseFormMethods, "reset" | "formState"> {
+export interface IAutosaveProps {
   control: Control;
   docRef: firebase.default.firestore.DocumentReference;
   row: any;
+  reset: UseFormMethods["reset"];
+  dirtyFields: UseFormMethods["formState"]["dirtyFields"];
 }
 
 const getEditables = (values: Values, tableState?: FiretableState) =>
@@ -35,7 +36,7 @@ export default function Autosave({
   docRef,
   row,
   reset,
-  formState,
+  dirtyFields,
 }: IAutosaveProps) {
   const { tableState, updateCell } = useFiretableContext();
 
@@ -51,11 +52,11 @@ export default function Autosave({
 
     // Get only fields that have had their value updated by the user
     const updatedValues = _pickBy(
-      _pickBy(debouncedValue, (_, key) => formState.dirtyFields[key]),
+      _pickBy(debouncedValue, (_, key) => dirtyFields[key]),
       (value, key) => !_isEqual(value, row[key])
     );
     console.log(debouncedValue, row);
-    console.log(updatedValues);
+    console.log(updatedValues, dirtyFields);
     if (Object.keys(updatedValues).length === 0) return;
 
     // Update the document

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

@@ -5,9 +5,11 @@ import _isEqual from "lodash/isEqual";
 
 import { Values } from "./utils";
 
-export interface IResetProps
-  extends Pick<UseFormMethods, "formState" | "reset" | "getValues"> {
+export interface IResetProps {
   defaultValues: Values;
+  dirtyFields: UseFormMethods["formState"]["dirtyFields"];
+  reset: UseFormMethods["reset"];
+  getValues: UseFormMethods["getValues"];
 }
 
 /**
@@ -15,7 +17,7 @@ export interface IResetProps
  */
 export default function Reset({
   defaultValues,
-  formState,
+  dirtyFields,
   reset,
   getValues,
 }: IResetProps) {
@@ -26,7 +28,7 @@ export default function Reset({
 
       // If the field is dirty, (i.e. the user input a value but it hasn’t been)
       // saved to the db yet, keep its current value and keep it marked as dirty
-      for (const [field, isDirty] of Object.entries(formState.dirtyFields)) {
+      for (const [field, isDirty] of Object.entries(dirtyFields)) {
         if (isDirty) {
           resetValues[field] = currentValues[field];
         }

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

@@ -42,6 +42,7 @@ export default function Form({ values }: IFormProps) {
     mode: "onBlur",
     defaultValues,
   });
+  const { dirtyFields } = formState;
 
   // const { sideDrawerRef } = useFiretableContext();
   // useEffect(() => {
@@ -62,11 +63,11 @@ export default function Form({ values }: IFormProps) {
         docRef={docRef}
         row={values}
         reset={reset}
-        formState={formState}
+        dirtyFields={dirtyFields}
       />
 
       <Reset
-        formState={formState}
+        dirtyFields={dirtyFields}
         reset={reset}
         defaultValues={defaultValues}
         getValues={getValues}