TelegramPWA/src/components/middle/NoMessages.tsx

79 lines
2.1 KiB
TypeScript

import React, { FC, memo } from '../../lib/teact/teact';
import { MessageListType } from '../../global/types';
import useLang, { LangFn } from '../../hooks/useLang';
import './NoMessages.scss';
type OwnProps = {
chatId: number;
isChatWithSelf?: boolean;
type: MessageListType;
isGroupChatJustCreated?: boolean;
};
const NoMessages: FC<OwnProps> = ({
isChatWithSelf, type, isGroupChatJustCreated,
}) => {
const lang = useLang();
if (type === 'scheduled') {
return renderScheduled(lang);
}
if (isChatWithSelf) {
return renderSavedMessages(lang);
}
if (isGroupChatJustCreated) {
return renderGroup(lang);
}
return (
<div className="empty"><span>{lang('NoMessages')}</span></div>
);
};
function renderScheduled(lang: LangFn) {
return (
<div className="empty"><span>{lang('ScheduledMessages.EmptyPlaceholder')}</span></div>
);
}
function renderSavedMessages(lang: LangFn) {
return (
<div className="NoMessages">
<div className="wrapper">
<i className="icon icon-cloud-download" />
<h3 className="title">{lang('Conversation.CloudStorageInfo.Title')}</h3>
<ul className="description">
<li>{lang('Conversation.ClousStorageInfo.Description1')}</li>
<li>{lang('Conversation.ClousStorageInfo.Description2')}</li>
<li>{lang('Conversation.ClousStorageInfo.Description3')}</li>
<li>{lang('Conversation.ClousStorageInfo.Description4')}</li>
</ul>
</div>
</div>
);
}
function renderGroup(lang: LangFn) {
return (
<div className="NoMessages">
<div className="wrapper" dir={lang.isRtl ? 'rtl' : undefined}>
<h3 className="title">{lang('EmptyGroupInfo.Title')}</h3>
<p className="description">{lang('EmptyGroupInfo.Subtitle')}</p>
<ul className="list-checkmarks">
<li>{lang('EmptyGroupInfo.Line1')}</li>
<li>{lang('EmptyGroupInfo.Line2')}</li>
<li>{lang('EmptyGroupInfo.Line3')}</li>
<li>{lang('EmptyGroupInfo.Line4')}</li>
</ul>
</div>
</div>
);
}
export default memo(NoMessages);