From 729f600e87ffe1348359e61f5bf534a4803cbf24 Mon Sep 17 00:00:00 2001
From: GHOSCHT <31184695+GHOSCHT@users.noreply.github.com>
Date: Thu, 26 Aug 2021 11:39:34 +0200
Subject: [PATCH] Implement light status feedback

---
 Dashboard/src/App.tsx             | 35 +++++++++++++++++--------------
 Dashboard/src/SerialConnection.ts | 17 +++++++--------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index 8c879b9..605a0d4 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { createGlobalStyle } from "styled-components";
 import SerialPort from "serialport";
 import Knob from "./Components/Knob";
-import SerialConnection from "./SerialConnection";
+import { port, parser } from "./SerialConnection";
 
 const GlobalStyle = createGlobalStyle`
   html {
@@ -16,17 +16,28 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const port = SerialConnection();
-
 const App = () => {
-  const [counter, setCounter] = useState(0);
+  const [status, setStatus] = useState(0);
+  const SerialDataListener = (data: string) => {
+    const parsedData = data.split(",");
+    setStatus(parseInt(parsedData[2], 10));
+  };
+
+  useEffect(() => {
+    parser.on("data", SerialDataListener);
+    port.open();
+    return () => {
+      parser.removeListener("data", SerialDataListener);
+      port.close();
+    };
+  }, []);
 
   const sendIncreaseHandler = () => {
-    setCounter(counter + 1);
+    setStatus(status + 1);
     port.write("2i");
   };
   const sendDecreaseHandler = () => {
-    setCounter(counter - 1);
+    setStatus(status - 1);
     port.write("2d");
   };
   const sendToggleHandler = () => {
@@ -40,7 +51,7 @@ const App = () => {
         increase={sendIncreaseHandler}
         decrease={sendDecreaseHandler}
         toggle={sendToggleHandler}
-        status={counter}
+        status={status}
       />
       <button
         type="button"
@@ -50,14 +61,6 @@ const App = () => {
       >
         open
       </button>
-      <button
-        type="button"
-        onClick={() => {
-          setCounter(counter + 1);
-        }}
-      >
-        increase
-      </button>
       <button
         type="button"
         onClick={() => {
diff --git a/Dashboard/src/SerialConnection.ts b/Dashboard/src/SerialConnection.ts
index 11d5b4b..e8fa71b 100644
--- a/Dashboard/src/SerialConnection.ts
+++ b/Dashboard/src/SerialConnection.ts
@@ -1,11 +1,10 @@
-import SerialPort from "serialport";
+import SerialPort, { parsers } from "serialport";
 
-const newPort = () => {
-  const port = new SerialPort("COM5", {
-    baudRate: 9600,
-    autoOpen: false,
-  });
-  return port;
-};
+const port = new SerialPort("COM5", {
+  baudRate: 9600,
+  autoOpen: false,
+});
 
-export default newPort;
+const parser = port.pipe(new parsers.Readline({ delimiter: "\r\n" }));
+
+export { port, parser };