feat(adminForm): wip: implement custom validated formik fields

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

+import React from 'react'
+import { Field } from 'formik'
+
+import { MenuCountry } from './'
+
+const FormikMenuCountry = ({ name }) => (
+  <Field name={name}>
+    {({ field, form }) =>
+      console.log({ field, form }) || (
+        <MenuCountry
+          onChange={v => {
+            // field.onChange(v)
+            form.setFieldValue(field.name, v)
+          }}
+          value={field.value}
+        />
+      )
+    }
+  </Field>
+)
+
+export default FormikMenuCountry

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

@@ -52,6 +52,7 @@ export { default as ReviewerReportAuthor } from './ReviewerReportAuthor'
 export { default as PasswordValidation } from './PasswordValidation'
 export { default as MenuCountry } from './MenuCountry'
 export { default as ValidatedMenuField } from './ValidatedMenuField'
+export { default as FormikMenuCountry } from './FormikMenuCountry'
 
 export { SubmitRevision } from './submissionRevision'
 

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

@@ -20,6 +20,7 @@ import {
   IconButton,
   RowOverrideAlert,
   ItemOverrideAlert,
+  FormikMenuCountry,
   ValidatedMenuField,
   withRoles,
   withFetching,
@@ -90,7 +91,6 @@ const FormModal = ({
                   component={TextField}
                   inline
                   name="email"
-                  validate={[required]}
                 />
               </ItemOverrideAlert>
               <ItemOverrideAlert ml={1} vertical>
@@ -126,7 +126,7 @@ const FormModal = ({
             </ItemOverrideAlert>
             <ItemOverrideAlert ml={1} vertical>
               <Label>Country</Label>
-              <ValidatedMenuField name="country" options={countries} />
+              <FormikMenuCountry name="country" />
             </ItemOverrideAlert>
           </RowOverrideAlert>
 
@@ -183,9 +183,10 @@ export default compose(
   })),
   withHandlers({
     onSubmit: ({ onSubmit, ...props }) => (values, formProps) => {
-      if (typeof onSubmit === 'function') {
-        onSubmit(values, { ...formProps, ...props })
-      }
+      console.log('the values', values)
+      // if (typeof onSubmit === 'function') {
+      //   onSubmit(values, { ...formProps, ...props })
+      // }
     },
     onClose: ({ onCancel, ...props }) => () => {
       if (typeof onCancel === 'function') {