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

Fix timer memory leak

src/components/Cars/CANSignals/index.jsx

@@ -1,3 +1,4 @@
+import React, { useEffect } from "react";
 import {
   Table,
   TableBody,
@@ -5,77 +6,19 @@ import {
   TableHead,
   TableRow,
 } from "@material-ui/core";
-import React, { useEffect, useState } from "react";
-import { logger } from "../../../services/monitoring";
-import { LocalDateTimeString } from "../../../utils/dates";
 
-import { useVehicleContext } from "../../Contexts/VehicleContext";
+import {
+  CANSignalProvider,
+  useCANSignalContext,
+} from "../../Contexts/CANSignalsContext";
 
-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();
-
-const CANSignals = (props) => {
-  const { vin, token } = props;
-  const { getCANSignals } = useVehicleContext();
-  const [signals, setSignals] = useState([]);
-  const delay = 500;
-  let timer = 0;
-
-  const stopTimer = async () => {
-    if (timer === 0) return;
-    clearTimeout(timer);
-    timer = 0;
-  };
-
-  const startTimer = () => {
-    stopTimer();
-    timer = setTimeout(() => {
-      updateSignals();
-    }, delay);
-  };
-
-  const updateSignals = async () => {
-    try {
-      const result = await getCANSignals(vin, token);
-      const items = transformSignals(result.data);
-
-      if (items.length > 0) {
-        setSignals(items);
-      } else {
-        setSignals([BlankSignal("No signals")]);
-      }
-
-      if (delay > 0) startTimer();
-    } catch (e) {
-      setSignals([BlankSignal(e.message)]);
-      logger.warn(e.stack);
-    }
-  };
+const Main = ({ vin }) => {
+  const { signals, setVIN } = useCANSignalContext();
 
   useEffect(() => {
-    startTimer();
-    return () => {
-      stopTimer();
-    };
+    setVIN(vin);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [vin]);
 
   if (!signals || signals.length === 0) return <h3>Loading...</h3>;
 
@@ -101,4 +44,10 @@ const CANSignals = (props) => {
   );
 };
 
+const CANSignals = (props) => (
+  <CANSignalProvider>
+    <Main {...props} />
+  </CANSignalProvider>
+);
+
 export default CANSignals;