Add example 11

src/App.js

@@ -22,7 +22,8 @@ import Example07 from './examples/07'
 import Example08 from './examples/08'
 import Example09 from './examples/09'
 import Example10 from './examples/10'
-import Example11 from './examples/11'
+import Example11 from './examples/11/index'
+import Example12 from './examples/12/index'
 
 const examples = [
   { key: 1, Component: Example01 },
@@ -36,6 +37,7 @@ const examples = [
   { key: 9, Component: Example09 },
   { key: 10, Component: Example10 },
   { key: 11, Component: Example11 },
+  { key: 12, Component: Example12 },
 ]
 
 const fallbackUi = () => <h1>Example not found</h1>

src/examples/11/Form/Button.js

@@ -0,0 +1,23 @@
+import { useFormContext } from 'react-hook-form'
+import { Button as MuiButton } from '@material-ui/core'
+
+export const Button = ({
+  children = 'Submit',
+  variant = 'outlined',
+  fullWidth = true,
+  ...props
+}) => {
+  const {
+    formState: { isSubmitting },
+  } = useFormContext()
+
+  return (
+    <MuiButton
+      {...props}
+      disabled={isSubmitting}
+      variant={variant}
+      fullWidth={fullWidth}>
+      {children}
+    </MuiButton>
+  )
+}

src/examples/11/Form/FormProvider.js

@@ -0,0 +1,17 @@
+import {
+  FormProvider as ReactHookFormProvider,
+  useFormContext,
+} from 'react-hook-form'
+import { DevTool } from '@hookform/devtools'
+
+export const FormProvider = ({ children, ...other }) => (
+  <ReactHookFormProvider {...other}>
+    {children}
+    <DevTools />
+  </ReactHookFormProvider>
+)
+
+const DevTools = () => {
+  const { control } = useFormContext()
+  return <DevTool control={control} />
+}

src/examples/11/Form/Input.js

@@ -0,0 +1,36 @@
+import { useFormContext, Controller } from 'react-hook-form'
+import { TextField } from '@material-ui/core'
+import { path } from 'ramda'
+
+export const Input = ({ name, label, defaultValue = '' }) => {
+  const {
+    register,
+    formState: { isSubmitting },
+    errors,
+    control,
+  } = useFormContext()
+
+  const disabled = isSubmitting
+  const helperText = path([name, 'message'], errors)
+  const error = Boolean(helperText)
+
+  return (
+    <Controller
+      as={
+        <TextField
+          name={name}
+          label={label}
+          ref={register}
+          disabled={disabled}
+          helperText={helperText}
+          error={error}
+          variant='filled'
+          fullWidth
+        />
+      }
+      name={name}
+      control={control}
+      defaultValue={defaultValue}
+    />
+  )
+}

src/examples/11/Form/index.js

@@ -0,0 +1,5 @@
+export { Button } from './Button'
+export { Input } from './Input'
+export { FormProvider } from './FormProvider'
+export { useForm } from './useForm'
+export { setAsyncError } from './setAsyncError'

src/examples/11/Form/setAsyncError.js

@@ -0,0 +1,7 @@
+import { compose, forEach, path } from 'ramda'
+
+export const setAsyncError = setErrorCallback =>
+  compose(
+    forEach(({ name, message }) => setErrorCallback(name, { message })),
+    path(['response', 'data', 'errors'])
+  )

src/examples/11/Form/useForm.js

@@ -0,0 +1,32 @@
+import { useCallback } from 'react'
+import { useState } from 'react'
+import { useForm as useRHForm } from 'react-hook-form'
+
+export const useForm = (...args) => {
+  const [formWideError, setFormWideError] = useState('')
+  const { handleSubmit: RHFhandleSubmit, ...formProps } = useRHForm(...args)
+
+  /**
+   * We need this custom submit handler because, typically, we will use a
+   * `mutateAsync` function from `react-query` to submit a form. These functions
+   * will throw any errors (422, 500, for example). Since the error is already
+   * handled by the mutation itself, we need to prevent this error from leaking.
+   *
+   * The original handler is exported as `RHFhandleSubmit`.
+   *
+   * @see {@link https://codesandbox.io/s/blissful-ride-wxxhl?file=/src/App.js}
+   * @see {@link https://codesandbox.io/s/30xos?file=/src/App.js}
+   */
+  const handleSubmit = useCallback(
+    onSubmit => RHFhandleSubmit(data => onSubmit(data).catch(() => {})),
+    [RHFhandleSubmit]
+  )
+
+  return {
+    ...formProps,
+    formWideError,
+    setFormWideError,
+    handleSubmit,
+    RHFhandleSubmit,
+  }
+}

src/examples/11/index.js

@@ -0,0 +1,34 @@
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Grid } from '@material-ui/core'
+import { useCustomMutation } from './useCustomMutation'
+import { schema } from './schema'
+import { FormProvider, useForm, Input, Button, setAsyncError } from './Form'
+
+export default () => {
+  const formProps = useForm({ resolver: yupResolver(schema) })
+  const { handleSubmit, setError } = formProps
+  const { mutateAsync } = useCustomMutation({
+    onError: setAsyncError(setError),
+  })
+
+  return (
+    <FormProvider {...formProps}>
+      <form onSubmit={handleSubmit(mutateAsync)}>
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <h1>Organizing components</h1>
+          </Grid>
+          <Grid item xs={4}>
+            <Input name='firstName' defaultValue='John' label='First name' />
+          </Grid>
+          <Grid item xs={4}>
+            <Input name='lastName' defaultValue='Doe' label='Last name' />
+          </Grid>
+          <Grid item xs={4}>
+            <Button type='submit' />
+          </Grid>
+        </Grid>
+      </form>
+    </FormProvider>
+  )
+}

src/examples/11/schema.js

@@ -0,0 +1,6 @@
+import * as yup from 'yup'
+
+export const schema = yup.object().shape({
+  firstName: yup.string().required(),
+  lastName: yup.string().required(),
+})

src/examples/11/useCustomMutation.js

@@ -0,0 +1,7 @@
+import { instance } from 'api'
+import { useMutation } from 'react-query'
+
+export const useCustomMutation = (options = {}) =>
+  useMutation(async () => await instance.post('/unprocessable-entity'), {
+    ...options,
+  })