add addrainfall on home

resources/js/pages/Rainfall/RainfallGraph.tsx

@@ -21,12 +21,12 @@ const RainfallGraph = () => {
     const {targetRef, dimensions} = useDimension()
 
     useEffect(() => {
+        setLoading(true)
         fetchGraphData()
     }, [loadedAt, graphDetails])
 
     const fetchGraphData = async () => {
         try {
-            setLoading(true)
             const params = `start=${graphDetails.start_date}&end=${graphDetails.end_date}&period=${graphDetails.period}`
             const res = await axiosGet(`/api/rainfalls/graph?${params}`)
             setGraphData(res.data)
@@ -38,27 +38,28 @@ const RainfallGraph = () => {
     }
 
     return <PageLayout>
-        <div className="flex flex-wrap justify-between gap-2">
-            <LastFiveMesure loadedAt={loadedAt} />
-            <AddRainfall reload={reload} />
-        </div>
-
         {errorLabel()}
         <form className="mx-5 mb-2 flex flex-wrap gap-2">
             <Field name="start_date"
                    type="date"
                    value={graphDetails.start_date}
-                   onChange={e => setGraphDetails({...graphDetails, start_date: (new Date(e.target.value)).toSQLDate()})} />
+                   onChange={e => setGraphDetails({
+                       ...graphDetails,
+                       start_date: (new Date(e.target.value)).toSQLDate()
+                   })}/>
             <Field name="start_date"
                    type="date"
                    value={graphDetails.end_date}
-                   onChange={e => setGraphDetails({...graphDetails, end_date: (new Date(e.target.value)).toSQLDate()})} />
+                   onChange={e => setGraphDetails({
+                       ...graphDetails,
+                       end_date: (new Date(e.target.value)).toSQLDate()
+                   })}/>
             <div className="form-control">
                 <select className={` mt-2 w-full rounded dark:bg-gray-700`}
                         value={graphDetails.period}
                         onChange={e => setGraphDetails({...graphDetails, period: e.target.value})}>
                     <option value="day">Jour</option>
-                {/*    <option value="week">Semaine</option>*/}
+                    {/*    <option value="week">Semaine</option>*/}
                     <option value="month">Mois</option>
                     <option value="year">Année</option>
                 </select>
@@ -68,7 +69,12 @@ const RainfallGraph = () => {
             <RainFallEcharts width={dimensions.width}
                              height={500}
                              data={graphData}
-                             loading={loading} />
+                             loading={loading}/>
+        </div>
+
+        <div className="flex flex-wrap justify-between gap-2">
+            <AddRainfall reload={reload}/>
+            <LastFiveMesure loadedAt={loadedAt}/>
         </div>
     </PageLayout>
 }