local-weather/components/WeatherNow.tsx

"use client";

import { getForecast, getHourlyForecast } from "@/app/actions";
import Temperature from "./Temperature";
import { Forecast, HourlyForecast, WeatherContextType, coordType } from "@/types/types";
import { createContext, useContext, useEffect, useState } from "react";
import { defaultForecast, defaultHourlyForecast } from "@/app/defaultState";
import { LocationContext } from "@/app/page";

export const weatherContext = createContext<WeatherContextType>({
  weather: defaultHourlyForecast,
  setWeather: () => {} // Default function, does nothing
});


export default function WeatherNow() {
  const { geoLocation } = useContext(LocationContext)
  const [weather, setWeather] = useState<HourlyForecast>(defaultHourlyForecast);
  const contextValue: WeatherContextType = {
    weather,
    setWeather
  };
  useEffect(() => {
    let mounted = true;
    getHourlyForecast(geoLocation).then((data) => {
      if (mounted) {
        setWeather(data);
      }
    });
    return () => {
      mounted = false;
    };
  }, [geoLocation]);
  return (
    <>
      <h1>Here is the current weather in {geoLocation.name}</h1>
    </>
  );
}