edit var names

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 (
     <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>
   );

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"
       />
       <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>
   );

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 (
     <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)}
+        metric={getWindSpeed(unitSystem, weatherData.wind.speed)}
-        unit={systemUsed == "metric" ? "m/s" : "m/h"}
+        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)}
+        metric={getVisibility(unitSystem, weatherData.visibility)}
-        unit={systemUsed == "metric" ? "km" : "miles"}
+        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>
   );

components/UnitSwitch.js

@@ -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}
       >

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);

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 [cityInput, setCityInput] = useState("Riga");
-  const [execute, setExecute] = useState(true);
+  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"
+    unitSystem == "metric"
-      ? setSystemUsed("imperial")
+      ? setUnitSystem("imperial")
-      : setSystemUsed("metric");
+      : 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} />
+        <MetricsBox weatherData={weatherData} unitSystem={unitSystem} />
-        <UnitSwitch onClick={changeSystem} systemUsed={systemUsed} />
+        <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)}
+        onChange={(e) => setCityInput(e.target.value)}
-        onKeyDown={(e) => e.keyCode === 13 && setExecute(!execute)}
+        onKeyDown={(e) => e.keyCode === 13 && setTriggerFetch(!triggerFetch)}
       />
     </ErrorScreen>
   ) : (

services/helpers.js

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