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

Fix and refactor messages (#111)

This commit is contained in:
Szymon Szlachtowicz 2021-11-04 14:27:24 +01:00 committed by GitHub
parent c7626f5deb
commit cdac0b6bd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 68 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import React, { useMemo, useRef, useState } from "react";
import styled from "styled-components";
import { useBlockedUsers } from "../../contexts/blockedUsersProvider";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useChatScrollHandle } from "../../hooks/useChatScrollHandle";
import { ChatMessage } from "../../models/ChatMessage";
import { equalDate } from "../../utils";
import { ContactMenu } from "../Form/ContactMenu";
@ -74,55 +74,14 @@ type ChatMessagesProps = {
};
export function ChatMessages({ messages, activeChannelId }: ChatMessagesProps) {
const { loadPrevDay, loadingMessages } = useMessengerContext();
const [scrollOnBot, setScrollOnBot] = useState(true);
const ref = useRef<HTMLHeadingElement>(null);
useEffect(() => {
if (ref && ref.current && scrollOnBot) {
ref.current.scrollTop = ref.current.scrollHeight;
}
}, [messages, messages.length, scrollOnBot]);
useEffect(() => {
if (!loadingMessages) {
if (
(ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0)
) {
setScrollOnBot(true);
loadPrevDay(activeChannelId);
}
}
}, [messages, messages.length, loadingMessages]);
const loadingMessages = useChatScrollHandle(messages, ref, activeChannelId);
const { blockedUsers } = useBlockedUsers();
const shownMessages = useMemo(() => {
return messages.filter((message) => !blockedUsers.includes(message.sender));
}, [messages, blockedUsers, messages.length]);
useEffect(() => {
const setScroll = () => {
if (ref && ref.current) {
if (ref.current.scrollTop <= 0) {
loadPrevDay(activeChannelId);
}
if (
ref.current.scrollTop + ref.current.clientHeight ==
ref.current.scrollHeight
) {
setScrollOnBot(true);
} else {
if (scrollOnBot == true) {
setScrollOnBot(false);
}
}
}
};
ref.current?.addEventListener("scroll", setScroll);
return () => ref.current?.removeEventListener("scroll", setScroll);
}, [ref, scrollOnBot]);
}, [blockedUsers, messages.length]);
const [image, setImage] = useState("");
const [link, setLink] = useState("");

4
packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts
View File

@ -27,7 +27,7 @@ export function useLoadPrevDay(
const timeDiff = Math.floor(
(new Date().getTime() - endTime.getTime()) / _MS_PER_DAY
);
if (timeDiff < 30) {
if (timeDiff < 28) {
if (!loadingPreviousMessages.current[id]) {
loadingPreviousMessages.current[id] = true;
setLoadingMessages(true);
@ -46,7 +46,7 @@ export function useLoadPrevDay(
}
}
},
[lastLoadTime, messenger]
[messenger]
);
return { loadingMessages, loadPrevDay };
}

4
packages/react-chat/src/hooks/messenger/useMessages.ts
View File

@ -20,9 +20,7 @@ export function useMessages(chatId: string, contacts?: Contacts) {
(msg: ApplicationMetadataMessage, id: string, date: Date) => {
const newMessage = ChatMessage.fromMetadataMessage(msg, date);
if (newMessage) {
if (contacts) {
contacts.addContact(newMessage.sender);
}
contacts?.addContact(newMessage.sender);
setMessages((prev) => {
return {
...prev,

14
packages/react-chat/src/hooks/messenger/useMessenger.ts
View File

@ -58,14 +58,12 @@ export function useMessenger(
const contacts = useMemo<Contact[]>(() => {
const now = Date.now();
const newContacts: Contact[] = [];
Object.entries(internalContacts).forEach(([id, clock]) => {
newContacts.push({
return Object.entries(internalContacts).map(([id, clock]) => {
return {
id,
online: clock > now - 301000,
});
};
});
return newContacts;
}, [internalContacts]);
const { addMessage, clearNotifications, notifications, messages } =
@ -82,9 +80,9 @@ export function useMessenger(
}, [identity]);
useEffect(() => {
if (messenger && contactsClass && communityKey) {
createCommunity(communityKey, addMessage, messenger).then((e) => {
setCommunity(e);
if (messenger && communityKey && contactsClass) {
createCommunity(communityKey, addMessage, messenger).then((comm) => {
setCommunity(comm);
});
}
}, [messenger, communityKey, addMessage, contactsClass]);

55
packages/react-chat/src/hooks/useChatScrollHandle.ts Normal file
View File

@ -0,0 +1,55 @@
import { useEffect, useState } from "react";
import { useMessengerContext } from "../contexts/messengerProvider";
import { ChatMessage } from "../models/ChatMessage";
export function useChatScrollHandle(
messages: ChatMessage[],
ref: React.RefObject<HTMLHeadingElement>,
activeChannelId: string
) {
const { loadPrevDay, loadingMessages } = useMessengerContext();
const [scrollOnBot, setScrollOnBot] = useState(true);
useEffect(() => {
if (ref && ref.current && scrollOnBot) {
ref.current.scrollTop = ref.current.scrollHeight;
}
}, [messages.length, scrollOnBot]);
useEffect(() => {
if (!loadingMessages) {
if (
(ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0)
) {
setScrollOnBot(true);
loadPrevDay(activeChannelId);
}
}
}, [messages.length, loadingMessages]);
useEffect(() => {
const setScroll = () => {
if (ref?.current) {
if (ref.current.scrollTop <= 0) {
loadPrevDay(activeChannelId);
}
if (
ref.current.scrollTop + ref.current.clientHeight ==
ref.current.scrollHeight
) {
if (scrollOnBot === false) {
setScrollOnBot(true);
}
} else {
if (scrollOnBot === true) {
setScrollOnBot(false);
}
}
}
};
ref.current?.addEventListener("scroll", setScroll);
return () => ref.current?.removeEventListener("scroll", setScroll);
}, [ref, scrollOnBot]);
return loadingMessages;
}