Changed to open-meteo api and added location name to geoLocation state from places api

This commit is contained in:
ChrQR 2024-05-10 01:00:26 +02:00
parent 55b425c03a
commit 59bbcaea69
5 changed files with 145 additions and 75 deletions

View File

@ -10,12 +10,15 @@ export async function getLocation(searchLocation: string): Promise<coordType>{
throw new Error(`There was an error fetching the data`);
}
const data: LocationType = await res.json();
return data.results[0].geometry.location;
return {
name: data.results[0].formatted_address,
geo: data.results[0].geometry.location
}
}
// takes coordinates in coordType format and returns json with weather forecast.
export async function getForecast(geoLocation: coordType): Promise<Forecast> {
const { lat, lng } = geoLocation;
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}`
@ -28,11 +31,10 @@ export async function getForecast(geoLocation: coordType): Promise<Forecast> {
}
export async function getHourlyForecast(geoLocation: coordType): Promise<HourlyForecast> {
const { lat, lng } = geoLocation;
const appId = process.env.WEATHER_API;
const res = await fetch(
`https://pro.openweathermap.org/data/2.5/forecast/hourly?lat=${lat}&lon=${lng}&appid=${appId}&mode=json&`
);
const { lat, lng } = geoLocation.geo;
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&current=temperature_2m,apparent_temperature,is_day,precipitation,rain,showers,snowfall,weather_code,cloud_cover,wind_speed_10m,wind_direction_10m&hourly=temperature_2m,apparent_temperature,precipitation_probability,precipitation,weather_code,wind_speed_10m,is_day&daily=weather_code,temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,sunrise,sunset,daylight_duration,sunshine_duration,uv_index_max,precipitation_sum,precipitation_hours,wind_speed_10m_max&timezone=${tz}`
const res = await fetch(url);
if (!res.ok) {
throw new Error(`Failed to fetch the weather data`);
}

File diff suppressed because one or more lines are too long

View File

@ -3,7 +3,6 @@ import React, { useContext, useState } from "react";
import { getLocation } from "@/app/actions";
import { LocationContext } from "@/app/page";
export default function LocationSearch() {
const [searchLocation, setSearchLocation] = useState("");
const { geoLocation, setGeoLocation } = useContext(LocationContext);

View File

@ -1,20 +1,28 @@
"use client";
import { getForecast } from "@/app/actions";
import { getForecast, getHourlyForecast } from "@/app/actions";
import Temperature from "./Temperature";
import { Forecast, coordType } from "@/types/types";
import { useContext, useEffect, useState } from "react";
import { defaultForecast } from "@/app/defaultState";
import { Forecast, HourlyForecast, WeatherContextType, coordType } from "@/types/types";
import { createContext, useContext, useEffect, useState } from "react";
import { defaultForecast, defaultHourlyForecast } from "@/app/defaultState";
import { LocationContext } from "@/app/page";
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>(defaultForecast);
const [weather, setWeather] = useState<HourlyForecast>(defaultHourlyForecast);
const contextValue: WeatherContextType = {
weather,
setWeather
};
useEffect(() => {
let mounted = true;
getForecast(geoLocation).then((data) => {
getHourlyForecast(geoLocation).then((data) => {
if (mounted) {
setWeather(data);
}
@ -25,8 +33,7 @@ export default function WeatherNow() {
}, [geoLocation]);
return (
<>
<h1>Here is the current weather in {weather.name}</h1>
<Temperature tempInfo={weather?.main} />
<h1>Here is the current weather in {geoLocation.name}</h1>
</>
);
}

View File

@ -41,59 +41,107 @@ export interface Forecast {
}
export interface HourlyForecast {
cod: string;
message: number;
cnt: number;
list: Array<{
dt: number;
main: {
temp: number;
feels_like: number;
temp_min: number;
temp_max: number;
pressure: number;
sea_level: number;
grnd_level: number;
humidity: number;
temp_kf: number;
};
weather: Array<{
id: number;
main: string;
description: string;
icon: string;
}>;
clouds: {
all: number;
};
wind: {
speed: number;
deg: number;
gust: number;
};
visibility: number;
pop: number;
rain?: {
"1h": number;
};
sys: {
pod: string;
};
dt_txt: string;
}>;
city: {
id: number;
name: string;
coord: {
lat: number;
lon: number;
};
country: string;
population: number;
timezone: number;
sunrise: number;
sunset: number;
};
latitude: number;
longitude: number;
generationtime_ms: number;
utc_offset_seconds: number;
timezone: string;
timezone_abbreviation: string;
elevation: number;
current_units: CurrentUnits;
current: CurrentWeather;
hourly_units: HourlyUnits;
hourly: HourlyWeather;
daily_units: DailyUnits;
daily: DailyWeather;
}
interface CurrentUnits {
time: string;
interval: string;
temperature_2m: string;
apparent_temperature: string;
is_day: string;
precipitation: string;
rain: string;
showers: string;
snowfall: string;
weather_code: string;
cloud_cover: string;
wind_speed_10m: string;
wind_direction_10m: string;
}
interface CurrentWeather {
time: string;
interval: number;
temperature_2m: number;
apparent_temperature: number;
is_day: number;
precipitation: number;
rain: number;
showers: number;
snowfall: number;
weather_code: number;
cloud_cover: number;
wind_speed_10m: number;
wind_direction_10m: number;
}
interface HourlyUnits {
time: string;
temperature_2m: string;
apparent_temperature: string;
precipitation_probability: string;
precipitation: string;
weather_code: string;
wind_speed_10m: string;
is_day: string;
}
interface HourlyWeather {
time: string[];
temperature_2m: number[];
apparent_temperature: number[];
precipitation_probability: number[];
precipitation: number[];
weather_code: number[];
wind_speed_10m: number[];
is_day: number[];
}
interface DailyUnits {
time: string;
weather_code: string;
temperature_2m_max: string;
temperature_2m_min: string;
apparent_temperature_max: string;
apparent_temperature_min: string;
sunrise: string;
sunset: string;
daylight_duration: string;
sunshine_duration: string;
uv_index_max: string;
precipitation_sum: string;
precipitation_hours: string;
wind_speed_10m_max: string;
}
interface DailyWeather {
time: string[];
weather_code: number[];
temperature_2m_max: number[];
temperature_2m_min: number[];
apparent_temperature_max: number[];
apparent_temperature_min: number[];
sunrise: string[];
sunset: string[];
daylight_duration: number[];
sunshine_duration: number[];
uv_index_max: number[];
precipitation_sum: number[];
precipitation_hours: number[];
wind_speed_10m_max: number[];
}
export interface LocationType {
@ -138,9 +186,12 @@ export interface LocationType {
}
export interface coordType {
lat: number;
lng: number;
name: string;
geo: {
lat: number;
lng: number;}
}
export type EffectCallback = () => void | (() => void | undefined);
export interface TempInfo {
@ -156,4 +207,9 @@ export interface TempInfo {
export interface LocationContextType {
geoLocation: coordType;
setGeoLocation: React.Dispatch<React.SetStateAction<coordType>>;
}
export interface WeatherContextType {
weather: HourlyForecast;
setWeather: React.Dispatch<React.SetStateAction<HourlyForecast>>;
}