124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import React, { memo, useEffect, useRef } from '../../lib/teact/teact';
|
|
import { getActions, withGlobal } from '../../global';
|
|
|
|
import type { ApiSticker, ApiUpdateConnectionStateType } from '../../api/types';
|
|
import type { MessageList } from '../../global/types';
|
|
|
|
import { selectChat, selectCurrentMessageList } from '../../global/selectors';
|
|
import { getUserIdDividend } from '../../global/helpers';
|
|
|
|
import useLastCallback from '../../hooks/useLastCallback';
|
|
import useLang from '../../hooks/useLang';
|
|
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
|
|
|
|
import StickerButton from '../common/StickerButton';
|
|
|
|
import './ContactGreeting.scss';
|
|
|
|
type OwnProps = {
|
|
userId: string;
|
|
};
|
|
|
|
type StateProps = {
|
|
sticker?: ApiSticker;
|
|
lastUnreadMessageId?: number;
|
|
connectionState?: ApiUpdateConnectionStateType;
|
|
currentMessageList?: MessageList;
|
|
};
|
|
|
|
const INTERSECTION_DEBOUNCE_MS = 200;
|
|
|
|
const ContactGreeting: FC<OwnProps & StateProps> = ({
|
|
sticker,
|
|
connectionState,
|
|
lastUnreadMessageId,
|
|
currentMessageList,
|
|
}) => {
|
|
const {
|
|
loadGreetingStickers,
|
|
sendMessage,
|
|
markMessageListRead,
|
|
} = getActions();
|
|
|
|
const lang = useLang();
|
|
// eslint-disable-next-line no-null/no-null
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const {
|
|
observe: observeIntersection,
|
|
} = useIntersectionObserver({
|
|
rootRef: containerRef,
|
|
debounceMs: INTERSECTION_DEBOUNCE_MS,
|
|
});
|
|
useEffect(() => {
|
|
if (sticker || connectionState !== 'connectionStateReady') {
|
|
return;
|
|
}
|
|
|
|
loadGreetingStickers();
|
|
}, [connectionState, loadGreetingStickers, sticker]);
|
|
|
|
useEffect(() => {
|
|
if (connectionState === 'connectionStateReady' && lastUnreadMessageId) {
|
|
markMessageListRead({ maxId: lastUnreadMessageId });
|
|
}
|
|
}, [connectionState, markMessageListRead, lastUnreadMessageId]);
|
|
|
|
const handleStickerSelect = useLastCallback((selectedSticker: ApiSticker) => {
|
|
if (!currentMessageList) {
|
|
return;
|
|
}
|
|
|
|
selectedSticker = {
|
|
...selectedSticker,
|
|
isPreloadedGlobally: true,
|
|
};
|
|
sendMessage({ sticker: selectedSticker, messageList: currentMessageList });
|
|
});
|
|
|
|
return (
|
|
<div className="ContactGreeting" ref={containerRef}>
|
|
<div className="wrapper">
|
|
<p className="title" dir="auto">{lang('Conversation.EmptyPlaceholder')}</p>
|
|
<p className="description" dir="auto">{lang('Conversation.GreetingText')}</p>
|
|
|
|
<div className="sticker">
|
|
{sticker && (
|
|
<StickerButton
|
|
sticker={sticker}
|
|
onClick={handleStickerSelect}
|
|
clickArg={sticker}
|
|
observeIntersection={observeIntersection}
|
|
size={160}
|
|
className="large"
|
|
noContextMenu
|
|
isCurrentUserPremium
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(withGlobal<OwnProps>(
|
|
(global, { userId }): StateProps => {
|
|
const { stickers } = global.stickers.greeting;
|
|
const dividend = getUserIdDividend(userId) + getUserIdDividend(global.currentUserId!);
|
|
const sticker = stickers?.length ? stickers[dividend % stickers.length] : undefined;
|
|
const chat = selectChat(global, userId);
|
|
if (!chat) {
|
|
return {};
|
|
}
|
|
|
|
return {
|
|
sticker,
|
|
lastUnreadMessageId: chat.lastMessage && chat.lastMessage.id !== chat.lastReadInboxMessageId
|
|
? chat.lastMessage.id
|
|
: undefined,
|
|
connectionState: global.connectionState,
|
|
currentMessageList: selectCurrentMessageList(global),
|
|
};
|
|
},
|
|
)(ContactGreeting));
|