CEC-2211 Add CAN signals component to map (#182)

Fix timer memory leak

src/components/Contexts/CANSignalsContext.jsx

@@ -0,0 +1,89 @@
+import React, { useContext, useState } from "react";
+import { useEffect } from "react";
+
+import api from "../../services/vehiclesAPI";
+import { useUserContext } from "./UserContext";
+import { LocalDateTimeString } from "../../utils/dates";
+
+const CANSignalContext = React.createContext();
+
+const BlankSignal = (msg) => ({
+  timestamp: "",
+  signal: msg,
+  value: "",
+});
+
+const transformSignals = (signals) =>
+  signals
+    .map((signal) => {
+      const { Timestamp, ...Settings } = signal;
+      const keys = Object.keys(Settings);
+
+      return keys.map((key) => ({
+        timestamp: LocalDateTimeString(Timestamp),
+        signal: key,
+        value: Settings[key],
+      }));
+    })
+    .flat();
+
+export const CANSignalProvider = ({ children }) => {
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const [vin, setVIN] = useState(null);
+  const [signals, setSignals] = useState([]);
+  let delay = 500;
+
+  useEffect(() => {
+    getCANSignals();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      getCANSignals();
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [signals]);
+
+  const getCANSignals = async () => {
+    try {
+      if (!vin) return;
+
+      const result = await api.getCANSignals(vin, token);
+      if (result.error)
+        throw new Error(`Get CAN signals error. ${result.message}`);
+
+      const items = transformSignals(result.data);
+
+      if (items.length > 0) {
+        delay = 500;
+        setSignals(items);
+      } else {
+        delay = 1000;
+        setSignals([BlankSignal("No signals")]);
+      }
+    } catch (e) {
+      setSignals([BlankSignal(e.message)]);
+    }
+  };
+
+  return (
+    <CANSignalContext.Provider
+      value={{
+        signals,
+        setVIN,
+      }}
+    >
+      {children}
+    </CANSignalContext.Provider>
+  );
+};
+
+export const useCANSignalContext = () => useContext(CANSignalContext);