108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import React, { FC, memo, useCallback } from '../../../lib/teact/teact';
|
|
import { withGlobal } from '../../../lib/teact/teactn';
|
|
|
|
import {
|
|
ApiChat, ApiMessage, ApiThreadInfo, ApiUser,
|
|
} from '../../../api/types';
|
|
import { GlobalActions } from '../../../global/types';
|
|
|
|
import { pick } from '../../../util/iteratees';
|
|
import { isChatPrivate } from '../../../modules/helpers';
|
|
import { formatIntegerCompact } from '../../../util/textFormat';
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import { selectThreadInfo } from '../../../modules/selectors';
|
|
import useLang from '../../../hooks/useLang';
|
|
|
|
import Avatar from '../../common/Avatar';
|
|
|
|
import './CommentButton.scss';
|
|
|
|
type OwnProps = {
|
|
message: ApiMessage;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
type StateProps = {
|
|
threadInfo: ApiThreadInfo;
|
|
usersById?: Record<number, ApiUser>;
|
|
chatsById?: Record<number, ApiChat>;
|
|
};
|
|
|
|
type DispatchProps = Pick<GlobalActions, 'openChat'>;
|
|
|
|
const CommentButton: FC<OwnProps & StateProps & DispatchProps> = ({
|
|
disabled, threadInfo, usersById, chatsById, openChat,
|
|
}) => {
|
|
const lang = useLang();
|
|
const {
|
|
threadId, chatId, messagesCount, lastMessageId, lastReadInboxMessageId, recentReplierIds,
|
|
} = threadInfo;
|
|
|
|
const handleClick = useCallback(() => {
|
|
openChat({ id: chatId, threadId });
|
|
}, [openChat, chatId, threadId]);
|
|
|
|
if (messagesCount === undefined) {
|
|
return undefined;
|
|
}
|
|
|
|
const recentRepliers = recentReplierIds && recentReplierIds.map((peerId) => {
|
|
return isChatPrivate(peerId) ? usersById![peerId] : chatsById![peerId];
|
|
}).filter(Boolean);
|
|
|
|
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={isChatPrivate(user.id) ? user as ApiUser : undefined}
|
|
chat={!isChatPrivate(user.id) ? user as ApiChat : undefined}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
);
|
|
}
|
|
|
|
const hasUnread = Boolean(lastReadInboxMessageId && lastMessageId && lastReadInboxMessageId < lastMessageId);
|
|
|
|
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 ? lang('Comments', messagesCount, 'i') : lang('LeaveAComment')}
|
|
</div>
|
|
<i className="icon-next" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal<OwnProps>(
|
|
(global, { message }) => {
|
|
const { threadId, chatId } = message.threadInfo!;
|
|
|
|
const threadInfo = selectThreadInfo(global, chatId, threadId) || message.threadInfo!;
|
|
const { byId: usersById } = global.users;
|
|
const { byId: chatsById } = global.chats;
|
|
|
|
return {
|
|
threadInfo,
|
|
usersById,
|
|
chatsById,
|
|
};
|
|
},
|
|
(setGlobal, actions): DispatchProps => pick(actions, [
|
|
'openChat',
|
|
]),
|
|
)(CommentButton));
|