fix initial load
This commit is contained in:
madarsbiss
parent
471e12da16
commit
548e68ab0f
386
pages/index.js
386
pages/index.js
@ -6,6 +6,7 @@ export default function Home() {
|
||||
const [input, setInput] = useState("mumbai");
|
||||
const [systemUsed, setSystemUsed] = useState("metric");
|
||||
const [weatherData, setWeatherData] = useState();
|
||||
// const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const getData = async () => {
|
||||
const res = await fetch("/api/data", {
|
||||
@ -100,64 +101,62 @@ export default function Home() {
|
||||
"Saturday",
|
||||
];
|
||||
|
||||
return (
|
||||
return weatherData ? (
|
||||
<div className={styles.wrapper}>
|
||||
{weatherData && (
|
||||
<div className={styles.weatherWrapper}>
|
||||
<h1 className={styles.locationTitle}>
|
||||
{weatherData.name}, {weatherData.sys.country}
|
||||
</h1>
|
||||
<div className={styles.weatherWrapper}>
|
||||
<h1 className={styles.locationTitle}>
|
||||
{weatherData.name}, {weatherData.sys.country}
|
||||
</h1>
|
||||
|
||||
<p className={styles.weatherDescription}>
|
||||
{weatherData.weather[0].description}
|
||||
</p>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/${weatherData.weather[0].icon}.svg`}
|
||||
height="300px"
|
||||
width="300px"
|
||||
/>
|
||||
<p className={styles.weatherDescription}>
|
||||
{weatherData.weather[0].description}
|
||||
</p>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/${weatherData.weather[0].icon}.svg`}
|
||||
height="300px"
|
||||
width="300px"
|
||||
/>
|
||||
|
||||
<h1 className={styles.mainTemp}>
|
||||
{systemUsed == "metric"
|
||||
? Math.round(weatherData.main.temp)
|
||||
: Math.round(ctoF(weatherData.main.temp))}
|
||||
°{systemUsed == "metric" ? "C" : "F"}
|
||||
</h1>
|
||||
<p>
|
||||
Feels like{" "}
|
||||
{systemUsed == "metric"
|
||||
? Math.round(weatherData.main.feels_like)
|
||||
: Math.round(ctoF(weatherData.main.feels_like))}
|
||||
°{systemUsed == "metric" ? "C" : "F"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1 className={styles.mainTemp}>
|
||||
{systemUsed == "metric"
|
||||
? Math.round(weatherData.main.temp)
|
||||
: Math.round(ctoF(weatherData.main.temp))}
|
||||
°{systemUsed == "metric" ? "C" : "F"}
|
||||
</h1>
|
||||
<p>
|
||||
Feels like{" "}
|
||||
{systemUsed == "metric"
|
||||
? Math.round(weatherData.main.feels_like)
|
||||
: Math.round(ctoF(weatherData.main.feels_like))}
|
||||
°{systemUsed == "metric" ? "C" : "F"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.statsWrapper}>
|
||||
<div className={styles.titleAndSearch}>
|
||||
{weatherData && (
|
||||
<h2 style={{ textAlign: "left" }}>
|
||||
{
|
||||
weekday[
|
||||
new Date(
|
||||
convertTime(weatherData.dt, weatherData.timezone).input
|
||||
).getUTCDay()
|
||||
]
|
||||
}
|
||||
,{" "}
|
||||
{systemUsed == "metric"
|
||||
? convertTime(weatherData.dt, weatherData.timezone)[0].split(
|
||||
":"
|
||||
)[0]
|
||||
: timeToAMPM(
|
||||
convertTime(weatherData.dt, weatherData.timezone)[0]
|
||||
).split(":")[0]}
|
||||
:00{" "}
|
||||
{systemUsed == "imperial"
|
||||
? isPM(convertTime(weatherData.dt, weatherData.timezone)[0])
|
||||
: ""}
|
||||
</h2>
|
||||
)}
|
||||
<h2 style={{ textAlign: "left" }}>
|
||||
{
|
||||
weekday[
|
||||
new Date(
|
||||
convertTime(weatherData.dt, weatherData.timezone).input
|
||||
).getUTCDay()
|
||||
]
|
||||
}
|
||||
,{" "}
|
||||
{systemUsed == "metric"
|
||||
? convertTime(weatherData.dt, weatherData.timezone)[0].split(
|
||||
":"
|
||||
)[0]
|
||||
: timeToAMPM(
|
||||
convertTime(weatherData.dt, weatherData.timezone)[0]
|
||||
).split(":")[0]}
|
||||
:00{" "}
|
||||
{systemUsed == "imperial"
|
||||
? isPM(convertTime(weatherData.dt, weatherData.timezone)[0])
|
||||
: ""}
|
||||
</h2>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
className={styles.searchInput}
|
||||
@ -168,152 +167,153 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{weatherData && (
|
||||
<div className={styles.statsBox}>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Humidity</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/025-humidity.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>{weatherData.main.humidity}</h1>
|
||||
<p>%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Wind speed</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/017-wind.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? weatherData.wind.speed
|
||||
: mpsToMph(weatherData.wind.speed)}
|
||||
</h1>
|
||||
<p>{systemUsed == "metric" ? "m/s" : "m/h"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Wind direction</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/014-compass.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>{degToCompass(weatherData.wind.deg)}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Visibility</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/binocular.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? (weatherData.visibility / 1000).toPrecision(2)
|
||||
: kmToM(weatherData.visibility / 1000)}
|
||||
</h1>
|
||||
<p>{systemUsed == "metric" ? "km" : "miles"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Sunrise</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/040-sunrise.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? convertTime(
|
||||
weatherData.sys.sunrise,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
: timeToAMPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunrise,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)}
|
||||
</h1>
|
||||
<p>
|
||||
{systemUsed == "imperial"
|
||||
? isPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunrise,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Sunset</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/041-sunset.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
: timeToAMPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)}
|
||||
</h1>
|
||||
<p>
|
||||
{systemUsed == "imperial"
|
||||
? isPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.statsBox}>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Humidity</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/025-humidity.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>{weatherData.main.humidity}</h1>
|
||||
<p>%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.statsCard}>
|
||||
<p>Wind speed</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/017-wind.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? weatherData.wind.speed
|
||||
: mpsToMph(weatherData.wind.speed)}
|
||||
</h1>
|
||||
<p>{systemUsed == "metric" ? "m/s" : "m/h"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Wind direction</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/014-compass.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>{degToCompass(weatherData.wind.deg)}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Visibility</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/binocular.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? (weatherData.visibility / 1000).toPrecision(2)
|
||||
: kmToM(weatherData.visibility / 1000)}
|
||||
</h1>
|
||||
<p>{systemUsed == "metric" ? "km" : "miles"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Sunrise</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/040-sunrise.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? convertTime(
|
||||
weatherData.sys.sunrise,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
: timeToAMPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunrise,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)}
|
||||
</h1>
|
||||
<p>
|
||||
{systemUsed == "imperial"
|
||||
? isPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunrise,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.statsCard}>
|
||||
<p>Sunset</p>
|
||||
<div className={styles.statsCardContent}>
|
||||
<Image
|
||||
alt="weatherIcon"
|
||||
src={`/icons/041-sunset.png`}
|
||||
height="100px"
|
||||
width="100px"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
{systemUsed == "metric"
|
||||
? convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
: timeToAMPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)}
|
||||
</h1>
|
||||
<p>
|
||||
{systemUsed == "imperial"
|
||||
? isPM(
|
||||
convertTime(
|
||||
weatherData.sys.sunset,
|
||||
weatherData.timezone
|
||||
)[0]
|
||||
)
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p onClick={changeSystem}>Metric System</p>
|
||||
<p onClick={changeSystem}>Imperial System</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<h1>Loading results</h1>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.wrapperHide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.weatherWrapper {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user