56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import React, {Dispatch, FC, FormEvent, SetStateAction, useState} from "react"
|
|
import useAxiosTools from "../../hooks/AxiosTools"
|
|
import Field from "../Field"
|
|
import Card from "../Card"
|
|
|
|
const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
|
|
|
|
const {loading, setLoading, errorCatch, errorLabel, cleanErrors, axiosPost} = useAxiosTools()
|
|
const [data, setData] = useState<{date: string, value: null|number}>({date: (new Date()).toSQLDate(), value: null})
|
|
|
|
const handleSubmit = async (event: FormEvent) => {
|
|
event.preventDefault()
|
|
cleanErrors()
|
|
setLoading(true)
|
|
try {
|
|
await axiosPost('/api/rainfalls', data)
|
|
setData({date: (new Date()).toSQLDate(), value: null})
|
|
reload(new Date())
|
|
} catch (error) {
|
|
errorCatch(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return <Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
|
|
<h2 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">
|
|
Ajout d'une mesure
|
|
</h2>
|
|
{errorLabel()}
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-2 p-2">
|
|
<Field type="date"
|
|
name="date"
|
|
value={data.date}
|
|
onChange={event => setData({...data, date: event.target.value})}
|
|
autoFocus>
|
|
Date
|
|
</Field>
|
|
{!loading ? <Field type="number"
|
|
name="value"
|
|
value={data.value}
|
|
onChange={event => setData({...data, value: Number(event.target.value)})}>
|
|
Mesure
|
|
</Field> : <div className="h-[74px]" />}
|
|
|
|
<button type="submit" disabled={loading} className="btn-primary mt-2 w-full text-lg font-bold">Valider</button>
|
|
</form>
|
|
</Card>
|
|
}
|
|
|
|
export default AddRainfall
|
|
|
|
interface AddRainfallProps {
|
|
reload: Dispatch<SetStateAction<Date>>
|
|
}
|