Form controller can handle form submit and errors

api/users.js

@@ -17,6 +17,19 @@ router.post('/', parseJSON, registerValidation, async (req, res) => {
     req.body.password
   )
 
+  if(!user){
+    return res.status(422).json({errors: [{
+      param: 'email',
+      msg: 'Unable to complete registration'
+    },{
+      param: 'password',
+      msg: ' '
+    },{
+      param: 'password2',
+      msg: ' '
+    }]})
+  }
+
   const session = await db.session.create(
     user.uuid,
     req.ip,

components/form/form.js

@@ -1,16 +1,32 @@
 // TODO: Enable exportDefaultFrom in Babel syntax
 import React, { useReducer } from 'react'
+import axios from 'axios'
 
 import styles from './styles.module.css'
 export const Input = require('./input.js').default
 export const Button = require('./button.js').default
 
-export const FormController =  function FormController({errors, errorDispatch, children, onSubmit}){
+const errorReducer = (errors, action) => {
-  const initialState = {
+  switch (action.type) {
-    fields: {}
+    case 'set_errors':
+      const newErrors = {}
+      for(const field of action.errors)
+        newErrors[field.param] = field.msg
+      return newErrors
+
+    case 'clear_error':
+      console.log('clear_error', action)
+      return {
+        ...errors,
+        [action.field]: undefined
       }
 
-  const reducer = (state, action)=>{
+    default:
+      return errors
+  }
+}
+
+const formReducer = (state, action)=>{
   let fields = {...state.fields}
   const prevField = state.fields[action.name]
 
@@ -53,6 +69,12 @@ export const FormController =  function FormController({errors, errorDispatch, c
   }
 
   return {fields}
+}
+
+
+export const FormController =  function FormController({children, url, method = 'POST', afterSubmit = ()=>null}){
+  const initialState = {
+    fields: {}
   }
 
   // Update initial state
@@ -68,26 +90,41 @@ export const FormController =  function FormController({errors, errorDispatch, c
     }
   })
 
-  // Create reducer
+  // Create reducers
-  const [state, dispatch] = useReducer(reducer, initialState)
+  const [state, dispatch] = useReducer(formReducer, initialState)
+  const [errors, errorDispatch] = useReducer(errorReducer, {})
 
-  const submitForm = ev=>{
+  // Handle submitting form
+  const handleSubmit = async (ev) => {
     if(ev) ev.preventDefault();
 
-    const fields = {}
+    const data = {}
     for(const name in state.fields){
       const field = state.fields[name]
-      fields[field.name] = field.value
+      data[field.name] = field.value
+    }
+
+    if(url)
+      try {
+        await axios({ method, url, data })
+      } catch (err) {
+        if(!err.response || err.response.status !== 422) throw err;
+
+        return errorDispatch({
+          type: 'set_errors',
+          errors: err.response.data.errors
+        })
       }
 
-    onSubmit(fields)
+    afterSubmit(data)
   }
 
+  // Map children
   const _children = React.Children.map(children, child => {
     if(child.type === Button && child.props.type.toLowerCase() === 'submit')
       return React.cloneElement(child, {
         enabled: !Object.values(state.fields).some(field=>!field.isValid),
-        onClick: submitForm
+        onClick: handleSubmit
       })
 
     const {name} = child.props;
@@ -102,7 +139,7 @@ export const FormController =  function FormController({errors, errorDispatch, c
   })
 
   return (
-    <form onSubmit={onSubmit} className={styles.formContainer}>
+    <form autocomplete="off" onSubmit={handleSubmit} className={styles.formContainer}>
       {_children}
     </form>
   )

hooks/errorReducer.js

@@ -1,25 +0,0 @@
-import {useReducer} from 'react'
-
-const errorReducer = (errors, action) => {
-  switch (action.type) {
-    case 'set_errors':
-      const newErrors = {}
-      for(const field of action.errors)
-        newErrors[field.param] = field.msg
-      return newErrors
-
-    case 'clear_error':
-      console.log('clear_error', action)
-      return {
-        ...errors,
-        [action.field]: undefined
-      }
-
-    default:
-      return errors
-  }
-}
-
-export default function useErrorReducer(initialState = {}){
-  return useReducer( errorReducer )
-}

pages/_app.js

@@ -15,7 +15,7 @@ function Layout({ Component, pageProps, user }){
   return (
     <>
       <Header user={user} />
-      <main><Component {...pageProps} /></main>
+      <main><Component {...{user, ...pageProps}} /></main>
       <Footer/>
     </>
   )

pages/login.js

@@ -1,31 +1,17 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import Link from 'next/link'
 import Router from 'next/router'
 import isEmail from 'validator/lib/isEmail'
-import axios from 'axios'
 
 import {FormController, Input, Button} from '~/components/form'
-import useErrorReducer from '../hooks/errorReducer'
 
-export default function Login(){
+export default function Login({user}){
-  const [errors, dispatch] = useErrorReducer()
+  useEffect(()=>{
-
+    if(user) Router.push('/account')
-  const submit = async (values)=>{
+  }, [user])
-    try {
-      await axios.post(`/api/auth`, values)
-      Router.push('/')
-    } catch (err) {
-      if(!err.response || err.response.status !== 422) throw err;
-
-      dispatch({
-        type: 'set_errors',
-        errors: err.response.data.errors
-      })
-    }
-  }
 
   return (
-    <FormController errors={errors} errorDispatch={dispatch} onSubmit={submit}>
+    <FormController url="/api/auth" afterSubmit={()=>Router.push('/account')}>
       <h1>Login</h1>
       <Input label="Email" type="text" name="email" validate={value=>isEmail(value)} hint="Enter a valid email address" />
       <Input label="Password" type="password" name="password" validate={value=>(value.length >= 8)} hint="Password must be at least 8 characters long" />

pages/register.js

@@ -1,30 +1,17 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import Link from 'next/link'
+import Router from 'next/router'
 import isEmail from 'validator/lib/isEmail'
-import axios from 'axios'
 
 import {FormController, Input, Button} from '~/components/form'
-import useErrorReducer from '../hooks/errorReducer'
 
-export default function Register(){
+export default function Register({user}){
-  const [errors, dispatch] = useErrorReducer()
+  useEffect(()=>{
-
+    if(user) Router.push('/account')
-  const submit = async (values)=>{
+  }, [user])
-    try {
-      const {data} = await axios.post(`/api/users`, values)
-      console.log(data)
-    } catch (err) {
-      if(!err.response || err.response.status !== 422) throw err;
-
-      dispatch({
-        type: 'set_errors',
-        errors: err.response.data.errors
-      })
-    }
-  }
 
   return (
-    <FormController errors={errors} errorDispatch={dispatch} onSubmit={submit}>
+    <FormController url="/api/users" afterSubmit={()=>Router.push('/account')}>
       <h1>Register</h1>
       <Input label="Email" type="text" name="email" validate={value=>isEmail(value)} hint="Enter a valid email address" />
       <Input label="Password" type="password" name="password" validate={value=>(value.length >= 8)} hint="Password must be at least 8 characters long" />