session link with mobile voting

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

@@ -1,8 +1,14 @@
 "use client";
 
 import { Nunito } from "next/font/google";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "react-oidc-context";
+import { getUser } from "muzak/data/fetcher";
 import Image from "next/image";
+import getSessionId from "muzak/data/session";
+import { useSession } from "muzak/contexts/SessionContext";
+import Router from "next/router";
 
 const nunito = Nunito({
   weight: "900",
@@ -13,6 +19,82 @@ export default function MobileVoting() {
   const [vote, setVote] = useState(0.5);
   const [noHighlight, setNoHighlight] = useState(false);
   const [yesHighlight, setYesHighlight] = useState(false);
+  const auth = useAuth();
+  const router = useRouter();
+  const { sessionId, setSessionId } = useSession();
+  const [sessionSocket, setSessionSocket] = useState<WebSocket | null>(null);
+
+  async function waitForOpenSocket() {
+    await new Promise<void>((resolve) => {
+      const interval = setInterval(() => {
+        console.log("Checking socket state...");
+        if (sessionSocket?.readyState === WebSocket.OPEN) {
+          clearInterval(interval);
+          resolve();
+        }
+      }, 1000);
+    });
+  }
+  const user = getUser();
+
+  async function connect() {
+    console.log(`ik ben ${user.profile.nickname}`);
+    console.log(sessionSocket);
+    console.log(sessionSocket?.readyState);
+    await waitForOpenSocket();
+    console.log("socket is open");
+    sessionSocket.send(
+      JSON.stringify({
+        action: "login",
+        userr: user.profile.nickname,
+        token: user.access_token,
+      }),
+    );
+  }
+
+  // Initialize WebSocket connection when sessionId changes
+  useEffect(() => {
+    if (sessionId) {
+      console.log("Socket session ID:", sessionId);
+      const socket = new WebSocket(
+        `${process.env.NEXT_PUBLIC_WS_HOST}/voting/session/${sessionId}/`,
+      );
+      setSessionSocket(socket);
+      //setTimeout(() => connect(), 2000);
+    }
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (sessionSocket) {
+      connect();
+    }
+  }, [sessionSocket]);
+
+  async function setSession() {
+    const id = await getSessionId();
+    setSessionId(id);
+    console.log("Session ID:", id);
+  }
+
+  useEffect(() => {
+    if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
+      setSession();
+    } else if (!auth.isLoading && !auth.isAuthenticated) {
+      router.push("/");
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    if (sessionSocket?.readyState == WebSocket.OPEN) {
+      sessionSocket.send(
+        JSON.stringify({
+          action: "vote",
+          token: user.access_token,
+          points: vote,
+        }),
+      );
+    }
+  }, [vote]);
 
   return (
     <main className="m-3 h-screen rounded bg-blue-950/80 p-8 sm:p-14 md:p-20">