Load new messages when reaching top (#57)

This commit is contained in:
Szymon Szlachtowicz 2021-10-08 11:11:31 +02:00 committed by GitHub
parent c52a7963d2
commit 771392c960
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 2 deletions

View File

@ -115,6 +115,7 @@ export function ChatBody({
messenger ? (
<ChatMessages
messages={messages}
loadNextDay={loadNextDay}
fetchMetadata={fetchMetadata}
/>
) : (

View File

@ -10,11 +10,16 @@ import { ChatMessageContent } from "./ChatMessageContent";
type ChatMessagesProps = {
messages: ChatMessage[];
loadNextDay: () => void;
fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
};
export function ChatMessages({ messages, fetchMetadata }: ChatMessagesProps) {
const [scrollOnBot, setScrollOnBot] = useState(false);
export function ChatMessages({
messages,
loadNextDay,
fetchMetadata,
}: ChatMessagesProps) {
const [scrollOnBot, setScrollOnBot] = useState(true);
const ref = useRef<HTMLHeadingElement>(null);
const today = useMemo(() => new Date().getDay(), []);
useEffect(() => {
@ -26,6 +31,9 @@ export function ChatMessages({ messages, fetchMetadata }: ChatMessagesProps) {
useEffect(() => {
const setScroll = () => {
if (ref && ref.current) {
if (ref.current.scrollTop <= 0) {
loadNextDay();
}
if (
ref.current.scrollTop + ref.current.clientHeight ==
ref.current.scrollHeight