From 2737427b6f33a26f8dcf134618143d3fd57bad70 Mon Sep 17 00:00:00 2001 From: madarsbiss Date: Wed, 27 Oct 2021 13:38:28 +0300 Subject: [PATCH] edit var names --- components/DateAndTime.js | 6 +++--- components/MainCard.js | 10 +++++----- components/MetricsBox.js | 18 +++++++++--------- components/UnitSwitch.js | 6 +++--- pages/api/data.js | 4 ++-- pages/index.js | 36 ++++++++++++++++++------------------ services/helpers.js | 16 ++++++++-------- 7 files changed, 48 insertions(+), 48 deletions(-) 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"