Set up PodContext to provide data & socket client (#88)

- Create a context provider to access the pod data and socket client
  from child components within App
- Update `ControlPanel` and `StatusIndicator` to access the context
- Move `SensorData` and `StatusIndicator` to `Dashboard`

Author: taesungh

control-station/package-lock.json

@@ -26,7 +26,7 @@
 		"eslint-plugin-react": "^7.33.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-react-refresh": "^0.4.3",
-		"prettier": "3.2.5",
+		"prettier": "^3.2.5",
 		"typescript": "^5.0.2",
 		"vite": "^4.4.5"
 	}

control-station/package.json

@@ -1,15 +1,18 @@
-import { ControlPanel, Navbar, SensorData, StatusIndicator } from "@/components";
+import { ControlPanel, Navbar } from "@/components";
 import usePodData from "./services/usePodData";
+import PodContext from "./services/PodContext";
+import { Dashboard } from "@/views";
 
 function App() {
 	const { podData, podSocketClient } = usePodData();
 
 	return (
 		<main>
-			<Navbar />
-			<SensorData />
-			<StatusIndicator state={podData.state} />
-			<ControlPanel podSocketClient={podSocketClient} />
+			<PodContext.Provider value={{ podData, podSocketClient }}>
+				<Navbar />
+				<Dashboard />
+				<ControlPanel />
+			</PodContext.Provider>
 		</main>
 	);
 }

control-station/src/App.tsx

@@ -1,11 +1,12 @@
+import { useContext } from "react";
+
+import PodContext from "@/services/PodContext";
+
 import "./ControlPanel.css";
-import PodSocketClient from "@/services/PodSocketClient";
 
-interface ControlPanelProps {
-	podSocketClient: PodSocketClient;
-}
+function ControlPanel() {
+	const { podSocketClient } = useContext(PodContext);
 
-function ControlPanel({ podSocketClient }: ControlPanelProps) {
 	return (
 		<div className="controlpanel">
 			<button className="button run" onClick={() => podSocketClient.sendRun()}>

control-station/src/components/ControlPanel/ControlPanel.tsx

@@ -1,11 +1,14 @@
+import { useContext } from "react";
+
+import PodContext from "@/services/PodContext";
 import { State } from "@/services/PodSocketClient";
+
 import "./StatusIndicator.css";
 
-interface StatusIndicatorProps {
-	state: State;
-}
+function StatusIndicator() {
+	const { podData } = useContext(PodContext);
+	const { state } = podData;
 
-function StatusIndicator({ state }: StatusIndicatorProps) {
 	return (
 		<div className="status-indicator">
 			{Object.values(State).map((s) => {

control-station/src/components/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+
+import PodSocketClient, { PodData } from "./PodSocketClient";
+
+interface PodContext {
+	podSocketClient: PodSocketClient;
+	podData: Readonly<PodData>;
+}
+
+// Initialize with unusable object assuming proper values are always provided
+const PodContext = createContext<PodContext>({
+	podSocketClient: {} as PodSocketClient,
+	podData: {} as PodData,
+});
+
+export default PodContext;

control-station/src/services/PodContext.ts

@@ -1,18 +1,10 @@
-import { Status } from "@/components";
-import usePodData from "@/services/usePodData";
+import { SensorData, StatusIndicator } from "@/components";
 
 function Dashboard() {
-	const { podData, podSocketClient } = usePodData();
-
 	return (
 		<div>
-			<h1>Dashboard</h1>
-			<Status />
-			<p>{podData.connected ? "connected" : "disconnected"}</p>
-			<button onClick={() => podSocketClient.sendStop()}>Send Stop</button>
-			<button onClick={() => podSocketClient.sendHalt()}>Send Halt</button>
-			<button onClick={() => podSocketClient.sendLoad()}>Send Load</button>
-			<button onClick={() => podSocketClient.sendRun()}>Send Run</button>
+			<SensorData />
+			<StatusIndicator />
 		</div>
 	);
 }