fix the bug that delete the drawing on eraserMode

Author: apsinghdev

client/src/App.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef, useState } from "react";
 import "./App.css";
 import { io } from "socket.io-client";
@@ -16,39 +17,43 @@ function App() {
   const [showMenu, setShowMenu ] = useState(false);
   const eraserMode = useRecoilValue(eraserState);
   const [position, setPosition] = useRecoilState(cursorPosition);
+  const [ctx, setCtx] = useState(null);
+  const [startX, setStartX] = useState(0);
+  const [startY, setStartY] = useState(0);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [penColor, setPenColor] = useState("#000000");
 
   function toggleMenu(){
     setShowMenu(!showMenu);
   }
 
   const canvasRef = useRef(null);
   const sidebarRef = useRef(null);
-  let color = '#000000'
-  let ctx;
-  let canvas;
   let lineWidth;
-
-  function drawLine(sx, sy, ex, ey, color, lineWidth) {
+  
+  function drawLine(sx, sy, ex, ey, penColor, lineWidth) {
     ctx.moveTo(sx, sy);
     ctx.lineTo(ex, ey);
     ctx.lineCap = "round";
     ctx.lineWidth = lineWidth;
-    ctx.strokeStyle = color;
+    ctx.strokeStyle = penColor;
     ctx.stroke();
   }
-
+  
   useEffect(() => {
-    canvas = canvasRef.current;
-    let isDrawing = false;
-    let startX = 0;
-    let startY = 0;
-
-    ctx = canvas.getContext("2d");
-    canvas.width = canvas.getBoundingClientRect().width;
-    canvas.height = canvas.getBoundingClientRect().height;
+    const canvas = canvasRef.current;
+    if(canvas){
+      const context = canvas.getContext("2d");
+      canvas.width = canvas.getBoundingClientRect().width;
+      canvas.height = canvas.getBoundingClientRect().height;
+      setCtx(context);
+    }
+  }, [canvasRef.current]);
 
+  useEffect(() => {
+    if(!ctx) return;
+    const canvas = canvasRef.current;
     function handleMousemove(e) {
-
       // if eraseMode is set the position of the eraser cursor
       if (eraserMode) {
         setPosition(() => ({ x: e.clientX, y: e.clientY }));
@@ -57,21 +62,24 @@ function App() {
       if (!isDrawing) return;
       const endX = e.clientX - canvas.getBoundingClientRect().left;
       const endY = e.clientY - canvas.getBoundingClientRect().top;
-      drawLine(startX, startY, endX, endY, color);
-      socket.emit("draw", { startX, startY, endX, endY, color, lineWidth });
-      startX = endX;
-      startY = endY;
+      drawLine(startX, startY, endX, endY, penColor);
+      socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth });
+      setStartX(endX);
+      setStartY(endY);
+
     }
 
     function handleMousedown(e) {
-      isDrawing = true;
-      startX = e.clientX - canvas.getBoundingClientRect().left;
-      startY = e.clientY - canvas.getBoundingClientRect().top;
+      setIsDrawing(true);
+      let X = e.clientX - canvas.getBoundingClientRect().left;
+      let Y = e.clientY - canvas.getBoundingClientRect().top;
+      setStartX(X);
+      setStartY(Y);
     }
     function handleMouseup() {
-      isDrawing = false;
-      startX = 0;
-      startY = 0;
+      setIsDrawing(false);
+      setStartX(0);
+      setStartY(0);
       ctx.beginPath();
     }
 
@@ -84,7 +92,7 @@ function App() {
       canvas.removeEventListener("mousedown", handleMousedown);
       canvas.removeEventListener("mouseup", handleMouseup);
     };
-  }, [color, eraserMode, position]);
+  }, [penColor, eraserMode, position, ctx, isDrawing, startX, startY]);
 
   useEffect(() => {
     socket.on("draw", (data) => {
@@ -93,7 +101,7 @@ function App() {
         data.startY,
         data.endX,
         data.endY,
-        data.color,
+        data.penColor,
         data.lineWidth
       );
     });
@@ -106,10 +114,12 @@ function App() {
     socket.off("draw");
     socket.off("clear");
    }
-  }, []);
+  }, [socket, ctx]);
 
   function clearRect() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if(ctx){
+      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+    }
   }
 
   function clearOnClick(){
@@ -120,16 +130,20 @@ function App() {
   function addStroke(e) {
     if (e.target.id === "penColor") {
       const newColor = e.target.value;
-      color = newColor;
-      ctx.strokeStyle = newColor;
+      setPenColor(newColor);
+      if(ctx){
+        ctx.strokeStyle = newColor;
+      }
 
     }
   }
 
   function addLineWidth(e) {
     if (e.target.id === "lineWidth") {
       lineWidth = e.target.value;
-      ctx.lineWidth = lineWidth;
+      if(ctx){
+        ctx.lineWidth = lineWidth;
+      }
     }
   }