Mathis/forecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit var names

Browse Source
This commit is contained in:
madarsbiss 2021-10-27 13:38:28 +03:00
parent 88b4db25a2
commit 2737427b6f
7 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/DateAndTime.js
View File

@ -1,15 +1,15 @@
import { getWeekDay, getTime, getAMPM } from "../services/helpers";
import styles from "./DateAndTime.module.css";
export const DateAndTime = ({ weatherData, systemUsed }) => {
export const DateAndTime = ({ weatherData, unitSystem }) => {
return (
<div className={styles.wrapper}>
<h2>
{`${getWeekDay(weatherData)}, ${getTime(
systemUsed,
unitSystem,
weatherData.dt,
weatherData.timezone
)} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`}
)} ${getAMPM(unitSystem, weatherData.dt, weatherData.timezone)}`}
</h2>
</div>
);

10
components/MainCard.js
View File

@ -7,7 +7,7 @@ export const MainCard = ({
country,
description,
iconName,
systemUsed,
unitSystem,
weatherData,
}) => {
return (
@ -23,17 +23,17 @@ export const MainCard = ({
alt="weatherIcon"
/>
<h1 className={styles.temperature}>
{systemUsed == "metric"
{unitSystem == "metric"
? Math.round(weatherData.main.temp)
: Math.round(ctoF(weatherData.main.temp))}
°{systemUsed == "metric" ? "C" : "F"}
°{unitSystem == "metric" ? "C" : "F"}
</h1>
<p>
Feels like{" "}
{systemUsed == "metric"
{unitSystem == "metric"
? Math.round(weatherData.main.feels_like)
: Math.round(ctoF(weatherData.main.feels_like))}
°{systemUsed == "metric" ? "C" : "F"}
°{unitSystem == "metric" ? "C" : "F"}
</p>
</div>
);

18
components/MetricsBox.js
View File

@ -8,7 +8,7 @@ import {
import { MetricsCard } from "./MetricsCard";
import styles from "./MetricsBox.module.css";
export const MetricsBox = ({ weatherData, systemUsed }) => {
export const MetricsBox = ({ weatherData, unitSystem }) => {
return (
<div className={styles.wrapper}>
<MetricsCard
@ -20,8 +20,8 @@ export const MetricsBox = ({ weatherData, systemUsed }) => {
<MetricsCard
title={"Wind speed"}
iconSrc={"/icons/wind.png"}
metric={getWindSpeed(systemUsed, weatherData.wind.speed)}
unit={systemUsed == "metric" ? "m/s" : "m/h"}
metric={getWindSpeed(unitSystem, weatherData.wind.speed)}
unit={unitSystem == "metric" ? "m/s" : "m/h"}
/>
<MetricsCard
title={"Wind direction"}
@ -31,19 +31,19 @@ export const MetricsBox = ({ weatherData, systemUsed }) => {
<MetricsCard
title={"Visibility"}
iconSrc={"/icons/binocular.png"}
metric={getVisibility(systemUsed, weatherData.visibility)}
unit={systemUsed == "metric" ? "km" : "miles"}
metric={getVisibility(unitSystem, weatherData.visibility)}
unit={unitSystem == "metric" ? "km" : "miles"}
/>
<MetricsCard
title={"Sunrise"}
iconSrc={"/icons/sunrise.png"}
metric={getTime(
systemUsed,
unitSystem,
weatherData.sys.sunrise,
weatherData.timezone
)}
unit={getAMPM(
systemUsed,
unitSystem,
weatherData.sys.sunrise,
weatherData.timezone
)}
@ -52,11 +52,11 @@ export const MetricsBox = ({ weatherData, systemUsed }) => {
title={"Sunset"}
iconSrc={"/icons/sunset.png"}
metric={getTime(
systemUsed,
unitSystem,
weatherData.sys.sunset,
weatherData.timezone
)}
unit={getAMPM(systemUsed, weatherData.sys.sunset, weatherData.timezone)}
unit={getAMPM(unitSystem, weatherData.sys.sunset, weatherData.timezone)}
/>
</div>
);

6
components/UnitSwitch.js
View File

@ -1,11 +1,11 @@
import styles from "./UnitSwitch.module.css";
export const UnitSwitch = ({ onClick, systemUsed }) => {
export const UnitSwitch = ({ onClick, unitSystem }) => {
return (
<div className={styles.wrapper}>
<p
className={`${styles.switch} ${
systemUsed == "metric" ? styles.active : styles.inactive
unitSystem == "metric" ? styles.active : styles.inactive
}`}
onClick={onClick}
>
@ -13,7 +13,7 @@ export const UnitSwitch = ({ onClick, systemUsed }) => {
</p>
<p
className={`${styles.switch} ${
systemUsed == "metric" ? styles.inactive : styles.active
unitSystem == "metric" ? styles.inactive : styles.active
}`}
onClick={onClick}
>

4
pages/api/data.js
View File

@ -1,7 +1,7 @@
export default async function handler(req, res) {
const { input } = req.body;
const { cityInput } = req.body;
const getWeatherData = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${input}&units=metric&appid=${process.env.OPENWEATHER_API_KEY}`
`https://api.openweathermap.org/data/2.5/weather?q=${cityInput}&units=metric&appid=${process.env.OPENWEATHER_API_KEY}`
);
const data = await getWeatherData.json();
res.status(200).json(data);

