refactored code

modules/room/components/Canvas.tsx

@@ -8,7 +8,9 @@ import { useRef, useState, useEffect } from "react";
 
 import { useKeyPressEvent } from "react-use";
 
-import { useDraw, useSocketDraw } from "../hooks/Canvas.hooks";
+import { useDraw } from "../hooks/useDraw";
+
+import { useSocketDraw } from "../hooks/useSocketDraw";
 
 import { socket } from "@/common/lib/socket";
 

modules/room/context/Room.context.tsx

@@ -21,23 +21,31 @@ const RoomContextProvider = ({ children }: { children: ReactChild }) => {
 
     // socket events for user join/leave and clean up listeners
     useEffect(()=> {
+
+        socket.on("room",(room, usersToParse)=> {
+            const users= new Map< string, Move[]>(JSON.parse(usersToParse));
+
+            setRoom((prev)=>({
+                ...prev,
+                users,
+                movesWithoutUser: room.drawed,
+            }));
+        });
+
         socket.on("new_user", (newUser)=> {
-            setUsers((prevUsers)=> ({...prevUsers, [newUser]: [] }));
-        })
+            handleAddUser(newUser);
+        });
 
 
         socket.on("user_disconnected", (userId)=> {
-            setUsers((prevUsers)=> {
-                const newUsers= {...prevUsers};
-                delete newUsers[userId];
-                return newUsers;
-            });
+           handleRemoveUser(userId);
         });
         return () => {
+            socket.off("room");
             socket.off("new_user");
             socket.off("user_disconnected");
         };
-    }, [setUsers, usersIds]);
+    }, [handleAddUser, handleRemoveUser, setRoom]);
 //motion values to context consumers
     return (
         <roomContext.Provider value={{ x, y }}>

modules/room/helpers/Canvas.helpers.ts

@@ -20,21 +20,20 @@ export const handleMove = (
 
   export const drawAllMoves = (
     ctx: CanvasRenderingContext2D,
-    movesWithoutUser: Move[],
-    savedMoves: Move[],
-    users: {[key: string]: Move[]}
+    room: ClientRoom
   ) => {
+    const {users, movesWithoutUser, myMoves} = room;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
     movesWithoutUser.forEach((move)=>{
       handleMove(move,ctx);
     });
 
-    Object.values(users).forEach((user)=>{
-      user.forEach((move)=> handleMove(move,ctx));
+    users.forEach((userMoves)=>{
+      userMoves.forEach((move)=> handleMove(move,ctx));
     });
 
-    savedMoves.forEach((move)=> {
+    myMoves.forEach((move)=> {
       handleMove(move,ctx);
     });
 

modules/room/hooks/useDraw.ts

@@ -0,0 +1,105 @@
+import { useOptions } from "@/common/recoil/options";
+import { useUsers } from "@/common/recoil/users";
+import { useState, useEffect, useCallback} from "react";
+import { useBoardPosition } from "./useBoardPosition";
+import { socket } from "@/common/lib/socket";
+import { drawAllMoves } from "../helpers/Canvas.helpers";
+import { getPos } from "@/common/lib/getPos";
+import { useMyMoves } from "@/common/recoil/room";
+
+
+
+let tempMoves: [number, number][] = [];
+
+export const useDraw = (
+    ctx: CanvasRenderingContext2D | undefined,
+    blocked: boolean,
+) => {
+    const {handleRemoveMyMove, handleAddMyMove} = useMyMoves();
+
+    const [drawing, setDrawing] = useState(false);
+
+    const boardPosition = useBoardPosition();
+    const movedX = boardPosition.x;
+    const movedY = boardPosition.y;
+
+    const options = useOptions();
+
+    useEffect(() => {
+        if (ctx) {
+            ctx.lineJoin = "round";
+            ctx.lineCap = "round";
+            ctx.lineWidth = options.lineWidth;
+            ctx.strokeStyle = options.lineColor;
+        }
+    });
+
+    const handleUndo = useCallback(() => {
+        if (ctx) {
+            handleRemoveMyMove();
+            socket.emit("undo");
+
+        }
+    }, [ctx, handleRemoveMyMove]);
+
+    useEffect(() => {
+        const handleUndoKeyboard = (e: KeyboardEvent) => {
+            if (e.key === 'z' && e.ctrlKey) {
+                handleUndo();
+            }
+        };
+
+        document.addEventListener('keydown', handleUndoKeyboard);
+        return () => {
+            document.removeEventListener('keydown', handleUndoKeyboard);
+        };
+    }, [handleUndo]);
+
+    const handleStartDrawing = (x: number, y: number) => {
+        if (!ctx || blocked) return;
+
+        setDrawing(true);
+
+        ctx.beginPath();
+        ctx.lineTo(getPos(x, movedX), getPos(y, movedY));
+        ctx.stroke();
+
+        tempMoves = [[getPos(x, movedX), getPos(y, movedY)]];
+    };
+
+    const handleDraw = (x: number, y: number) => {
+        if (!ctx || !drawing || blocked) return;
+
+        ctx.lineTo(getPos(x, movedX), getPos(y, movedY));
+        ctx.stroke();
+        tempMoves.push([getPos(x, movedX), getPos(y, movedY)]);
+    };
+
+    const handleEndDrawing = () => {
+        if (!ctx || blocked) return;
+        ctx.closePath();
+        setDrawing(false);
+
+        const move: Move = {
+            path: tempMoves,
+            options
+        };
+
+        handleAddMyMove(move);
+        tempMoves = [];
+
+        socket.emit("draw", move);
+
+
+    };
+
+
+
+    return {
+        handleEndDrawing,
+        handleDraw,
+        handleStartDrawing,
+        handleUndo,
+        drawing,
+    }
+};