From 0a4e22a8ca3a458d6976edcbf2692a94f093c3ef Mon Sep 17 00:00:00 2001 From: ChrQR Date: Sun, 5 May 2024 22:55:51 +0200 Subject: [PATCH] nothing works --- app/actions.ts | 14 ++++++ app/defaultState.ts | 80 +++++++++++++++++++++++++++++++++++ app/page.tsx | 14 +++--- components/LocationSearch.tsx | 36 ++++++++++++---- components/WeatherNow.tsx | 9 ++-- types/types.ts | 43 ++++++++++++++++++- 6 files changed, 175 insertions(+), 21 deletions(-) create mode 100644 app/actions.ts create mode 100644 app/defaultState.ts diff --git a/app/actions.ts b/app/actions.ts new file mode 100644 index 0000000..4f72c6f --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/app/defaultState.ts b/app/defaultState.ts new file mode 100644 index 0000000..4629674 --- /dev/null +++ b/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" + } \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 07ffbae..46fbb10 100644 --- a/app/page.tsx +++ b/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(undefined); +const { lat, lng } = location?.results[0].geometry.location; export default function Home() { return (
- -

The weather in Sluseholmen for the next 3 days

+ +

The weather in {location?.results[0].address_components[0].long_name} for the next 3 days

diff --git a/components/LocationSearch.tsx b/components/LocationSearch.tsx index 77f78dc..876e6ef 100644 --- a/components/LocationSearch.tsx +++ b/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) => { + setSearchLocation(e.target.value); + }; + const handleKeyDown = (e: any) => { + if (e.key === "Enter") { + const location: LocationType = getLocation(searchLocation); + setLocation(location); + } + }; return ( <> - - + + +

{searchLocation}

); } diff --git a/components/WeatherNow.tsx b/components/WeatherNow.tsx index 126a320..2d530b9 100644 --- a/components/WeatherNow.tsx +++ b/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 { - - 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 { 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 ( diff --git a/types/types.ts b/types/types.ts index 7c5b426..97243af 100644 --- a/types/types.ts +++ b/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; } \ No newline at end of file