Refactor MeteoInfos component and add ParticularMeteo for better data display

Front-end/src/components/MeteoInfos.jsx

@@ -1,26 +1,21 @@
 import { Thermometer, Sun, CircleGauge, Droplet } from "lucide-react";
 import React, { useEffect, useState } from "react";
-
 import axios from "axios";
 import { API_BASE_URL } from "../config";
 import BoutonGraphique from "./BoutonGraphique";
 import AlertInactive from "./AlertInactive";
+import ParticularMeteo from "./ParticularMeteo";
 
-function MeteoInfos({
+function MeteoInfos({ object, graphStates, setGraphStates, graphRefs }) {
-  object,
-  graphStates,
-  setGraphStates,  
-  graphRefs     
-}) {
   const [rawData, setRawData] = useState([]);
-  const [AffAlert,setAffAlert] = useState(false);
+  const [AffAlert, setAffAlert] = useState(false);
   const [AffRegles, setAffRegles] = useState(false);
   const identifiant = object.id;
 
   useEffect(() => {
     axios.get(`${API_BASE_URL}/meteo?id=${identifiant}`).then((response) => {
       setRawData(response.data);
-      if(rawData.length <5){
+      if (rawData.length < 5) {
         setAffAlert(true);
       }
     });
@@ -29,7 +24,7 @@ function MeteoInfos({
   const lastData = rawData.length > 0 ? rawData[rawData.length - 1] : null;
   return (
     <div key={object.id} className="bg-white  p-6 rounded-xl min-w-5xl">
-      {(AffAlert&&(object.status==="active")) && (
+      {AffAlert && object.status === "active" && (
         <AlertInactive affAlert={AffAlert} setAffAlert={setAffAlert} />
       )}
       <div className="flex align-items gap-6">
@@ -40,83 +35,40 @@ function MeteoInfos({
       </div>
       {lastData ? (
         <div className="flex flex-col items-center  gap-4">
-          {lastData.temperature && (
+          <ParticularMeteo
-            <div className="bg-indigo-50 rounded-lg flex items-center w-full">
+            type="temperature"
-              <div className="flex align-items gap-3 w-full justify-between">
+            data={lastData}
-                <div className="flex align-items ml-3 gap-2">
+            Icon={Thermometer}
-                  <div className="flex items-center">
+            texte1="Température"
-                    <Thermometer className="text-indigo-600" size={40} />
+            texte2="°C"
-                  </div>
+            graphStates={graphStates}
-                  <div className="flex flex-col items-start">
+            setGraphStates={setGraphStates}
-                    <h1 className="text-indigo-600 text-xl font-bold ">
+            graphRefs={graphRefs}
-                      Température
+          />
-                    </h1>
-                    <h1 className="text-gray-700 text-4xl font-bold">
-                      {lastData.temperature} <span className="text-lg">°C</span>
-                    </h1>
-                  </div>
-                </div>
           
-                <BoutonGraphique
+          {/* Pression */}
-                  type="temperature"
+          <ParticularMeteo
-                  graphStates={graphStates}
+            type="pressure"
-                  setGraphStates={setGraphStates}
+            data={lastData}
-                  graphCible={graphRefs.temperature}
+            Icon={CircleGauge}
+            texte1="Pression"
+            texte2="hPa"
+            graphStates={graphStates}
+            setGraphStates={setGraphStates}
+            graphRefs={graphRefs}
+          />
 
-                />
+          {/* Humidité */}
-              </div>
+          <ParticularMeteo
-            </div>
+            type="humidity"
-          )}
+            data={lastData}
-          {lastData.pressure && (
+            Icon={Droplet}
-            <div className="bg-indigo-50 rounded-lg flex items-center w-full">
+            texte1="Humidité"
-              <div className="flex align-items gap-3 w-full justify-between">
+            texte2="%"
-                <div className="flex align-items ml-3 gap-2">
+            graphStates={graphStates}
-                  <div className="flex items-center">
+            setGraphStates={setGraphStates}
-                    <CircleGauge className="text-indigo-600" size={40} />
+            graphRefs={graphRefs}
-                  </div>
+          />
-                  <div className="flex flex-col items-start">
-                    <h1 className="text-indigo-600 text-xl font-bold ">
-                      Pression
-                    </h1>
-                    <h1 className="text-gray-700 text-4xl font-bold">
-                      {lastData.pressure} <span className="text-lg">hPa</span>
-                    </h1>
-                  </div>
-                </div>
-                <BoutonGraphique
-                  type="pressure"
-                  graphStates={graphStates}
-                  setGraphStates={setGraphStates}
-                  graphCible={graphRefs.pressure}
-                />
-              </div>
-            </div>
-          )}
-          {lastData.humidity && (
-            <div className="bg-indigo-50 rounded-lg flex items-center w-full">
-              <div className="flex align-items gap-3 w-full justify-between">
-                <div className="flex align-items ml-3 gap-2">
-                  <div className="flex items-center">
-                    <Droplet className="text-indigo-600" size={40} />
-                  </div>
-                  <div className="flex flex-col items-start">
-                    <h1 className="text-indigo-600 text-xl font-bold ">
-                      Humidité
-                    </h1>
-                    <h1 className="text-gray-700 text-4xl font-bold">
-                      {lastData.humidity} <span className="text-lg">%</span>
-                    </h1>
-                  </div>
-                </div>
-                <BoutonGraphique
-                  type="humidity"
-                  graphStates={graphStates}
-                  setGraphStates={setGraphStates}
-                  graphCible={graphRefs.humidity}
-                />
-              </div>
-            </div>
-          )}
           <h1 className="text-gray-500 text-sm">
             Dernier enregistrement : {lastData.timestamp}
           </h1>

Front-end/src/components/ParticularMeteo.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import BoutonGraphique from "./BoutonGraphique";
+function ParticularMeteo({
+  type,
+  data,
+  Icon,
+  texte1,
+  texte2,
+  graphStates,
+  setGraphStates,
+  graphRefs,
+}) {
+  if (data[type]) {
+    return (
+      <div className="bg-indigo-50 rounded-lg flex items-center w-full">
+        <div className="flex align-items gap-3 w-full justify-between">
+          <div className="flex align-items ml-3 gap-2">
+            <div className="flex items-center">
+              <Icon className="text-indigo-600" size={40} />
+            </div>
+            <div className="flex flex-col items-start">
+              <h1 className="text-indigo-600 text-xl font-bold ">
+                {texte1}
+              </h1>
+              <h1 className="text-gray-700 text-4xl font-bold">
+                {data[type]} <span className="text-lg">{texte2}</span>
+              </h1>
+            </div>
+          </div>
+          <BoutonGraphique
+            type={type}
+            graphStates={graphStates}
+            setGraphStates={setGraphStates}
+            graphCible={graphRefs[type]}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ParticularMeteo;

Front-end/src/components/WindGraph.jsx

@@ -25,7 +25,7 @@ function WindGraph({ object,reference }) {
       );
     }
 
-    return null; // Si aucun point n'est survolé
+    return null; 
   };
   useEffect(() => {
       if (reference?.current) {