update Room component and joining logic

modules/room/components/Canvas.tsx

@@ -1,17 +1,29 @@
 import { CANVAS_SIZE } from "@/common/constants/canvasSize";
+
 import { useViewportSize } from "@/common/hooks/useViewportSize";
+
 import { useMotionValue, motion } from "framer-motion";
+
 import { useRef, useState, useEffect } from "react";
+
 import { useKeyPressEvent } from "react-use";
+
 import { useDraw, useSocketDraw } from "../hooks/Canvas.hooks";
+
 import { socket } from "@/common/lib/socket";
+
 import Minimap from "./Minimap";
 
+import room, { useRoom } from "@/common/recoil/room";
+import { drawAllMoves } from "../helpers/Canvas.helpers";
+
+
 const Canvas = () => {
+    const room= useRoom();
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const smallCanvasRef = useRef<HTMLCanvasElement>(null);
 
-    const [ctx, setCtx] = useState<CanvasRenderingContext2D | undefined>();
+    const [ctx, setCtx] = useState<CanvasRenderingContext2D>();
     const [dragging, setDragging] = useState(false);
     const [, setMovedMiniMap] = useState(false);
 
@@ -44,10 +56,11 @@ const Canvas = () => {
 
     const { handleDraw, handleEndDrawing, handleStartDrawing, drawing, handleUndo } = useDraw(
         ctx,
-        dragging,
-        copyCanvasToSmall
+        dragging
     );
 
+    useSocketDraw(ctx,drawing);
+
     useEffect(() => {
         const newCtx = canvasRef.current?.getContext("2d");
         if (newCtx) setCtx(newCtx);
@@ -63,7 +76,18 @@ const Canvas = () => {
         }
     }, [dragging]);
 
-    useSocketDraw(ctx,drawing,  copyCanvasToSmall);
+    useEffect(()=> {
+        if(ctx) socket.emit("joined_room");
+    },[ctx]);
+
+    useEffect(()=> {
+        if(ctx){
+            drawAllMoves(ctx, room);
+            copyCanvasToSmall();
+        };
+    }, [ctx, room]);
+
+
     return (
         <div className="relative h-full w-full overflow-hidden">
             <button className="absolute top-0" onClick={handleUndo}>
@@ -123,3 +147,7 @@ const Canvas = () => {
 };
 
 export default Canvas;
+function copyCanvasToSmall() {
+    throw new Error("Function not implemented.");
+}
+

modules/room/components/MouseRenderer.tsx

@@ -1,16 +1,18 @@
 import { socket } from "@/common/lib/socket";
-import { useEffect, useState } from "react";
+import { useRoom } from "@/common/recoil/room";
+
 import UserMouse from "./UserMouse";
-import { useUserIds } from "@/common/recoil/users";
 
-export const MouseRenderer = () => {
-    const userIds = useUserIds();
 
+export const MouseRenderer = () => { 
+
+    const room = useRoom ();
     return (
         <>
-            {userIds.map((userId) => (
-                <UserMouse userId={userId} key={userId} />
-            ))}
+            {[...room.users.keys()].map((userId) => {
+                if (userId === socket.id) return null;
+             return  <UserMouse userId={userId} key={userId} />
+})}
         </>
     );
 };

modules/room/components/Room.tsx

@@ -1,14 +1,42 @@
-import { useRoomId } from "@/common/recoil/room";
+import { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+import { socket } from "@/common/lib/socket";
+import { useRoom,  useSetRoomId } from "@/common/recoil/room";
+
 import RoomContextProvider from "../context/Room.context";
 import Canvas from "./Canvas";
 import { MousePosition } from "./MousePosition";
 import MouseRenderer from "./MouseRenderer";
 import { ToolBar } from "./ToolBar";
 
+
+
+
 const Room = () => {
-    const roomId = useRoomId();
+    const room = useRoom();
+    const setRoomId= useSetRoomId();
+    const router= useRouter();
+
+    useEffect(()=> {
+        const handleJoined = (roomIdFromServer: string, failed?:boolean) => {
+            if(failed) router.push("/");
+            else setRoomId(roomIdFromServer);
+        };
+        socket.on("joined", handleJoined);
+
+        return () => {
+            socket.off("joined", handleJoined);
+        };
+    }, [router, setRoomId]);
+
+    if(!room.id) {
+        const dynamicRoomId= router.query.roomId?.toString();
+        if( dynamicRoomId) socket.emit("join_room", dynamicRoomId);
+        return null;
 
-    if(!roomId) return <div> No Room ID</div>
+    }
 
      return (
         <RoomContextProvider>