local-weather/components/Weather.tsx

import { error } from "console";
import { useEffect, useState } from "react";
import { json } from "stream/consumers";

interface Forecast {
  coord: {
    lon: number;
    lat: number;
  },
  weather: 
    {
      id: number,
      main: string,
      description: string,
      icon: string;
    }[]
  ,
  base: string;
  main: {
    temp: number;
    feels_like: number;
    temp_min: number;
    temp_max: number;
    pressure: number;
    humidity: number;
    sea_level: number;
    grnd_level: number;
  },
  visibility: number;
  wind: {
    speed: number;
    deg: number;
    gust: number;
  },
  rain: {
    onehour: number
  },
  clouds: {
    all: number
  },
  dt: number,
  sys: {
    type: number,
    id: number,
    country: string,
    sunrise: number,
    sunset: number;
  },
  timezone: number;
  id: number;
  name: string;
  cod: number;
};

interface LocationType {
  latitude: string;
  longtitude: string;
}
const kelvin = 273.15;

async function getForecast(location: LocationType): Promise<Forecast> {
  const {latitude, longtitude} = location;
  const appId = '546911d860cb81f16585f7973b394b70';
  const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`)
  if (!res.ok) {
    throw new Error(`This is not great ${error}`);
    }
  return res.json();
}

export default async function Weather(props: {location: LocationType}) {
    const [weather, setWeather] = useState({});
    const location = props.location
    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>
        <div>
          { weather ? <pre>{JSON.stringify(weather, null, 2)}</pre> : 'loading...'}
        </div>
      </main>
    );
  }