Merge pull request 'localStorage token and websocket reconnect' (#28) from auth-session-updates into master

Reviewed-on: #28

frontend/src/app/lobby/page.tsx

@@ -87,6 +87,12 @@ export default function Lobby() {
     setSessionState("voting");
     setState("loading");
     getTrack();
+    sessionSocket.send(
+      JSON.stringify({
+        action: "start",
+        token: user.access_token,
+      }),
+    );
   }
 
   function addUser(user: object) {

frontend/src/app/mobile-voting/page.tsx

@@ -43,10 +43,19 @@ export default function MobileVoting() {
     console.log(sessionSocket?.readyState);
     await waitForOpenSocket();
     console.log("socket is open");
+    sessionSocket.onclose = function (e) {
+      console.log("Chat socket closed unexpectedly");
+      setYesHighlight(false);
+      setNoHighlight(false);
+      setVote(0.5);
+      setSessionId(null);
+      setTimeout(() => {
+        setSession();
+      }, 2000);
+    };
     sessionSocket.send(
       JSON.stringify({
         action: "login",
-        userr: user.profile.nickname,
         token: user.access_token,
       }),
     );
@@ -57,14 +66,13 @@ export default function MobileVoting() {
     console.log(e);
     let data = JSON.parse(e.data);
     for (let key in data) {
-      if (key == "track") {
+      if (key == "track" || key == "start") {
         setYesHighlight(false);
         setNoHighlight(false);
         setVote(0.5);
       }
     }
     console.log(data);
-    //}, 1000);
   }
 
   // Initialize WebSocket connection when sessionId changes
@@ -76,7 +84,6 @@ export default function MobileVoting() {
       );
       socket.onmessage = onMessage;
       setSessionSocket(socket);
-      //setTimeout(() => connect(), 2000);
     }
   }, [sessionId]);
 
@@ -113,7 +120,7 @@ export default function MobileVoting() {
   }, [vote]);
 
   return (
-    <main className="m-3 h-screen rounded bg-blue-950/80 p-8 sm:p-14 md:p-20">
+    <main className="m-0 h-screen rounded bg-blue-950/80 p-8 sm:p-14 md:p-20">
       <div className="flex flex-row items-center justify-between gap-8 rounded-md">
         <button
           className={`flex aspect-square w-1/2 max-w-[200px] items-center rounded bg-black/20 p-0 text-center font-bold text-white ${noHighlight ? "ring-5 ring-amber-400" : "ring-0 ring-black/20"}`}