Implement State WebSocket

frontend/src/pages/Index.tsx

@@ -1,13 +1,33 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { State } from "../proto";
 import { TokenContext } from "../tokenStorage";
 
 export const Index: React.FC = () => {
 
     const tokenStorage = React.useContext(TokenContext);
+    
+    const [state, setState] = useState<State>();
+
+    useEffect(() => {
+        const url = new URL(`api/${tokenStorage.token}/state`, window.location.href);
+        url.protocol = url.protocol.replace("http", "ws");
+
+        const socket = new WebSocket(url.href);
+
+        socket.onmessage = (e) => {
+            let newState = JSON.parse(e.data) as State;
+            setState(newState);
+        }
+
+        return () => { socket.close(); };
+
+    }, [tokenStorage.token]);
 
     return <>
-        Hallo i bims 1 index u d1 token bimst {tokenStorage.token}
+        <p>Hallo i bims 1 index u d1 token bimst {tokenStorage.token}</p>
         <button onClick={tokenStorage.reset}>Resetteroni</button>
+        <p>Der State ist:</p>
+        {JSON.stringify(state)}
     </>
 }
 

frontend/src/tokenStorage.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useState } from "react";
 import Login from "./Login";
 
 const LOCAL_STORAGE_KEY = "token";
-const VALIDATE_ENDPOINT = "api/validate";
 
 export type Token = string | null;
 export type TokenStorage = {
@@ -37,9 +36,7 @@ export const TokenProvider: React.FC = (props) => {
     useEffect(() => {
         (async () => {
             if (tokenStorage.token) {
-                const response = await fetch(`${VALIDATE_ENDPOINT}?` + new URLSearchParams({
-                    token: tokenStorage.token,
-                }));
+                const response = await fetch(`api/${token}/validate`);
 
                 const data = await response.json() as { "success": boolean };