55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { Map as ImmutableMap } from 'immutable';
|
|
import React, { useEffect } from 'react';
|
|
|
|
import { fetchChat, markChatRead } from 'soapbox/actions/chats';
|
|
import { Column } from 'soapbox/components/ui';
|
|
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
|
import { makeGetChat } from 'soapbox/selectors';
|
|
import { getAcct } from 'soapbox/utils/accounts';
|
|
import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
|
|
|
|
import Chat from './components/chat';
|
|
|
|
const getChat = makeGetChat();
|
|
|
|
interface IChatRoom {
|
|
params: {
|
|
chatId: string,
|
|
}
|
|
}
|
|
|
|
/** Fullscreen chat UI. */
|
|
const ChatRoom: React.FC<IChatRoom> = ({ params }) => {
|
|
const dispatch = useAppDispatch();
|
|
const displayFqn = useAppSelector(getDisplayFqn);
|
|
|
|
const chat = useAppSelector(state => {
|
|
const chat = state.chats.items.get(params.chatId, ImmutableMap()).toJS() as any;
|
|
return getChat(state, chat);
|
|
});
|
|
|
|
const markRead = () => {
|
|
if (!chat) return;
|
|
dispatch(markChatRead(chat.id));
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchChat(params.chatId));
|
|
markRead();
|
|
}, [params.chatId]);
|
|
|
|
// If this component is loaded at all, we can instantly mark new messages as read.
|
|
useEffect(() => {
|
|
markRead();
|
|
}, [chat?.unread]);
|
|
|
|
if (!chat) return null;
|
|
|
|
return (
|
|
<Column label={`@${getAcct(chat.account as any, displayFqn)}`}>
|
|
<Chat chat={chat as any} autosize />
|
|
</Column>
|
|
);
|
|
};
|
|
|
|
export default ChatRoom;
|