local-weather/components/WeatherNow.tsx
ChrQR 31f633e982
Some checks failed
Docker Build & Publish / Build Docker (push) Failing after 51s
Implemented api for the weather call.
2024-05-18 01:50:05 +02:00

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>
);
}