refactor: export converter methods to converters.js

2021-08-06 20:57:13 +02:00
parent 5afa019645
commit 06bae70384
3 changed files with 132 additions and 130 deletions
--- a/pages/components/Metrics.jsx
+++ b/pages/components/Metrics.jsx
@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  convertTime,
+  degToCompass,
+  kmToM,
+  mpsToMph,
+  timeToAMPM,
+} from "../services/converters";
+import MetricCard from "./MetricCard";
+
+const Metrics = ({ styles, data, systemUsed }) => {
+  return (
+    <div className={styles.statsBox}>
+      <MetricCard
+        title={"Humidity"}
+        iconSrc={"/icons/025-humidity.png"}
+        metric={data.main.humidity}
+        unit={"%"}
+        styles={styles}
+      />
+
+      <MetricCard
+        title={"Wind speed"}
+        iconSrc={"/icons/017-wind.png"}
+        metric={
+          systemUsed == "metric" ? data.wind.speed : mpsToMph(data.wind.speed)
+        }
+        unit={systemUsed == "metric" ? "m/s" : "m/h"}
+        styles={styles}
+      />
+
+      <MetricCard
+        title={"Wind direction"}
+        iconSrc={"/icons/014-compass.png"}
+        metric={degToCompass(data.wind.deg)}
+        styles={styles}
+      />
+
+      <MetricCard
+        title={"Visibility"}
+        iconSrc={"/icons/binocular.png"}
+        metric={
+          systemUsed == "metric"
+            ? (data.visibility / 1000).toPrecision(2)
+            : kmToM(data.visibility / 1000)
+        }
+        unit={systemUsed == "metric" ? "km" : "miles"}
+        styles={styles}
+      />
+
+      <MetricCard
+        title={"Sunrise"}
+        iconSrc={"/icons/040-sunrise.png"}
+        metric={
+          systemUsed == "metric"
+            ? `${parseInt(
+                convertTime(data.sys.sunrise, data.timezone)[0].split(":")[0]
+              )}:${
+                convertTime(data.sys.sunrise, data.timezone)[0].split(":")[1]
+              }`
+            : timeToAMPM(convertTime(data.sys.sunrise, data.timezone)[0])
+        }
+        styles={styles}
+      />
+
+      <MetricCard
+        title={"Sunset"}
+        iconSrc={"/icons/041-sunset.png"}
+        metric={
+          systemUsed == "metric"
+            ? convertTime(data.sys.sunset, data.timezone)[0]
+            : timeToAMPM(convertTime(data.sys.sunset, data.timezone)[0])
+        }
+        unit={
+          systemUsed == "imperial"
+            ? isPMs(convertTime(data.sys.sunset, data.timezone)[0])
+            : ""
+        }
+        styles={styles}
+      />
+    </div>
+  );
+};
+
+export default Metrics;