feat(adminUserForm): add validate array to each field and fix wasteful rerenders

packages/component-faraday-ui/src/ValidatedFormField.js

@@ -4,7 +4,13 @@ import { Field } from 'formik'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
-import { compose, withHandlers, withProps } from 'recompose'
+import {
+  compose,
+  withProps,
+  withHandlers,
+  shouldUpdate,
+  setDisplayName,
+} from 'recompose'
 
 const WrappedComponent = compose(
   withHandlers({
@@ -23,6 +29,11 @@ const WrappedComponent = compose(
     error: hasError && get(errors, name),
     validationStatus: hasError ? 'error' : 'default',
   })),
+  shouldUpdate(
+    (prev, next) =>
+      get(prev, 'field.value') !== get(next, 'field.value') ||
+      get(prev, 'error') !== get(next, 'error'),
+  ),
 )(
   ({
     error,
@@ -70,10 +81,14 @@ ValidatedFormField.propTypes = {
   ]).isRequired,
 }
 
-export default withProps(({ validate }) => ({
-  validateFn: value =>
-    validate.filter(fn => fn(value)).reduce((acc, fn) => fn(value), ''),
-}))(ValidatedFormField)
+export default compose(
+  setDisplayName('ValidatedFormikField'),
+  withProps(({ validate = [] }) => ({
+    validateFn: (value = '') =>
+      validate.reduce((acc, fn) => acc || fn(value), ''),
+  })),
+  shouldUpdate(() => false),
+)(ValidatedFormField)
 
 // #region styles
 const MessageWrapper = styled.div`

packages/component-user/app/components/AdminUserForm.js

@@ -11,13 +11,14 @@ import {
   Text,
   Label,
   IconButton,
+  MenuCountry,
   RowOverrideAlert,
   ItemOverrideAlert,
   ValidatedFormField,
   withRoles,
   withFetching,
   withCountries,
-  MenuCountry,
+  validators,
 } from 'pubsweet-component-faraday-ui'
 
 // #region helpers
@@ -87,7 +88,7 @@ const FormModal = ({
                   component={TextField}
                   inline
                   name="email"
-                  validate={[min3, max6]}
+                  validate={[validators.emailValidator]}
                 />
               </ItemOverrideAlert>
 
@@ -195,10 +196,9 @@ export default compose(
   })),
   withHandlers({
     onSubmit: ({ onSubmit, ...props }) => (values, formProps) => {
-      console.log('the values', values)
-      // if (typeof onSubmit === 'function') {
-      //   onSubmit(values, { ...formProps, ...props })
-      // }
+      if (typeof onSubmit === 'function') {
+        onSubmit(values, { ...formProps, ...props })
+      }
     },
     onClose: ({ onCancel, ...props }) => () => {
       if (typeof onCancel === 'function') {