Newer
Older
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { airports } from '../../helpers/Airports';
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import './BookingQuery.scss';
interface IBookingQuery {
origin: string;
destination: string;
date: string;
seatType: string;
}
function BookingQuery() {
const navigate = useNavigate();
const [error, setError] = useState('');
const { register, handleSubmit } = useForm<IBookingQuery>({mode: 'onChange', defaultValues: { origin: '', destination: '', seatType: ''}});
const onSubmit = (query: IBookingQuery) => {
if (query.origin === query.destination) {
setError('Destination cannot be the same as origin');
return;
}
setError('');
navigate(`/booking/list?origin=${query.origin}&destination=${query.destination}&date=${query.date}&seatType=${query.seatType}`);
};
return (
<>
<div className='booking-query'>
<form onSubmit={handleSubmit(onSubmit)}>
<div className='card booking-query-card'>
<div className='form-group'>
<label>Origin:</label>
<select {...register('origin', { required: true })}>
<option value={''} disabled>Select an airport</option>
{airports.map((airport) => {
return <option key={airport} value={airport}>{airport}</option>
})}
</select>
</div>
<div className='form-group'>
<label>Destination:</label>
<select {...register('destination', { required: true })}>
<option value='' disabled>Select an airport</option>
{airports.map((airport) => {
return <option key={airport} value={airport}>{airport}</option>
})}
</select>
</div>
<div className='form-group'>
<label>Departure Date:</label>
<input type='date' min={new Date().toISOString().split('T')[0]} {...register('date', { required: true })}></input>
</div>
<div className='form-group'>
<label>Seat Type:</label>
<select {...register('seatType', { required: true })}>
<option value='' disabled>Select Seat Type</option>
<option value='economy'>Economy</option>
<option value='business'>Business</option>
</select>
</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 BookingQuery;