36
pages/index.js
View File

@ -13,29 +13,29 @@ import { ErrorScreen } from "../components/ErrorScreen";
import styles from "../styles/Home.module.css";
export const App = () => {
const [input, setInput] = useState("Riga");
const [execute, setExecute] = useState(true);
const [cityInput, setCityInput] = useState("Riga");
const [triggerFetch, setTriggerFetch] = useState(true);
const [weatherData, setWeatherData] = useState();
const [systemUsed, setSystemUsed] = useState("metric");
const [unitSystem, setUnitSystem] = useState("metric");
useEffect(() => {
const getData = async () => {
const res = await fetch("api/data", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ input }),
body: JSON.stringify({ cityInput }),
});
const data = await res.json();
setWeatherData({ ...data });
setInput("");
setCityInput("");
};
getData();
}, [execute]);
}, [triggerFetch]);
const changeSystem = () =>
systemUsed == "metric"
? setSystemUsed("imperial")
: setSystemUsed("metric");
unitSystem == "metric"
? setUnitSystem("imperial")
: setUnitSystem("metric");
return weatherData && !weatherData.message ? (
<div className={styles.wrapper}>
@ -44,36 +44,36 @@ export const App = () => {
country={weatherData.sys.country}
description={weatherData.weather[0].description}
iconName={weatherData.weather[0].icon}
systemUsed={systemUsed}
unitSystem={unitSystem}
weatherData={weatherData}
/>
<ContentBox>
<Header>
<DateAndTime weatherData={weatherData} systemUsed={systemUsed} />
<DateAndTime weatherData={weatherData} unitSystem={unitSystem} />
<Search
placeHolder="Search a city..."
value={input}
value={cityInput}
onFocus={(e) => {
e.target.value = "";
e.target.placeholder = "";
}}
onChange={(e) => setInput(e.target.value)}
onChange={(e) => setCityInput(e.target.value)}
onKeyDown={(e) => {
e.keyCode === 13 && setExecute(!execute);
e.keyCode === 13 && setTriggerFetch(!triggerFetch);
e.target.placeholder = "Search a city...";
}}
/>
</Header>
<MetricsBox weatherData={weatherData} systemUsed={systemUsed} />
<UnitSwitch onClick={changeSystem} systemUsed={systemUsed} />
<MetricsBox weatherData={weatherData} unitSystem={unitSystem} />
<UnitSwitch onClick={changeSystem} unitSystem={unitSystem} />
</ContentBox>
</div>
) : weatherData && weatherData.message ? (
<ErrorScreen errorMessage="City not found, try again!">
<Search
onFocus={(e) => (e.target.value = "")}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.keyCode === 13 && setExecute(!execute)}
onChange={(e) => setCityInput(e.target.value)}
onKeyDown={(e) => e.keyCode === 13 && setTriggerFetch(!triggerFetch)}
/>
</ErrorScreen>
) : (

16
services/helpers.js
View File

@ -5,21 +5,21 @@ import {
timeTo12HourFormat,
} from "./converters";
export const getWindSpeed = (systemUsed, windInMps) =>
systemUsed == "metric" ? windInMps : mpsToMph(windInMps);
export const getWindSpeed = (unitSystem, windInMps) =>
unitSystem == "metric" ? windInMps : mpsToMph(windInMps);
export const getVisibility = (systemUsed, visibilityInMeters) =>
systemUsed == "metric"
export const getVisibility = (unitSystem, visibilityInMeters) =>
unitSystem == "metric"
? (visibilityInMeters / 1000).toFixed(1)
: kmToMiles(visibilityInMeters / 1000);
export const getTime = (systemUsed, currentTime, timezone) =>
systemUsed == "metric"
export const getTime = (unitSystem, currentTime, timezone) =>
unitSystem == "metric"
? unixToLocalTime(currentTime, timezone)
: timeTo12HourFormat(unixToLocalTime(currentTime, timezone));
export const getAMPM = (systemUsed, currentTime, timezone) =>
systemUsed === "imperial"
export const getAMPM = (unitSystem, currentTime, timezone) =>
unitSystem === "imperial"
? unixToLocalTime(currentTime, timezone).split(":")[0] >= 12
? "PM"
: "AM"