refactor: make toFlat as utility (#152)

Author: jsun969

src/extension/useExportControlToExtension.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { Control, useFormState, useWatch } from 'react-hook-form';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { MessageData, UpdatePayload } from './types';
-import { proxyToObject } from './utils';
+import { nestToFlat, proxyToObject } from './utils';
 
 const id = nanoid();
 
@@ -33,14 +33,6 @@ export function useExportControlToExtension(control: Control<any>) {
     return () => window.removeEventListener('message', handleInitMessage);
   }, []);
 
-  const toFlat = <V>(obj: object, defaultValue?: V) => {
-    return [...control._names.mount].reduce((perv, name) => {
-      // nested field may be `undefined`
-      perv[name] = _.get(obj, name) || defaultValue;
-      return perv;
-    }, {} as Record<string, V>);
-  };
-
   useDeepCompareEffect(() => {
     if (!isExtensionEnabled) {
       return;
@@ -53,21 +45,29 @@ export function useExportControlToExtension(control: Control<any>) {
       ...formStatus
     } = proxyToObject(formState);
 
-    const formValues = toFlat(nestedFormValues, '');
-    const dirtyFields = toFlat(nestedDirtyFields, false);
-    const touchedFields = toFlat(nestedTouchedFields, false);
+    const flatFieldNames = [...control._names.mount];
+
+    const formValues = nestToFlat(flatFieldNames, nestedFormValues, '');
+    const dirtyFields = nestToFlat(flatFieldNames, nestedDirtyFields, false);
+    const touchedFields = nestToFlat(
+      flatFieldNames,
+      nestedTouchedFields,
+      false,
+    );
+    const flatErrors = nestToFlat<{ type?: string; message?: string }>(
+      flatFieldNames,
+      nestedErrors,
+    );
 
-    const errors = Object.entries(
-      toFlat<{ type: string; message: string }>(nestedErrors),
-    ).reduce((perv, [key, value]) => {
+    const errors = Object.entries(flatErrors).reduce((perv, [key, value]) => {
       perv[key] = {
         type: value?.type as string,
         message: value?.message as string,
       };
       return perv;
     }, {} as Record<string, { type?: string; message?: string }>);
 
-    const nativeFields = [...control._names.mount].reduce((perv, name) => {
+    const nativeFields = flatFieldNames.reduce((perv, name) => {
       perv[name] = !!_.get(control._fields, name)?._f?.ref?.type;
       return perv;
     }, {} as Record<string, boolean>);

src/extension/utils.ts

@@ -1,6 +1,20 @@
+import _ from 'lodash';
+
 export function proxyToObject<T extends Record<string, any>>(proxy: T) {
   return Reflect.ownKeys(proxy).reduce((perv, key) => {
     perv[key as keyof T] = proxy[key as keyof T];
     return perv;
   }, {} as T);
 }
+
+export function nestToFlat<V>(
+  flatKeys: string[],
+  obj: object,
+  defaultValue?: V,
+) {
+  return flatKeys.reduce((perv, name) => {
+    // nested field may be `undefined`
+    perv[name] = _.get(obj, name) || defaultValue;
+    return perv;
+  }, {} as Record<string, V>);
+}