From 938211944263d0affb87ba53cf917426be7c201f Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.pro>
Date: Sat, 23 Dec 2023 21:32:53 +0100
Subject: [PATCH] fix zero when value add

---
 .../js/components/rainfall/AddRainfall.tsx    | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/rainfall/AddRainfall.tsx b/resources/js/components/rainfall/AddRainfall.tsx
index f25d754..acf30d7 100644
--- a/resources/js/components/rainfall/AddRainfall.tsx
+++ b/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 [date, setDate] = useState((new Date()).toSQLDate())
-    const [value, setValue] = useState<null|number>(null)
+    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', {date, value})
-            setDate((new Date()).toSQLDate())
-            setValue(null)
+            await axiosPost('/api/rainfalls', data)
+            setData({date: (new Date()).toSQLDate(), value: 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={date}
-                   onChange={event => setDate(event.target.value)}
-                   autoFocus>Date</Field>
-            <Field type="number"
+                   value={data.date}
+                   onChange={event => setData({...data, date: event.target.value})}
+                   autoFocus>
+                Date
+            </Field>
+            {!loading ? <Field type="number"
                    name="value"
-                   placeholder="10"
-                   value={value}
-                   onChange={event => setValue(Number(event.target.value))}>Mesure</Field>
+                   value={data.value}
+                   onChange={event => setData({...data, value: Number(event.target.value)})}>
+                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>
 }