diff --git a/components/DateAndTime.js b/components/DateAndTime.js
index 29bab49..749be03 100644
--- a/components/DateAndTime.js
+++ b/components/DateAndTime.js
@@ -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 (
{`${getWeekDay(weatherData)}, ${getTime(
- systemUsed,
+ unitSystem,
weatherData.dt,
weatherData.timezone
- )} ${getAMPM(systemUsed, weatherData.dt, weatherData.timezone)}`}
+ )} ${getAMPM(unitSystem, weatherData.dt, weatherData.timezone)}`}
);
diff --git a/components/MainCard.js b/components/MainCard.js
index 849a926..555e9af 100644
--- a/components/MainCard.js
+++ b/components/MainCard.js
@@ -7,7 +7,7 @@ export const MainCard = ({
country,
description,
iconName,
- systemUsed,
+ unitSystem,
weatherData,
}) => {
return (
@@ -23,17 +23,17 @@ export const MainCard = ({
alt="weatherIcon"
/>
- {systemUsed == "metric"
+ {unitSystem == "metric"
? Math.round(weatherData.main.temp)
: Math.round(ctoF(weatherData.main.temp))}
- °{systemUsed == "metric" ? "C" : "F"}
+ °{unitSystem == "metric" ? "C" : "F"}
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"}
);
diff --git a/components/MetricsBox.js b/components/MetricsBox.js
index 36cf76b..1e7a7e7 100644
--- a/components/MetricsBox.js
+++ b/components/MetricsBox.js
@@ -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 (
{
{
{
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)}
/>
);
diff --git a/components/UnitSwitch.js b/components/UnitSwitch.js
index f2b8ccf..e75afda 100644
--- a/components/UnitSwitch.js
+++ b/components/UnitSwitch.js
@@ -1,11 +1,11 @@
import styles from "./UnitSwitch.module.css";
-export const UnitSwitch = ({ onClick, systemUsed }) => {
+export const UnitSwitch = ({ onClick, unitSystem }) => {
return (
@@ -13,7 +13,7 @@ export const UnitSwitch = ({ onClick, systemUsed }) => {
diff --git a/pages/api/data.js b/pages/api/data.js
index 6d195c4..c83a838 100644
--- a/pages/api/data.js
+++ b/pages/api/data.js
@@ -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);
diff --git a/pages/index.js b/pages/index.js
index 89ad112..1fa5498 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -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 ? (
@@ -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}
/>
-
+
{
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...";
}}
/>
-
-
+
+
) : weatherData && weatherData.message ? (
(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)}
/>
) : (
diff --git a/services/helpers.js b/services/helpers.js
index 0b21638..0911194 100644
--- a/services/helpers.js
+++ b/services/helpers.js
@@ -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"