fix initial load

This commit is contained in:
madarsbiss 2021-07-24 06:41:47 +03:00
parent 471e12da16
commit 548e68ab0f
2 changed files with 197 additions and 193 deletions

View File

@ -6,6 +6,7 @@ export default function Home() {
const [input, setInput] = useState("mumbai"); const [input, setInput] = useState("mumbai");
const [systemUsed, setSystemUsed] = useState("metric"); const [systemUsed, setSystemUsed] = useState("metric");
const [weatherData, setWeatherData] = useState(); const [weatherData, setWeatherData] = useState();
// const [isLoading, setIsLoading] = useState(true);
const getData = async () => { const getData = async () => {
const res = await fetch("/api/data", { const res = await fetch("/api/data", {
@ -100,64 +101,62 @@ export default function Home() {
"Saturday", "Saturday",
]; ];
return ( return weatherData ? (
<div className={styles.wrapper}> <div className={styles.wrapper}>
{weatherData && ( <div className={styles.weatherWrapper}>
<div className={styles.weatherWrapper}> <h1 className={styles.locationTitle}>
<h1 className={styles.locationTitle}> {weatherData.name}, {weatherData.sys.country}
{weatherData.name}, {weatherData.sys.country} </h1>
</h1>
<p className={styles.weatherDescription}> <p className={styles.weatherDescription}>
{weatherData.weather[0].description} {weatherData.weather[0].description}
</p> </p>
<Image <Image
alt="weatherIcon" alt="weatherIcon"
src={`/icons/${weatherData.weather[0].icon}.svg`} src={`/icons/${weatherData.weather[0].icon}.svg`}
height="300px" height="300px"
width="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.statsWrapper}>
<div className={styles.titleAndSearch}> <div className={styles.titleAndSearch}>
{weatherData && ( <h2 style={{ textAlign: "left" }}>
<h2 style={{ textAlign: "left" }}> {
{ weekday[
weekday[ new Date(
new Date( convertTime(weatherData.dt, weatherData.timezone).input
convertTime(weatherData.dt, weatherData.timezone).input ).getUTCDay()
).getUTCDay() ]
] }
} ,{" "}
,{" "} {systemUsed == "metric"
{systemUsed == "metric" ? convertTime(weatherData.dt, weatherData.timezone)[0].split(
? convertTime(weatherData.dt, weatherData.timezone)[0].split( ":"
":" )[0]
)[0] : timeToAMPM(
: timeToAMPM( convertTime(weatherData.dt, weatherData.timezone)[0]
convertTime(weatherData.dt, weatherData.timezone)[0] ).split(":")[0]}
).split(":")[0]} :00{" "}
:00{" "} {systemUsed == "imperial"
{systemUsed == "imperial" ? isPM(convertTime(weatherData.dt, weatherData.timezone)[0])
? isPM(convertTime(weatherData.dt, weatherData.timezone)[0]) : ""}
: ""} </h2>
</h2>
)}
<input <input
type="text" type="text"
className={styles.searchInput} className={styles.searchInput}
@ -168,152 +167,153 @@ export default function Home() {
/> />
</div> </div>
{weatherData && ( <div className={styles.statsBox}>
<div className={styles.statsBox}> <div className={styles.statsCard}>
<div className={styles.statsCard}> <p>Humidity</p>
<p>Humidity</p> <div className={styles.statsCardContent}>
<div className={styles.statsCardContent}> <Image
<Image alt="weatherIcon"
alt="weatherIcon" src={`/icons/025-humidity.png`}
src={`/icons/025-humidity.png`} height="100px"
height="100px" width="100px"
width="100px" />
/> <div>
<div> <h1>{weatherData.main.humidity}</h1>
<h1>{weatherData.main.humidity}</h1> <p>%</p>
<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> </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}>Metric System</p>
<p onClick={changeSystem}>Imperial System</p> <p onClick={changeSystem}>Imperial System</p>
</div> </div>
</div> </div>
) : (
<h1>Loading results</h1>
); );
} }

View File

@ -11,6 +11,10 @@
margin: 0 20px; margin: 0 20px;
} }
.wrapperHide {
display: none;
}
.weatherWrapper { .weatherWrapper {
padding: 30px; padding: 30px;
} }