From 2f2077497ddf8e354d1e5b39be001735b8b162f2 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.pro>
Date: Mon, 22 Apr 2024 22:23:59 +0200
Subject: [PATCH] add addrainfall on home

---
 .../js/components/rainfall/YearRainfaill.tsx  | 17 +++++-------
 resources/js/pages/Home.tsx                   | 10 +++++--
 resources/js/pages/Rainfall/RainfallGraph.tsx | 26 ++++++++++++-------
 resources/js/pages/Weather.tsx                |  8 +++---
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/resources/js/components/rainfall/YearRainfaill.tsx b/resources/js/components/rainfall/YearRainfaill.tsx
index 988c99f..1da225f 100644
--- a/resources/js/components/rainfall/YearRainfaill.tsx
+++ b/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,
+}
diff --git a/resources/js/pages/Home.tsx b/resources/js/pages/Home.tsx
index 63b5826..ce41194 100644
--- a/resources/js/pages/Home.tsx
+++ b/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>
diff --git a/resources/js/pages/Rainfall/RainfallGraph.tsx b/resources/js/pages/Rainfall/RainfallGraph.tsx
index 62e0065..866e7c4 100644
--- a/resources/js/pages/Rainfall/RainfallGraph.tsx
+++ b/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>
 }
diff --git a/resources/js/pages/Weather.tsx b/resources/js/pages/Weather.tsx
index ebfeefd..230491c 100644
--- a/resources/js/pages/Weather.tsx
+++ b/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="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed()} °C</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>
                 </div>
             </div>
         </Card>