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

fixed location fetch

Browse Source
This commit is contained in:
ChrQR 2024-05-07 21:18:51 +02:00
parent 7b97a0eb65
commit e3f0a72539
9 changed files with 64 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/page.tsx
View File

@ -4,6 +4,7 @@ import WeatherNow from '../components/WeatherNow'
import { useState } from 'react'; import { useState } from 'react';
import { defaultState } from './defaultState'; import { defaultState } from './defaultState';
import { coordType } from '@/types/types'; import { coordType } from '@/types/types';
import WeatherIcon from '@/components/WeatherIcon';
const defaultGeoLocation: coordType = { const defaultGeoLocation: coordType = {
lat: 55.647229603577124, lat: 55.647229603577124,
@ -19,9 +20,8 @@ export default function Home() {
<main> <main>
<div className='block mx-auto max-w-4xl'> <div className='block mx-auto max-w-4xl'>
<LocationSearch setGeoLocation={setGeoLocation}/> <LocationSearch setGeoLocation={setGeoLocation}/>
<h1>The weather in {} for the next 3 days</h1> <WeatherIcon />
<WeatherNow geoLocation={geoLocation}/> <WeatherNow geoLocation={geoLocation}/>
<p>{JSON.stringify(geoLocation)}</p>
</div> </div>
</main> </main>
); );

13
components/LocationSearch.tsx
View File

@ -6,14 +6,20 @@ import { useFormStatus } from "react-dom";
export default function LocationSearch(props: any) { export default function LocationSearch(props: any) {
const [searchLocation, setSearchLocation] = useState(""); const [searchLocation, setSearchLocation] = useState("");
const setGeoLocation = props.setGeoLocation; const setGeoLocation = props.setGeoLocation;
const { pending } = useFormStatus();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchLocation(e.target.value); setSearchLocation(e.target.value);
}; };
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
const coordinates = getLocation(searchLocation); e.preventDefault();
try {
const coordinates = await getLocation(searchLocation);
setGeoLocation(coordinates); setGeoLocation(coordinates);
} catch (error) {
console.error("Error fetching location:", error);
}
}; };
const { pending } = useFormStatus();
return ( return (
<> <>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
@ -32,7 +38,6 @@ export default function LocationSearch(props: any) {
Enter location to get the weather! Enter location to get the weather!
</label> </label>
</form> </form>
<p>{searchLocation}</p>
</> </>
); );
} }

8
components/WeatherIcon.tsx Normal file
View File

@ -0,0 +1,8 @@
import Image from "next/image";
import sunnyColor from '../public/sunny.svg'
export default function WeatherIcon() {
return(
<Image src={sunnyColor} alt="Weather icon"/>
)
};

2
components/WeatherNow.tsx
View File

