Convert useState to useReducer in useFieldApi

Author: rvsia

packages/react-form-renderer/src/files/use-field-api.js

@@ -1,4 +1,4 @@
-import { useEffect, useContext, useState, useRef } from 'react';
+import { useEffect, useContext, useRef, useReducer } from 'react';
 import { useField } from 'react-final-form';
 import enhancedOnChange from '../form-renderer/enhanced-on-change';
 import RendererContext from './renderer-context';
@@ -27,12 +27,45 @@ const calculateValidate = (props, validate, component, validatorMapper) => {
   }
 };
 
+const init = ({ props, validate, component, validatorMapper }) => ({
+  initialValue: calculateInitialValue(props),
+  arrayValidator: calculateArrayValidator(props, validate, component, validatorMapper),
+  validate: calculateValidate(props, validate, component, validatorMapper),
+  type: assignSpecialType(component)
+});
+
+const reducer = (state, { type, specialType, validate, arrayValidator, initialValue }) => {
+  switch (type) {
+    case 'setType':
+      return {
+        ...state,
+        type: specialType
+      };
+    case 'setValidators':
+      return {
+        ...state,
+        validate,
+        arrayValidator
+      };
+    case 'setInitialValue':
+      return {
+        ...state,
+        initialValue
+      };
+    default:
+      return state;
+  }
+};
+
 const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...props }) => {
   const { actionMapper, validatorMapper, formOptions } = useContext(RendererContext);
-  const [initialValue, setInitialValue] = useState(() => calculateInitialValue(props));
-  const [arrayValidator, setArrayValidator] = useState(() => calculateArrayValidator(props, validate, component, validatorMapper));
-  const [stateValidate, setValidate] = useState(() => calculateValidate(props, validate, component, validatorMapper));
-  const [type, setType] = useState(() => assignSpecialType(component));
+
+  const [{ type, initialValue, validate: stateValidate, arrayValidator }, dispatch] = useReducer(
+    reducer,
+    { props, validate, component, validatorMapper },
+    init
+  );
+
   const mounted = useRef(false);
 
   const enhancedProps = {
@@ -49,16 +82,19 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
     if (mounted.current) {
       const specialType = assignSpecialType(component);
       if (specialType !== type) {
-        setType(specialType);
+        dispatch({ type: 'setType', specialType });
       }
     }
   }, [component]);
 
   /** Reinitilize array validator/validate */
   useEffect(() => {
     if (mounted.current) {
-      setArrayValidator(calculateArrayValidator(props, validate, component, validatorMapper));
-      setValidate(calculateValidate(props, validate, component, validatorMapper));
+      dispatch({
+        type: 'setValidators',
+        validate: calculateValidate(props, validate, component, validatorMapper),
+        arrayValidator: calculateArrayValidator(props, validate, component, validatorMapper)
+      });
     }
   }, [validate, component, props.dataType]);
 
@@ -67,7 +103,10 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
     if (mounted.current) {
       const newInitialValue = calculateInitialValue(props);
       if (!isEqual(initialValue, newInitialValue)) {
-        setInitialValue(newInitialValue);
+        dispatch({
+          type: 'setInitialValue',
+          initialValue: newInitialValue
+        });
       }
     }
   }, [props.initialValue, props.dataType]);
