stream-chat-react
Version:
React components to create chat conversations or livestream style chat
57 lines (56 loc) • 3 kB
JavaScript
import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import { ArrowDown } from './icons';
import { useChannelStateContext, useChatContext } from '../../context';
const UnMemoizedScrollToBottomButton = (props) => {
const { isMessageListScrolledToBottom, onClick, threadList } = props;
const { channel: activeChannel, client } = useChatContext();
const { thread } = useChannelStateContext();
const [countUnread, setCountUnread] = useState(activeChannel?.countUnread() || 0);
const [replyCount, setReplyCount] = useState(thread?.reply_count || 0);
const observedEvent = threadList ? 'message.updated' : 'message.new';
useEffect(() => {
const handleEvent = (event) => {
const newMessageInAnotherChannel = event.cid !== activeChannel?.cid;
const newMessageIsMine = event.user?.id === client.user?.id;
const isThreadOpen = !!thread;
const newMessageIsReply = !!event.message?.parent_id;
const dontIncreaseMainListCounterOnNewReply = isThreadOpen && !threadList && newMessageIsReply;
if (isMessageListScrolledToBottom ||
newMessageInAnotherChannel ||
newMessageIsMine ||
dontIncreaseMainListCounterOnNewReply) {
return;
}
if (event.type === 'message.new') {
// cannot rely on channel.countUnread because active channel is automatically marked read
setCountUnread((prev) => prev + 1);
}
else if (event.message?.id === thread?.id) {
const newReplyCount = event.message?.reply_count || 0;
setCountUnread(() => newReplyCount - replyCount);
}
};
client.on(observedEvent, handleEvent);
return () => {
client.off(observedEvent, handleEvent);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeChannel, isMessageListScrolledToBottom, observedEvent, replyCount, thread]);
useEffect(() => {
if (isMessageListScrolledToBottom) {
setCountUnread(0);
setReplyCount(thread?.reply_count || 0);
}
}, [isMessageListScrolledToBottom, thread]);
if (isMessageListScrolledToBottom)
return null;
return (React.createElement("div", { className: 'str-chat__jump-to-latest-message' },
React.createElement("button", { "aria-live": 'polite', className: `
str-chat__message-notification-scroll-to-latest
str-chat__circle-fab
`, "data-testid": 'message-notification', onClick: onClick },
React.createElement(ArrowDown, null),
countUnread > 0 && (React.createElement("div", { className: clsx('str-chat__message-notification', 'str-chat__jump-to-latest-unread-count'), "data-testid": 'unread-message-notification-counter' }, countUnread)))));
};
export const ScrollToBottomButton = React.memo(UnMemoizedScrollToBottomButton);