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">

frontend/src/components/SessionChecker.tsx

@@ -6,6 +6,7 @@ import { useRouter, usePathname } from "next/navigation";
 import { api, Session } from "muzak/data/fetcher";
 import { getUser } from "muzak/data/fetcher";
 import { useSession } from "muzak/contexts/SessionContext";
+import getSessionId from "muzak/data/session";
 
 export default function SessionChecker() {
   const auth = useAuth();
@@ -15,30 +16,31 @@ export default function SessionChecker() {
   const [link, setLink] = useState("/lobby");
   const { sessionId, setSessionId } = useSession();
 
-  async function getSessions() {
-    if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
-      const { data: sessions } = await api?.sessions?.list({});
-      console.log(sessions);
-      if (sessions?.length > 0) {
-        setIsSession(true);
-        const user = getUser();
-        setSessionId(sessions[0].session_id);
-        if (sessions[0].host === user?.profile?.email) {
-          setLink("/lobby");
-        } else {
-          setLink("/session");
-        }
-      } else {
-        setIsSession(false);
-      }
-    }
-  }
+  // async function getSessions() {
+  //   if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
+  //     const { data: sessions } = await api?.sessions?.list({});
+  //     console.log(sessions);
+  //     if (sessions?.length > 0) {
+  //       setIsSession(true);
+  //       const user = getUser();
+  //       setSessionId(sessions[0].session_id);
+  //       if (sessions[0].host === user?.profile?.email) {
+  //         setLink("/lobby");
+  //       } else {
+  //         setLink("/session");
+  //       }
+  //     } else {
+  //       setIsSession(false);
+  //     }
+  //   }
+  // }
 
   useEffect(() => {
-    getSessions();
+    getSessionId();
+    console.log("hheufheufh");
   }, [auth]);
 
-  if (isSession) {
+  if (sessionId) {
     return (
       <Link
         href={link}

frontend/src/data/session.ts

@@ -0,0 +1,16 @@
+"use client";
+import { useAuth } from "react-oidc-context";
+import { api, getUser, Session } from "muzak/data/fetcher";
+import { useSession } from "muzak/contexts/SessionContext";
+
+export default async function getSessionId() {
+  //const auth = useAuth();
+  //const { sessionId, setSessionId } = useSession();
+
+  //if (!auth.isLoading && !auth.error && auth.isAuthenticated) {
+  const { data: sessions } = await api?.sessions?.list({});
+  if (sessions?.length > 0) {
+    return sessions[0].session_id;
+  }
+  //}
+}