59 lines
1.4 KiB
TypeScript
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>
|
|
</>
|
|
)
|
|
}
|