fix zero when value add

resources/js/components/rainfall/AddRainfall.tsx

@@ -5,19 +5,21 @@ import Card from "../Card";
 
 const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
 
-    const {errorCatch, errorLabel, axiosPost} = useAxiosTools()
+    const {loading, setLoading, errorCatch, errorLabel, cleanErrors, axiosPost} = useAxiosTools()
-    const [date, setDate] = useState((new Date()).toSQLDate())
+    const [data, setData] = useState<{date: string, value: null|number}>({date: (new Date()).toSQLDate(), value: null})
-    const [value, setValue] = useState<null|number>(null)
 
     const handleSubmit = async (event: FormEvent) => {
         event.preventDefault()
+        cleanErrors()
+        setLoading(true)
         try {
-            await axiosPost('/api/rainfalls', {date, value})
+            await axiosPost('/api/rainfalls', data)
-            setDate((new Date()).toSQLDate())
+            setData({date: (new Date()).toSQLDate(), value: null})
-            setValue(null)
             reload(new Date())
         } catch (error) {
             errorCatch(error)
+        } finally {
+            setLoading(false)
         }
     }
 
@@ -29,17 +31,19 @@ const AddRainfall: FC<AddRainfallProps> = ({reload}) => {
         <form onSubmit={handleSubmit} className="p-2 flex flex-col gap-2">
             <Field type="date"
                    name="date"
-                   placeholder="Email"
+                   value={data.date}
-                   value={date}
+                   onChange={event => setData({...data, date: event.target.value})}
-                   onChange={event => setDate(event.target.value)}
+                   autoFocus>
-                   autoFocus>Date</Field>
+                Date
-            <Field type="number"
+            </Field>
+            {!loading ? <Field type="number"
                    name="value"
-                   placeholder="10"
+                   value={data.value}
-                   value={value}
+                   onChange={event => setData({...data, value: Number(event.target.value)})}>
-                   onChange={event => setValue(Number(event.target.value))}>Mesure</Field>
+                Mesure
+            </Field> : <div className="h-[74px]" />}
 
-            <button type="submit" className="btn-primary mt-2 w-full text-lg font-bold">Valider</button>
+            <button type="submit" disabled={loading} className="btn-primary mt-2 w-full text-lg font-bold">Valider</button>
         </form>
     </Card>
 }