LogalDeveloper/owncast
0
Fork 0
Code Activity

Fix chat array not being properly appended to

Browse Source
This commit is contained in:
Gabe Kangas
2022-06-29 11:50:56 -07:00
parent d93922f1d0
commit ccb97197c5
3 changed files with 8 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/chat/ChatContainer/ChatContainer.tsx
View File

@@ -43,6 +43,7 @@ export default function ChatContainer(props: Props) {
showModeratorMenu={isModerator} // Moderators have access to an additional menu showModeratorMenu={isModerator} // Moderators have access to an additional menu
highlightString={usernameToHighlight} // What to highlight in the message highlightString={usernameToHighlight} // What to highlight in the message
renderAsPersonallySent={message.user?.id === chatUserId} // The local user sent this message renderAsPersonallySent={message.user?.id === chatUserId} // The local user sent this message
key={message.id}
/> />
); );
case MessageType.NAME_CHANGE: case MessageType.NAME_CHANGE:
@@ -55,12 +56,13 @@ export default function ChatContainer(props: Props) {
const MessagesTable = useMemo( const MessagesTable = useMemo(
() => ( () => (
<Virtuoso <Virtuoso
style={{ height: '80vh' }} style={{ height: '70vh' }}
ref={chatContainerRef} ref={chatContainerRef}
initialTopMostItemIndex={999} initialTopMostItemIndex={999} // Force alignment to bottom
data={messages} data={messages}
itemContent={(index, message) => getViewForMessage(message)} itemContent={(index, message) => getViewForMessage(message)}
followOutput="smooth" followOutput="auto"
alignToBottom
/> />
), ),
[messages, usernameToHighlight, chatUserId, isModerator], [messages, usernameToHighlight, chatUserId, isModerator],

7
web/components/stores/ClientConfigStore.tsx
View File

@@ -20,7 +20,6 @@ import {
SocketEvent, SocketEvent,
} from '../../interfaces/socket-events'; } from '../../interfaces/socket-events';
import handleChatMessage from './eventhandlers/handleChatMessage';
import handleConnectedClientInfoMessage from './eventhandlers/connected-client-info-handler'; import handleConnectedClientInfoMessage from './eventhandlers/connected-client-info-handler';
import ServerStatusService from '../../services/status-service'; import ServerStatusService from '../../services/status-service';
import handleNameChangeEvent from './eventhandlers/handleNameChangeEvent'; import handleNameChangeEvent from './eventhandlers/handleNameChangeEvent';
@@ -256,7 +255,8 @@ export function ClientConfigStore() {
); );
break; break;
case MessageType.CHAT: case MessageType.CHAT:
handleChatMessage(message as ChatEvent, chatMessages, setChatMessages); setChatMessages(currentState => [...currentState, message as ChatEvent]);
break; break;
case MessageType.NAME_CHANGE: case MessageType.NAME_CHANGE:
handleNameChangeEvent(message as ChatEvent, chatMessages, setChatMessages); handleNameChangeEvent(message as ChatEvent, chatMessages, setChatMessages);
@@ -269,8 +269,7 @@ export function ClientConfigStore() {
const getChatHistory = async () => { const getChatHistory = async () => {
try { try {
const messages = await ChatService.getChatHistory(accessToken); const messages = await ChatService.getChatHistory(accessToken);
const updatedChatMessages = [...messages, ...chatMessages]; setChatMessages(currentState => [...currentState, ...messages]);
setChatMessages(updatedChatMessages);
} catch (error) { } catch (error) {
console.error(`ChatService -> getChatHistory() ERROR: \n${error}`); console.error(`ChatService -> getChatHistory() ERROR: \n${error}`);
} }

11
web/components/stores/eventhandlers/handleChatMessage.ts
View File

@@ -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);
}