render eraserCursor when eraserMode is true

Author: apsinghdev

client/src/App.jsx

@@ -8,10 +8,13 @@ import Sidebar from "./components/Sidebar";
 import Canvas from "./components/Canvas";
 import Menu from "./components/Menu";
 import EraserCursor from "./components/EraserCursor";
+import { useRecoilValue } from "recoil";
+import { eraserState } from "./atoms";
 
 function App() {
 
   const [showMenu, setShowMenu ] = useState(false);
+  const eraserMode = useRecoilValue(eraserState);
 
   function toggleMenu(){
     setShowMenu(!showMenu);
@@ -136,7 +139,7 @@ function App() {
       ></Sidebar>
       <Canvas canvasRef={canvasRef}></Canvas>
       {showMenu && <Menu></Menu>}
-      <EraserCursor></EraserCursor>
+      {eraserMode && <EraserCursor></EraserCursor>}
     </div>
   );
 }

client/src/components/Eraser.jsx

@@ -1,8 +1,9 @@
 import eraserImg from "../assets/eraser.png";
-import { useState } from "react";
+import { useRecoilState } from "recoil";
+import { eraserState } from "../atoms";
 
 function Eraser(){
-const [ eraserMode, setEraserMode ] = useState(false);
+const [ eraserMode, setEraserMode ] = useRecoilState(eraserState);
 
   function clickHandler(){
     setEraserMode(!eraserMode);