From 2c8621c873c19986f3d8165986ef11ccfc44d611 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 14 Jul 2022 21:05:34 -0700
Subject: [PATCH] Add chat join messages

---
 .../chat/ChatContainer/ChatContainer.tsx           | 14 ++++++++++++++
 web/components/stores/ClientConfigStore.tsx        |  4 +++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 30c246340..7c536fe5d 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -11,6 +11,7 @@ import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatTextField, ChatUserMessage } from '..';
 import ChatModeratorNotification from '../ChatModeratorNotification/ChatModeratorNotification';
+import ChatActionMessage from '../ChatAction/ChatActionMessage';
 
 interface Props {
   messages: ChatMessage[];
@@ -48,6 +49,17 @@ export default function ChatContainer(props: Props) {
     );
   };
 
+  const getUserJoinedMessage = (message: ChatMessage) => {
+    const { user } = message;
+    const { displayName, displayColor } = user;
+    const color = `var(--theme-user-colors-${displayColor})`;
+    return (
+      <ChatActionMessage
+        body={`<span style="color: ${color}">${displayName}</span> joined the chat.`}
+      />
+    );
+  };
+
   const getConnectedInfoMessage = (message: ConnectedClientInfoEvent) => {
     const modStatusUpdate = checkIsModerator(message);
     if (!modStatusUpdate) {
@@ -78,6 +90,8 @@ export default function ChatContainer(props: Props) {
         return getNameChangeViewForMessage(message as NameChangeEvent);
       case MessageType.CONNECTED_USER_INFO:
         return getConnectedInfoMessage(message);
+      case MessageType.USER_JOINED:
+        return getUserJoinedMessage(message as ChatMessage);
 
       default:
         return null;
diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx
index 0c7220b81..ef056f579 100644
--- a/web/components/stores/ClientConfigStore.tsx
+++ b/web/components/stores/ClientConfigStore.tsx
@@ -262,11 +262,13 @@ export function ClientConfigStore() {
         break;
       case MessageType.CHAT:
         setChatMessages(currentState => [...currentState, message as ChatEvent]);
-
         break;
       case MessageType.NAME_CHANGE:
         handleNameChangeEvent(message as ChatEvent, chatMessages, setChatMessages);
         break;
+      case MessageType.USER_JOINED:
+        setChatMessages(currentState => [...currentState, message as ChatEvent]);
+        break;
       default:
         console.error('Unknown socket message type: ', message.type);
     }