LogalDeveloper/owncast
0
Fork 0
Code Activity

Render chat messages that come over the socket

Browse Source
This commit is contained in:
Gabe Kangas
2022-05-03 13:01:50 -07:00
parent 15becc5121
commit 8b07eb7457
5 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,7 +63,7 @@ export function ClientConfigStore() {
const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom);
const setChatVisibility = useSetRecoilState<ChatVisibilityState>(chatVisibilityAtom);
const setChatState = useSetRecoilState<ChatState>(chatStateAtom);
const setChatMessages = useSetRecoilState<ChatMessage[]>(chatMessagesAtom);
const [chatMessages, setChatMessages] = useRecoilState<ChatMessage[]>(chatMessagesAtom);
const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
const [appState, setAppState] = useRecoilState<AppState>(appStateAtom);
const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom);
@@ -106,7 +106,7 @@ export function ClientConfigStore() {
handleConnectedClientInfoMessage(message as ConnectedClientInfoEvent);
break;
case SocketMessageType.CHAT:
handleChatMessage(message as ChatEvent);
handleChatMessage(message as ChatEvent, chatMessages, setChatMessages);
break;
default:
console.error('Unknown socket message type: ', message.type);
@@ -116,8 +116,8 @@ export function ClientConfigStore() {
const getChatHistory = async () => {
try {
const messages = await ChatService.getChatHistory(accessToken);
// console.log(`ChatService -> getChatHistory() messages: \n${JSON.stringify(messages)}`);
setChatMessages(messages);
const updatedChatMessages = [...messages, ...chatMessages];
setChatMessages(updatedChatMessages);
} catch (error) {
console.error(`ChatService -> getChatHistory() ERROR: \n${error}`);
}

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

@@ -1,8 +1,11 @@
import {
ChatEvent,
SocketEvent,
} from '../../../interfaces/socket-events';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { ChatEvent } from '../../../interfaces/socket-events';
export default function handleChatMessage(message: ChatEvent) {
console.log('chat message', message);
export default function handleChatMessage(
message: ChatEvent,
messages: ChatMessage[],
setChatMessages,
) {
const updatedMessages = [...messages, message];
setChatMessages(updatedMessages);
}