edit var names

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 [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>
   ) : (