Add functionality to all knobs

Dashboard/src/App.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { createGlobalStyle } from "styled-components";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
-import { RootState } from "typesafe-actions";
 import Select from "react-select";
 import SerialPort from "serialport";
-import Knob from "./Components/Knob";
 import { connect, disconnect } from "./redux/actions/asyncSerialConnectionActions";
 import { setSerialPort } from "./redux/actions/serialConnectionActions";
 import KnobSection from "./Components/KnobSection";
@@ -30,14 +28,7 @@ const fetchPorts = async () => {
 };
 
 const App = () => {
-  const [status, setStatus] = useState(0);
   const dispatch = useDispatch();
-  const serialConnection = useSelector<RootState, RootState["serialConnection"]>((state) => state.serialConnection);
-  const SerialDataListener = (data: string) => {
-    const parsedData = data.split(",");
-    console.log(parsedData);
-    setStatus(parseInt(parsedData[2], 10));
-  };
 
   fetchPorts();
 
@@ -47,46 +38,9 @@ const App = () => {
     dispatch(setSerialPort(selectedOption.value));
   };
 
-  useEffect(() => {
-    if (serialConnection.portController !== null) {
-      serialConnection.portController.parser.on("data", SerialDataListener);
-    }
-
-    return () => {
-      if (serialConnection.portController !== null) {
-        serialConnection.portController.parser.removeListener("data", SerialDataListener);
-      }
-    };
-  }, [serialConnection]);
-
-  const sendIncreaseHandler = () => {
-    if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
-      setStatus(status + 1);
-      serialConnection.portController.port.write("2i");
-    }
-  };
-  const sendDecreaseHandler = () => {
-    if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
-      setStatus(status - 1);
-      serialConnection.portController.port.write("2d");
-    }
-  };
-  const sendToggleHandler = () => {
-    if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
-      setStatus(status - 1);
-      serialConnection.portController.port.write("2t");
-    }
-  };
-
   return (
     <div>
       <GlobalStyle />
-      <Knob
-        increase={sendIncreaseHandler}
-        decrease={sendDecreaseHandler}
-        toggle={sendToggleHandler}
-        status={Math.floor((status / 255) * 100)}
-      />
       <KnobSection />
       <button
         type="button"

Dashboard/src/Components/KnobSection.tsx

@@ -1,39 +1,64 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
+import { RootState } from "typesafe-actions";
 import Knob from "./Knob";
 
+const KnobContainer = styled.div`
+display: flex;
+justify-content: space-between;
+margin: 1rem;
+`;
+
 const KnobSection = () => {
-  const KnobContainer = styled.div`
+  const [status, setStatus] = useState([{ id: 0, value: 0 }, { id: 1, value: 0 }, { id: 2, value: 0 }, { id: 3, value: 0 }]);
-  display: flex;
+  const serialConnection = useSelector<RootState, RootState["serialConnection"]>((state) => state.serialConnection);
-  `;
+
+  const SerialDataListener = (data: string) => {
+    const parsedData = data.split(",");
+    console.log(parsedData);
+    setStatus(status.map((element) => ({ ...element, value: parseInt(parsedData[element.id], 10) })));
+  };
+
+  useEffect(() => {
+    if (serialConnection.portController !== null) {
+      serialConnection.portController.parser.on("data", SerialDataListener);
+    }
+
+    return () => {
+      if (serialConnection.portController !== null) {
+        serialConnection.portController.parser.removeListener("data", SerialDataListener);
+      }
+    };
+  }, [serialConnection]);
+
+  const sendIncreaseHandler = (index: number) => {
+    if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
+      serialConnection.portController.port.write(`${index}i`);
+    }
+  };
+  const sendDecreaseHandler = (index: number) => {
+    if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
+      serialConnection.portController.port.write(`${index}d`);
+    }
+  };
+  const sendToggleHandler = (index: number) => {
+    if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
+      serialConnection.portController.port.write(`${index}t`);
+    }
+  };
 
   return (
     <KnobContainer>
-      <Knob
+      {status.map((element) => (
-        increase={() => {}}
+        <Knob
-        decrease={() => {}}
+          key={element.id}
-        toggle={() => {}}
+          increase={() => { sendIncreaseHandler(element.id); }}
-        status={255}
+          decrease={() => { sendDecreaseHandler(element.id); }}
-      />
+          toggle={() => { sendToggleHandler(element.id); }}
-      <Knob
+          status={Math.floor((element.value / 255) * 100)}
-        increase={() => {}}
+        />
-        decrease={() => {}}
+      ))}
-        toggle={() => {}}
-        status={255}
-      />
-      <Knob
-        increase={() => {}}
-        decrease={() => {}}
-        toggle={() => {}}
-        status={255}
-      />
-      <Knob
-        increase={() => {}}
-        decrease={() => {}}
-        toggle={() => {}}
-        status={255}
-      />
-
     </KnobContainer>
 
   );

Dashboard/src/electron.js

@@ -9,8 +9,8 @@ const els = require("electron-localshortcut");
 const devTools = require("electron-devtools-installer");
 const chalk = require("chalk");
 
-const windowWidth = 1000;
+const windowWidth = 900;
-const windowHeight = 350;
+const windowHeight = 300;
 
 let tray = null;
 let mainWindow = null;