removed rebuild code

joepuzzo · Dec 17, 2020 · c16b279 · c16b279
1 parent f8ec518
commit c16b279
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 48 deletions.
diff --git a/src/FormController.js b/src/FormController.js
@@ -2,7 +2,7 @@ import ObjectMap from './ObjectMap';
 import { EventEmitter } from 'events';
 import Debug from './debug';
 import defaultFieldMap from './fieldMap';
-import { validateYupSchema, validateAjvSchema, debounce } from './utils';
+import { validateYupSchema, validateAjvSchema } from './utils';
 
 const debug = Debug('informed:Controller' + '\t');
 
@@ -26,11 +26,11 @@ class FormController extends EventEmitter {
     const { ajv, schema, fieldMap } = options;
 
     // Debounced change
-    const change = () => {
-      this.rebuildState();
-      this.emit('change');
-    };
-    this.change = debounce(change, 250);
+    // const change = () => {
+    //   this.rebuildState();
+    //   this.emit('change');
+    // };
+    // this.change = debounce(change, 250);
 
     // Create new ajv instance if passed
     this.ajv = ajv ? new ajv({ allErrors: true }) : null;
@@ -141,14 +141,16 @@ class FormController extends EventEmitter {
     this.notify = this.notify.bind(this);
     this.validating = this.validating.bind(this);
     this.validated = this.validated.bind(this);
-    this.change = this.change.bind(this);
+    // this.change = this.change.bind(this);
+    // this.clear = this.clear.bind(this);
 
     // Updater will be used by fields to update and register
     this.updater = {
       register: this.register,
       deregister: this.deregister,
       getField: this.getField,
       update: this.update,
+      // clear: this.clear,
       fieldMap: this.fieldMap,
       setValue: (fieldId, value, emit = true) => {
         const field = this.fieldsById.get(fieldId);
@@ -422,38 +424,38 @@ class FormController extends EventEmitter {
     };
   }
 
-  rebuildState() {
-    debug('Generating form state');
-
-    // Rebuild values, errors, and touched
-    const values = {};
-    const errors = {};
-    const touched = {};
-
-    this.fieldsById.forEach(field => {
-      if (!field.shadow) {
-        // Get the values from the field
-        const value = field.fieldApi.getValue();
-        const error = field.fieldApi.getError();
-        const t = field.fieldApi.getTouched();
-        // Set the value
-        ObjectMap.set(values, field.field, value);
-        ObjectMap.set(errors, field.field, error);
-        ObjectMap.set(touched, field.field, t);
-        // console.log('SETTING', field.field);
-      }
-    });
-
-    this.state = {
-      ...this.state,
-      values,
-      errors,
-      touched,
-      pristine: this.pristine(),
-      dirty: this.dirty(),
-      invalid: this.invalid()
-    };
-  }
+  // rebuildState() {
+  //   debug('Generating form state');
+
+  //   // Rebuild values, errors, and touched
+  //   const values = {};
+  //   const errors = {};
+  //   const touched = {};
+
+  //   this.fieldsById.forEach(field => {
+  //     if (!field.shadow) {
+  //       // Get the values from the field
+  //       const value = field.fieldApi.getValue();
+  //       const error = field.fieldApi.getError();
+  //       const t = field.fieldApi.getTouched();
+  //       // Set the value
+  //       ObjectMap.set(values, field.field, value);
+  //       ObjectMap.set(errors, field.field, error);
+  //       ObjectMap.set(touched, field.field, t);
+  //       // console.log('SETTING', field.field);
+  //     }
+  //   });
+
+  //   this.state = {
+  //     ...this.state,
+  //     values,
+  //     errors,
+  //     touched,
+  //     pristine: this.pristine(),
+  //     dirty: this.dirty(),
+  //     invalid: this.invalid()
+  //   };
+  // }
 
   getFormApi() {
     return this.formApi;
@@ -930,9 +932,27 @@ class FormController extends EventEmitter {
     this.pulledOut[name] = true;
   }
 
-  update(id, field) {
+  update(id, field, oldName) {
     debug('Update', id, name, field.fieldState.value);
-    this.change();
+    // this.change();
+    // Update the error touched and values of this field
+    const value = field.fieldApi.getValue();
+    const error = field.fieldApi.getError();
+    const t = field.fieldApi.getTouched();
+
+    // Clear the old value out
+    if (oldName) {
+      ObjectMap.delete(this.state.values, oldName);
+      ObjectMap.delete(this.state.errors, oldName);
+      ObjectMap.delete(this.state.touched, oldName);
+    }
+
+    // Set the value
+    ObjectMap.set(this.state.values, field.field, value);
+    ObjectMap.set(this.state.errors, field.field, error);
+    ObjectMap.set(this.state.touched, field.field, t);
+
+    this.emit('change');
   }
 }
 

diff --git a/src/hooks/useField.js b/src/hooks/useField.js
@@ -264,6 +264,7 @@ function useField(fieldProps = {}, userRef) {
   // Create then update refs to props
   const initialValueRef = useRef(initialValue);
   const fieldRef = useRef(field);
+  const prevFieldRef = useRef();
   initialValueRef.current = initialValue;
   fieldRef.current = field;
 
@@ -594,14 +595,17 @@ function useField(fieldProps = {}, userRef) {
   // We want to let the controller know of changes on this field when specific props change
   useEffect(
     () => {
+      const fullField = formApi.getFullField(field);
       if (initialRenerRef.current) {
         initialRenerRef.current = false;
       } else {
-        const fullField = formApi.getFullField(field);
         logger('Update', field, inMultistep);
         fieldObjectRef.current.field = fullField;
-        updater.update(fieldId, fieldObjectRef.current);
+        updater.update(fieldId, fieldObjectRef.current, prevFieldRef.current);
       }
+      return () => {
+        prevFieldRef.current = fullField;
+      };
     },
     [field]
   );

diff --git a/src/hooks/useForm.js b/src/hooks/useForm.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import Debug from '../debug';
-import { debounce } from '../utils';
 import FormController from '../FormController';
 import FormProvider from '../components/FormProvider';
 import FormFields from '../components/FormFields';
@@ -82,8 +81,7 @@ const useForm = ({
     () => {
       const onChangeHandler = () =>
         onChange && onChange(formController.getFormState());
-      const onResetHandler = () => 
-        onReset && onReset();
+      const onResetHandler = () => onReset && onReset();
       const onSubmitHandler = () =>
         onSubmit && onSubmit(formController.getFormState().values);
       const onValueHandler = () =>
@@ -94,7 +92,7 @@ const useForm = ({
 
       // Register for events
       formController.on('change', onChangeHandler);
-      formController.on('reset', onResetHandler)
+      formController.on('reset', onResetHandler);
       formController.on('submit', onSubmitHandler);
       formController.on('value', onValueHandler);
       formController.on('failure', onFailureHandler);
@@ -114,8 +112,10 @@ const useForm = ({
   // Initialize code like constructor but not muhahah
   useState(() => {
     // Update the form state to trigger rerender!
-    const onChangeHandlerRerender = () =>
+    const onChangeHandlerRerender = () => {
+      logger('Setting form state');
       setFormState(formController.getFormState());
+    };
     // const debounced = debounce(onChangeHandlerRerender, 250);
     formController.on('change', onChangeHandlerRerender);
     // Give access to api outside