nothing works
This commit is contained in:
parent
55b82e5e5d
commit
0a4e22a8ca
14
app/actions.ts
Normal file
14
app/actions.ts
Normal file
@ -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;
|
||||||
|
}
|
80
app/defaultState.ts
Normal file
80
app/defaultState.ts
Normal file
@ -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"
|
||||||
|
}
|
14
app/page.tsx
14
app/page.tsx
@ -1,20 +1,20 @@
|
|||||||
|
'use client'
|
||||||
import LocationSearch from '@/components/LocationSearch';
|
import LocationSearch from '@/components/LocationSearch';
|
||||||
import WeatherNow from '../components/WeatherNow'
|
import WeatherNow from '../components/WeatherNow'
|
||||||
|
import { useState } from 'react';
|
||||||
const location = {
|
import { LocationType } from '@/types/types';
|
||||||
latitude: '55.645519',
|
|
||||||
longtitude: '12.549600'
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
const [location, setLocation] = useState<LocationType | undefined>(undefined);
|
||||||
|
const { lat, lng } = location?.results[0].geometry.location;
|
||||||
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<main>
|
<main>
|
||||||
<div className='block mx-auto max-w-4xl'>
|
<div className='block mx-auto max-w-4xl'>
|
||||||
<LocationSearch />
|
<LocationSearch setLocation={setLocation}/>
|
||||||
<h1>The weather in Sluseholmen for the next 3 days</h1>
|
<h1>The weather in {location?.results[0].address_components[0].long_name} for the next 3 days</h1>
|
||||||
<WeatherNow location={location}/>
|
<WeatherNow location={location}/>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
@ -1,15 +1,35 @@
|
|||||||
'use client'
|
"use client";
|
||||||
import { createContext } from "react";
|
import { useState } from "react";
|
||||||
|
import { getLocation } from "@/app/actions";
|
||||||
|
import { LocationType } from "@/types/types";
|
||||||
|
|
||||||
export default function LocationSearch() {
|
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<input id="location" type="text" placeholder="enter a location to get the weather"/>
|
<input
|
||||||
<label htmlFor="location" className="hidden">Enter location to get the weather!</label>
|
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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,12 +1,11 @@
|
|||||||
import Temperature from "./Temperature";
|
import Temperature from "./Temperature";
|
||||||
import { Forecast, LocationType } from "@/types/types";
|
import { Forecast, LocationType, coordType } from "@/types/types";
|
||||||
|
|
||||||
async function getForecast(location: LocationType): Promise<Forecast> {
|
async function getForecast(location: LocationType): Promise<Forecast> {
|
||||||
|
const { lat, lng } = location.results[0].geometry.location;
|
||||||
const { latitude, longtitude } = location;
|
|
||||||
const appId = "546911d860cb81f16585f7973b394b70";
|
const appId = "546911d860cb81f16585f7973b394b70";
|
||||||
const res = await fetch(
|
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) {
|
if (!res.ok) {
|
||||||
throw new Error(`Failed to fetch the weather data`);
|
throw new Error(`Failed to fetch the weather data`);
|
||||||
@ -14,7 +13,7 @@ async function getForecast(location: LocationType): Promise<Forecast> {
|
|||||||
return res.json();
|
return res.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function WeatherNow(props: { location: LocationType }) {
|
export default async function WeatherNow(props: { location: any }) {
|
||||||
const location = props.location;
|
const location = props.location;
|
||||||
const weather = await getForecast(location);
|
const weather = await getForecast(location);
|
||||||
return (
|
return (
|
||||||
|
@ -45,8 +45,49 @@ export interface Forecast {
|
|||||||
name: string;
|
name: string;
|
||||||
cod: number;
|
cod: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LocationType {
|
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;
|
latitude: string;
|
||||||
longtitude: string;
|
longtitude: string;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user