local-weather/components/WeatherNow.tsx

"use client";

import Temperature from "./Temperature";
import { Forecast, WeatherContextType, coordType } from "@/types/types";
import { createContext, useContext, useEffect, useState } from "react";
import { defaultHourlyForecast } from "@/app/defaultState";
import { LocationContext } from "@/context/LocationContext";
import WeatherHero from "./WeatherHero";
import CardContainer from "./DailyCard/CardContainer";

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

export default function WeatherNow() {
  const { geoLocation } = useContext(LocationContext);
  const [weather, setWeather] = useState<Forecast>(defaultHourlyForecast);
  const [error, setError] = useState<string | null>(null);
  const contextValue: WeatherContextType = {
    weather,
    setWeather,
  };

  const getHourlyForecast = async (geoLocation: coordType) => {
    const { geo } = geoLocation;
    try {
      const response = await fetch(
        `/api/forecast?lat=${geo.lat}&lng=${geo.lng}`
      );
      if (!response.ok) {
        throw new Error("Failed to fetch the weather data");
      }
      const data = await response.json();
      setWeather(data.data);
      return data.data; // Ensure the function returns the data
    } catch (error: any) {
      setError(error.message);
      return null;
    }
  };

  useEffect(() => {
    let mounted = true;
    if (geoLocation.geo.lat && geoLocation.geo.lng) {
      getHourlyForecast(geoLocation).then((data) => {
        if (mounted && data) {
          setWeather(data);
        }
      });
    }
    return () => {
      mounted = false;
    };
  }, [geoLocation]);

  return (
    <div className="text-center">
      <h1 className="my-4 text-2xl">
        Here is the weather today in {geoLocation.name}
      </h1>
      {error && <p className="text-red-500">{error}</p>}
      <WeatherContext.Provider value={contextValue}>
        <WeatherHero />
        <Temperature />
        <h2 className="mt-2 text-xl">And the forecast for the coming week</h2>
        <CardContainer weather={weather} />
      </WeatherContext.Provider>
    </div>
  );
}