stage: inprogress for vercel deploy

Author: coderomm

apps/collabydraw/components/UserRoomsListDialog.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Button } from "./ui/button";
-import { LogIn, Plus, Trash } from "lucide-react";
+import { LogIn, Trash } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 import { toast } from "sonner";
 import { getUserRooms, joinRoom, deleteRoom } from "@/actions/room";
@@ -151,10 +151,10 @@ export function UserRoomsListDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="glass-panel gap-6 max-w-lg bg-island-bg-color border border-dialog-border-color shadow-modal-shadow rounded-lg p-10" overlayClassName="bg-[#12121233]">
                 <DialogHeader className="gap-6">
-                    <DialogTitle className="flex items-center justify-center w-full font-bold text-xl text-color-primary tracking-[0.75px]">All Your Rooms</DialogTitle>
+                    <DialogTitle className="flex items-center justify-center w-full font-bold text-xl text-color-primary tracking-[0.75px]">{isLoading ? 'Loading' : rooms.length > 0 ? ('All Your Rooms') : ('No room found')}</DialogTitle>
                 </DialogHeader>
 
-                <div className="space-y-4 max-h-60 overflow-y-auto">
+                <div className="space-y-4 max-h-60">
                     {isLoading ? (
                         Array(3).fill(0).map((_, index) => (
                             <div key={index} className="border border-gray-700 p-3 rounded-md">
@@ -186,19 +186,14 @@ export function UserRoomsListDialog({
                             </div>
                         ))
                     ) : (
-                        <div className="text-center py-8 text-gray-400">
-                            <h3 className="font-assistant font-semibold text-[0.875rem] indent-[150%] text-collaby-textfield-label mb-1 select-none">No rooms found.</h3>
+                        <div className="text-center py-8">
                             <Button
                                 type="button"
                                 size={"lg"}
                                 onClick={() => { setIsOpen(true); }}
                                 disabled={isPending}
                                 className="py-2 px-6 min-h-12 rounded-md text-[.875rem] font-semibold shadow-none bg-color-primary hover:bg-brand-hover active:bg-brand-active active:scale-[.98]"
-                                title="Create a Room">
-                                <div className="flex items-center justify-center gap-3 shrink-0 flex-nowrap">
-                                    <Plus className="w-5 h-5" />Create a Room
-                                </div>
-                            </Button>
+                                title="Create a Room">Create a Room</Button>
                             <CollaborationStartdDialog open={isOpen} onOpenChange={setIsOpen} />
                         </div>
                     )}

apps/collabydraw/components/canvas/CanvasSheet.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Game } from "@/draw/Game";
-import { BgFill, canvasBgLight, Shape, StrokeEdge, StrokeFill, StrokeStyle, StrokeWidth, ToolType } from "@/types/canvas";
+import { BgFill, canvasBgLight, StrokeEdge, StrokeFill, StrokeStyle, StrokeWidth, ToolType } from "@/types/canvas";
 import React, { SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import { Scale } from "../Scale";
 import { MobileNavbar } from "../mobile-navbar";
@@ -22,7 +22,6 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
     roomName: string; roomId: string; userId: string; userName: string; token: string;
 }) {
     const { theme } = useTheme()
-    const [canvasColor, setCanvasColor] = useState<string>(canvasBgLight[0]);
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const paramsRef = useRef({ roomId, roomName, userId, userName, token });
     const router = useRouter();
@@ -56,14 +55,15 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
     } = useWebSocket(paramsRef.current.roomId, paramsRef.current.roomName, paramsRef.current.userId, paramsRef.current.userName, paramsRef.current.token);
 
     useEffect(() => {
-        setCanvasColor(canvasBgLight[0]);
+        setCanvasState(prev => ({ ...prev, canvasColor: canvasBgLight[0] }));
     }, [theme])
 
     useEffect(() => {
         const { game, scale } = canvasState;
         if (game) {
             game.setScale(scale);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [canvasState.game, canvasState.scale]);
 
     useEffect(() => {
@@ -97,37 +97,6 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
         }
     }, []);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const processMessages = useCallback((messages: any[]) => {
-        const newExistingShapes: Shape[] = [];
-
-        messages.forEach(message => {
-            switch (message.type) {
-                case WsDataType.DRAW:
-                    if (!newExistingShapes.some(s => s.id === message.id)) {
-                        newExistingShapes.push(message.message);
-                    }
-                    break;
-                case WsDataType.UPDATE:
-                    const index = newExistingShapes.findIndex(s => s.id === message.id);
-                    if (index !== -1) {
-                        newExistingShapes[index] = {
-                            ...newExistingShapes[index],
-                            ...message.message
-                        };
-                    }
-                    break;
-                case WsDataType.ERASER:
-                    const filteredShapes = newExistingShapes.filter(s => s.id !== message.id);
-                    newExistingShapes.length = 0;
-                    newExistingShapes.push(...filteredShapes);
-                    break;
-            }
-        });
-
-        return newExistingShapes;
-    }, []);
-
     const initializeGame = useCallback(() => {
         if (!canvasRef.current || !isConnected) return null;
 
@@ -140,6 +109,9 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
         const game = new Game(
             canvasRef.current,
             paramsRef.current.roomId,
+            paramsRef.current.roomName,
+            paramsRef.current.userId,
+            paramsRef.current.userName,
             canvasState.canvasColor,
             handleSendDrawing,
             (newScale) => setCanvasState(prev => ({ ...prev, scale: newScale })),
@@ -177,11 +149,12 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
     }, [initializeGame, handleKeyDown]);
 
     useEffect(() => {
+        console.log('messages length = ', messages.length)
         if (messages.length > 0 && canvasState.game) {
-            const processedShapes = processMessages(messages);
-            canvasState.game.updateShapes(processedShapes);
+            canvasState.game.updateShapes(messages);
+            console.log('messages = ', messages)
         }
-    }, [messages, canvasState.game, processMessages]);
+    }, [messages, canvasState.game]);
 
     useEffect(() => {
         if (existingMsgs?.message && canvasState.game) {
@@ -215,8 +188,10 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
                                 <MainMenuStack
                                     isOpen={canvasState.sidebarOpen}
                                     onClose={() => setCanvasState(prev => ({ ...prev, sidebarOpen: false }))}
-                                    canvasColor={canvasColor}
-                                    setCanvasColor={setCanvasColor}
+                                    canvasColor={canvasState.canvasColor}
+                                    setCanvasColor={(newCanvasColor: SetStateAction<string>) =>
+                                        setCanvasState(prev => ({ ...prev, canvasColor: typeof newCanvasColor === 'function' ? newCanvasColor(prev.canvasColor) : newCanvasColor }))
+                                    }
                                     roomName={roomName}
                                     onCloseRoom={() => {
                                         sendMessage(
@@ -300,8 +275,10 @@ export default function CanvasSheet({ roomName, roomId, userId, userName, token
                 <MobileNavbar
                     sidebarOpen={canvasState.sidebarOpen}
                     setSidebarOpen={() => setCanvasState(prev => ({ ...prev, sidebarOpen: !prev.sidebarOpen }))}
-                    canvasColor={canvasColor}
-                    setCanvasColor={setCanvasColor}
+                    canvasColor={canvasState.canvasColor}
+                    setCanvasColor={(newCanvasColor: SetStateAction<string>) =>
+                        setCanvasState(prev => ({ ...prev, canvasColor: typeof newCanvasColor === 'function' ? newCanvasColor(prev.canvasColor) : newCanvasColor }))
+                    }
                     scale={canvasState.scale}
                     setScale={(newScale: SetStateAction<number>) =>
                         setCanvasState(prev => ({ ...prev, scale: typeof newScale === 'function' ? newScale(prev.scale) : newScale }))

apps/collabydraw/components/canvas/StandaloneCanvas.tsx

@@ -194,6 +194,9 @@ export function StandaloneCanvas() {
             const game = new Game(
                 canvasRef.current,
                 null,
+                null,
+                null,
+                null,
                 canvasColorRef.current,
                 null,
                 (newScale) => setScale(newScale),
@@ -290,6 +293,7 @@ export function StandaloneCanvas() {
     const handleToolSelect = (tool: ToolType) => {
         setActiveTool(tool);
         game?.setTool(tool);
+        console.log('existingShapes = ', existingShapes)
         if (tool !== "selection") {
             game?.updateShapes(existingShapes);
         }