From 06b46c3be9b91078b9c051d7dada1e175359c2f0 Mon Sep 17 00:00:00 2001
From: Taesung Hwang <taesungh@uci.edu>
Date: Sat, 3 Jun 2023 10:33:41 -0700
Subject: [PATCH] Implement `KeyboardStopHandler` for manual stop

- Emit stop event when spacebar is pressed in the dashboard
---
 .../src/components/KeyboardStopHandler.tsx    | 26 +++++++++++++++++++
 .../src/views/Dashboard/Dashboard.tsx         |  2 ++
 2 files changed, 28 insertions(+)
 create mode 100644 control-station/src/components/KeyboardStopHandler.tsx

diff --git a/control-station/src/components/KeyboardStopHandler.tsx b/control-station/src/components/KeyboardStopHandler.tsx
new file mode 100644
index 0000000..fbb04c1
--- /dev/null
+++ b/control-station/src/components/KeyboardStopHandler.tsx
@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import PodSocketClient from "services/PodSocketClient";
+
+interface KeyboardStopHandlerProps {
+	podSocketClient: PodSocketClient;
+}
+
+function KeyboardStopHandler({ podSocketClient }: KeyboardStopHandlerProps) {
+	useEffect(() => {
+		const downHandler = (event: KeyboardEvent) => {
+			if (event.code === "Space") {
+				console.log("emit stop");
+				podSocketClient.sendStop();
+			}
+		};
+		window.addEventListener("keydown", downHandler);
+
+		return () => {
+			window.removeEventListener("keydown", downHandler);
+		};
+	}, [podSocketClient]);
+
+	return <></>;
+}
+
+export default KeyboardStopHandler;
diff --git a/control-station/src/views/Dashboard/Dashboard.tsx b/control-station/src/views/Dashboard/Dashboard.tsx
index 127cef3..1961b28 100644
--- a/control-station/src/views/Dashboard/Dashboard.tsx
+++ b/control-station/src/views/Dashboard/Dashboard.tsx
@@ -1,3 +1,4 @@
+import KeyboardStopHandler from "components/KeyboardStopHandler";
 import usePodData from "./usePodData";
 
 function Dashboard() {
@@ -12,6 +13,7 @@ function Dashboard() {
 				<p>wheel counter - {podData.wheelCounter}</p>
 				<p>wheel speed - {podData.wheelSpeed.toFixed(2)}</p>
 			</div>
+			<KeyboardStopHandler podSocketClient={podSocketClient} />
 			<button onClick={() => podSocketClient.sendService()}>service</button>
 			<button onClick={() => podSocketClient.sendStart()}>start</button>
 			<button onClick={() => podSocketClient.sendStop()}>stop</button>