127 lines
3.5 KiB
TypeScript
127 lines
3.5 KiB
TypeScript
import { useState } from 'react'
|
|
import { useForm } from 'react-hook-form'
|
|
import { useMutation } from 'react-query'
|
|
import useLocalStorageState from 'use-local-storage-state'
|
|
import { addLeaderToGroup, createLeader, Leader } from '../../api/leaders'
|
|
import InputError from '../../components/InputError'
|
|
|
|
const AddLeader = () => {
|
|
const [isAlertVisible, setIsAlertVisible] = useState(false)
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
reset,
|
|
getValues,
|
|
} = useForm<Leader>()
|
|
const [yearGroupId] = useLocalStorageState('yearGroupId')
|
|
|
|
const { mutate: mutateCreateLeader } = useMutation(
|
|
'createLeader',
|
|
(payload: Leader) => {
|
|
delete payload.limit_group
|
|
return createLeader(payload)
|
|
},
|
|
{
|
|
onSuccess: (data) => {
|
|
setIsAlertVisible(true)
|
|
mutateAddToYearGroup({
|
|
id: data?.data?.id,
|
|
year_group_id: Number(yearGroupId),
|
|
limit_group: getValues('limit_group') ?? 0,
|
|
})
|
|
reset()
|
|
},
|
|
},
|
|
)
|
|
const { mutate: mutateAddToYearGroup } = useMutation(
|
|
'addLeaderToGroup',
|
|
(payload: { id: any; year_group_id: number; limit_group: number }) =>
|
|
addLeaderToGroup(payload.id, payload.year_group_id, {
|
|
limit_group: payload.limit_group,
|
|
}),
|
|
)
|
|
|
|
const onSubmit = (data: Leader) => {
|
|
mutateCreateLeader(data)
|
|
}
|
|
|
|
return (
|
|
<form
|
|
className="w-full lg:w-1/4 flex flex-col mx-auto"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
>
|
|
{isAlertVisible && (
|
|
<div className="alert alert-success shadow-lg">
|
|
<span>Udało się dodać opiekuna!</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="form-control">
|
|
<label className="label" htmlFor="first_name">
|
|
Imię
|
|
</label>
|
|
<input
|
|
className="input input-bordered"
|
|
id="first_name"
|
|
type="text"
|
|
{...register('first_name', { required: true })}
|
|
/>
|
|
{errors.first_name?.type === 'required' && (
|
|
<InputError>Imię jest wymagane</InputError>
|
|
)}
|
|
</div>
|
|
<div className="form-control">
|
|
<label className="label" htmlFor="last_name">
|
|
Nazwisko
|
|
</label>
|
|
<input
|
|
className="input input-bordered"
|
|
id="last_name"
|
|
type="text"
|
|
{...register('last_name', { required: true })}
|
|
/>
|
|
{errors.last_name?.type === 'required' && (
|
|
<InputError>Nazwisko jest wymagane</InputError>
|
|
)}
|
|
</div>
|
|
<div className="form-control">
|
|
<label className="label" htmlFor="email">
|
|
Email
|
|
</label>
|
|
<input
|
|
className="input input-bordered"
|
|
id="email"
|
|
type="text"
|
|
{...register('email', {
|
|
required: true,
|
|
})}
|
|
/>
|
|
{errors.email?.type === 'required' && (
|
|
<InputError>Email jest wymagany</InputError>
|
|
)}
|
|
</div>
|
|
<div className="form-control">
|
|
<label className="label" htmlFor="limit_group">
|
|
Limit grup
|
|
</label>
|
|
<input
|
|
className="input input-bordered"
|
|
id="limit_group"
|
|
type="text"
|
|
{...register('limit_group', {
|
|
required: false,
|
|
pattern: /^[1-9][0-9]*$/,
|
|
})}
|
|
/>
|
|
{errors.limit_group?.type === 'pattern' && (
|
|
<InputError>Limit grup musi być liczbą dodatnią</InputError>
|
|
)}
|
|
</div>
|
|
<button className="btn btn-success mt-4">Dodaj opiekuna</button>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default AddLeader
|