Merge pull request #116 from HyperloopUPV-H8/ethernet-view/sidebar

[ethernet-view] Navbar and React Router

Author: andresdlt03

common-front/lib/components/Loader/Loader.tsx

@@ -32,19 +32,15 @@ export const Loader = <T extends Promise<any>[]>({
     FailureView,
     children,
 }: Props<T>) => {
-    const [state, setState] = useState<
-        PromiseResult<AwaitedArray<typeof promises>>
-    >({ state: "pending" });
+    const [state, setState] = useState<PromiseResult<AwaitedArray<typeof promises>>>({ state: "pending" });
     const startTime = useRef(0);
 
     useEffect(() => {
         startTime.current = performance.now();
         Promise.all(promises)
             .then((values) => {
                 const elapsed = performance.now() - startTime.current;
-                setTimeout(() => {
-                    setState({ state: "fulfilled", result: values });
-                }, clamp(MAX_TITLE_TIME - elapsed, 0, MAX_TITLE_TIME));
+                setTimeout(() => setState({ state: "fulfilled", result: values }), clamp(MAX_TITLE_TIME - elapsed, 0, MAX_TITLE_TIME));
             })
             .catch(() => setState({ state: "rejected" }));
     }, []);

common-front/lib/hooks/index.ts

@@ -4,3 +4,4 @@ export * from "./useCameras";
 export * from "./useToggle";
 export * from "./useSendOrder";
 export * from "./useListenKey";
+export * from "./useLoadBackend";

common-front/lib/hooks/useLoadBackend.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { WsHandler, createWsHandler, fetchBack, useConfig, useConnectionsStore, useFetchBack, useMeasurementsStore, usePodDataStore } from ".." 
+
+type loadBackendResult = {
+    state: "pending";
+} | {
+    state: "fulfilled";
+    wsHandler: WsHandler;
+} | {
+    state: "rejected";
+    error: Error;
+};
+
+type UseLoadBackend = (isProduction: boolean) => loadBackendResult;
+
+// Custom hook that initializes the Websocket connection, returning the WsHandler object
+// and fetches the podDataDescription from the server, initializing the PodData and Measurements in the store.
+export const useLoadBackend : UseLoadBackend = (isProduction) => {
+    const config = useConfig();
+    const initPodData = usePodDataStore((state) => state.initPodData);
+    const initMeasurements = useMeasurementsStore((state) => state.initMeasurements);
+    const setBackendConnection = useConnectionsStore((state) => state.setBackendConnection);
+    
+    const [result, setResult] = useState<loadBackendResult>({state: "pending"});
+
+    const BACKEND_URL = isProduction
+        ? `${config.prodServer.ip}:${config.prodServer.port}/${config.paths.websocket}`
+        : `${config.devServer.ip}:${config.devServer.port}/${config.paths.websocket}`;
+
+    const POD_DATA_DESCRIPTION_URL = isProduction
+        ? `http://${config.prodServer.ip}:${config.prodServer.port}/${config.paths.podDataDescription}`
+        : `http://${config.devServer.ip}:${config.devServer.port}/${config.paths.podDataDescription}`;
+
+    useEffect(() => {
+        Promise.all([
+            createWsHandler(
+                BACKEND_URL,
+                true,
+                () => setBackendConnection(true),
+                () => setBackendConnection(false)
+            ),
+            fetch(POD_DATA_DESCRIPTION_URL).then((res) => res.json()).then(
+                (adapter) => {
+                    initPodData(adapter);
+                    initMeasurements(adapter);
+                }
+            ),
+        ])
+        .then(result => setResult({state: "fulfilled", wsHandler: result[0]}))
+        .catch(error => setResult({state: "rejected", error}));
+    }, []);
+
+    return result;
+}

ethernet-view/package-lock.json

@@ -24,6 +24,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^4.6.0",
         "react-redux": "^8.0.5",
+        "react-router-dom": "^6.22.3",
         "react-use-measure": "^2.1.1",
         "react-virtualized-auto-sizer": "^1.0.7",
         "react-window": "^1.8.8",

ethernet-view/package.json

@@ -1,58 +1,25 @@
 import "./App.css";
-import {
-    WsHandlerProvider,
-    createWsHandler,
-    useConfig,
-    useFetchBack,
-    Loader,
-    useMeasurementsStore,
-    usePodDataStore,
-    useConnectionsStore
-} from "common";
-import { HomePage } from "pages/HomePage/HomePage";
+import { TestingPage } from "pages/TestingPage/TestingPage";
 import { SplashScreen } from "components/SplashScreen/SplashScreen";
+import { WsHandlerProvider } from "common";
+import { useLoadBackend } from "common";
 
-function App() {
-    const config = useConfig();
-    const podDataDescriptionPromise = useFetchBack(
-        import.meta.env.PROD,
-        config.paths.podDataDescription
-    );
 
-    const initMeasurements = useMeasurementsStore((state) => state.initMeasurements);
-    const initPodData = usePodDataStore((state) => state.initPodData);
-    const setBackendConnection = useConnectionsStore((state) => state.setBackendConnection);
+function App() {
 
-    const SERVER_URL = import.meta.env.PROD
-        ? `${config.prodServer.ip}:${config.prodServer.port}/${config.paths.websocket}`
-        : `${config.devServer.ip}:${config.devServer.port}/${config.paths.websocket}`;
+    const isProduction = import.meta.env.PROD;
+    const loadBackend = useLoadBackend(isProduction);
 
     return (
         <div className="App">
-            <Loader
-                promises={[
-                    createWsHandler(
-                        SERVER_URL,
-                        true,
-                        () => setBackendConnection(true),
-                        () => setBackendConnection(false),
-                    ),
-                    podDataDescriptionPromise.then((adapter) => {
-                        initPodData(adapter);
-                        initMeasurements(adapter);
-                    }),
-                ]}
-                LoadingView={<SplashScreen />}
-                FailureView={<div>Failure</div>}
-            >
-                {([handler]) => (
-                    <WsHandlerProvider handler={handler}>
-                        <HomePage />
-                    </WsHandlerProvider>
-                )}
-            </Loader>
+            {loadBackend.state === "fulfilled" && 
+                <WsHandlerProvider handler={loadBackend.wsHandler}>
+                    <TestingPage />
+                </WsHandlerProvider>}
+            {loadBackend.state === "pending" && <SplashScreen />}
+            {loadBackend.state === "rejected" && <div>{`${loadBackend.error}`}</div>}
         </div>
     );
 }
 
-export default App;
+export default App;

ethernet-view/src/App.tsx

@@ -0,0 +1,34 @@
+@use "../../styles/styles.scss";
+
+.navbarWrapper {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1.4rem;
+    padding: 2rem 0.8rem;
+    background-color: white;
+    border-right: 1px solid styles.getColor(styles.$base-color, 80);
+    border-radius: styles.$large-border-radius;
+}
+
+.logo {
+    font-size: 3rem;
+    color: styles.$base-color;
+}
+
+.separator {
+    width: 46%;
+    height: 0.25rem;
+    border-radius: 10rem;
+    background-color: styles.getColor(styles.$base-color, 80);
+}
+
+.items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 1.5rem;
+    gap: 1.5rem;
+}