101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
import type { FC } from '../../../lib/teact/teact';
|
|
import React, { memo, useCallback, useMemo } from '../../../lib/teact/teact';
|
|
import { getActions, getGlobal } from '../../../global';
|
|
|
|
import type {
|
|
ApiChat, ApiThreadInfo, ApiUser,
|
|
} from '../../../api/types';
|
|
|
|
import { isUserId } from '../../../global/helpers';
|
|
import { formatIntegerCompact } from '../../../util/textFormat';
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import useLang from '../../../hooks/useLang';
|
|
|
|
import Avatar from '../../common/Avatar';
|
|
import AnimatedCounter from '../../common/AnimatedCounter';
|
|
|
|
import './CommentButton.scss';
|
|
|
|
type OwnProps = {
|
|
threadInfo: ApiThreadInfo;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
const CommentButton: FC<OwnProps> = ({
|
|
threadInfo,
|
|
disabled,
|
|
}) => {
|
|
const { openChat } = getActions();
|
|
|
|
const lang = useLang();
|
|
const {
|
|
threadId, chatId, messagesCount, lastMessageId, lastReadInboxMessageId, recentReplierIds,
|
|
} = threadInfo;
|
|
|
|
const handleClick = useCallback(() => {
|
|
openChat({ id: chatId, threadId });
|
|
}, [openChat, chatId, threadId]);
|
|
|
|
const recentRepliers = useMemo(() => {
|
|
if (!recentReplierIds?.length) {
|
|
return undefined;
|
|
}
|
|
|
|
// No need for expensive global updates on chats and users, so we avoid them
|
|
const { users: { byId: usersById }, chats: { byId: chatsById } } = getGlobal();
|
|
|
|
return recentReplierIds.map((peerId) => {
|
|
return isUserId(peerId) ? usersById[peerId] : chatsById[peerId];
|
|
}).filter(Boolean);
|
|
}, [recentReplierIds]);
|
|
|
|
if (messagesCount === undefined) {
|
|
return undefined;
|
|
}
|
|
|
|
function renderRecentRepliers() {
|
|
return (
|
|
recentRepliers && recentRepliers.length > 0 && (
|
|
<div className="recent-repliers" dir={lang.isRtl ? 'rtl' : 'ltr'}>
|
|
{recentRepliers.map((user) => (
|
|
<Avatar
|
|
key={user.id}
|
|
size="small"
|
|
user={isUserId(user.id) ? user as ApiUser : undefined}
|
|
chat={!isUserId(user.id) ? user as ApiChat : undefined}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
);
|
|
}
|
|
|
|
const hasUnread = Boolean(lastReadInboxMessageId && lastMessageId && lastReadInboxMessageId < lastMessageId);
|
|
|
|
const commentsText = messagesCount ? (lang('Comments', '%COMMENTS_COUNT%', undefined, messagesCount) as string)
|
|
.split('%')
|
|
.map((s) => {
|
|
return (s === 'COMMENTS_COUNT' ? <AnimatedCounter text={formatIntegerCompact(messagesCount)} /> : s);
|
|
})
|
|
: undefined;
|
|
|
|
return (
|
|
<div
|
|
data-cnt={formatIntegerCompact(messagesCount)}
|
|
className={buildClassName('CommentButton', hasUnread && 'has-unread', disabled && 'disabled')}
|
|
dir={lang.isRtl ? 'rtl' : 'ltr'}
|
|
onClick={handleClick}
|
|
>
|
|
<i className="icon-comments-sticker" />
|
|
{(!recentRepliers || recentRepliers.length === 0) && <i className="icon-comments" />}
|
|
{renderRecentRepliers()}
|
|
<div className="label" dir="auto">
|
|
{messagesCount ? commentsText : lang('LeaveAComment')}
|
|
</div>
|
|
<i className="icon-next" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(CommentButton);
|