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/Application/Messages/Messages.tsx

48 lines
1.4 KiB
TypeScript

import useTranslation from "next-translate/useTranslation"
import InfiniteScroll from "react-infinite-scroll-component"
import { Loader } from "../../design/Loader"
import { Message } from "./Message"
import { useMessages } from "../../../contexts/Messages"
import { Emoji } from "../../Emoji"
export const Messages: React.FC = () => {
const { t } = useTranslation()
const { messages, hasMore, nextPage } = useMessages()
if (messages.length === 0) {
return (
<div
id="messages"
className="scrollbar-firefox-support mt-8 flex w-full flex-1 flex-col overflow-y-auto text-center text-lg transition-all"
>
<p>
{t("application:nothing-here")} <Emoji value=":ghost:" size={20} />
</p>
<p>{t("application:start-chatting-kill-ghost")}</p>
</div>
)
}
return (
<div
id="messages"
className="scrollbar-firefox-support flex w-full flex-1 flex-col-reverse overflow-y-auto transition-all"
>
<InfiniteScroll
scrollableTarget="messages"
className="messages-list !overflow-x-hidden"
dataLength={messages.length}
next={nextPage}
inverse
hasMore={hasMore}
loader={<Loader />}
>
{messages.map((message) => {
return <Message key={message.id} message={message} />
})}
</InfiniteScroll>
</div>
)
}