Use callback option in web-chat

This commit is contained in:
Franck Royer 2021-05-17 16:19:50 +10:00
parent 243b6629c3
commit 3f5484f6ed
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 50 additions and 32 deletions

View File

@ -45,6 +45,29 @@ const themes = {
export const ChatContentTopic = 'dingpu'; export const ChatContentTopic = 'dingpu';
async function retrieveStoreMessages(
waku: Waku,
peerId: PeerId,
setArchivedMessages: (value: ChatMessage[]) => void
): Promise<number> {
const callback = (wakuMessages: WakuMessage[]): void => {
const messages = wakuMessages
.map((wakuMsg) => wakuMsg.payload)
.filter((payload) => !!payload)
.map((payload) => ChatMessage.decode(payload as Uint8Array));
setArchivedMessages(messages);
};
const res = await waku.store.queryHistory({
peerId,
contentTopics: [ChatContentTopic],
pageSize: 5,
callback,
});
return res ? res.length : 0;
}
export default function App() { export default function App() {
let [newMessages, setNewMessages] = useState<ChatMessage[]>([]); let [newMessages, setNewMessages] = useState<ChatMessage[]>([]);
let [archivedMessages, setArchivedMessages] = useState<ChatMessage[]>([]); let [archivedMessages, setArchivedMessages] = useState<ChatMessage[]>([]);
@ -61,6 +84,7 @@ export default function App() {
} }
}; };
// TODO: Split this
const handleProtocolChange = async ( const handleProtocolChange = async (
waku: Waku, waku: Waku,
{ peerId, protocols }: { peerId: PeerId; protocols: string[] } { peerId, protocols }: { peerId: PeerId; protocols: string[] }
@ -68,18 +92,12 @@ export default function App() {
if (protocols.includes(StoreCodec)) { if (protocols.includes(StoreCodec)) {
console.log(`${peerId.toB58String()}: retrieving archived messages}`); console.log(`${peerId.toB58String()}: retrieving archived messages}`);
try { try {
const response = await waku.store.queryHistory({ const length = await retrieveStoreMessages(
waku,
peerId, peerId,
contentTopics: [ChatContentTopic], setArchivedMessages
}); );
console.log(`${peerId.toB58String()}: messages retrieved:`, response); console.log(`${peerId.toB58String()}: messages retrieved:`, length);
if (response) {
const messages = response
.map((wakuMsg) => wakuMsg.payload)
.filter((payload) => !!payload)
.map((payload) => ChatMessage.decode(payload as Uint8Array));
setArchivedMessages(messages);
}
} catch (e) { } catch (e) {
console.log( console.log(
`${peerId.toB58String()}: error encountered when retrieving archived messages`, `${peerId.toB58String()}: error encountered when retrieving archived messages`,

View File

@ -14,10 +14,11 @@ interface Props {
export default function ChatList(props: Props) { export default function ChatList(props: Props) {
const [messages, setMessages] = useState<ChatMessage[]>([]); const [messages, setMessages] = useState<ChatMessage[]>([]);
const [groupedMessages, setGroupedMessages] = useState<ChatMessage[][]>([]);
let updatedMessages; let updatedMessages;
if (IsThereNewMessages(props.newMessages, messages)) { if (IsThereNewMessages(props.newMessages, messages)) {
updatedMessages = messages.slice().concat(props.newMessages); updatedMessages = messages.concat(props.newMessages);
if (IsThereNewMessages(props.archivedMessages, updatedMessages)) { if (IsThereNewMessages(props.archivedMessages, updatedMessages)) {
updatedMessages = copyMergeUniqueReplace( updatedMessages = copyMergeUniqueReplace(
props.archivedMessages, props.archivedMessages,
@ -34,32 +35,31 @@ export default function ChatList(props: Props) {
} }
if (updatedMessages) { if (updatedMessages) {
setGroupedMessages(groupMessagesBySender(updatedMessages));
setMessages(updatedMessages); setMessages(updatedMessages);
} }
const messagesGroupedBySender = groupMessagesBySender(messages).map( const renderedGroupedMessages = groupedMessages.map((currentMessageGroup) => (
(currentMessageGroup) => ( <MessageGroup onlyFirstWithMeta>
<MessageGroup onlyFirstWithMeta> {currentMessageGroup.map((currentMessage) => (
{currentMessageGroup.map((currentMessage) => ( <Message
<Message key={
key={ currentMessage.timestamp.valueOf() +
currentMessage.timestamp.valueOf() + currentMessage.nick +
currentMessage.nick + currentMessage.payloadAsUtf8
currentMessage.payloadAsUtf8 }
} authorName={currentMessage.nick}
authorName={currentMessage.nick} date={formatDisplayDate(currentMessage)}
date={formatDisplayDate(currentMessage)} >
> <MessageText>{currentMessage.payloadAsUtf8}</MessageText>
<MessageText>{currentMessage.payloadAsUtf8}</MessageText> </Message>
</Message> ))}
))} </MessageGroup>
</MessageGroup> ));
)
);
return ( return (
<MessageList active containScrollInSubtree> <MessageList active containScrollInSubtree>
{messagesGroupedBySender} {renderedGroupedMessages}
<AlwaysScrollToBottom newMessages={props.newMessages} /> <AlwaysScrollToBottom newMessages={props.newMessages} />
</MessageList> </MessageList>
); );