FlightCreationForm.tsx

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import './FlightCreationForm.scss';

interface IFlightCreationForm {
    origin: string;
    destination: string;
    departure: string;
    arrival: string;
    economyCapacity: number;
    businessCapacity: number;
    economyPrice: number;
    businessPrice: number;
}

function FlightCreationForm() {
  const [error, setError] = useState('');
  const { register, handleSubmit } = useForm<IFlightCreationForm>({mode: 'onChange'});

  const onSubmit = (formValue : IFlightCreationForm) => {
    if (!Number.isInteger(formValue.businessCapacity) || !Number.isInteger(formValue.economyCapacity)) {
        setError('Please enter an integer for the capacity.')
        return;
    }
  }

  return (
    <>
      <div className='flightCreationForm'>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className='card flight-form-card'>
            <div className='inner-flight-form'>
              <div className='form-col'>
                <div className='form-group'>
                  <label>Origin</label>
                  <input type='text' placeholder='Enter origin' {...register('origin', { required: true })} />
                </div>
                
                <div className='form-group'>
                  <label>Destination</label>
                  <input type='text' placeholder='Enter destination' {...register('destination', { required: true })} />
                </div>

                <div className='form-group'>
                  <label>Departure Time</label>
                  <input type='datetime-local' placeholder='Enter departure time' {...register('departure', { required: true })} />
                </div>

                <div className='form-group'>
                  <label>Arrival Time</label>
                  <input type='datetime-local' placeholder='Enter arrival time' {...register('arrival', { required: true })} />
                </div>
              </div>

              <div className='form-col'>
                <div className='form-group'>
                  <label>Economy Class Capacity</label>
                  <input type='number' placeholder='Enter capacity' {...register('economyCapacity', { required: true })} />
                </div>

                <div className='form-group'>
                  <label>Business Class Capacity</label>
                  <input type='number' placeholder='Enter capacity' {...register('businessCapacity', { required: true })} />
                </div>

                <div className='form-group'>
                  <label>Economy Class Price</label>
                  <input type='number' placeholder='Enter price' {...register('economyPrice', { required: true })} />
                </div>

                <div className='form-group'>
                  <label>Business Class Price</label>
                  <input type='number' placeholder='Enter price' {...register('businessPrice', { required: true })} />
                </div>
              </div>
            </div>

            <div className='form-group'>
              <button type='submit'>Submit</button>
            </div>

            <div className='form-group'>
              {error && <span>{error}</span>}
            </div>
          </div>
        </form>
      </div>
    </>
  )
}

export default FlightCreationForm;