fix initial load
This commit is contained in:
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 [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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -11,6 +11,10 @@
|
|||||||
margin: 0 20px;
|
margin: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrapperHide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.weatherWrapper {
|
.weatherWrapper {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user