@@ -95,6 +134,7 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, ...
       mounted.current = true;
 
       return () => {
+        mounted.current = false;
         /**
          * Delete the value from form state when field is inmounted
          */

packages/react-form-renderer/src/tests/form-renderer/use-field-api.test.js

@@ -0,0 +1,161 @@
+import React, { Component } from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+import useFieldApi from '../../files/use-field-api';
+import componentTypes from '../../files/component-types';
+import Form from '../../files/form';
+import RendererContext from '../../files/renderer-context';
+
+describe('useFieldApi', () => {
+  const Catcher = ({ children }) => children;
+
+  const TestField = (props) => {
+    const rest = useFieldApi(props);
+
+    return (
+      <Catcher {...rest}>
+        <input {...rest.input} />
+      </Catcher>
+    );
+  };
+
+  class WrapperComponent extends Component {
+    render() {
+      const { onSubmit, ...props } = this.props;
+      return (
+        <Form onSubmit={onSubmit}>
+          {({ handleSubmit, form: { reset } }) => (
+            <form onSubmit={handleSubmit}>
+              <RendererContext.Provider
+                value={{
+                  formOptions: {},
+                  validatorMapper: { required: () => (value) => (!value ? 'required' : undefined) }
+                }}
+              >
+                <TestField reset={reset} {...props} />
+              </RendererContext.Provider>
+            </form>
+          )}
+        </Form>
+      );
+    }
+  }
+
+  let initialProps;
+  let onSubmit;
+
+  beforeEach(() => {
+    onSubmit = jest.fn();
+    initialProps = {
+      name: 'some-name',
+      component: 'text-field',
+      onSubmit: (values) => onSubmit(values)
+    };
+  });
+
+  it('reloads type when component changes', () => {
+    const wrapper = mount(<WrapperComponent {...initialProps} />);
+
+    expect(wrapper.find(Catcher).props().input.type).toEqual(undefined);
+
+    wrapper.setProps({ component: componentTypes.RADIO });
+    wrapper.update();
+
+    expect(wrapper.find(Catcher).props().input.type).toEqual('radio');
+  });
+
+  it('reloads validator when dataType changes', () => {
+    const wrapper = mount(<WrapperComponent {...initialProps} />);
+
+    wrapper.find('form').simulate('submit');
+    wrapper.update();
+    expect(onSubmit).toHaveBeenCalledWith({});
+    onSubmit.mockClear();
+
+    // validate is not checked in useField, so you have to change key too
+    wrapper.setProps({ dataType: 'number', key: 'somekey' });
+    wrapper.update();
+
+    wrapper.find('input').simulate('change', { target: { value: 'ABC' } });
+    wrapper.update();
+
+    wrapper.find('form').simulate('submit');
+    wrapper.update();
+    expect(onSubmit).not.toHaveBeenCalled();
+    onSubmit.mockClear();
+
+    expect(wrapper.find(Catcher).props().meta.error).toEqual('Values must be number');
+  });
+
+  it('reloads validator when validate changes', async () => {
+    const wrapper = mount(<WrapperComponent {...initialProps} />);
+
+    wrapper.find('form').simulate('submit');
+    wrapper.update();
+    expect(onSubmit).toHaveBeenCalledWith({});
+    onSubmit.mockClear();
+
+    // validate is not checked in useField, so you have to change key too
+    wrapper.setProps({ validate: [{ type: 'required' }], key: 'somekey' });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find(Catcher)
+        .props()
+        .reset();
+    });
+    wrapper.update();
+
+    wrapper.find('form').simulate('submit');
+    wrapper.update();
+    expect(onSubmit).not.toHaveBeenCalled();
+    onSubmit.mockClear();
+
+    expect(wrapper.find(Catcher).props().meta.error).toEqual('required');
+  });
+
+  it('reloads array validator when dataType changes', () => {
+    initialProps = {
+      ...initialProps,
+      component: componentTypes.FIELD_ARRAY
+    };
+
+    const wrapper = mount(<WrapperComponent {...initialProps} />);
+
+    expect(wrapper.find(Catcher).props().arrayValidator).toEqual(undefined);
+
+    wrapper.setProps({ dataType: 'number' });
+    wrapper.update();
+
+    expect(wrapper.find(Catcher).props().arrayValidator).toEqual(expect.any(Function));
+  });
+
+  it('reloads array validator when validate changes', () => {
+    initialProps = {
+      ...initialProps,
+      component: componentTypes.FIELD_ARRAY
+    };
+
+    const wrapper = mount(<WrapperComponent {...initialProps} />);
+
+    expect(wrapper.find(Catcher).props().arrayValidator).toEqual(undefined);
+
+    wrapper.setProps({ validate: [{ type: 'required' }] });
+    wrapper.update();
+
+    expect(wrapper.find(Catcher).props().arrayValidator).toEqual(expect.any(Function));
+  });
+
+  it('reloads initial value', () => {
+    const wrapper = mount(<WrapperComponent {...initialProps} />);
+
+    expect(wrapper.find(Catcher).props().meta.initial).toEqual(undefined);
+
+    wrapper.setProps({ initialValue: 'pepa' });
+    wrapper.update();
+
+    expect(wrapper.find(Catcher).props().meta.initial).toEqual('pepa');
+  });
+});