weather get request

client/src/api/urls.ts

@@ -1,7 +1,10 @@
 // const serverApi = "http://192.168.56.1:3000";
 const serverApi = "http://194.26.138.94:4002";
 // const serverApi = import.meta.env.VITE_SERVER_API;
-const weatherApi = "";
+const city = "Dubai";
+const contry = "UAE";
+const weatherApiKey = "908ad75f36452c11ff4306cd53162218";
+const weatherApi = `https://api.openweathermap.org/data/2.5/forecast?q=${city},${contry}&units=metric&appid=${weatherApiKey}`;
 
 const apartmentsApi = `${serverApi}/apartments`;
 
@@ -9,4 +12,4 @@ const currentApartmentApi = `${serverApi}/apartment`;
 
 const updateAccessTokenApi = `${serverApi}/updateAccessToken`;
 
-export { apartmentsApi, updateAccessTokenApi, currentApartmentApi };
+export { apartmentsApi, updateAccessTokenApi, currentApartmentApi, weatherApi };

client/src/api/weather.ts

@@ -0,0 +1,72 @@
+import { weatherApi } from "./urls";
+
+/**
+ *
+ *
+ */
+
+type WeatherRes = {
+  cod: string;
+  message: number;
+  cnt: number;
+  list: {
+    dt: number;
+    main: {
+      temp: number;
+      feels_like: number;
+      temp_min: number;
+      temp_max: number;
+      pressure: number;
+      sea_level: number;
+      grnd_level: number;
+      humidity: number;
+      temp_kf: number;
+    };
+    weather: {
+      id: number;
+      main: string;
+      description: string;
+      icon: string;
+    }[];
+    clouds: {
+      all: number;
+    };
+    wind: {
+      speed: number;
+      deg: number;
+      gust: number;
+    };
+    visibility: number;
+    pop: number;
+    sys: {
+      pod: string;
+    };
+    dt_txt: string;
+  }[];
+  city: {
+    id: number;
+    name: string;
+    coord: {
+      lat: number;
+      lon: number;
+    };
+    country: string;
+    population: number;
+    timezone: number;
+    sunrise: number;
+    sunset: number;
+  };
+};
+
+async function getWeather() {
+  const response = await fetch(weatherApi);
+  const fetchedData: WeatherRes = await response.json();
+
+  const listByDay = fetchedData.list.filter((day) =>
+    day.dt_txt.endsWith("15:00:00")
+  );
+
+  return listByDay;
+}
+
+export { getWeather };

client/src/components/masterplanPage/map/Map.tsx

@@ -6,6 +6,8 @@ import { markers } from "../../../consts/markers";
 import useMarker from "../../../store/useMarker";
 import ZoomControlls from "./ZoomControlls";
 import { Clouds } from "./Clouds";
+import { getWeather } from "../../../api/weather";
+import { useEffect } from "react";
 
 const Map = () => {
   const { hoveredMarker } = useMarker();
@@ -18,6 +20,12 @@ const Map = () => {
     };
   });
 
+  useEffect(() => {
+    getWeather().then((data) => {
+      console.log(data);
+    });
+  }, []);
+
   return (
     <div className="relative">
       <TransformWrapper