feat: refactor App component and enhance Canvas collaboration features

Author: Shreyanshi210205

client/src/App.jsx

@@ -1,43 +1,9 @@
-import { useState } from "react";
 import { Canvas } from "./components/Canvas";
 
 function App() {
-    const [roomId, setRoomId] = useState("");
-    const [joined, setJoined] = useState(false);
-
-    const handleJoin = () => {
-        if (!roomId.trim()) {
-            alert("Please enter a valid Room ID");
-            return;
-        }
-        setJoined(true);
-    };
 
     return (
-        <main className="w-full h-screen flex items-center justify-center bg-gray-100">
-            {!joined ? (
-                <div className="flex flex-col items-center gap-4 p-6 bg-white rounded-xl shadow-md">
-                    <h1 className="text-2xl font-bold text-gray-800">
-                        Join a Drawing Room
-                    </h1>
-                    <input
-                        type="text"
-                        placeholder="Enter Room ID"
-                        value={roomId}
-                        onChange={(e) => setRoomId(e.target.value)}
-                        className="border border-gray-300 rounded-lg px-4 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    />
-                    <button
-                        onClick={handleJoin}
-                        className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-all"
-                    >
-                        Join Room
-                    </button>
-                </div>
-            ) : (
-                <Canvas roomId={roomId} />
-            )}
-        </main>
+        <><Canvas /></>
     );
 }
 

client/src/components/Canvas.jsx

@@ -21,16 +21,17 @@ export const Canvas = () => {
   const [roomId, setRoomId] = useState("");
   const [joined, setJoined] = useState(false);
   const [socket, setSocket] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false); // controls modal visibility
 
   // Initialize socket connection
   useEffect(() => {
-    const s = io("http://localhost:3000"); // replace with your backend URL
+    const s = io("http://localhost:3000");
     setSocket(s);
 
     s.on("connect", () => console.log("Connected to server:", s.id));
 
-    // Handle strokes from other users
     s.on("draw", ({ x, y, color, width, type, tool }) => {
+      if (!joined) return; // only listen when in collab mode
       const ctx = canvasRef.current?.getContext("2d");
       if (!ctx) return;
 
@@ -42,7 +43,7 @@ export const Canvas = () => {
     });
 
     return () => s.disconnect();
-  }, []);
+  }, [joined]);
 
   // Canvas setup
   useEffect(() => {
@@ -62,7 +63,7 @@ export const Canvas = () => {
     };
 
     window.addEventListener("resize", handleResize);
-    toast.success("Canvas ready! Start drawing!");
+    toast.success("Canvas ready! Local mode active.");
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
@@ -86,10 +87,6 @@ export const Canvas = () => {
 
   // Drawing logic
   const startDrawing = (e) => {
-    if (!joined) {
-      toast.error("Join a room first!");
-      return;
-    }
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
     if (!ctx) return;
@@ -104,15 +101,17 @@ export const Canvas = () => {
     if (activeTool === "pen" || activeTool === "eraser") {
       ctx.beginPath();
       ctx.moveTo(x, y);
-      socket.emit("draw", {
-        roomId,
-        x,
-        y,
-        type: "start",
-        color: activeColor,
-        width: strokeWidth,
-        tool: activeTool,
-      });
+
+      if (joined && socket)
+        socket.emit("draw", {
+          roomId,
+          x,
+          y,
+          type: "start",
+          color: activeColor,
+          width: strokeWidth,
+          tool: activeTool,
+        });
     }
 
     if (activeTool === "line") {
@@ -136,15 +135,16 @@ export const Canvas = () => {
       ctx.lineTo(x, y);
       ctx.stroke();
 
-      socket.emit("draw", {
-        roomId,
-        x,
-        y,
-        type: "move",
-        color: activeColor,
-        width: strokeWidth,
-        tool: activeTool,
-      });
+      if (joined && socket)
+        socket.emit("draw", {
+          roomId,
+          x,
+          y,
+          type: "move",
+          color: activeColor,
+          width: strokeWidth,
+          tool: activeTool,
+        });
     } else if (activeTool === "line") {
       ctx.putImageData(snapshot.current, 0, 0);
       ctx.beginPath();
@@ -174,21 +174,43 @@ export const Canvas = () => {
     if (!roomId.trim() || !socket) return;
     socket.emit("join-room", roomId.trim());
     setJoined(true);
-    toast.success(`Joined room: ${roomId}`);
+    setIsModalOpen(false);
+    toast.success(`Collaborative mode active - joined room: ${roomId}`);
   };
 
   const handleToolChange = (tool) => {
     setActiveTool(tool);
     toast.info(`${tool.charAt(0).toUpperCase() + tool.slice(1)} tool selected`);
   };
 
+  const handleExitRoom = () => {
+    if (!socket) return;
+    socket.emit("leave-room", roomId);
+    setJoined(false);
+    toast.success(`Left room: ${roomId}`);
+  };
+
   return (
     <div className="relative w-full h-screen overflow-hidden bg-canvas">
       <Toolbar
         activeTool={activeTool}
         onToolChange={handleToolChange}
         onClear={handleClear}
       />
+
+      {joined ? <button
+        onClick={() => handleExitRoom()}
+        className="fixed top-4 right-4 bg-red-700 text-white px-4 py-2 rounded-lg shadow hover:bg-red-800 z-50"
+      >
+        Exit Room
+      </button> : <button
+        onClick={() => setIsModalOpen(true)}
+        className="fixed top-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700 z-50"
+      >
+        Collaborate
+      </button>}
+      
+
       <ColorPicker activeColor={activeColor} onColorChange={setActiveColor} />
       <StrokeControl
         strokeWidth={strokeWidth}
@@ -207,7 +229,8 @@ export const Canvas = () => {
         className="cursor-crosshair focus:outline-2 focus:outline-primary"
       />
 
-      {!joined && (
+      {/* Modal only appears when user clicks Collaborate */}
+      {isModalOpen && (
         <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/90 border border-gray-400 rounded-xl shadow-xl p-6 z-50 flex flex-col items-center gap-3">
           <h2 className="text-xl font-semibold">Join a Room</h2>
           <input
@@ -223,13 +246,21 @@ export const Canvas = () => {
           >
             Join Room
           </button>
+          <button
+            onClick={() => setIsModalOpen(false)}
+            className="text-sm text-gray-600 mt-2 hover:underline"
+          >
+            Cancel
+          </button>
         </div>
       )}
 
       <div className="fixed bottom-6 left-1/2 -translate-x-1/2 pointer-events-none">
         <div className="bg-toolbar/95 border border-toolbar-border rounded-xl shadow-lg backdrop-blur-sm px-6 py-3">
           <p className="text-sm text-foreground font-medium">
-            Welcome to CollabCanvas — Select a tool and start drawing!
+            {joined
+              ? `Connected to Room: ${roomId}`
+              : "Local mode - your drawings are not shared."}
           </p>
         </div>
       </div>