Merge pull request #132 from HyperloopUPV-H8/control-station/migrate-to-zustand

[control-station] Migrate to Zustand

Author: andresdlt03

common-front/lib/store/measurementsStore.ts

@@ -1,3 +1,4 @@
+
 import {
     Measurement,
     NumericMeasurement,
@@ -67,7 +68,8 @@ export const useMeasurementsStore = create<MeasurementsStore>((set, get) => ({
      * @param {Record<string, PacketUpdate>} measurements
      */
     updateMeasurements: (measurements: Record<string, PacketUpdate>) => {
-        const measurementsDraft = get().measurements;
+
+        const measurementsDraft = {...get().measurements};
 
         for (const update of Object.values(measurements)) {
             for (const [id, mUpdate] of Object.entries(

control-station/src/App.tsx

@@ -11,15 +11,16 @@ import {
     WsHandlerProvider,
     createWsHandler,
     useConfig,
+    useConnectionsStore,
     useFetchBack,
+    useMeasurementsStore,
+    usePodDataStore,
 } from "common";
-import { useDispatch } from "react-redux";
-import { initPodData } from "slices/podDataSlice";
-import { initMeasurements } from "slices/measurementsSlice";
-import { setWebSocketConnection } from "slices/connectionsSlice";
 
 export const App = () => {
-    const dispatch = useDispatch();
+    const setBackendConnection = useConnectionsStore(store => store.setBackendConnection);
+    const initPodData = usePodDataStore(store => store.initPodData);
+    const initMeasurements = useMeasurementsStore(store => store.initMeasurements);
     const config = useConfig();
     const podDataDescriptionPromise = useFetchBack(
         import.meta.env.PROD,
@@ -36,12 +37,12 @@ export const App = () => {
                     createWsHandler(
                         WS_URL,
                         true,
-                        () => dispatch(setWebSocketConnection(true)),
-                        () => dispatch(setWebSocketConnection(false))
+                        () => setBackendConnection(true),
+                        () => setBackendConnection(false)
                     ),
                     podDataDescriptionPromise.then((adapter) => {
-                        dispatch(initPodData(adapter));
-                        dispatch(initMeasurements(adapter));
+                        initPodData(adapter);
+                        initMeasurements(adapter);
                     }),
                 ]}
                 LoadingView={<div>Loading</div>}

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

@@ -1,17 +1,19 @@
 import styles from "components/ValueData/ValueData.module.scss";
-import { Measurement, isNumericMeasurement } from "common";
+import { Measurement, isNumericMeasurement, useMeasurementsStore } from "common";
 import { useTextUpdater } from "services/ImperativeUpdater/useTextUpdater";
 import { memo } from "react";
-import { store } from "store";
 
 type Props = {
     measurement: Measurement;
 };
 
 export const ValueData = memo(({ measurement }: Props) => {
+
+    const measurements = useMeasurementsStore(state => state.measurements);
+
     const ref = useTextUpdater(() => {
         const storeMeas =
-            store.getState().measurements.measurements[measurement.id];
+            measurements[measurement.id];
 
         if (!storeMeas) {
             return "Default";

control-station/src/main.tsx

@@ -2,7 +2,6 @@ import "common/dist/style.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
-import { store } from "store";
 import {
     createBrowserRouter,
     Navigate,
@@ -30,15 +29,13 @@ const router = createBrowserRouter([
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>
-        <Provider store={store}>
-            <ConfigProvider
-                devIp="127.0.0.1"
-                prodIp="127.0.0.1"
-            >
-                <GlobalTicker fps={60}>
-                    <RouterProvider router={router}></RouterProvider>
-                </GlobalTicker>
-            </ConfigProvider>
-        </Provider>
+        <ConfigProvider
+            devIp="127.0.0.1"
+            prodIp="127.0.0.1"
+        >
+            <GlobalTicker fps={60}>
+                <RouterProvider router={router}></RouterProvider>
+            </GlobalTicker>
+        </ConfigProvider>
     </React.StrictMode>
 );

control-station/src/pages/TubePage/tubeRoute.tsx

@@ -1,8 +1,6 @@
-import { loadPodData } from "pages/VehiclePage/loadPodData";
 import { TubePage } from "./TubePage";
 
 export const tubeRoute = {
     path: "/tube",
     element: <TubePage />,
-    loader: loadPodData,
 };

control-station/src/pages/VehiclePage/Boards/BMSL/BMSL.tsx

@@ -4,8 +4,6 @@ import { BarTag } from "components/BarTag/BarTag";
 import { Window } from "components/Window/Window";
 import { BmslMeasurements, NumericMeasurement } from "common";
 import { ValueDataTag } from "components/ValueDataTag/ValueDataTag";
-import { useSelector } from "react-redux";
-import { RootState } from "store";
 
 export const BMSL = (props: BmslMeasurements) => {
     return (

control-station/src/pages/VehiclePage/Boards/LCU/CoilsInfo/CoilInfo/CurrentChart/CurrentChart.tsx

@@ -1,12 +1,13 @@
-import { LinesChart, NumericMeasurement } from "common";
-import { store } from "store";
+import { LinesChart, NumericMeasurement, useMeasurementsStore } from "common";
 
 type Props = {
     current: NumericMeasurement;
     currentRef: NumericMeasurement;
 };
 
 export const CurrentChart = ({ current }: Props) => {
+    const getMeasurement = useMeasurementsStore((state) => state.getMeasurement);
+
     return (
         <LinesChart
             width="8rem"
@@ -20,9 +21,7 @@ export const CurrentChart = ({ current }: Props) => {
                     color: "red",
                     getUpdate: () =>
                         (
-                            store.getState().measurements.measurements[
-                                current.id
-                            ] as NumericMeasurement
+                            getMeasurement(current.id) as NumericMeasurement
                         ).value.last,
                 },
             ]}

control-station/src/pages/VehiclePage/Boards/PCU/MotorInfo/MotorInfo.tsx

@@ -1,11 +1,13 @@
 import styles from "./MotorInfo.module.scss";
 import {
     LineDescription,
+    Measurement,
+    MeasurementId,
     NumericMeasurement,
     isNumericMeasurement,
+    useMeasurementsStore,
 } from "common";
 import { ColorfulChart } from "common";
-import { store } from "store";
 
 type Props = {
     title: string;
@@ -20,34 +22,36 @@ export const MotorInfo = ({
     motorCurrentV,
     motorCurrentW,
 }: Props) => {
+    const getMeasurement = useMeasurementsStore((state) => state.getMeasurement);
+
     return (
         <div className={styles.motorInfoWrapper}>
             <ColorfulChart
                 className={styles.chart}
                 title={title}
                 length={100}
                 items={[
-                    getItemFromMeasurement(motorCurrentU),
-                    getItemFromMeasurement(motorCurrentV),
-                    getItemFromMeasurement(motorCurrentW),
+                    getItemFromMeasurement(motorCurrentU, getMeasurement),
+                    getItemFromMeasurement(motorCurrentV, getMeasurement),
+                    getItemFromMeasurement(motorCurrentW, getMeasurement),
                 ]}
             />
         </div>
     );
 };
 
-function getItemFromMeasurement(meas: NumericMeasurement): LineDescription {
+function getItemFromMeasurement(meas: NumericMeasurement, getMeasurement: (id: MeasurementId) => Measurement): LineDescription {
     return {
         id: meas.id,
         name: meas.name,
         color: "red",
-        getUpdate: () => getMeasurementValue(meas.id),
+        getUpdate: () => getMeasurementValue(meas.id, getMeasurement),
         range: meas.safeRange,
     };
 }
 
-function getMeasurementValue(id: string): number {
-    const measurement = store.getState().measurements.measurements[id];
+function getMeasurementValue(id: string, getMeasurement: (id: MeasurementId) => Measurement): number {
+    const measurement = getMeasurement(id)
 
     if (!measurement) {
         return 0;

control-station/src/pages/VehiclePage/BoardsPage/BoardsPage.tsx

@@ -1,5 +1,4 @@
 import styles from "./BoardsPage.module.scss";
-import { useMeasurements } from "../useMeasurements";
 import { LCU } from "../Boards/LCU/LCU";
 import { PCU } from "../Boards/PCU/PCU";
 import { BMSL } from "../Boards/BMSL/BMSL";
@@ -12,10 +11,17 @@ import {
     selectObccuMeasurements,
     selectPcuMeasurements,
     selectVcuMeasurements,
+    useMeasurementsStore,
+    useSubscribe,
 } from "common";
 
 export const BoardsPage = () => {
-    const measurements = useMeasurements();
+    const measurements = useMeasurementsStore(state => state.measurements);
+    const updateMeasurements = useMeasurementsStore(state => state.updateMeasurements);
+
+    useSubscribe("podData/update", (msg) => {
+        updateMeasurements(msg);
+    });
 
     return (
         <div className={styles.boardsPage}>

control-station/src/pages/VehiclePage/VehiclePage.tsx

@@ -1,11 +1,32 @@
+import { useGlobalTicker, useMeasurementsStore, useSubscribe } from "common";
 import styles from "./VehiclePage.module.scss";
 
 import { Pagination } from "components/Pagination/Pagination";
 import { PageWrapper } from "pages/PageWrapper/PageWrapper";
 import { Outlet } from "react-router-dom";
 import { useOrders } from "useOrders";
+import { fetchFromBackend } from "services/HTTPHandler";
+import { useCallback, useEffect, useState } from "react";
 
 export const VehiclePage = () => {
+    
+    const [podData, setPodData] = useState(null);
+    const initMeasurements = useMeasurementsStore(state => state.initMeasurements);
+
+    useEffect(() => {
+        const fetchPodDataAsync = async () => {
+            const data = await fetchPodData();
+            setPodData(data);
+        };
+        fetchPodDataAsync();
+    }, []);
+
+    useEffect(() => {
+        if (podData) {
+            initMeasurements(podData);
+        }
+    }, [podData, initMeasurements]);
+
     useOrders();
 
     return (
@@ -17,3 +38,10 @@ export const VehiclePage = () => {
         </PageWrapper>
     );
 };
+
+async function fetchPodData() {
+    const response = await fetchFromBackend(
+        import.meta.env.VITE_POD_DATA_DESCRIPTION_PATH
+    );
+    return response.json();
+}