u-fit/frontend/components/user/SignupForm.tsx

import { SyntheticEvent } from 'react'
import { useMutation } from '@apollo/react-hooks'
import * as Yup from 'yup'

import { useFormHandler, TextInput } from '../form/forms'
import { USER_SIGNUP } from './graphql'
import { userValidation } from './validation'


const initialValues = {
  name: 'Tomi',
  email: 'tomi@cvetic.ch',
  password: '1234',
  passwordAgain: '1234'
}


const SignupForm = () => {

  const { inputProps, values } = useFormHandler(initialValues, userValidation.validate)
  const [userSignup, { loading, error }] = useMutation(USER_SIGNUP)

  return (
    <form onSubmit={async (event: SyntheticEvent) => {
      event.preventDefault()
      try {
        const data = await userSignup({ variables: values })
      } catch (error) {
        console.log(error)
      }
    }}>
      <TextInput label='Name' {...inputProps('name')} />
      <TextInput label='Email' {...inputProps('email')} />
      <TextInput label='Password' {...inputProps('password')} />
      <TextInput label='Repeat password' {...inputProps('passwordAgain')} />
      <button type='reset' disabled={loading}>Reset</button>
      <button type='submit' disabled={loading}>Sign Up!</button>

      <style jsx>
        {`
            select, input {
              color: rgba(0,0,127,1);
            }

            .error {
              font-size: 12px;
              color: rgba(127,0,0,1);
              width: 400px;
              margin-top: 0.25rem;
            }

            .error:before {
              content: "❌ ";
              font-size: 10px;
            }

            label {
              color: red;
              margin-top: 1rem;
            }
          `}
      </style>
    </form>
  )
}

export default SignupForm