chore(): refac

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Matteo La Cognata
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/components/Battery.tsx

@@ -1,4 +1,4 @@
-import { classNames, isDefined } from "~/utils";
+import { classNames, inRange, isDefined } from "~/utils";
 
 export const Battery = ({
   value,
@@ -24,7 +24,7 @@ export const Battery = ({
     return color;
   };
 
-  const almostEmpty = percentage > 0 && percentage < 10;
+  const almostEmpty = inRange(0, 10, percentage);
   const almostFull = percentage > 49;
   const charging = isDefined(value) && value === 0;
 

app/components/Meter/History.tsx

@@ -2,6 +2,18 @@ import { classNames, isDefined } from "~/utils";
 import type { MeterVariation } from ".";
 import { Percentile } from "./Percentile";
 
+const Value = ({ value, success }: { value?: number; success?: boolean }) => (
+  <div
+    className={classNames(
+      isDefined(value) ? "animate-none" : "animate-pulse",
+      isDefined(success) ? (success ? "text-green-400" : "text-red-600") : "",
+      "text-right font-bold",
+    )}
+  >
+    {(value || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })}
+  </div>
+);
+
 export const History = ({
   min,
   max,
@@ -26,33 +38,11 @@ export const History = ({
   <div className="flex flex-col">
     <div className="flex justify-end">
       <div className="flex flex-col mr-8 mt-2.5 text-4xl">
-        <div
-          className={classNames(
-            isDefined(max) ? "animate-none" : "animate-pulse",
-            "text-right font-bold text-red-600",
-          )}
-        >
-          {(max || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })}
-        </div>
-        <div
-          className={classNames(
-            isDefined(min) ? "animate-none" : "animate-pulse",
-            "text-right font-bold text-green-400",
-          )}
-        >
-          {(min || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })}
-        </div>
+        <Value value={max} success={false} />
+        <Value value={min} success={true} />
       </div>
-      <div>
-        <div
-          className={classNames(
-            className,
-            isDefined(avg) ? "animate-none" : "animate-pulse",
-            "text-right font-bold",
-          )}
-        >
-          {(avg || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })}
-        </div>
+      <div className={className}>
+        <Value value={avg} />
       </div>
     </div>
     <div className="flex gap-4 justify-end mt-2">

app/components/Meter/Percentile.tsx

@@ -10,7 +10,7 @@ export const Percentile = ({
   value?: number;
   variation?: MeterVariation;
 }) => (
-  <div className={classNames("flex")}>
+  <div className="flex">
     <div
       className={classNames(
         variation === MeterVariation.LIGHT ? "bg-cyan-900" : "bg-cyan-500",

app/components/Meter/enum.ts

@@ -22,3 +22,39 @@ export enum MeterUnit {
   PPM = "PPM",
   NONE = "",
 }
+
+export enum CO2Range {
+  GOOD = 899,
+  MODERATE = 1099,
+  UNHEALTHY_SENSITIVE = 1499,
+  UNHEALTHY = 1999,
+  VERY_UNHEALTHY = 2999,
+  HAZARDOUS = 4999,
+}
+
+export enum BVOCRange {
+  GOOD = 0.9,
+  MODERATE = 1.0,
+  UNHEALTHY_SENSITIVE = 5.0,
+  UNHEALTHY = 15.0,
+  VERY_UNHEALTHY = 30.0,
+  HAZARDOUS = 40.0,
+}
+
+export enum IAQRange {
+  GOOD = 0,
+  MODERATE = 50,
+  UNHEALTHY_SENSITIVE = 100,
+  UNHEALTHY = 150,
+  VERY_UNHEALTHY = 200,
+  HAZARDOUS = 300,
+}
+
+export enum RangeClass {
+  GOOD = "bg-green-400",
+  MODERATE = "bg-yellow-400",
+  UNHEALTHY_SENSITIVE = "bg-amber-300",
+  UNHEALTHY = "bg-orange-600 animate-pulse",
+  VERY_UNHEALTHY = "bg-red-600  animate-pulse",
+  HAZARDOUS = "bg-purple-700  animate-pulse",
+}

app/components/Meter/utils.tsx

@@ -1,78 +1,30 @@
 import { CloudyIcon, RainyIcon, SunnyIcon } from "~/icons";
-import { MeterType } from "./enum";
+import { BVOCRange, CO2Range, IAQRange, MeterType, RangeClass } from "./enum";
 
-const colorForCo2 = (value: number) => {
-  let color = "bg-green-400";
-  if (value > 899) {
-    color = "bg-yellow-400";
-  }
-  if (value > 1099) {
-    color = "bg-amber-300";
-  }
-  if (value > 1499) {
-    color = "bg-orange-600 animate-pulse";
-  }
-  if (value > 1999) {
-    color = "bg-red-600  animate-pulse";
-  }
-  if (value > 2999) {
-    color = "bg-purple-700  animate-pulse";
-  }
-  if (value > 4999) {
-    color = "bg-amber-950  animate-pulse";
-  }
-  return color;
-};
-
-const colorForBvoc = (value: number) => {
-  let color = "bg-green-400";
-  if (value > 1.0) {
-    color = "bg-amber-300";
-  }
-  if (value > 5.0) {
-    color = "bg-orange-600  animate-pulse";
-  }
-  if (value > 15.0) {
-    color = "bg-red-600 animate-pulse";
-  }
-  if (value > 30.0) {
-    color = "bg-purple-700 animate-pulse";
-  }
-  if (value > 40.0) {
-    color = "bg-amber-950 animate-pulse";
-  }
-  return color;
-};
-
-const colorForIaq = (value: number) => {
-  let color = "bg-green-400";
-  if (value > 50) {
-    color = "bg-amber-300";
-  }
-  if (value > 100) {
-    color = "bg-orange-600  animate-pulse";
-  }
-  if (value > 150) {
-    color = "bg-red-600 animate-pulse";
-  }
-  if (value > 200) {
-    color = "bg-purple-700 animate-pulse";
-  }
-  if (value > 300) {
-    color = "bg-amber-950 animate-pulse";
-  }
-  return color;
+const rangeForEnum = (
+  value: number,
+  _enum: typeof CO2Range | typeof BVOCRange | typeof IAQRange,
+) => {
+  const key = Object.keys(_enum).reduce((prev, curr) => {
+    if (value > Number(prev)) return curr;
+    return prev;
+  });
+  return _enum[key as keyof typeof _enum];
 };
 
 export const colorFor = (value: number, type: MeterType) => {
-  if (type === MeterType.CO2) return colorForCo2(value);
-  if (type === MeterType.BVOC) return colorForBvoc(value);
-  if (type === MeterType.IAQ) return colorForIaq(value);
-  return "bg-green-400";
+  let _enum;
+  if (type === MeterType.CO2) _enum = CO2Range;
+  if (type === MeterType.BVOC) _enum = BVOCRange;
+  if (type === MeterType.IAQ) _enum = IAQRange;
+  if (_enum === undefined) return "";
+  return RangeClass[
+    rangeForEnum(value, _enum) as unknown as keyof typeof RangeClass
+  ];
 };
 
 export const IconForPressure = ({ value }: { value: number | undefined }) => {
-  if (value === undefined) return <></>;
+  if (value === undefined) return <div className="w-[80px] h-[80px]"></div>;
   if (value < 1000) return <RainyIcon />;
   if (value > 1000) return <SunnyIcon />;
   return <CloudyIcon />;