From 462fc28f2c5dfe99373d3c02efc9d43cd0a568fd Mon Sep 17 00:00:00 2001
From: Mathis <mathis.balet@gmail.com>
Date: Sun, 13 Apr 2025 21:16:31 +0200
Subject: [PATCH] Changement homepage

---
 Front-end/src/pages/Home.jsx | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/Front-end/src/pages/Home.jsx b/Front-end/src/pages/Home.jsx
index 937bbd2..70627df 100644
--- a/Front-end/src/pages/Home.jsx
+++ b/Front-end/src/pages/Home.jsx
@@ -26,12 +26,13 @@ import { API_BASE_URL } from "../config";
 function EnhancedWeatherHome() {
   const [searchQuery, setSearchQuery] = useState("");
   const [locations, setLocations] = useState([]);
-  const [infoMeteo,setInfoMeteo] = useState([]);
+  const [infoMeteo, setInfoMeteo] = useState([]);
   const [activeFilter, setActiveFilter] = useState("all");
   const [currentTime, setCurrentTime] = useState(new Date());
   const { user, token } = useAuth();
   const [ville, setVille] = useState("Paris, France");
-  const isDayTime = currentTime.getHours() > 6 && currentTime.getHours() < 20;
+  const heure = currentTime.getHours();
+  const isDayTime = heure > 6 && heure < 20;
 
   useEffect(() => {
     const timer = setInterval(() => {
@@ -43,7 +44,7 @@ function EnhancedWeatherHome() {
   useEffect(() => {
     axios
       .post(`${API_BASE_URL}/getMeteoHome`, {
-        location:ville,
+        location: ville,
       })
       .then((response) => {
         if (response.data.length === 0) {
@@ -80,34 +81,38 @@ function EnhancedWeatherHome() {
     return date.toLocaleDateString("fr-FR", options);
   };
 
+  const formatHeure = (h) => {
+    const heureFormatee = (h % 24).toString().padStart(2, "0"); // 0 → 00, 3 → 03, etc.
+    return `${heureFormatee}:00`;
+  };
   const hourlyForecast = [
     {
       time: "Maintenant",
-      temp: infoMeteo.temperature+"°",
-      icon: <Cloud className="text-indigo-500" size={24} />,
-    },
-    {
-      time: "14:00",
       temp: "22°",
       icon: <Cloud className="text-indigo-500" size={24} />,
     },
     {
-      time: "15:00",
+      time: formatHeure(heure + 1),
+      temp: "22°",
+      icon: <Cloud className="text-indigo-500" size={24} />,
+    },
+    {
+      time: formatHeure(heure + 2),
       temp: "22°",
       icon: <Sun className="text-yellow-500" size={24} />,
     },
     {
-      time: "16:00",
+      time: formatHeure(heure + 3),
       temp: "21°",
       icon: <Sun className="text-yellow-500" size={24} />,
     },
     {
-      time: "17:00",
+      time: formatHeure(heure + 4),
       temp: "20°",
       icon: <CloudRain className="text-blue-500" size={24} />,
     },
     {
-      time: "18:00",
+      time: formatHeure(heure + 5),
       temp: "19°",
       icon: <CloudRain className="text-blue-500" size={24} />,
     },
@@ -169,9 +174,6 @@ function EnhancedWeatherHome() {
             <>
               <div className="absolute top-10 right-14 w-20 h-20 rounded-full bg-gray-200 blur-lg opacity-70"></div>
               <div className="absolute top-14 right-10 w-14 h-14 rounded-full bg-gray-900 blur-sm"></div>
-              <div className="absolute top-20 left-1/4 w-2 h-2 rounded-full bg-white blur-none opacity-90"></div>
-              <div className="absolute top-40 left-1/3 w-1 h-1 rounded-full bg-white blur-none opacity-90"></div>
-              <div className="absolute top-14 left-1/2 w-2 h-2 rounded-full bg-white blur-none opacity-90"></div>
             </>
           )}
         </div>
@@ -321,7 +323,7 @@ function EnhancedWeatherHome() {
                         isDayTime ? "text-gray-900" : "text-white"
                       }`}
                     >
-                      {infoMeteo.temperature-2}°C
+                      {infoMeteo.temperature - 2}°C
                     </span>
                   </div>
                 </div>