72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|