sessions, or something

frontend/src/app/lobby/page.tsx

@@ -4,6 +4,7 @@ import { Markazi_Text, Nunito } from "next/font/google";
 import users from "muzak/data/users.json";
 import Image from "next/image";
 import Link from "next/link";
+import { useSession } from "muzak/contexts/SessionContext";
 
 const nunito = Nunito({
   weight: "900",
@@ -13,29 +14,44 @@ const nunito = Nunito({
 const MAX_PARTY_SIZE = 8;
 
 export default function Lobby() {
-  const [partySize, setPartySize] = useState(0);
-  const [userList, setUserList] = useState([]);
+  const [userList, setUserList] = useState<any[]>([]);
+  const [sessionSocket, setSessionSocket] = useState<WebSocket | null>(null);
+  const { sessionId, setSessionId } = useSession();
+
+  function onMessage(e) {
+    setTimeout(() => {
+      console.log(e);
+      let data = JSON.parse(e.data);
+      for (let key in data) {
+        if (key === "joined") {
+          addUser(data[key]);
+        }
+      }
+      console.log(data);
+    }, 1000);
+  }
 
   useEffect(() => {
-    populateUserList();
-  }, [partySize]);
+    if (sessionId) {
+      const socket = new WebSocket(
+        `${process.env.NEXT_PUBLIC_WS_HOST}/voting/session/${sessionId}/`,
+      );
+      socket.onmessage = onMessage;
+      setSessionSocket(socket);
+    }
+  }, [sessionId]);
 
-  function populateUserList() {
-    const mappedUsers = users.slice(0, partySize).map((user) => ({
-      id: user.id,
-      name: user.name,
-      avatar: user.avatar,
-      host: user.host,
-    }));
-    setUserList(mappedUsers);
-  }
-
-  function addUserToParty() {
-    setPartySize((prev) => Math.min(prev + 1, MAX_PARTY_SIZE));
-  }
-
-  function deleteUserFromParty() {
-    setPartySize((prev) => Math.max(prev - 1, 0));
+  function addUser(userName: string) {
+    if (userList.find((user) => user.name === userName)) {
+      return;
+    }
+    const newUser = {
+      id: userList.length + 1,
+      name: userName,
+      avatar: `https://i.pravatar.cc/150?img=${userList.length + 1}`,
+      host: userList.length === 0,
+    };
+    setUserList((prevUserList) => [...prevUserList, newUser]);
   }
 
   return (
@@ -51,7 +67,7 @@ export default function Lobby() {
       <div className="flex min-h-[532px] min-w-[500px] flex-col items-center justify-start gap-4 rounded-md bg-blue-950/80 p-8">
         <div className="flex w-full flex-row items-center justify-between px-1">
           <div className="text-3xl font-bold text-yellow-500">
-            Players: {partySize}
+            Players: {userList.length}
           </div>
           <Link
             href="/voting"
@@ -61,7 +77,7 @@ export default function Lobby() {
           </Link>
         </div>
 
-        {partySize === 0 ? (
+        {userList.length === 0 ? (
           <div className="mt-31 min-w-52 text-3xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
             Waiting for players...
           </div>