fix(CanvasSheet): improve state handling in collaboration mode to prevent render issues

Author: coderomm

apps/collabydraw/actions/shape.ts

@@ -26,10 +26,7 @@ export async function getShapes(data: { roomName: string }) {
       return { success: true, shapes: [] };
     }
 
-    const shapes = shapesResponse.map((x: { message: string }) => {
-      const messageData = JSON.parse(x.message);
-      return messageData.shape;
-    });
+    const shapes = shapesResponse.map((x) => JSON.parse(x.message));
 
     return { success: true, shapes };
   } catch (error) {

apps/collabydraw/app/(canvas)/canvas/[roomName]/page.tsx

@@ -2,7 +2,6 @@ import client from '@repo/db/client';
 import { notFound, redirect } from 'next/navigation';
 import { getServerSession } from 'next-auth';
 import { authOptions } from '@/utils/auth';
-// import RoomCanvas from '@/components/canvas/RoomCanvas';
 import CanvasSheet from '@/components/canvas/CanvasSheet';
 
 export default async function CanvasPage({ params }: { params: Promise<{ roomName: string }> }) {
@@ -23,6 +22,7 @@ export default async function CanvasPage({ params }: { params: Promise<{ roomNam
         console.error('User from session not found.');
         redirect(`/`);
     }
+    console.log('CanvasPage loaded')
 
     return (
         <CanvasSheet
@@ -32,12 +32,5 @@ export default async function CanvasPage({ params }: { params: Promise<{ roomNam
             userName={user.name || 'User-' + user.id}
             token={session.accessToken}
         />
-        // <RoomCanvas
-        //     roomId={room.id.toString()}
-        //     roomName={room.slug}
-        //     userId={user.id}
-        //     userName={user.name || 'User-' + user.id}
-        //     token={session.accessToken}
-        // />
     )
 }

apps/collabydraw/components/CollaborationStartBtn.tsx

@@ -28,8 +28,8 @@ export default function CollaborationStartBtn({ slug, participants }: { slug?: s
                                 <Tooltip key={participant.userId}>
                                     <TooltipTrigger asChild>
                                         <div style={{ backgroundColor: getClientColor(participant) }} className={`w-7 h-7 rounded-full flex items-center justify-center cursor-pointer`}>
-                                            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">
-                                                {participant.userName.charAt(0)}
+                                            <span className="text-sm font-bold text-gray-900 dark:text-gray-900">
+                                                {participant.userName.charAt(0).toUpperCase()}
                                             </span>
                                         </div>
                                     </TooltipTrigger>

apps/collabydraw/components/MainMenuStack.tsx

@@ -18,7 +18,7 @@ import {
     DownloadIcon,
     Upload,
     Linkedin,
-    Share,
+    Share2,
 } from "lucide-react"
 import { Button, buttonVariants } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
@@ -97,7 +97,7 @@ export function MainMenuStack({ isOpen, onClose, canvasColor, setCanvasColor, is
                                     <SidebarItem icon={TrashIcon} label="Clear canvas" onClick={() => setClearDialogOpen(true)} />
                                     <SidebarItem icon={DownloadIcon} label="Export Drawing" onClick={onExportCanvas} />
                                     <SidebarItem icon={Upload} label="Import Drawing" onClick={onImportCanvas} />
-                                    <SidebarItem icon={Share} label="Live collaboration" onClick={() => setIsShareOpen(true)} />
+                                    <SidebarItem icon={Share2} label="Live collaboration" onClick={() => setIsShareOpen(true)} />
                                     {session?.user && session?.user.id ? (
                                         <CollaborationStartdDialog open={isShareOpen} onOpenChange={setIsShareOpen} />
                                     ) : (
@@ -114,8 +114,9 @@ export function MainMenuStack({ isOpen, onClose, canvasColor, setCanvasColor, is
                                         <CopyIcon className="h-4 w-4" />
                                         Room Name: <span>{roomName}</span>
                                     </Button>
-                                    <SidebarItem icon={Trash} label="Reset the canvas" onClick={() => setClearDialogOpen(true)} />
                                     <RoomSharingDialog open={isShareOpen} onOpenChange={setIsShareOpen} link={`${process.env.NODE_ENV !== 'production' ? 'http://localhost:3000' : 'https://collabydraw.com'}/${decodedPathname}`} />
+                                    <SidebarItem icon={Share2} label="Share collaboration" onClick={() => setIsShareOpen(true)} />
+                                    <SidebarItem icon={Trash} label="Reset the canvas" onClick={() => setClearDialogOpen(true)} />
                                 </>
                             )}
                             {session?.user && session?.user.id ? (