overleaf/services/web/frontend/js/features/chat/components/chat-pane.js
Jakob Ackermann f5942f1a7b Merge pull request #4098 from overleaf/msm-fix-application-provider-required-user
Fixed `isRequired` usages for `ApplicationProvider.value.user`

GitOrigin-RevId: 0f3db77fa5da1cb0aec29ef112d1044173df88e0
2021-05-28 02:08:46 +00:00

98 lines
2.6 KiB
JavaScript

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'
import MessageList from './message-list'
import MessageInput from './message-input'
import InfiniteScroll from './infinite-scroll'
import Icon from '../../../shared/components/icon'
import { useLayoutContext } from '../../../shared/context/layout-context'
import { useApplicationContext } from '../../../shared/context/application-context'
import withErrorBoundary from '../../../infrastructure/error-boundary'
import { useChatContext } from '../context/chat-context'
function ChatPane() {
const { t } = useTranslation()
const { chatIsOpen } = useLayoutContext({ chatIsOpen: PropTypes.bool })
const { user } = useApplicationContext({
user: PropTypes.shape({ id: PropTypes.string.isRequired }.isRequired),
})
const {
status,
messages,
initialMessagesLoaded,
atEnd,
loadInitialMessages,
loadMoreMessages,
sendMessage,
markMessagesAsRead,
} = useChatContext()
useEffect(() => {
if (chatIsOpen && !initialMessagesLoaded) {
loadInitialMessages()
}
}, [chatIsOpen, loadInitialMessages, initialMessagesLoaded])
const shouldDisplayPlaceholder = status !== 'pending' && messages.length === 0
const messageContentCount = messages.reduce(
(acc, { contents }) => acc + contents.length,
0
)
return (
<aside className="chat">
<InfiniteScroll
atEnd={atEnd}
className="messages"
fetchData={loadMoreMessages}
isLoading={status === 'pending'}
itemCount={messageContentCount}
>
<div>
<h2 className="sr-only">{t('chat')}</h2>
{status === 'pending' && <LoadingSpinner />}
{shouldDisplayPlaceholder && <Placeholder />}
<MessageList
messages={messages}
userId={user.id}
resetUnreadMessages={markMessagesAsRead}
/>
</div>
</InfiniteScroll>
<MessageInput
resetUnreadMessages={markMessagesAsRead}
sendMessage={sendMessage}
/>
</aside>
)
}
function LoadingSpinner() {
const { t } = useTranslation()
return (
<div className="loading">
<Icon type="fw" modifier="refresh" spin />
{` ${t('loading')}`}
</div>
)
}
function Placeholder() {
const { t } = useTranslation()
return (
<>
<div className="no-messages text-center small">{t('no_messages')}</div>
<div className="first-message text-center">
{t('send_first_message')}
<br />
<Icon type="arrow-down" />
</div>
</>
)
}
export default withErrorBoundary(ChatPane)