From ec5d7fe8f7a88d2576cfac47dcba8cd21b37d3eb Mon Sep 17 00:00:00 2001
From: ChrQR <christian@rannes.com>
Date: Sat, 18 May 2024 01:12:41 +0200
Subject: [PATCH] Set up pages router and moved actions.ts This might have been
 the problem all along. I thought server components would fix it, but in order
 to not expose my api key i have to create an API.

---
 components/LocationSearch.tsx | 28 ++++++++++++++--------------
 components/WeatherNow.tsx     |  5 ++---
 {app => pages/api}/actions.ts |  2 +-
 3 files changed, 17 insertions(+), 18 deletions(-)
 rename {app => pages/api}/actions.ts (98%)

diff --git a/components/LocationSearch.tsx b/components/LocationSearch.tsx
index 048aa31..0c275e5 100644
--- a/components/LocationSearch.tsx
+++ b/components/LocationSearch.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useContext, useState } from "react";
-import { getLocation } from "@/app/actions";
+import { getLocation } from "@/pages/api/actions";
 import { LocationContext } from "@/context/LocationContext";
 
 export default function LocationSearch() {
@@ -25,18 +25,18 @@ export default function LocationSearch() {
   };
 
   return (
-      <form onSubmit={handleSubmit}>
-        <input
-          className="my-4 w-full rounded h-8 px-2 box-border border-2 hover:shadow-md max-w-md"
-          id="location"
-          name="locationSearch"
-          type="text"
-          placeholder="Enter a location to get the weather"
-          value={searchLocation}
-          onChange={handleChange}
-          disabled={pending}
-          aria-label="Enter location to query the weather"
-        />
-      </form>
+    <form onSubmit={handleSubmit}>
+      <input
+        className="my-4 w-full rounded h-8 px-2 box-border border-2 hover:shadow-md max-w-md"
+        id="location"
+        name="locationSearch"
+        type="text"
+        placeholder="Enter a location to get the weather"
+        value={searchLocation}
+        onChange={handleChange}
+        disabled={pending}
+        aria-label="Enter location to query the weather"
+      />
+    </form>
   );
 }
diff --git a/components/WeatherNow.tsx b/components/WeatherNow.tsx
index aa0e766..a685bd5 100644
--- a/components/WeatherNow.tsx
+++ b/components/WeatherNow.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { getHourlyForecast } from "@/app/actions";
+import { getHourlyForecast } from "@/pages/api/actions";
 import Temperature from "./Temperature";
 import { Forecast, WeatherContextType } from "@/types/types";
 import { createContext, useContext, useEffect, useState } from "react";
@@ -15,7 +15,6 @@ export const WeatherContext = createContext<WeatherContextType>({
   setWeather: () => {}, // Default function, does nothing
 });
 
-
 export default function WeatherNow() {
   const { geoLocation } = useContext(LocationContext);
   const [weather, setWeather] = useState<Forecast>(defaultHourlyForecast);
@@ -44,7 +43,7 @@ export default function WeatherNow() {
         <WeatherHero />
         <Temperature />
         <h2 className="mt-2 text-xl">And the forecast for the coming week</h2>
-        <CardContainer weather={weather}/>
+        <CardContainer weather={weather} />
       </WeatherContext.Provider>
     </div>
   );
diff --git a/app/actions.ts b/pages/api/actions.ts
similarity index 98%
rename from app/actions.ts
rename to pages/api/actions.ts
index 3ec9904..6028e73 100644
--- a/app/actions.ts
+++ b/pages/api/actions.ts
@@ -10,7 +10,7 @@ export async function getLocation(searchLocation: string): Promise<coordType> {
   }
 
   const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${searchLocation}&key=${placesKey}`;
-  console.log(`Fetching URL: ${url}`);
+  console.log(`Fetching location`);
 
   try {
     const res = await fetch(url);