nothing works

app/actions.ts

@@ -0,0 +1,14 @@
+'use server'
+
+import { LocationType } from "@/types/types";
+
+export async function getLocation(searchLocation: string){
+    const placesKey = "AIzaSyBf1ip4XogdC6XmbfDhxS_RJDOSieycJpQ";
+    const url = `https://maps.googleapis.com/maps/api/geocode/json?${searchLocation}&key=${placesKey}`;
+    const res = await fetch(url);
+    if (!res.ok) {
+      throw new Error(`There was an error fetching the data`);
+    }
+    const data = await res.json();
+    return data;
+  }

app/defaultState.ts

@@ -0,0 +1,80 @@
+export const defaultState = {
+    "results": [
+      {
+        "address_components": [
+          {
+            "long_name": "Sluseholmen",
+            "short_name": "Sluseholmen",
+            "types": [
+              "route"
+            ]
+          },
+          {
+            "long_name": "Vesterbro",
+            "short_name": "Vesterbro",
+            "types": [
+              "political",
+              "sublocality",
+              "sublocality_level_1"
+            ]
+          },
+          {
+            "long_name": "København",
+            "short_name": "København",
+            "types": [
+              "locality",
+              "political"
+            ]
+          },
+          {
+            "long_name": "Denmark",
+            "short_name": "DK",
+            "types": [
+              "country",
+              "political"
+            ]
+          },
+          {
+            "long_name": "2450",
+            "short_name": "2450",
+            "types": [
+              "postal_code"
+            ]
+          }
+        ],
+        "formatted_address": "Sluseholmen, 2450 København, Denmark",
+        "geometry": {
+          "bounds": {
+            "northeast": {
+              "lat": 55.64754749999999,
+              "lng": 12.5502837
+            },
+            "southwest": {
+              "lat": 55.6435823,
+              "lng": 12.5452758
+            }
+          },
+          "location": {
+            "lat": 55.6452427,
+            "lng": 12.5475522
+          },
+          "location_type": "GEOMETRIC_CENTER",
+          "viewport": {
+            "northeast": {
+              "lat": 55.64754749999999,
+              "lng": 12.5502837
+            },
+            "southwest": {
+              "lat": 55.6435823,
+              "lng": 12.5452758
+            }
+          }
+        },
+        "place_id": "ChIJBzR68YNUUkYRoxbRfFuUlEM",
+        "types": [
+          "route"
+        ]
+      }
+    ],
+    "status": "OK"
+  }

app/page.tsx

@@ -1,20 +1,20 @@
+'use client'
 import LocationSearch from '@/components/LocationSearch';
 import WeatherNow from '../components/WeatherNow'
-
-const location = {
-  latitude: '55.645519',
-  longtitude: '12.549600'
-}
+import { useState } from 'react';
+import { LocationType } from '@/types/types';
 
 
+const [location, setLocation] = useState<LocationType | undefined>(undefined);
+const { lat, lng } = location?.results[0].geometry.location;
 
 
 export default function Home() {
   return (
     <main>
       <div className='block mx-auto max-w-4xl'>
-        <LocationSearch />
-        <h1>The weather in Sluseholmen for the next 3 days</h1>
+        <LocationSearch setLocation={setLocation}/>
+        <h1>The weather in {location?.results[0].address_components[0].long_name} for the next 3 days</h1>
         <WeatherNow location={location}/>
       </div>
     </main>

components/LocationSearch.tsx

@@ -1,15 +1,35 @@
-'use client'
-import { createContext } from "react";
-
-
-
-export default function LocationSearch() {
+"use client";
+import { useState } from "react";
+import { getLocation } from "@/app/actions";
+import { LocationType } from "@/types/types";
 
+export default function LocationSearch(props: any) {
+  const [searchLocation, setSearchLocation] = useState("Sluseholmen");
+  const setLocation = props.setLocation;
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchLocation(e.target.value);
+  };
+  const handleKeyDown = (e: any) => {
+    if (e.key === "Enter") {
+      const location: LocationType = getLocation(searchLocation);
+      setLocation(location);
+    }
+  };
 
   return (
     <>
-      <input id="location" type="text" placeholder="enter a location to get the weather"/>
-      <label htmlFor="location" className="hidden">Enter location to get the weather!</label>
+      <input
+        id="location"
+        type="text"
+        placeholder="enter a location to get the weather"
+        value={searchLocation}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+      />
+      <label htmlFor="location" className="hidden">
+        Enter location to get the weather!
+      </label>
+      <p>{searchLocation}</p>
     </>
   );
 }

components/WeatherNow.tsx

@@ -1,12 +1,11 @@
 import Temperature from "./Temperature";
-import { Forecast, LocationType } from "@/types/types";
+import { Forecast, LocationType, coordType } from "@/types/types";
 
 async function getForecast(location: LocationType): Promise<Forecast> {
-
-  const { latitude, longtitude } = location;
+  const { lat, lng } = location.results[0].geometry.location;
   const appId = "546911d860cb81f16585f7973b394b70";
   const res = await fetch(
-    `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`
+    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${appId}`
   );
   if (!res.ok) {
     throw new Error(`Failed to fetch the weather data`);
@@ -14,7 +13,7 @@ async function getForecast(location: LocationType): Promise<Forecast> {
   return res.json();
 }
 
-export default async function WeatherNow(props: { location: LocationType }) {
+export default async function WeatherNow(props: { location: any }) {
   const location = props.location;
   const weather = await getForecast(location);
   return (

types/types.ts

@@ -45,8 +45,49 @@ export interface Forecast {
     name: string;
     cod: number;
   }
-  
+
 export interface LocationType {
+  results: {
+      address_components: {
+          long_name: string;
+          short_name: string;
+          types: string[];
+      }[];
+      formatted_address: string;
+      geometry: {
+          bounds: {
+              northeast: {
+                  lat: number;
+                  lng: number;
+              };
+              southwest: {
+                  lat: number;
+                  lng: number;
+              };
+          };
+          location: {
+              lat: number;
+              lng: number;
+          };
+          location_type: string;
+          viewport: {
+              northeast: {
+                  lat: number;
+                  lng: number;
+              };
+              southwest: {
+                  lat: number;
+                  lng: number;
+              };
+          };
+      };
+      place_id: string;
+      types: string[];
+  }[];
+  status: string;
+} 
+
+export interface coordType {
     latitude: string;
     longtitude: string;
   }