status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/react-chat/src/components/Chat/ChatBody.tsx
View File

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

12
packages/react-chat/src/components/Chat/ChatMessages.tsx
View File

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