changed api req

components/Weather.tsx

@@ -1,4 +1,6 @@
 import { error } from "console";
+import { useEffect, useState } from "react";
+import { json } from "stream/consumers";
 
 interface Forecast {
   coord: {
@@ -67,14 +69,23 @@ async function getForecast(location: LocationType): Promise<Forecast> {
 }
 
 export default async function Weather(props: {location: LocationType}) {
+    const [weather, setWeather] = useState({});
     const location = props.location
-    const weather = await getForecast(location)
-    const temp = weather.main.temp - kelvin
+    const appId = '546911d860cb81f16585f7973b394b70';
+    // const weather = await getForecast(location)
+    // const temp = weather.main.temp - kelvin
+    useEffect(() => {
+      fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${location.latitude}&lon=${location.longtitude}&appid=${appId}`)
+      .then(response => response.json())
+      .then(json => setWeather(json))
+      .catch(error => console.log(error))
+    })
     return (
       <main>
         <h1>Forecast</h1>
-        <p>{temp}</p>
-        <p></p>
+        <div>
+          { weather ? <pre>{JSON.stringify(weather, null, 2)}</pre> : 'loading...'}
+        </div>
       </main>
     );
   }