import React, { useEffect } from 'react' import PropTypes from 'prop-types' import MessageList from './message-list' import MessageInput from './message-input' import InfiniteScroll from './infinite-scroll' import Icon from '../../../shared/components/icon' import { useTranslation } from 'react-i18next' function ChatPane({ atEnd, loading, loadMoreMessages, messages, resetUnreadMessages, sendMessage, userId }) { useEffect(() => { loadMoreMessages() }, []) const shouldDisplayPlaceholder = !loading && messages.length === 0 const messageContentCount = messages.reduce( (acc, { contents }) => acc + contents.length, 0 ) return ( ) } function LoadingSpinner() { const { t } = useTranslation() return (
{` ${t('loading')}…`}
) } function Placeholder() { const { t } = useTranslation() return ( <>
{t('no_messages')}
{t('send_first_message')}
) } ChatPane.propTypes = { atEnd: PropTypes.bool, loading: PropTypes.bool, loadMoreMessages: PropTypes.func.isRequired, messages: PropTypes.array.isRequired, resetUnreadMessages: PropTypes.func.isRequired, sendMessage: PropTypes.func.isRequired, userId: PropTypes.string.isRequired } export default ChatPane