@ -22,7 +22,7 @@ export default function WeatherNow(props: { geoLocation: coordType }) {
}, [props.geoLocation]); }, [props.geoLocation]);
return ( return (
<> <>
<h1>Forecast</h1> <h1>Here is the current weather in {weather.name}</h1>
<Temperature tempInfo={weather?.main} /> <Temperature tempInfo={weather?.main} />
<p></p> <p></p>
</> </>

5
public/clearNight.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Color=Off">
<path id="outline" fill-rule="evenodd" clip-rule="evenodd" d="M27.591 19.1057C28.0513 17.388 28.1145 15.6574 27.837 14.0114C27.4654 15.2034 26.8022 16.2331 25.947 17.0413L25.9461 17.0499C25.3061 17.6802 24.5516 18.1842 23.7221 18.5341C22.7901 18.9273 21.7849 19.1169 20.7738 19.0903C19.7627 19.0638 18.7688 18.8216 17.8588 18.3801C16.9488 17.9386 16.1435 17.3078 15.4968 16.5301C14.8501 15.7523 14.377 14.8454 14.109 13.8701C13.8409 12.8947 13.7843 11.8734 13.9427 10.8744C14.1011 9.8754 14.471 8.92174 15.0277 8.07718C15.5469 7.28944 16.2173 6.61355 16.9995 6.08838C17.9968 5.39143 19.1693 4.95214 20.4056 4.83674C19.9856 4.6716 19.552 4.52838 19.1058 4.40881C12.7042 2.69351 6.12412 6.4925 4.40882 12.8941C2.69352 19.2957 6.49251 25.8757 12.8941 27.591C19.2957 29.3063 25.8757 25.5073 27.591 19.1057ZM25.0461 20.2663C23.0255 24.5635 18.1597 26.9314 13.4117 25.6592C8.07708 24.2298 4.91125 18.7464 6.34067 13.4117C7.32782 9.72765 10.2484 7.07793 13.7182 6.26172C13.5538 6.46956 13.3982 6.68476 13.2519 6.90679C12.5287 8.00414 12.048 9.24325 11.8422 10.5413C11.6363 11.8393 11.71 13.1663 12.0582 14.4336C12.4064 15.7009 13.0212 16.8792 13.8615 17.8898C14.7017 18.9003 15.748 19.7199 16.9304 20.2935C18.1129 20.8672 19.4041 21.1819 20.7179 21.2164C22.0317 21.2509 23.3378 21.0045 24.5487 20.4937C24.7169 20.4227 24.8828 20.3469 25.0461 20.2663ZM25.8603 8.6141L25.3359 7L24.8114 8.6141L23.1143 8.6141L24.4873 9.61167L23.9629 11.2258L25.3359 10.2282L26.7089 11.2258L26.1845 9.61167L27.5575 8.6141L25.8603 8.6141ZM19.3359 7L19.8603 8.6141L21.5575 8.6141L20.1845 9.61167L20.7089 11.2258L19.3359 10.2282L17.9629 11.2258L18.4873 9.61167L17.1143 8.6141L18.8114 8.6141L19.3359 7ZM22.8603 12.6141L22.3359 11L21.8114 12.6141L20.1143 12.6141L21.4873 13.6117L20.9629 15.2258L22.3359 14.2282L23.7089 15.2258L23.1845 13.6117L24.5575 12.6141L22.8603 12.6141Z" fill="white"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

11
public/clearNightColor.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Color=On">
<path id="outline" fill-rule="evenodd" clip-rule="evenodd" d="M27.591 19.1057C28.0513 17.388 28.1145 15.6574 27.837 14.0114C27.4654 15.2034 26.8022 16.2331 25.947 17.0413L25.9461 17.0499C25.3061 17.6802 24.5516 18.1842 23.7221 18.5341C22.7901 18.9273 21.7849 19.1169 20.7738 19.0903C19.7627 19.0638 18.7688 18.8216 17.8588 18.3801C16.9488 17.9386 16.1435 17.3078 15.4968 16.5301C14.8501 15.7523 14.377 14.8454 14.109 13.8701C13.8409 12.8947 13.7843 11.8734 13.9427 10.8744C14.1011 9.8754 14.471 8.92174 15.0277 8.07718C15.5469 7.28944 16.2173 6.61355 16.9995 6.08838C17.9968 5.39143 19.1693 4.95214 20.4056 4.83674C19.9856 4.6716 19.552 4.52838 19.1058 4.40881C12.7042 2.69351 6.12412 6.4925 4.40882 12.8941C2.69352 19.2957 6.49251 25.8757 12.8941 27.591C19.2957 29.3063 25.8757 25.5073 27.591 19.1057ZM25.0461 20.2663C23.0255 24.5635 18.1597 26.9314 13.4117 25.6592C8.07708 24.2298 4.91125 18.7464 6.34067 13.4117C7.32782 9.72765 10.2484 7.07793 13.7182 6.26172C13.5538 6.46956 13.3982 6.68476 13.2519 6.90679C12.5287 8.00414 12.048 9.24325 11.8422 10.5413C11.6363 11.8393 11.71 13.1663 12.0582 14.4336C12.4064 15.7009 13.0212 16.8792 13.8615 17.8898C14.7017 18.9003 15.748 19.7199 16.9304 20.2935C18.1129 20.8672 19.4041 21.1819 20.7179 21.2164C22.0317 21.2509 23.3378 21.0045 24.5487 20.4937C24.7169 20.4227 24.8828 20.3469 25.0461 20.2663ZM25.8603 8.6141L25.3359 7L24.8114 8.6141L23.1143 8.6141L24.4873 9.61167L23.9629 11.2258L25.3359 10.2282L26.7089 11.2258L26.1845 9.61167L27.5575 8.6141L25.8603 8.6141ZM19.3359 7L19.8603 8.6141L21.5575 8.6141L20.1845 9.61167L20.7089 11.2258L19.3359 10.2282L17.9629 11.2258L18.4873 9.61167L17.1143 8.6141L18.8114 8.6141L19.3359 7ZM22.8603 12.6141L22.3359 11L21.8114 12.6141L20.1143 12.6141L21.4873 13.6117L20.9629 15.2258L22.3359 14.2282L23.7089 15.2258L23.1845 13.6117L24.5575 12.6141L22.8603 12.6141Z" fill="url(#paint0_linear_9_1785)"/>
</g>
<defs>
<linearGradient id="paint0_linear_9_1785" x1="19.1058" y1="4.40881" x2="12.8941" y2="27.591" gradientUnits="userSpaceOnUse">
<stop stop-color="#F5BD52"/>
<stop offset="1" stop-color="#F5DA79"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

5
public/cloudy.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Color=Off">
<path id="outline" fill-rule="evenodd" clip-rule="evenodd" d="M11.5317 8.05595C11.8857 8.01895 12.2449 8 12.6083 8C17.469 8 21.5661 11.3898 22.821 16.0139C22.9215 16.0073 23.0225 16.0031 23.1241 16.0012C23.0828 16.0005 23.0414 16.0001 23 16.0001L22.9664 16.0002L22.9664 16H24.5H24.5602V15.9995C26.4654 15.9673 28 14.4129 28 12.5C28 10.567 26.433 9 24.5 9C23.8509 9 23.2432 9.17666 22.7221 9.48451C22.7206 8.92577 22.6357 8.38663 22.4793 7.87885C21.7001 5.62147 19.5567 4 17.0345 4C14.4468 4 12.2578 5.70676 11.5317 8.05595ZM27.1766 17.3059C28.8861 18.5759 30 20.653 30 23C30 26.866 26.9776 30 23.2493 30C23.1658 30 23.0827 29.9984 23 29.9953V30H12.7671V29.9988C12.7143 29.9996 12.6613 30 12.6083 30C6.74949 30 2 25.0751 2 19C2 14.0943 5.09693 9.9387 9.37412 8.52057C9.96691 4.82406 13.1709 2 17.0345 2C20.3494 2 23.1787 4.07884 24.2899 7.00394C24.3596 7.00132 24.4296 7 24.5 7C27.5375 7 30 9.46243 30 12.5C30 14.5659 28.8609 16.3658 27.1766 17.3059ZM23 28H12.7671H12.652V27.9999L12.6083 28C7.92179 28 4 24.0395 4 19C4 13.9605 7.92179 10 12.6083 10C16.5839 10 20.0091 12.85 20.9569 16.7911L20.9599 16.7899C21.0937 17.3367 21.1791 17.9037 21.2108 18.4855C21.8339 18.1732 22.5272 18 23.2493 18C25.8053 18 28 20.1696 28 23C28 25.8105 25.8359 27.9695 23.3029 27.9996V28H23Z" fill="white"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

11
public/cloudyColor.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Color=On">
<path id="outline" fill-rule="evenodd" clip-rule="evenodd" d="M11.5317 8.05595C11.8857 8.01895 12.2449 8 12.6083 8C17.469 8 21.5661 11.3898 22.821 16.0139C22.9215 16.0073 23.0225 16.0031 23.1241 16.0012C23.0828 16.0005 23.0414 16.0001 23 16.0001L22.9664 16.0002L22.9664 16H24.5H24.5602V15.9995C26.4654 15.9673 28 14.4129 28 12.5C28 10.567 26.433 9 24.5 9C23.8509 9 23.2432 9.17666 22.7221 9.48451C22.7206 8.92577 22.6357 8.38663 22.4793 7.87885C21.7001 5.62147 19.5567 4 17.0345 4C14.4468 4 12.2578 5.70676 11.5317 8.05595ZM27.1766 17.3059C28.8861 18.5759 30 20.653 30 23C30 26.866 26.9776 30 23.2493 30C23.1658 30 23.0827 29.9984 23 29.9953V30H12.7671V29.9988C12.7143 29.9996 12.6613 30 12.6083 30C6.74949 30 2 25.0751 2 19C2 14.0943 5.09693 9.9387 9.37412 8.52057C9.96691 4.82406 13.1709 2 17.0345 2C20.3494 2 23.1787 4.07884 24.2899 7.00394C24.3596 7.00132 24.4296 7 24.5 7C27.5375 7 30 9.46243 30 12.5C30 14.5659 28.8609 16.3658 27.1766 17.3059ZM23 28H12.7671H12.652V27.9999L12.6083 28C7.92179 28 4 24.0395 4 19C4 13.9605 7.92179 10 12.6083 10C16.5839 10 20.0091 12.85 20.9569 16.7911L20.9599 16.7899C21.0937 17.3367 21.1791 17.9037 21.2108 18.4855C21.8339 18.1732 22.5272 18 23.2493 18C25.8053 18 28 20.1696 28 23C28 25.8105 25.8359 27.9695 23.3029 27.9996V28H23Z" fill="url(#paint0_linear_9_1040)"/>
</g>
<defs>
<linearGradient id="paint0_linear_9_1040" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
<stop stop-color="#B2D4F7"/>
<stop offset="1" stop-color="#D9E2F3"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

11
public/sunny.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Color=On">
<path id="outline" fill-rule="evenodd" clip-rule="evenodd" d="M15 5V2H17V5H15ZM20.634 5.97381L22.134 3.37573L23.8661 4.37573L22.3661 6.97381L20.634 5.97381ZM16 23C19.866 23 23 19.866 23 16C23 12.134 19.866 9 16 9C12.134 9 9 12.134 9 16C9 19.866 12.134 23 16 23ZM16 25C20.9706 25 25 20.9706 25 16C25 11.0294 20.9706 7 16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25ZM27 15H30V17H27V15ZM27.6243 8.13397L25.0263 9.63397L26.0263 11.366L28.6243 9.86603L27.6243 8.13397ZM8.13397 4.37573L9.63397 6.97381L11.366 5.97381L9.86603 3.37573L8.13397 4.37573ZM5.97375 11.366L3.37567 9.86603L4.37567 8.13397L6.97375 9.63397L5.97375 11.366ZM15 27V30H17V27H15ZM5 15H2V17H5V15ZM3.37562 22.134L5.97369 20.634L6.97369 22.366L4.37562 23.866L3.37562 22.134ZM9.63404 25.0264L8.13404 27.6244L9.86609 28.6244L11.3661 26.0264L9.63404 25.0264ZM22.134 28.6244L20.634 26.0264L22.366 25.0264L23.866 27.6244L22.134 28.6244ZM25.0263 22.366L27.6244 23.866L28.6244 22.134L26.0263 20.634L25.0263 22.366Z" fill="url(#paint0_linear_9_803)"/>
</g>
<defs>
<linearGradient id="paint0_linear_9_803" x1="16" y1="2" x2="16" y2="30" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFC977"/>
<stop offset="1" stop-color="#E07256"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB