From 7c0668d0103ade518484e9a7bb0492f86c120392 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Mon, 10 Jan 2022 13:44:02 +0100 Subject: [PATCH] Fix context error and group chats msg loading (#179) --- .../src/components/Chat/ChatCreation.tsx | 98 ++++++++++--------- .../src/components/Chat/ChatInput.tsx | 6 +- .../src/components/Members/MembersList.tsx | 6 +- .../src/components/Modals/LogoutModal.tsx | 4 +- .../react-chat/src/components/SearchBlock.tsx | 2 +- .../src/contexts/messengerProvider.tsx | 1 + .../src/hooks/messenger/useContacts.ts | 9 +- .../src/hooks/messenger/useGroupChats.ts | 1 - .../src/hooks/messenger/useLoadPrevDay.ts | 34 ++++--- .../src/hooks/messenger/useMessenger.ts | 8 +- packages/status-communities/src/groupChats.ts | 8 +- 11 files changed, 94 insertions(+), 83 deletions(-) diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx index 75ffa4a3..1551575e 100644 --- a/packages/react-chat/src/components/Chat/ChatCreation.tsx +++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx @@ -34,69 +34,73 @@ export function ChatCreation({ const addMember = useCallback( (member: string) => { setStyledGroup((prevMembers: string[]) => { - if (prevMembers.find((mem) => mem === member)) { + if ( + prevMembers.find((mem) => mem === member) || + prevMembers.length >= 5 + ) { return prevMembers; } else { return [...prevMembers, member]; } }); + setQuery(""); }, [setStyledGroup, styledGroup] ); - const removeMember = (member: string) => { - setStyledGroup((prev) => prev.filter((e) => e != member)); - }; + const removeMember = useCallback( + (member: string) => { + setStyledGroup((prev) => prev.filter((e) => e != member)); + }, + [setStyledGroup] + ); - const createChat = (group: string[]) => { - if (identity) { - const newGroup = group.slice(); - newGroup.push(bufToHex(identity.publicKey)); - group.length > 1 - ? createGroupChat(newGroup) - : setChannel({ - id: newGroup[0], - name: newGroup[0], - type: "dm", - description: `Chatkey: ${newGroup[0]} `, - }); - setChatState(ChatState.ChatBody); - } - }; + const createChat = useCallback( + (group: string[]) => { + if (identity) { + const newGroup = group.slice(); + newGroup.push(bufToHex(identity.publicKey)); + group.length > 1 + ? createGroupChat(newGroup) + : setChannel({ + id: newGroup[0], + name: newGroup[0], + type: "dm", + description: `Chatkey: ${newGroup[0]} `, + }); + setChatState(ChatState.ChatBody); + } + }, + [identity, createGroupChat, setChannel] + ); return ( To: - {styledGroup.length > 0 && ( - - {styledGroup.map((member) => ( - - {member.slice(0, 10)} - removeMember(member)}> - - - - ))} - + + {styledGroup.map((member) => ( + + {member.slice(0, 10)} + removeMember(member)}> + + + + ))} + + {styledGroup.length < 5 && ( + + setQuery(e.currentTarget.value)} + /> + + )} - - {styledGroup.length < 5 && ( - <> - setQuery(e.currentTarget.value)} - /> - {query && ( - - )} - - )} - {styledGroup.length === 5 && ( 5 user Limit reached )} diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx index b43cb849..cde30d15 100644 --- a/packages/react-chat/src/components/Chat/ChatInput.tsx +++ b/packages/react-chat/src/components/Chat/ChatInput.tsx @@ -47,11 +47,13 @@ export function ChatInput({ reply, setReply }: ChatInputProps) { const inputRef = useRef(null); useEffect(() => { - window.addEventListener("click", () => setShowEmoji(false)); + if (showEmoji) { + window.addEventListener("click", () => setShowEmoji(false)); + } return () => { window.removeEventListener("click", () => setShowEmoji(false)); }; - }, []); + }, [showEmoji]); const image = useMemo( () => (imageUint ? uintToImgUrl(imageUint) : ""), diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx index 06af8281..16fd68c5 100644 --- a/packages/react-chat/src/components/Members/MembersList.tsx +++ b/packages/react-chat/src/components/Members/MembersList.tsx @@ -3,7 +3,7 @@ import { utils } from "status-communities/dist/cjs"; import { bufToHex } from "status-communities/dist/cjs/utils"; import styled from "styled-components"; -import { useIdentity, useNickname } from "../../contexts/identityProvider"; +import { useIdentity } from "../../contexts/identityProvider"; import { useMessengerContext } from "../../contexts/messengerProvider"; import { useModal } from "../../contexts/modalProvider"; import { buttonStyles } from "../Buttons/buttonStyle"; @@ -17,12 +17,10 @@ interface MembersListProps { } export function MembersList({ switchShowMembers }: MembersListProps) { - const { contacts } = useMessengerContext(); + const { contacts, nickname } = useMessengerContext(); const identity = useIdentity(); const { setModal } = useModal(LogoutModalName); - const nickname = useNickname(); - const userContacts = useMemo(() => { if (identity) { return Object.values(contacts).filter( diff --git a/packages/react-chat/src/components/Modals/LogoutModal.tsx b/packages/react-chat/src/components/Modals/LogoutModal.tsx index c838dce4..fb082413 100644 --- a/packages/react-chat/src/components/Modals/LogoutModal.tsx +++ b/packages/react-chat/src/components/Modals/LogoutModal.tsx @@ -4,10 +4,10 @@ import styled from "styled-components"; import { useIdentity, - useNickname, useSetIdentity, useSetNikcname, } from "../../contexts/identityProvider"; +import { useMessengerContext } from "../../contexts/messengerProvider"; import { useModal } from "../../contexts/modalProvider"; import { ButtonNo, ButtonYes } from "../Buttons/buttonStyle"; import { UserLogo } from "../Members/UserLogo"; @@ -29,7 +29,7 @@ export const LogoutModal = () => { const logout = useSetIdentity(); const setNickname = useSetNikcname(); const identity = useIdentity(); - const nickname = useNickname(); + const { nickname } = useMessengerContext(); if (identity) { return ( diff --git a/packages/react-chat/src/components/SearchBlock.tsx b/packages/react-chat/src/components/SearchBlock.tsx index 4f88b438..4bba4a6f 100644 --- a/packages/react-chat/src/components/SearchBlock.tsx +++ b/packages/react-chat/src/components/SearchBlock.tsx @@ -32,7 +32,7 @@ export const SearchBlock = ({ .filter((member) => !discludeList.includes(member.id)); }, [query, discludeList, contacts]); - if (searchList.length === 0) { + if (searchList.length === 0 || !query) { return null; } return ( diff --git a/packages/react-chat/src/contexts/messengerProvider.tsx b/packages/react-chat/src/contexts/messengerProvider.tsx index a6b0e585..8c3f45aa 100644 --- a/packages/react-chat/src/contexts/messengerProvider.tsx +++ b/packages/react-chat/src/contexts/messengerProvider.tsx @@ -25,6 +25,7 @@ const MessengerContext = createContext({ createGroupChat: () => undefined, changeGroupChatName: () => undefined, addMembers: () => undefined, + nickname: undefined, }); export function useMessengerContext() { diff --git a/packages/react-chat/src/hooks/messenger/useContacts.ts b/packages/react-chat/src/hooks/messenger/useContacts.ts index d11f9a15..aec17044 100644 --- a/packages/react-chat/src/hooks/messenger/useContacts.ts +++ b/packages/react-chat/src/hooks/messenger/useContacts.ts @@ -6,15 +6,14 @@ import { } from "status-communities/dist/cjs"; import { bufToHex } from "status-communities/dist/cjs/utils"; -import { useSetNikcname } from "../../contexts/identityProvider"; import { Contacts } from "../../models/Contact"; export function useContacts( messenger: Messenger | undefined, identity: Identity | undefined, - nickname: string | undefined + newNickname: string | undefined ) { - const setNickname = useSetNikcname(); + const [nickname, setNickname] = useState(undefined); const [internalContacts, setInternalContacts] = useState<{ [id: string]: { clock: number; nickname?: string }; }>({}); @@ -37,7 +36,7 @@ export function useContacts( return { ...prev, [id]: { ...prev[id], nickname } }; }); }, - nickname + newNickname ); return newContacts; } @@ -65,5 +64,5 @@ export function useContacts( }); }, [internalContacts]); - return { contacts, setContacts, contactsClass }; + return { contacts, setContacts, contactsClass, nickname }; } diff --git a/packages/react-chat/src/hooks/messenger/useGroupChats.ts b/packages/react-chat/src/hooks/messenger/useGroupChats.ts index 0145e6e9..485949e3 100644 --- a/packages/react-chat/src/hooks/messenger/useGroupChats.ts +++ b/packages/react-chat/src/hooks/messenger/useGroupChats.ts @@ -45,7 +45,6 @@ export function useGroupChats( setChannels((prev) => { return { ...prev, [channel.id]: channel }; }); - setActiveChannel(channel); }; const removeChat = (chat: GroupChat) => { setChannels((prev) => { diff --git a/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts b/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts index b00d2d03..94049521 100644 --- a/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts +++ b/packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts @@ -33,23 +33,29 @@ export function useLoadPrevDay( loadingPreviousMessages.current[id] = true; setLoadingMessages(true); let amountOfMessages = 0; - if (groupChat && groupChats) { - amountOfMessages = await groupChats.retrievePreviousMessages( - id, - startTime, - endTime - ); - } else { - amountOfMessages = await messenger.retrievePreviousMessages( - id, - startTime, - endTime - ); + let failed = true; + try { + if (groupChat && groupChats) { + amountOfMessages = await groupChats.retrievePreviousMessages( + id, + startTime, + endTime + ); + } else { + amountOfMessages = await messenger.retrievePreviousMessages( + id, + startTime, + endTime + ); + } + lastLoadTime.current[id] = startTime; + failed = false; + } catch { + failed = true; } - lastLoadTime.current[id] = startTime; loadingPreviousMessages.current[id] = false; setLoadingMessages(false); - if (amountOfMessages === 0) { + if (amountOfMessages === 0 && !failed) { loadPrevDay(id, groupChat); } } diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts index 6aefdbf6..20564307 100644 --- a/packages/react-chat/src/hooks/messenger/useMessenger.ts +++ b/packages/react-chat/src/hooks/messenger/useMessenger.ts @@ -47,6 +47,7 @@ export type MessengerType = { createGroupChat: (members: string[]) => void; changeGroupChatName: (name: string, chatId: string) => void; addMembers: (members: string[], chatId: string) => void; + nickname: string | undefined; }; function useCreateMessenger(identity: Identity | undefined) { @@ -101,7 +102,7 @@ function useCreateCommunity( export function useMessenger( identity: Identity | undefined, - nickname: string | undefined + newNickname: string | undefined ) { const { communityKey } = useConfig(); const [activeChannel, setActiveChannel] = useState({ @@ -113,10 +114,10 @@ export function useMessenger( const messenger = useCreateMessenger(identity); - const { contacts, setContacts, contactsClass } = useContacts( + const { contacts, setContacts, contactsClass, nickname } = useContacts( messenger, identity, - nickname + newNickname ); const { @@ -258,5 +259,6 @@ export function useMessenger( createGroupChat, changeGroupChatName, addMembers, + nickname, }; } diff --git a/packages/status-communities/src/groupChats.ts b/packages/status-communities/src/groupChats.ts index f54d4155..60699517 100644 --- a/packages/status-communities/src/groupChats.ts +++ b/packages/status-communities/src/groupChats.ts @@ -293,6 +293,10 @@ export class GroupChats { async (message) => await this.decodeUpdateMessage(message, false) ) ); + this.waku.relay.addObserver( + (message) => this.decodeUpdateMessage(message, true), + [topic] + ); await Promise.all( Object.values(this.chats).map(async (chat) => { if (!chat?.removed) { @@ -301,10 +305,6 @@ export class GroupChats { } }) ); - this.waku.relay.addObserver( - (message) => this.decodeUpdateMessage(message, true), - [topic] - ); } private async sendUpdateMessage(