From 7f7806df232b1bc70073ad24bb9d8d8b1739e85f Mon Sep 17 00:00:00 2001
From: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:35:05 -0400
Subject: [PATCH] replace all ChatBox with chatBox

---
 src/components/Board.tsx        |  4 +--
 src/shapes/ChatBoxShapeUtil.tsx | 58 ++++++++++++++++-----------------
 src/tools/ChatBoxTool.ts        |  4 +--
 src/ui-overrides.tsx            | 10 +++---
 worker/TldrawDurableObject.ts   |  2 +-
 5 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/Board.tsx b/src/components/Board.tsx
index 42d5427..80da60f 100644
--- a/src/components/Board.tsx
+++ b/src/components/Board.tsx
@@ -14,7 +14,7 @@ import { multiplayerAssetStore } from '../client/multiplayerAssetStore'
 import { customSchema } from '../../worker/TldrawDurableObject'
 
 import React, { useState } from 'react';
-import { ChatBox } from '@/shapes/ChatBoxShapeUtil';
+import { chatBox } from '@/shapes/ChatBoxShapeUtil';
 import { components, uiOverrides } from '@/ui-overrides'
 
 const WORKER_URL = `https://jeffemmett-canvas.jeffemmett.workers.dev`
@@ -61,7 +61,7 @@ export function Board() {
 						onChange={handleNameChange}
 						placeholder="Enter your name"
 					/>
-					<ChatBox
+					<chatBox
 						userName={userName}
 						roomId={roomId} // Added roomId
 						w={200} // Set appropriate width
diff --git a/src/shapes/ChatBoxShapeUtil.tsx b/src/shapes/ChatBoxShapeUtil.tsx
index b385ab6..e94ebcd 100644
--- a/src/shapes/ChatBoxShapeUtil.tsx
+++ b/src/shapes/ChatBoxShapeUtil.tsx
@@ -2,17 +2,17 @@ import { useEffect, useRef, useState } from "react";
 import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
 
 export type IChatBoxShape = TLBaseShape<
-	'ChatBox',
-	{
-		w: number
-		h: number
+    'chatBox',
+    {
+        w: number
+        h: number
         roomId: string
         userName: string
-	}
+    }
 >
 
 export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
-    static override type = 'ChatBox'
+    static override type = 'chatBox'
 
     getDefaultProps(): IChatBoxShape['props'] {
         return {
@@ -29,7 +29,7 @@ export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
 
     component(shape: IChatBoxShape) {
         return (
-            <ChatBox roomId={shape.props.roomId} w={shape.props.w} h={shape.props.h} userName="" />
+            <chatBox roomId={shape.props.roomId} w={shape.props.w} h={shape.props.h} userName="" />
         )
     }
 }
@@ -44,8 +44,8 @@ interface Message {
 
 
 
-// Update the ChatBox component to accept userName
-export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userName }) => {
+// Update the chatBox component to accept userName
+export const chatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userName }) => {
     const [messages, setMessages] = useState<Message[]>([]);
     const [inputMessage, setInputMessage] = useState("");
     const [username, setUsername] = useState(userName);
@@ -99,7 +99,7 @@ export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userNa
                 {messages.map((msg) => (
                     <div key={msg.id} className={`message ${msg.username === username ? 'own-message' : ''}`}>
                         <div className="message-header">
-                            <strong>{msg.username}</strong> 
+                            <strong>{msg.username}</strong>
                             <span className="timestamp">{new Date(msg.timestamp).toLocaleTimeString()}</span>
                         </div>
                         <div className="message-content">{msg.content}</div>
@@ -115,7 +115,7 @@ export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userNa
                     placeholder="Type a message..."
                     className="message-input"
                 />
-                <button type="submit" style={{ pointerEvents: 'all',}} onPointerDown={(e)=>e.stopPropagation()} className="send-button">Send</button>
+                <button type="submit" style={{ pointerEvents: 'all', }} onPointerDown={(e) => e.stopPropagation()} className="send-button">Send</button>
             </form>
         </div>
     );
@@ -123,24 +123,24 @@ export const ChatBox: React.FC<IChatBoxShape['props']> = ({ roomId, w, h, userNa
 
 async function sendMessageToChat(roomId: string, username: string, content: string): Promise<void> {
     const apiUrl = 'https://jeffemmett-realtimechatappwithpolling.web.val.run'; // Replace with your actual Val Town URL
-  
+
     try {
-      const response = await fetch(`${apiUrl}?action=sendMessage`, {
-        method: 'POST',
-        mode: 'no-cors',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          roomId,
-          username,
-          content,
-        }),
-      });
-  
-      const result = await response.text();
-      console.log('Message sent successfully:', result);
+        const response = await fetch(`${apiUrl}?action=sendMessage`, {
+            method: 'POST',
+            mode: 'no-cors',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                roomId,
+                username,
+                content,
+            }),
+        });
+
+        const result = await response.text();
+        console.log('Message sent successfully:', result);
     } catch (error) {
-      console.error('Error sending message:', error);
+        console.error('Error sending message:', error);
     }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/tools/ChatBoxTool.ts b/src/tools/ChatBoxTool.ts
index 795bfda..ec8970b 100644
--- a/src/tools/ChatBoxTool.ts
+++ b/src/tools/ChatBoxTool.ts
@@ -1,7 +1,7 @@
 import { BaseBoxShapeTool } from "tldraw";
 
 export class ChatBoxTool extends BaseBoxShapeTool {
-    static override id = 'ChatBox'
-    shapeType = 'ChatBox';
+    static override id = 'chatBox'
+    shapeType = 'chatBox';
     override initial = 'idle';
 }
\ No newline at end of file
diff --git a/src/ui-overrides.tsx b/src/ui-overrides.tsx
index 0bddd0b..6710c2f 100644
--- a/src/ui-overrides.tsx
+++ b/src/ui-overrides.tsx
@@ -19,13 +19,13 @@ export const uiOverrides: TLUiOverrides = {
 				editor.setCurrentTool('VideoChat')
 			},
 		}
-		tools.ChatBox = {
-			id: 'ChatBox',
+		tools.chatBox = {
+			id: 'chatBox',
 			icon: 'color',
 			label: 'Chat',
 			kbd: 'x',
 			onSelect: () => {
-				editor.setCurrentTool('ChatBox')
+				editor.setCurrentTool('chatBox')
 			},
 		}
 		return tools
@@ -35,12 +35,12 @@ export const uiOverrides: TLUiOverrides = {
 export const components: TLComponents = {
 	Toolbar: (props) => {
 		const tools = useTools()
-		const isChatBoxSelected = useIsToolSelected(tools['ChatBox'])
+		const isChatBoxSelected = useIsToolSelected(tools['chatBox'])
 		const isVideoSelected = useIsToolSelected(tools['VideoChat'])
 		return (
 			<DefaultToolbar {...props}>
 				<TldrawUiMenuItem {...tools['VideoChat']} isSelected={isVideoSelected} />
-				<TldrawUiMenuItem {...tools['ChatBox']} isSelected={isChatBoxSelected} />
+				<TldrawUiMenuItem {...tools['chatBox']} isSelected={isChatBoxSelected} />
 				<DefaultToolbarContent />
 			</DefaultToolbar>
 		)
diff --git a/worker/TldrawDurableObject.ts b/worker/TldrawDurableObject.ts
index b5e0274..4ee489d 100644
--- a/worker/TldrawDurableObject.ts
+++ b/worker/TldrawDurableObject.ts
@@ -15,7 +15,7 @@ import { VideoChatShape } from '@/shapes/VideoChatShapeUtil'
 
 // add custom shapes and bindings here if needed:
 export const customSchema = createTLSchema({
-	shapes: { ...defaultShapeSchemas, ChatBox: ChatBoxShape, VideoChat: VideoChatShape },
+	shapes: { ...defaultShapeSchemas, chatBox: ChatBoxShape, VideoChat: VideoChatShape },
 	// bindings: { ...defaultBindingSchemas },
 })