Implemented api for the weather call.
Some checks failed
Docker Build & Publish / Build Docker (push) Failing after 51s

This commit is contained in:
ChrQR 2024-05-18 01:50:05 +02:00
parent ec5d7fe8f7
commit 31f633e982
5 changed files with 82 additions and 9 deletions

16
app/api/forecast/route.ts Normal file
View File

@ -0,0 +1,16 @@
import { Forecast } from "@/types/types";
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const lat = searchParams.get("lat");
const lng = searchParams.get("lng");
const res = await fetch(
`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=auto`
);
if (!res.ok) {
throw new Error(`Failed to fetch the weather data`);
}
const data: Forecast = await res.json();
return Response.json({ data });
}

36
app/api/location/route.ts Normal file
View File

@ -0,0 +1,36 @@
"use server";
import { Forecast, LocationType, coordType } from "@/types/types";
export async function getLocation(searchLocation: string): Promise<coordType> {
const placesKey = process.env.PLACES_API;
if (!placesKey) {
console.error("PLACES_API environment variable is not set");
throw new Error("PLACES_API environment variable is not set");
}
const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${searchLocation}&key=${placesKey}`;
console.log(`Fetching location`);
try {
const res = await fetch(url);
if (!res.ok) {
console.error(`Fetch error: ${res.statusText}`);
throw new Error(`There was an error fetching the data`);
}
const data: LocationType = await res.json();
if (!data.results[0]?.formatted_address) {
console.error("Unable to find the address in the response");
throw new Error(`Unable to find the address`);
}
return {
name: data.results[0].formatted_address,
geo: data.results[0].geometry.location,
};
} catch (error) {
console.error("Error fetching location:", error);
throw new Error("Error fetching location");
}
}

View File

@ -1,7 +1,7 @@
"use client";
import React, { useContext, useState } from "react";
import { getLocation } from "@/pages/api/actions";
import { LocationContext } from "@/context/LocationContext";
import { getLocation } from "@/app/actions/actions";
export default function LocationSearch() {
const [searchLocation, setSearchLocation] = useState("");

View File

@ -1,13 +1,11 @@
"use client";
import { getHourlyForecast } from "@/pages/api/actions";
import Temperature from "./Temperature";
import { Forecast, WeatherContextType } from "@/types/types";
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 DailyCard from "./DailyCard/DailyCard";
import CardContainer from "./DailyCard/CardContainer";
export const WeatherContext = createContext<WeatherContextType>({
@ -18,27 +16,50 @@ export const WeatherContext = createContext<WeatherContextType>({
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;
getHourlyForecast(geoLocation).then((data) => {
if (mounted) {
setWeather(data);
}
});
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 />