Display state transition messages in Console

control-station/src/components/SensorBoxes/Console.tsx

@@ -1,14 +1,37 @@
+import { useContext, useEffect, useRef, useState } from "react";
 import "./SensorData.css";
+import PodContext from "@/services/PodContext";
 
 function Console() {
+	const { podData } = useContext(PodContext);
+	const [stateList, setStateList] = useState<string[]>([]);
+	const listEndRef = useRef<HTMLLIElement | null>(null);
+
+	useEffect(() => {
+		if (podData.state) {
+			setStateList((prev) => [...prev, podData.state]);
+		}
+	}, [podData.state]);
+
+	useEffect(() => {
+		if (listEndRef.current) {
+			listEndRef.current.scrollIntoView({ behavior: "smooth" });
+		}
+	}, [stateList]);
+
 	return (
 		<div className="console">
 			<h2>Console</h2>
 			<ul className="console-list">
-				<li className="console-list-item">Start Sent</li>
-				<li className="console-list-item">Stop Sent</li>
-				<li className="console-list-item">Load Sent</li>
-				<li className="console-list-item">Force Stop Sent</li>
+				{stateList.map((prop, index) => (
+					<li
+						key={index}
+						className="console-list-item"
+						ref={index === stateList.length - 1 ? listEndRef : null}
+					>
+						{prop} State
+					</li>
+				))}
 			</ul>
 		</div>
 	);

pod-operation/src/main.rs

@@ -54,17 +54,17 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
 	let lidar = Lidar::new();
 	tokio::spawn(demo::read_lidar(lidar));
 
-	let mut state_machine = StateMachine::new(io);
-	tokio::spawn(async move {
-		state_machine.run().await;
-	});
-
 	let limcurrent = LimCurrent::new(ads1x1x::SlaveAddr::Default);
 	tokio::spawn(demo::read_lim_current(limcurrent));
 
 	let inverter_board = InverterBoard::new();
 	tokio::spawn(demo::inverter_control(inverter_board));
 
+	let mut state_machine = StateMachine::new(io);
+	tokio::spawn(async move {
+		state_machine.run().await;
+	});
+
 	let app = axum::Router::new().layer(layer);
 
 	info!("Starting server on port 5000");