fixing(websocket): Hookyfying Inprogress

Author: coderomm

apps/collabydraw/actions/canvas.ts

@@ -89,13 +89,15 @@ export async function getRoom(data: { roomName: string }) {
 
     const room = await client.room.findUnique({
       where: { slug: validatedRoomName.roomName },
-      include: { Chat: true },
+      include: { Shape: true },
     });
 
     if (!room) {
       return { success: false, error: "Room not found" };
     }
 
+    console.log("room = ", room);
+
     const session = await getServerSession(authOptions);
     const cookieToken = session?.accessToken;
 
@@ -151,7 +153,7 @@ export async function deleteRoom(data: { roomName: string }) {
       };
     }
 
-    await client.chat.deleteMany({
+    await client.shape.deleteMany({
       where: { roomId: room.id },
     });
 

apps/collabydraw/actions/room.ts

@@ -6,7 +6,7 @@ import { JoinRoomSchema } from "@repo/common/types";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/utils/auth";
 
-export async function getChats(data: { roomName: string }) {
+export async function getShapes(data: { roomName: string }) {
   try {
     const validatedRoomName = JoinRoomSchema.parse(data);
 
@@ -18,15 +18,15 @@ export async function getChats(data: { roomName: string }) {
       return { success: false, error: "Room not found" };
     }
 
-    const chats = await client.chat.findMany({
+    const shapesResponse = await client.shape.findMany({
       where: { roomId: room.id },
     });
 
-    if (!chats.length) {
+    if (!shapesResponse.length) {
       return { success: true, shapes: [] };
     }
 
-    const shapes = chats.map((x: { message: string }) => {
+    const shapes = shapesResponse.map((x: { message: string }) => {
       const messageData = JSON.parse(x.message);
       return messageData.shape;
     });
@@ -36,12 +36,12 @@ export async function getChats(data: { roomName: string }) {
     if (error instanceof z.ZodError) {
       return { success: false, error: "Invalid room code format" };
     }
-    console.error("Failed to get chats:", error);
-    return { success: false, error: "Failed to get chats" };
+    console.error("Failed to get shapes:", error);
+    return { success: false, error: "Failed to get shapes" };
   }
 }
 
-export async function clearAllChats(data: { roomName: string }) {
+export async function clearAllShapes(data: { roomName: string }) {
   try {
     const session = await getServerSession(authOptions);
 
@@ -68,7 +68,7 @@ export async function clearAllChats(data: { roomName: string }) {
       };
     }
 
-    const result = await client.chat.deleteMany({
+    const result = await client.shape.deleteMany({
       where: { roomId: room.id },
     });
 
@@ -80,7 +80,7 @@ export async function clearAllChats(data: { roomName: string }) {
     if (error instanceof z.ZodError) {
       return { success: false, error: "Invalid room code format" };
     }
-    console.error("Failed to clear chats:", error);
-    return { success: false, error: "Failed to clear chats" };
+    console.error("Failed to clear shapes:", error);
+    return { success: false, error: "Failed to clear shapes" };
   }
 }

apps/collabydraw/actions/chat.ts apps/collabydraw/actions/shape.tsapps/collabydraw/actions/chat.ts renamed to apps/collabydraw/actions/shape.ts

@@ -29,6 +29,7 @@ export default async function CanvasPage({ params }: { params: Promise<{ roomNam
             roomName={room.slug}
             userId={user.id}
             userName={user.name || 'User-' + user.id}
+            token={session.accessToken}
         />
     )
 }

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

@@ -26,7 +26,6 @@ import { ColorPicker } from "@/components/color-picker"
 import { ConfirmDialog } from "./confirm-dialog"
 import { cn } from "@/lib/utils"
 import { useTheme } from "next-themes"
-import { clearAllChats } from "@/actions/chat"
 import { signOut, useSession } from "next-auth/react"
 import { redirect, usePathname } from "next/navigation"
 import Link from "next/link"
@@ -85,10 +84,8 @@ export function MainMenuStack({ isOpen, onClose, canvasColor, setCanvasColor, is
                 title="Clear canvas"
                 description="This will clear the whole canvas. Are you sure?"
                 onClearCanvas={isStandalone ? onClearCanvas : undefined}
-                onConfirm={!isStandalone ? () => clearAllChats({ roomName: roomName! }) : undefined}
                 variant="destructive"
             />
-
             <section data-sidebar className={cn("transition-transform duration-300 ease-in-out z-20", isMobile ? "" : "absolute top-full mt-2")}>
                 <div className={cn("flex flex-col", isMobile ? "" : "h-[calc(100vh-150px)] Island rounded-lg")}>
                     <div className={cn("py-1", isMobile ? "" : "flex-1 overflow-auto py-1 custom-scrollbar")}>

apps/collabydraw/components/MainMenuStack.tsx

@@ -16,7 +16,7 @@ import ScreenLoading from "../ScreenLoading";
 import CollaborationStart from "../CollaborationStartBtn";
 import { cn } from "@/lib/utils";
 
-export function CanvasSheet({ roomName, roomId, userId, userName }: { roomName: string; roomId: string; userId: string; userName: string; }) {
+export function CanvasSheet({ roomName, roomId, userId, userName, token }: { roomName: string; roomId: string; userId: string; userName: string; token: string }) {
     const { theme } = useTheme()
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const [game, setGame] = useState<Game>();
@@ -40,11 +40,12 @@ export function CanvasSheet({ roomName, roomId, userId, userName }: { roomName:
     const [canvasColor, setCanvasColor] = useState<string>(canvasBgLight[0]);
     const canvasColorRef = useRef(canvasColor);
 
-    const { isConnected, messages, sendMessage, participants } = useWebSocket(
+    const { isConnected, messages, participants, sendDrawingData } = useWebSocket(
         roomId,
         roomName,
         userId,
-        userName
+        userName,
+        token
     );
 
     const { matches, isLoading } = useMediaQuery('md');
@@ -76,7 +77,7 @@ export function CanvasSheet({ roomName, roomId, userId, userName }: { roomName:
             try {
                 messages.forEach((message) => {
                     try {
-                        const data = JSON.parse(message.content);
+                        const data = JSON.parse(message.message);
                         console.log('ws msg data = ', data)
                         if (data.type === "draw") {
                             const shape = JSON.parse(data.data).shape;
@@ -97,14 +98,6 @@ export function CanvasSheet({ roomName, roomId, userId, userName }: { roomName:
         }
     }, [messages]);
 
-    useEffect(() => {
-        try {
-            console.log('participants = ', participants)
-        } catch (e) {
-            console.error("Error processing messages:", e);
-        }
-    }, [participants]);
-
     useEffect(() => {
         game?.setTool(activeTool)
         game?.setStrokeWidth(strokeWidth)
@@ -197,11 +190,27 @@ export function CanvasSheet({ roomName, roomId, userId, userName }: { roomName:
         };
     }, [setActiveTool]);
 
-    const handleSendDrawing = useCallback((msgData: string) => {
+    const handleSendDrawing = useCallback((drawingData: string) => {
         if (isConnected) {
-            sendMessage(msgData);
+            sendDrawingData(JSON.stringify(drawingData));
+
         }
-    }, [isConnected, sendMessage]);
+    }, [isConnected, sendDrawingData]);
+
+    // const handleEraserComplete = useCallback((eraserData: string) => {
+    //     if (isConnected) {
+    //         sendEraserData(JSON.stringify(eraserData));
+
+    //     }
+    // }, [isConnected, sendEraserData]);
+
+    useEffect(() => {
+        try {
+            console.log('participants = ', participants)
+        } catch (e) {
+            console.error("Error processing messages:", e);
+        }
+    }, [participants]);
 
     useEffect(() => {
         if (canvasRef.current) {

apps/collabydraw/components/canvas/CanvasSheet.tsx

@@ -6,7 +6,6 @@ import {
   StrokeStyle,
   ToolType,
 } from "@/types/canvas";
-import { RoughGenerator } from "roughjs/bin/generator";
 import { SelectionManager } from "./SelectionManager";
 import { v4 as uuidv4 } from "uuid";
 
@@ -33,7 +32,7 @@ export class Game {
   private ctx: CanvasRenderingContext2D;
   private roomId: string | null;
   private canvasBgColor: string;
-  private sendMessage: ((data: string) => void) | null;
+  private handleSendDrawing: ((data: string) => void) | null;
   private existingShape: Shape[];
   private clicked: boolean;
   private roomName: string | null;
@@ -51,7 +50,6 @@ export class Game {
   private strokeEdge: StrokeEdge = "round";
   private strokeStyle: StrokeStyle = "solid";
   private isStandalone: boolean = false;
-  private static rg = new RoughGenerator();
 
   private selectedShape: Shape | null = null;
   private selectionManager: SelectionManager;
@@ -60,7 +58,7 @@ export class Game {
     canvas: HTMLCanvasElement,
     roomId: string | null,
     canvasBgColor: string,
-    sendMessage: ((data: string) => void) | null,
+    handleSendDrawing: ((data: string) => void) | null,
     roomName: string | null,
     onScaleChangeCallback: (scale: number) => void,
     initialShapes: Shape[] = [],
@@ -70,7 +68,7 @@ export class Game {
     this.ctx = canvas.getContext("2d")!;
     this.canvasBgColor = canvasBgColor;
     this.roomId = roomId;
-    this.sendMessage = sendMessage;
+    this.handleSendDrawing = handleSendDrawing;
     this.clicked = false;
     this.existingShape = [...initialShapes];
     this.canvas.width = document.body.clientWidth;
@@ -106,15 +104,23 @@ export class Game {
     } else if (!this.isStandalone && this.roomName) {
       try {
         const getRoomResult = await getRoom({ roomName: this.roomName });
-        if (getRoomResult?.success && getRoomResult.room?.Chat) {
+        if (getRoomResult?.success && getRoomResult.room?.Shape) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          getRoomResult.room.Chat.forEach((shape: any) => {
+          getRoomResult.room.Shape.forEach((shape: any, index: number) => {
             try {
-              const parsedShapes = JSON.parse(shape.message);
-              const parsedShapeData = JSON.parse(parsedShapes.data);
-              this.existingShape.push(parsedShapeData.shape);
+              console.log(`Parsing shape ${index}:`, shape);
+              if (shape && shape.message) {
+                const parsedShapes = JSON.parse(shape.message);
+                console.log("parsedShapes = ", parsedShapes);
+                // console.log("parsedShapes.data = ", parsedShapes.data);
+                const parsedShapeData = JSON.parse(parsedShapes.data);
+                console.log("parsedShapeData = ", parsedShapeData);
+                this.existingShape.push(parsedShapeData.shape);
+              } else {
+                console.warn(`Shape ${index} has no message property`);
+              }
             } catch (e) {
-              console.error("Error parsing shape data:", e);
+              console.error(`Error parsing shape ${index} data:`, e);
             }
           });
         } else if (!getRoomResult?.success) {
@@ -306,8 +312,8 @@ export class Game {
                   LOCALSTORAGE_CANVAS_KEY,
                   JSON.stringify(this.existingShape)
                 );
-              } else if (this.sendMessage && this.roomId) {
-                this.sendMessage(
+              } else if (this.handleSendDrawing && this.roomId) {
+                this.handleSendDrawing(
                   JSON.stringify({
                     type: "update",
                     id: selectedShape.id,
@@ -451,8 +457,8 @@ export class Game {
       } catch (e) {
         console.error("Error saving shapes to localStorage:", e);
       }
-    } else if (this.sendMessage && this.roomId) {
-      this.sendMessage(
+    } else if (this.handleSendDrawing && this.roomId) {
+      this.handleSendDrawing(
         JSON.stringify({
           type: "draw",
           data: JSON.stringify({
@@ -1063,8 +1069,8 @@ export class Game {
         } catch (e) {
           console.error("Error saving shapes to localStorage:", e);
         }
-      } else if (this.sendMessage && this.roomId) {
-        this.sendMessage(
+      } else if (this.handleSendDrawing && this.roomId) {
+        this.handleSendDrawing(
           JSON.stringify({
             type: "eraser",
             data: JSON.stringify({