rannes.dev/local-weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

did some stuff with LocationSearch component and moved types to separate file.

Browse Source
This commit is contained in:
ChrQR 2024-05-05 09:51:29 +02:00
parent 0e710e80c3
commit 55b82e5e5d
6 changed files with 95 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/page.tsx
View File

@ -6,6 +6,9 @@ const location = {
longtitude: '12.549600'
}
export default function Home() {
return (
<main>

12
components/LocationSearch.tsx
View File

@ -1,7 +1,15 @@
'use client'
import { createContext } from "react";
export default function LocationSearch() {
export default async function LocationSearch() {
return (
<h1>yes yes yes</h1>
<>
<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>
</>
);
}

26
components/Temperature.tsx
View File

@ -0,0 +1,26 @@
interface TempInfo {
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) {
const kelvin = 273.15;
const tempInfo = props.tempInfo;
const fullTemp = tempInfo.temp - kelvin;
const temperature = fullTemp.toFixed(2);
const fullFeels = tempInfo.feels_like - kelvin;
const feelsLike = fullFeels.toFixed(2);
return (
<p>The temperature right now is {temperature}°C and feels like {feelsLike}°C</p>
)
}

91
components/Weather.tsx
View File

@ -1,91 +0,0 @@
import { error } from "console";
import { useEffect, useState } from "react";
import { json } from "stream/consumers";
interface Forecast {
coord: {
lon: number;
lat: number;
},
weather:
{
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;
cod: number;
};
interface LocationType {
latitude: string;
longtitude: string;
}
const kelvin = 273.15;
async function getForecast(location: LocationType): Promise<Forecast> {
const {latitude, longtitude} = location;
const appId = '546911d860cb81f16585f7973b394b70';
const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`)
if (!res.ok) {
throw new Error(`This is not great ${error}`);
}
return res.json();
}
export default async function Weather(props: {location: LocationType}) {
const [weather, setWeather] = useState({});
const location = props.location
const appId = '546911d860cb81f16585f7973b394b70';
// const weather = await getForecast(location)
// const temp = weather.main.temp - kelvin
useEffect(() => {
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${location.latitude}&lon=${location.longtitude}&appid=${appId}`)
.then(response => response.json())
.then(json => setWeather(json))
.catch(error => console.log(error))
})
return (
<main>
<h1>Forecast</h1>
<div>
{ weather ? <pre>{JSON.stringify(weather, null, 2)}</pre> : 'loading...'}
</div>
</main>
);
}

62
components/WeatherNow.tsx
View File

@ -1,57 +1,5 @@
import { error } from "console";
interface Forecast {
coord: {
lon: number;
lat: number;
};
weather: {
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;
cod: number;
}
interface LocationType {
latitude: string;
longtitude: string;
}
import Temperature from "./Temperature";
import { Forecast, LocationType } from "@/types/types";
async function getForecast(location: LocationType): Promise<Forecast> {
@ -61,20 +9,18 @@ async function getForecast(location: LocationType): Promise<Forecast> {
`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`
);
if (!res.ok) {
throw new Error(`This is not great ${error}`);
throw new Error(`Failed to fetch the weather data`);
}
return res.json();
}
export default async function WeatherNow(props: { location: LocationType }) {
const kelvin = 273.15;
const location = props.location;
const weather = await getForecast(location);
const temp = weather.main.temp - kelvin;
return (
<main>
<h1>Forecast</h1>
<p>{temp}</p>
<Temperature tempInfo={weather.main}/>
<p></p>
</main>
);

52
types/types.ts Normal file
View File

@ -0,0 +1,52 @@
export interface Forecast {
coord: {
lon: number;
lat: number;
};
weather: {
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;
cod: number;
}
export interface LocationType {
latitude: string;
longtitude: string;
}