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}
/>
-