added weather to context provided by weatherNow.

The application structure and naming should take in to account the weathernow component will be the container
This commit is contained in:
ChrQR 2024-05-10 01:10:37 +02:00
parent 59bbcaea69
commit a21c44185f
3 changed files with 15 additions and 25 deletions

View File

@ -16,19 +16,7 @@ export async function getLocation(searchLocation: string): Promise<coordType>{
} }
} }
// takes coordinates in coordType format and returns json with weather forecast.
export async function getForecast(geoLocation: coordType): Promise<Forecast> {
const { lat, lng } = geoLocation.geo;
const appId = process.env.WEATHER_API;
const res = await fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${appId}`
);
if (!res.ok) {
throw new Error(`Failed to fetch the weather data`);
}
const data: Forecast = await res.json();
return data;
}
export async function getHourlyForecast(geoLocation: coordType): Promise<HourlyForecast> { export async function getHourlyForecast(geoLocation: coordType): Promise<HourlyForecast> {
const { lat, lng } = geoLocation.geo; const { lat, lng } = geoLocation.geo;

View File

@ -1,15 +1,14 @@
import { TempInfo } from "@/types/types"; import { TempInfo } from "@/types/types";
import { useContext } from "react";
import { WeatherContext } from "./WeatherNow";
export default function Temperature(props: {tempInfo:TempInfo}) {
const kelvin = 273.15;
const tempInfo = props.tempInfo;
const fullTemp = tempInfo.temp - kelvin;
const temperature = fullTemp.toFixed(2);
const fullFeels = tempInfo.feels_like - kelvin;
const feelsLike = fullFeels.toFixed(2);
export default function Temperature() {
const { weather } = useContext(WeatherContext)
const feels = weather.current.apparent_temperature;
return ( return (
<p>The temperature right now is {temperature}°C and feels like {feelsLike}°C</p> <p>{feels}°C</p>
) )
} }

View File

@ -1,13 +1,13 @@
"use client"; "use client";
import { getForecast, getHourlyForecast } from "@/app/actions"; import { getHourlyForecast } from "@/app/actions";
import Temperature from "./Temperature"; import Temperature from "./Temperature";
import { Forecast, HourlyForecast, WeatherContextType, coordType } from "@/types/types"; import { HourlyForecast, WeatherContextType} from "@/types/types";
import { createContext, useContext, useEffect, useState } from "react"; import { createContext, useContext, useEffect, useState } from "react";
import { defaultForecast, defaultHourlyForecast } from "@/app/defaultState"; import { defaultHourlyForecast } from "@/app/defaultState";
import { LocationContext } from "@/app/page"; import { LocationContext } from "@/app/page";
export const weatherContext = createContext<WeatherContextType>({ export const WeatherContext = createContext<WeatherContextType>({
weather: defaultHourlyForecast, weather: defaultHourlyForecast,
setWeather: () => {} // Default function, does nothing setWeather: () => {} // Default function, does nothing
}); });
@ -34,6 +34,9 @@ export default function WeatherNow() {
return ( return (
<> <>
<h1>Here is the current weather in {geoLocation.name}</h1> <h1>Here is the current weather in {geoLocation.name}</h1>
<WeatherContext.Provider value={contextValue}>
<Temperature />
</WeatherContext.Provider>
</> </>
); );
} }