add addrainfall on home

resources/js/components/rainfall/YearRainfaill.tsx

@@ -1,24 +1,17 @@
-import React, {useState, useEffect} from "react"
+import React, {FC, useState, useEffect} from "react"
 import Card from "../Card"
 import useAxiosTools from "../../hooks/AxiosTools"
 import {AxiosError} from "axios"
 import {monthlyRainfall} from "../../types"
 
-const YearRainfall = () => {
+const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => {
 
     const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools()
     const [data, setData] = useState<monthlyRainfall[]>([])
-    const months = Array(13)
-        .reduce((result, item, index) => {
-            const date = new Date()
-            console.log(item, index, date)
-            return item
-        }, [])
-    console.log(months)
 
     useEffect(() => {
         fetchData()
-    }, [])
+    }, [loadedAt])
 
     const fetchData = async () => {
         try {
@@ -61,3 +54,7 @@ const YearRainfall = () => {
 }
 
 export  default YearRainfall
+
+interface YearRainfallProps {
+    loadedAt: Date,
+}

resources/js/pages/Home.tsx

@@ -1,16 +1,22 @@
-import React from "react"
+import React, {useState} from "react"
 import useAuthUser from "../hooks/AuthUser"
 import YearRainfall from "../components/rainfall/YearRainfaill"
 import PageLayout from "../components/PageLayout"
+import AddRainfall from "../components/rainfall/AddRainfall"
 
 const Home = () => {
 
     const {authUser} = useAuthUser()
+    const [loadedAt, reload] = useState(new Date)
 
     return <div>
         {authUser
             ? <PageLayout>
-                <YearRainfall />
+                <div className="flex flex-col gap-2">
+                    <YearRainfall loadedAt={loadedAt} />
+
+                    <AddRainfall reload={reload}/>
+                </div>
             </PageLayout>
             : <div className="px-5 pt-10">
                 <h1 className="text-lg font-bold">Application pour enregistrer sa pluviométrie</h1>

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>
 }

resources/js/pages/Weather.tsx

@@ -68,9 +68,9 @@ const Weather = () => {
 
         {errorLabel()}
 
-        <Card className="flex justify-between">
+        <Card className={`flex justify-between ${loading ? 'animate-pulse' : ''}`}>
             <div className="m-2 flex flex-col justify-between">
-                <span className="text-6xl">{currentWeather?.main.temp.toFixed()} °C</span>
+                <span className="text-6xl">{currentWeather?.main.temp.toFixed() ?? '--'} °C</span>
                 <span className="text-secondary dark:text-secondary-ligth">{currentWeather?.weather[0].description}</span>
             </div>
             <div className="flex items-stretch">
@@ -81,8 +81,8 @@ const Weather = () => {
                                             alt={currentWeather?.weather[0].main} width="120px" />}
                 </div>
                 <div className="flex flex-col gap-1">
-                    <span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed()} <span className="text-2xl">°C</span></span>
+                    <span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed() ?? '--'} <span className="text-2xl">°C</span></span>
-                    <span className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed()} °C</span>
+                    <span className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed() ?? '--'} °C</span>
                 </div>
             </div>
         </Card>