Hook up interface to serial connection

Dashboard/src/Components/KnobSection.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-// import { RootState } from "typesafe-actions";
+import { useAppDispatch, useAppSelector } from "../redux/hooks";
+import { sendMessage } from "../redux/slices/serialConnectionSlice";
+import Knob from "./Knob";
 
 const KnobContainer = styled.div`
 display: flex;
@@ -8,58 +10,35 @@ justify-content: space-between;
 margin: 1rem;
 `;
 
-const KnobSection = () =>
-// const [status, setStatus] = useState([{ id: 0, value: 0 }, { id: 1, value: 0 }, { id: 2, value: 0 }, { id: 3, value: 0 }]);
-// const serialConnection = useSelector<RootState, RootState["serialConnection"]>((state) => state.serialConnection);
+const ids: number[] = [0, 1, 2, 3];
 
-// 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`);
-//   // }
-//   console.log(index);
-// };
-// const sendDecreaseHandler = (index: number) => {
-//   // if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
-//   //   serialConnection.portController.port.write(`${index}d`);
-//   // }
-//   console.log(index);
-// };
-// const sendToggleHandler = (index: number) => {
-//   // if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
-//   //   serialConnection.portController.port.write(`${index}t`);
-//   // }
-//   console.log(index);
-// };
-  // eslint-disable-next-line implicit-arrow-linebreak
-  (
+const KnobSection = () => {
+  const serialConnection = useAppSelector((state) => state.serialConnection);
+  const dispatch = useAppDispatch();
+  const sendIncreaseHandler = (index: number) => {
+    dispatch(sendMessage(`${index}i`));
+    console.log(index);
+  };
+  const sendDecreaseHandler = (index: number) => {
+    dispatch(sendMessage(`${index}d`));
+    console.log(index);
+  };
+  const sendToggleHandler = (index: number) => {
+    dispatch(sendMessage(`${index}t`));
+    console.log(index);
+  };
+  return (
     <KnobContainer>
-      {/* {status.map((element) => (
+      {ids.map((id) => (
         <Knob
-          key={element.id}
-          increase={() => { sendIncreaseHandler(element.id); }}
-          decrease={() => { sendDecreaseHandler(element.id); }}
-          toggle={() => { sendToggleHandler(element.id); }}
-          status={Math.floor((element.value / 255) * 100)}
+          key={id}
+          increase={() => { sendIncreaseHandler(id); }}
+          decrease={() => { sendDecreaseHandler(id); }}
+          toggle={() => { sendToggleHandler(id); }}
+          status={Math.floor((parseInt(serialConnection.message.split(",")[id], 10) / 255) * 100)}
         />
-      ))} */}
+      ))}
     </KnobContainer>
   );
+};
 export default KnobSection;

Dashboard/src/redux/middlewares/serialConnection.ts

@@ -1,7 +1,7 @@
 import { Middleware, Action } from "@reduxjs/toolkit";
 import { RootState } from "../store/types.d";
 import {
-  connect, disconnect, setSerialPort, setMessage,
+  connect, disconnect, setSerialPort, setMessage, sendMessage,
 } from "../slices/serialConnectionSlice";
 import PortController from "../../serial/PortController";
 import store from "../store";
@@ -22,6 +22,8 @@ const serialConnection: Middleware<{}, RootState> = () => (next) => (action: Act
   } else if (setSerialPort.match(action)) {
     serialPort = new PortController(action.payload);
     console.log("setSerialPort");
+  } else if (sendMessage.match(action)) {
+    serialPort?.write(action.payload);
   }
   return next(action);
 };

Dashboard/src/redux/slices/serialConnectionSlice.ts

@@ -45,12 +45,15 @@ export const serialConnectionSlice = createSlice({
     setMessage: (state, action: PayloadAction<string>) => {
       state.message = action.payload;
     },
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    sendMessage: (_state, _action: PayloadAction<string>) => {
+    },
   },
 });
 
 export const {
   setSerialPort, connectionStart, connectionSuccess, connectionFailure, connectionEnd,
-  connect, disconnect, setMessage,
+  connect, disconnect, setMessage, sendMessage,
 } = serialConnectionSlice.actions;
 
 // Other code such as selectors can use the imported `RootState` type

Dashboard/src/serial/PortController.ts

@@ -46,6 +46,10 @@ class PortController {
       this.port.removeListener("data", this.onCloseCallback);
     }
   }
+
+  write(message: string) {
+    this.port.write(message);
+  }
 }
 
 export default PortController;