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.
This commit is contained in:
ChrQR 2024-05-06 23:22:57 +02:00
parent 0a4e22a8ca
commit 7b97a0eb65
7 changed files with 227 additions and 191 deletions

View File

@ -1,14 +1,28 @@
'use server' '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 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); const res = await fetch(url);
if (!res.ok) { if (!res.ok) {
throw new Error(`There was an error fetching the data`); 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; return data;
} }

View File

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

View File

@ -2,20 +2,26 @@
import LocationSearch from '@/components/LocationSearch'; import LocationSearch from '@/components/LocationSearch';
import WeatherNow from '../components/WeatherNow' import WeatherNow from '../components/WeatherNow'
import { useState } from 'react'; 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() { export default function Home() {
const [geoLocation, setGeoLocation] = useState({
lat: 55.647229603577124,
lng: 12.54995987788925
});
return ( return (
<main> <main>
<div className='block mx-auto max-w-4xl'> <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> </div>
</main> </main>
); );

View File

@ -1,34 +1,37 @@
"use client"; "use client";
import { useState } from "react";
import { getLocation } from "@/app/actions"; 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) { 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>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchLocation(e.target.value); 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 ( return (
<> <>
<form onSubmit={handleSubmit}>
<input <input
id="location" id="location"
name="locationSearch"
type="text" type="text"
placeholder="enter a location to get the weather" placeholder="enter a location to get the weather"
value={searchLocation} value={searchLocation}
onChange={handleChange} onChange={handleChange}
onKeyDown={handleKeyDown}
/> />
<button type="submit" disabled={pending}>
{pending ? "Searching..." : "Search"}
</button>
<label htmlFor="location" className="hidden"> <label htmlFor="location" className="hidden">
Enter location to get the weather! Enter location to get the weather!
</label> </label>
</form>
<p>{searchLocation}</p> <p>{searchLocation}</p>
</> </>
); );

View File

@ -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 kelvin = 273.15;
const tempInfo = props.tempInfo; const tempInfo = props.tempInfo;
const fullTemp = tempInfo.temp - kelvin; const fullTemp = tempInfo.temp - kelvin;

View File

@ -1,26 +1,30 @@
"use client";
import { getForecast } from "@/app/actions";
import Temperature from "./Temperature"; 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 ( return (
<main> <>
<h1>Forecast</h1> <h1>Forecast</h1>
<Temperature tempInfo={weather.main}/> <Temperature tempInfo={weather?.main} />
<p></p> <p></p>
</main> </>
); );
} }

View File

@ -3,12 +3,12 @@ export interface Forecast {
lon: number; lon: number;
lat: number; lat: number;
}; };
weather: { weather: Array<{
id: number; id: number;
main: string; main: string;
description: string; description: string;
icon: string; icon: string;
}[]; }>;
base: string; base: string;
main: { main: {
temp: number; temp: number;
@ -17,17 +17,11 @@ export interface Forecast {
temp_max: number; temp_max: number;
pressure: number; pressure: number;
humidity: number; humidity: number;
sea_level: number;
grnd_level: number;
}; };
visibility: number; visibility: number;
wind: { wind: {
speed: number; speed: number;
deg: number; deg: number;
gust: number;
};
rain: {
onehour: number;
}; };
clouds: { clouds: {
all: number; all: number;
@ -44,7 +38,8 @@ export interface Forecast {
id: number; id: number;
name: string; name: string;
cod: number; cod: number;
} }
export interface LocationType { export interface LocationType {
results: { results: {
@ -88,6 +83,16 @@ export interface LocationType {
} }
export interface coordType { 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;
}