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

app/actions.ts

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

components/LocationSearch.tsx

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

components/WeatherNow.tsx

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

types/types.ts

@@ -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 {
+  name: string;
+  geo: {
     lat: number;
-  lng: number;
+    lng: number;}
 }
+
 export type EffectCallback = () => void | (() => void | undefined);
 
 export interface TempInfo {
@@ -157,3 +208,8 @@ export interface LocationContextType {
   geoLocation: coordType;
   setGeoLocation: React.Dispatch<React.SetStateAction<coordType>>;
 }
+
+export interface WeatherContextType {
+  weather: HourlyForecast;
+  setWeather: React.Dispatch<React.SetStateAction<HourlyForecast>>;
+}