informatics/components/RegistrationForm.tsx

import React,{useRef} from 'react';
import { useForm, SubmitHandler, FormProvider } from "react-hook-form";
import { Select, Input, Link } from "./UX";

interface IFormInputs {
  name_team_coach: string,
  coach_telefon_number: string,
  email_address: string,
  city_team: string,
  training_institution_team: string,
  team_name: string,
  name_first_participant: string,
  first_partial_class: number,
  name_second_participant: string,
  second_class: number,
  name_third_party: string,
  third_part_class: number,
  body?: string[] | number[]
}

const defaultValues = {
  name_team_coach: ``,
  coach_telefon_number: ``,
  email_address: '',
  city_team: '',
  training_institution_team: '',
  team_name: '',
  name_first_participant: '',
  first_partial_class: 0,
  name_second_participant: 'нет',
  second_class: 0,
  name_third_party: 'нет',
  third_part_class: 0,
};

export const RegistrationForm = (props): JSX.Element => {
  const form = useRef(null);
  const methods = useForm({ defaultValues });

  const onSubmit: SubmitHandler<IFormInputs> = data => {
    fetch('/api/registration', { method: 'POST', body: Object.values(data) as any})
      .then((data) => {
        props.updateData(data);
      })
      methods.reset(defaultValues);
  }
  return (
    <>
      <div className="mt-10 sm:mt-0">
        <div className="md:grid md:grid-cols-3 md:gap-6">
          <div className="md:col-span-1">
            <div className="px-4 sm:px-0">
              <h3 className="text-lg font-medium leading-6">Регистрация команды</h3>
              <p className="mt-1 text-sm">Введите актуальные данные команды</p>
              <p className="mt-1 text-sm">От каждого учебного заведения может быть зарегистрированно неограниченое количеставо команд</p>
              <p className="mt-1 text-sm"> Подписывайтесь на наш
                <Link href="https://t.me/robotop_competition"> Telegram канал</Link>
              , что-бы быть в курсе новостей про соревнование </p>
            </div>
          </div>
          <div className="mt-5 md:mt-0 md:col-span-2">
          <FormProvider {...methods} >
            <form ref={form} onSubmit={methods.handleSubmit(onSubmit)}>
              <div className="shadow overflow-hidden sm:rounded-md">
                <div className="px-4 py-5 bg-white sm:p-6">
                  <div className="grid grid-cols-6 gap-6">

                    <div className="col-span-6 sm:col-span-3">
                      <Input placeholder="Иванов Иван Иванович" name="name_team_coach" text="Введите ФИО тренера" additional={""}/>
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Input placeholder="+79181234567" name="coach_telefon_number" text="Номер телефона тренера" additional={"valueAsNumber: true"} />
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Input placeholder="you@example.com" name="email_address" text="Email тренера" additional={`pattern: /^(([^<>()[]\\.,;:s@"]+(.[^<>()[]\\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/ })`} />
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Input placeholder="Краснодар" name="city_team" text="Город команда" additional={""} />
                    </div>

                    <div className="col-span-3">
                      <Input placeholder="МАОУ СОШ 103" name="training_institution_team" text="Учебное заведение команды" additional={""} />
                    </div>

                    <div className="col-span-3">
                      <Input placeholder="Фиксики" name="team_name" text="Название команды" additional={""} />
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Input placeholder="Иванов Иван Иванович" name="name_first_participant" text="ФИО первого участника" additional={""} />
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Select text={'Класс участника'} name={'first_partial_class'}/>
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Input placeholder="Иванов Петр Иванович / нет" name="name_second_participant" text="ФИО второго участника" additional={""} />
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Select text={'Класс участника'} name={'second_class'}/>
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Input placeholder="Иванов Дмитрий Иванович / нет" name="name_third_party" text="ФИО третьего участника" additional={""}/>
                    </div>

                    <div className="col-span-6 sm:col-span-3">
                      <Select text={'Класс участника'} name={'third_part_class'}/>
                    </div>

                  </div>
                </div>
                <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
                  <button
                    type="submit"
                    className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                  >
                    Зарегистрировать команду
                  </button>
                </div>
              </div>
            </form>
            </FormProvider>
          </div>
        </div>
      </div>
</>
  );
};

export default RegistrationForm;