From a7af6cc8de3e6dde45d8b16c38c738205d11b92b Mon Sep 17 00:00:00 2001
From: GHOSCHT <31184695+GHOSCHT@users.noreply.github.com>
Date: Fri, 31 Dec 2021 22:48:00 +0100
Subject: [PATCH] First implementation of connection in middleware

---
 Dashboard/src/App.tsx                         |  8 +++--
 .../src/redux/middlewares/serialConnection.ts | 29 +++++++++++++++++++
 Dashboard/src/redux/store/index.ts            |  4 +--
 3 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 Dashboard/src/redux/middlewares/serialConnection.ts

diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index 2693f1c..3fe2b72 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -4,6 +4,8 @@ import { createGlobalStyle } from "styled-components";
 import Select from "react-select";
 import SerialPort from "serialport";
 import KnobSection from "./Components/KnobSection";
+import { useAppDispatch } from "./redux/hooks";
+import { connect, setSerialPort } from "./redux/slices/serialConnectionSlice";
 
 const GlobalStyle = createGlobalStyle`
   html {
@@ -26,14 +28,14 @@ const fetchPorts = async () => {
 };
 
 const App = () => {
-  // const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   fetchPorts();
 
   const [portSelectionValue, setPortSelectionValue] = useState(options[0]);
   const handlePortChange = async (selectedOption: any) => {
     setPortSelectionValue(selectedOption);
-    // dispatch(setSerialPort(selectedOption.value));
+    dispatch(setSerialPort(selectedOption.value));
   };
 
   return (
@@ -43,7 +45,7 @@ const App = () => {
       <button
         type="button"
         onClick={() => {
-          // dispatch(connect());
+          dispatch(connect());
         }}
       >
         connect
diff --git a/Dashboard/src/redux/middlewares/serialConnection.ts b/Dashboard/src/redux/middlewares/serialConnection.ts
new file mode 100644
index 0000000..ce918c6
--- /dev/null
+++ b/Dashboard/src/redux/middlewares/serialConnection.ts
@@ -0,0 +1,29 @@
+import { Middleware, Action } from "@reduxjs/toolkit";
+import { RootState } from "../store/types.d";
+import {
+  connect, disconnect, setSerialPort, setMessage,
+} from "../slices/serialConnectionSlice";
+import PortController from "../../serial/PortController";
+import store from "../store";
+
+let serialPort: PortController|null = null;
+const errorCalbackHandler = () => {};
+const closeCalbackHandler = () => {};
+const serialDataListener = (msg: string) => { store.dispatch(setMessage(msg)); };
+
+const serialConnection: Middleware<{}, RootState> = () => (next) => (action: Action) => {
+  if (connect.match(action)) {
+    serialPort?.open(errorCalbackHandler, closeCalbackHandler);
+    serialPort?.parser.on("data", serialDataListener);
+    console.log("connect");
+  } else if (disconnect.match(action)) {
+    serialPort?.close();
+    console.log("disconnect");
+  } else if (setSerialPort.match(action)) {
+    serialPort = new PortController(action.payload);
+    console.log("setSerialPort");
+  }
+  return next(action);
+};
+
+export default serialConnection;
diff --git a/Dashboard/src/redux/store/index.ts b/Dashboard/src/redux/store/index.ts
index 03b7fb5..7627274 100644
--- a/Dashboard/src/redux/store/index.ts
+++ b/Dashboard/src/redux/store/index.ts
@@ -1,9 +1,9 @@
 import thunk from "redux-thunk";
 import { configureStore } from "@reduxjs/toolkit";
 import rootReducer from "./root-reducer";
-import logger from "../middlewares/logger";
+import serialConnection from "../middlewares/serialConnection";
 
-const middlewares = [thunk, logger];
+const middlewares = [thunk, serialConnection];
 
 const store = configureStore(
   {