From ccb97197c51ec54f8c22ef54c70292ba4883f872 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 29 Jun 2022 11:50:56 -0700
Subject: [PATCH] Fix chat array not being properly appended to

---
 web/components/chat/ChatContainer/ChatContainer.tsx   |  8 +++++---
 web/components/stores/ClientConfigStore.tsx           |  7 +++----
 .../stores/eventhandlers/handleChatMessage.ts         | 11 -----------
 3 files changed, 8 insertions(+), 18 deletions(-)
 delete mode 100644 web/components/stores/eventhandlers/handleChatMessage.ts

diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index f690f6ea3..bb0bcb084 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -43,6 +43,7 @@ export default function ChatContainer(props: Props) {
             showModeratorMenu={isModerator} // Moderators have access to an additional menu
             highlightString={usernameToHighlight} // What to highlight in the message
             renderAsPersonallySent={message.user?.id === chatUserId} // The local user sent this message
+            key={message.id}
           />
         );
       case MessageType.NAME_CHANGE:
@@ -55,12 +56,13 @@ export default function ChatContainer(props: Props) {
   const MessagesTable = useMemo(
     () => (
       <Virtuoso
-        style={{ height: '80vh' }}
+        style={{ height: '70vh' }}
         ref={chatContainerRef}
-        initialTopMostItemIndex={999}
+        initialTopMostItemIndex={999} // Force alignment to bottom
         data={messages}
         itemContent={(index, message) => getViewForMessage(message)}
-        followOutput="smooth"
+        followOutput="auto"
+        alignToBottom
       />
     ),
     [messages, usernameToHighlight, chatUserId, isModerator],
diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx
index bffe61893..78bc7a384 100644
--- a/web/components/stores/ClientConfigStore.tsx
+++ b/web/components/stores/ClientConfigStore.tsx
@@ -20,7 +20,6 @@ import {
   SocketEvent,
 } from '../../interfaces/socket-events';
 
-import handleChatMessage from './eventhandlers/handleChatMessage';
 import handleConnectedClientInfoMessage from './eventhandlers/connected-client-info-handler';
 import ServerStatusService from '../../services/status-service';
 import handleNameChangeEvent from './eventhandlers/handleNameChangeEvent';
@@ -256,7 +255,8 @@ export function ClientConfigStore() {
         );
         break;
       case MessageType.CHAT:
-        handleChatMessage(message as ChatEvent, chatMessages, setChatMessages);
+        setChatMessages(currentState => [...currentState, message as ChatEvent]);
+
         break;
       case MessageType.NAME_CHANGE:
         handleNameChangeEvent(message as ChatEvent, chatMessages, setChatMessages);
@@ -269,8 +269,7 @@ export function ClientConfigStore() {
   const getChatHistory = async () => {
     try {
       const messages = await ChatService.getChatHistory(accessToken);
-      const updatedChatMessages = [...messages, ...chatMessages];
-      setChatMessages(updatedChatMessages);
+      setChatMessages(currentState => [...currentState, ...messages]);
     } catch (error) {
       console.error(`ChatService -> getChatHistory() ERROR: \n${error}`);
     }
diff --git a/web/components/stores/eventhandlers/handleChatMessage.ts b/web/components/stores/eventhandlers/handleChatMessage.ts
deleted file mode 100644
index ea9e3512c..000000000
--- a/web/components/stores/eventhandlers/handleChatMessage.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { ChatEvent } from '../../../interfaces/socket-events';
-
-export default function handleChatMessage(
-  message: ChatEvent,
-  messages: ChatMessage[],
-  setChatMessages,
-) {
-  const updatedMessages = [...messages, message];
-  setChatMessages(updatedMessages);
-}