Implemented api for the weather call.

app/api/forecast/route.ts

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

app/api/location/route.ts

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

components/LocationSearch.tsx

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

components/WeatherNow.tsx

@@ -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 (geoLocation.geo.lat && geoLocation.geo.lng) {
-      if (mounted) {
+      getHourlyForecast(geoLocation).then((data) => {
-        setWeather(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 />