SignUpForm.tsx

import React, { FC } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { Button } from '@material-ui/core';

import axios from 'axios';
import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from 'components/Auth/SignUpForm/useStyles';
// TODO: Data validation
// TODO: Replace notes with big input field
export const SignUpForm: FC = () => {
  type FormData = {
    username: string;
    password: string;
    firstName: string;
    lastName: string;
    email: string;
    phoneNumber: number;
    address: number;
    name: string;
    memberCardNumber: number;
    notes: string;
  };

  const { control, errors, handleSubmit } = useForm<FormData>();

  const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
    axios.post(
      '/api/web/seniors/',
      {
        user: {
          username: values.username,
          password: values.password,
          firstName: values.firstName,
          lastName: values.lastName,
          email: values.email,
        },
        phone_number: values.phoneNumber,
        home_address: {
          address: values.address,
        },
        member_card_issuer: {
          name: values.memberCardNumber,
        },
        member_card_number: values.memberCardNumber,
        notes: values.notes,
      },
      {
        headers: {
          'Content-Type': 'application/json',
        },
      },
    );
  };

  const classes = useStyles();
  return (
    <>
      <form
        className={classes.form}
        onSubmit={handleSubmit(onSubmit)}
        data-testid="Form"
      >
        <InputField
          name="email"
          control={control}
          rules={{
            validate: (value: string) =>
              /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
            required: {
              value: true,
              message: 'Email is not valid',
            },
          }}
          label="Email"
          error={!!errors.email}
          errorMessage="Insert email"
        />

        <InputField
          name="password"
          control={control}
          rules={{
            minLength: 8,
            maxLength: 60,
            required: {
              value: true,
              message: 'Insert valid password',
            },
          }}
          label="Password"
          error={!!errors.password}
          errorMessage="Insert valid password"
        />

        <InputField
          name="username"
          control={control}
          rules={{
            maxLength: 150,
            required: {
              value: true,
              message: 'Insert valid username',
            },
          }}
          label="Username"
          error={!!errors.username}
          errorMessage="Insert valid username"
        />

        <InputField
          name="firstName"
          control={control}
          rules={{
            maxLength: 150,
            required: {
              value: true,
              message: 'Insert valid first name',
            },
          }}
          label="First name"
          error={!!errors.firstName}
          errorMessage="Insert valid first name"
        />

        <InputField
          name="lastName"
          control={control}
          rules={{
            maxLength: 150,
            required: {
              value: true,
              message: 'Insert valid last name',
            },
          }}
          label="Last name"
          error={!!errors.lastName}
          errorMessage="Insert valid last name"
        />

        <InputField
          name="address"
          control={control}
          rules={{
            required: {
              value: true,
              message: 'Insert valid address',
            },
          }}
          label="Address"
          error={!!errors.address}
          errorMessage="Insert valid address"
        />

        <InputField
          name="phoneNumber"
          control={control}
          rules={{
            maxLength: 15,
            required: {
              value: true,
              message: 'Insert valid phone number',
            },
          }}
          label="Phone number"
          error={!!errors.phoneNumber}
          errorMessage="Insert valid phone number"
        />

        <InputField
          name="memberCardNumber"
          control={control}
          rules={{
            maxLength: 20,
            required: {
              value: true,
              message: 'Insert valid card number',
            },
          }}
          label="Card number"
          error={!!errors.memberCardNumber}
          errorMessage="Insert valid card number"
        />

        <InputField
          name="notes"
          control={control}
          rules={{
            required: {
              value: true,
              message: 'Add notes',
            },
          }}
          label="Notes"
          error={!!errors.notes}
          errorMessage="Insert notes"
        />

        <Button
          data-testid="Submit"
          type="submit"
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
        >
          Sign Up
        </Button>
      </form>
    </>
  );
};