This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/Messages/index.tsx
2021-10-24 05:19:39 +02:00

59 lines
1.4 KiB
TypeScript

import { useEffect } from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
import { Message } from './Message'
import { Loader } from 'components/design/Loader'
import { useMessages } from 'contexts/Messages'
import { Emoji } from 'emoji-mart'
import { emojiSet } from 'components/Emoji'
export const Messages: React.FC = () => {
const { messages, nextPage } = useMessages()
useEffect(() => {
window.scrollTo(0, document.body.scrollHeight)
}, [])
if (messages.rows.length === 0) {
return (
<div id='messages'>
<p>
Nothing to show here!{' '}
<Emoji set={emojiSet} emoji=':ghost:' size={20} />
</p>
<p>Start chatting to kill this Ghost!</p>
</div>
)
}
return (
<>
<div id='messages'>
<InfiniteScroll
dataLength={messages.rows.length}
next={nextPage}
inverse
scrollableTarget='messages'
hasMore={messages.hasMore}
loader={<Loader />}
>
{messages.rows.map((message) => {
return <Message key={message.id} {...message} />
})}
</InfiniteScroll>
</div>
<style jsx>
{`
#messages {
overflow-y: scroll;
display: flex;
flex-direction: column-reverse;
height: 800px;
}
`}
</style>
</>
)
}