rannes.dev/local-weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added weather to context provided by weatherNow.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/actions.ts
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;

15
components/Temperature.tsx
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>
) )
} }

11
components/WeatherNow.tsx
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>
</> </>
); );
} }