Fixed some things.

Need to fix google places call. It is refreshing the page when receiving the data, thus resetting the state.

It's a job for tomorrow.

app/actions.ts

@@ -1,14 +1,28 @@
 'use server'
 
-import { LocationType } from "@/types/types";
+import { Forecast, LocationType, coordType } from "@/types/types";
 
-export async function getLocation(searchLocation: string){
+//takes address and returns coords in obj as {lat: number, lng: number}
+export async function getLocation(searchLocation: string): Promise<coordType>{
     const placesKey = "AIzaSyBf1ip4XogdC6XmbfDhxS_RJDOSieycJpQ";
-    const url = `https://maps.googleapis.com/maps/api/geocode/json?${searchLocation}&key=${placesKey}`;
+    const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${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();
+    const data: LocationType = await res.json();
+    return data.results[0].geometry.location;
+  }
+
+export async function getForecast(geoLocation: coordType): Promise<Forecast> {
+    const { lat, lng } = geoLocation;
+    const appId = "546911d860cb81f16585f7973b394b70";
+    const res = await fetch(
+      `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`);
+    }
+    const data: Forecast = await res.json();
     return data;
   }

app/defaultState.ts

@@ -1,80 +1,95 @@
 export const defaultState = {
-    "results": [
+  results: [
-      {
+    {
-        "address_components": [
+      address_components: [
-          {
+        {
-            "long_name": "Sluseholmen",
+          long_name: "Sluseholmen",
-            "short_name": "Sluseholmen",
+          short_name: "Sluseholmen",
-            "types": [
+          types: ["route"],
-              "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": [
+          long_name: "Vesterbro",
-          "route"
+          short_name: "Vesterbro",
-        ]
+          types: ["political", "sublocality", "sublocality_level_1"],
-      }
+        },
-    ],
+        {
-    "status": "OK"
+          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",
+};
+
+export const defaultForecast = {
+  coord: { lon: 12.5476, lat: 55.6452 },
+  weather: [
+    { id: 803, main: "Clouds", description: "broken clouds", icon: "04n" },
+  ],
+  base: "stations",
+  main: {
+    temp: 284.38,
+    feels_like: 283.83,
+    temp_min: 283.94,
+    temp_max: 285.38,
+    pressure: 1013,
+    humidity: 87,
+  },
+  visibility: 10000,
+  wind: { speed: 3.09, deg: 60 },
+  clouds: { all: 75 },
+  dt: 1715027131,
+  sys: {
+    type: 1,
+    id: 1575,
+    country: "DK",
+    sunrise: 1714965344,
+    sunset: 1715021822,
+  },
+  timezone: 7200,
+  id: 2618424,
+  name: "Copenhagen municipality",
+  cod: 200,
+};

app/page.tsx

@@ -2,20 +2,26 @@
 import LocationSearch from '@/components/LocationSearch';
 import WeatherNow from '../components/WeatherNow'
 import { useState } from 'react';
-import { LocationType } from '@/types/types';
+import { defaultState } from './defaultState';
-
+import { coordType } from '@/types/types';
-
-const [location, setLocation] = useState<LocationType | undefined>(undefined);
-const { lat, lng } = location?.results[0].geometry.location;
 
+const defaultGeoLocation: coordType = {
+  lat: 55.647229603577124,
+  lng: 12.54995987788925
+}
 
 export default function Home() {
+  const [geoLocation, setGeoLocation] = useState({
+    lat: 55.647229603577124,
+    lng: 12.54995987788925
+  });
   return (
     <main>
       <div className='block mx-auto max-w-4xl'>
-        <LocationSearch setLocation={setLocation}/>
+        <LocationSearch setGeoLocation={setGeoLocation}/>
-        <h1>The weather in {location?.results[0].address_components[0].long_name} for the next 3 days</h1>
+        <h1>The weather in {} for the next 3 days</h1>
-        <WeatherNow location={location}/>
+        <WeatherNow geoLocation={geoLocation}/>
+        <p>{JSON.stringify(geoLocation)}</p>
       </div>
     </main>
   );

components/LocationSearch.tsx

@@ -1,34 +1,37 @@
 "use client";
-import { useState } from "react";
 import { getLocation } from "@/app/actions";
-import { LocationType } from "@/types/types";
+import { useState } from "react";
+import { useFormStatus } from "react-dom";
 
 export default function LocationSearch(props: any) {
-  const [searchLocation, setSearchLocation] = useState("Sluseholmen");
+  const [searchLocation, setSearchLocation] = useState("");
-  const setLocation = props.setLocation;
+  const setGeoLocation = props.setGeoLocation;
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchLocation(e.target.value);
   };
-  const handleKeyDown = (e: any) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    if (e.key === "Enter") {
+    const coordinates = getLocation(searchLocation);
-      const location: LocationType = getLocation(searchLocation);
+    setGeoLocation(coordinates);
-      setLocation(location);
-    }
   };
-
+  const { pending } = useFormStatus();
   return (
     <>
-      <input
+      <form onSubmit={handleSubmit}>
-        id="location"
+        <input
-        type="text"
+          id="location"
-        placeholder="enter a location to get the weather"
+          name="locationSearch"
-        value={searchLocation}
+          type="text"
-        onChange={handleChange}
+          placeholder="enter a location to get the weather"
-        onKeyDown={handleKeyDown}
+          value={searchLocation}
-      />
+          onChange={handleChange}
-      <label htmlFor="location" className="hidden">
+        />
-        Enter location to get the weather!
+        <button type="submit" disabled={pending}>
-      </label>
+          {pending ? "Searching..." : "Search"}
+        </button>
+        <label htmlFor="location" className="hidden">
+          Enter location to get the weather!
+        </label>
+      </form>
       <p>{searchLocation}</p>
     </>
   );

components/Temperature.tsx

@@ -1,17 +1,6 @@
-interface TempInfo {
+import { TempInfo } from "@/types/types";
-    tempInfo: {
-        temp: number;
-        feels_like: number;
-        temp_min: number;
-        temp_max: number;
-        pressure: number;
-        humidity: number;
-        sea_level: number;
-        grnd_level: number;
-      };
-};
 
-export default function Temperature(props: TempInfo) {
+export default function Temperature(props: {tempInfo:TempInfo}) {
     const kelvin = 273.15;
     const tempInfo = props.tempInfo;
     const fullTemp = tempInfo.temp - kelvin;

components/WeatherNow.tsx

@@ -1,26 +1,30 @@
+"use client";
+
+import { getForecast } from "@/app/actions";
 import Temperature from "./Temperature";
-import { Forecast, LocationType, coordType } from "@/types/types";
+import { Forecast, coordType } from "@/types/types";
+import { useEffect, useState } from "react";
+import { defaultForecast } from "@/app/defaultState";
 
-async function getForecast(location: LocationType): Promise<Forecast> {
+export default function WeatherNow(props: { geoLocation: coordType }) {
-  const { lat, lng } = location.results[0].geometry.location;
+  // const weather = getForecast(props.geoLocation);
-  const appId = "546911d860cb81f16585f7973b394b70";
+  const [weather, setWeather] = useState<Forecast>(defaultForecast);
-  const res = await fetch(
+  useEffect(() => {
-    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${appId}`
+    let mounted = true;
-  );
+    getForecast(props.geoLocation).then((data) => {
-  if (!res.ok) {
+      if (mounted) {
-    throw new Error(`Failed to fetch the weather data`);
+        setWeather(data);
-  }
+      }
-  return res.json();
+    });
-}
+    return () => {
-
+      mounted = false;
-export default async function WeatherNow(props: { location: any }) {
+    };
-  const location = props.location;
+  }, [props.geoLocation]);
-  const weather = await getForecast(location);
   return (
-    <main>
+    <>
       <h1>Forecast</h1>
-      <Temperature tempInfo={weather.main}/>
+      <Temperature tempInfo={weather?.main} />
       <p></p>
-    </main>
+    </>
   );
 }

types/types.ts

@@ -1,50 +1,45 @@
 export interface Forecast {
-    coord: {
+  coord: {
-      lon: number;
+    lon: number;
-      lat: number;
+    lat: number;
-    };
+  };
-    weather: {
+  weather: Array<{
-      id: number;
-      main: string;
-      description: string;
-      icon: string;
-    }[];
-    base: string;
-    main: {
-      temp: number;
-      feels_like: number;
-      temp_min: number;
-      temp_max: number;
-      pressure: number;
-      humidity: number;
-      sea_level: number;
-      grnd_level: number;
-    };
-    visibility: number;
-    wind: {
-      speed: number;
-      deg: number;
-      gust: number;
-    };
-    rain: {
-      onehour: number;
-    };
-    clouds: {
-      all: number;
-    };
-    dt: number;
-    sys: {
-      type: number;
-      id: number;
-      country: string;
-      sunrise: number;
-      sunset: number;
-    };
-    timezone: number;
     id: number;
-    name: string;
+    main: string;
-    cod: number;
+    description: string;
-  }
+    icon: string;
+  }>;
+  base: string;
+  main: {
+    temp: number;
+    feels_like: number;
+    temp_min: number;
+    temp_max: number;
+    pressure: number;
+    humidity: number;
+  };
+  visibility: number;
+  wind: {
+    speed: number;
+    deg: number;
+  };
+  clouds: {
+    all: number;
+  };
+  dt: number;
+  sys: {
+    type: number;
+    id: number;
+    country: string;
+    sunrise: number;
+    sunset: number;
+  };
+  timezone: number;
+  id: number;
+  name: string;
+  cod: number;
+}
+
 
 export interface LocationType {
   results: {
@@ -88,6 +83,16 @@ export interface LocationType {
 } 
 
 export interface coordType {
-    latitude: string;
+    lat: number;
-    longtitude: string;
+    lng: number;
-  }
+  }
+export type EffectCallback = () => (void | (() => void | undefined));
+
+export interface TempInfo {
+  temp: number;
+  feels_like: number;
+  temp_min: number;
+  temp_max: number;
+  pressure: number;
+  humidity: number;
+}