Fix context error and group chats msg loading (#179)

packages/react-chat/src/components/Chat/ChatCreation.tsx

@@ -34,20 +34,28 @@ 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) => {
+  const removeMember = useCallback(
+    (member: string) => {
       setStyledGroup((prev) => prev.filter((e) => e != member));
-  };
+    },
+    [setStyledGroup]
+  );
 
-  const createChat = (group: string[]) => {
+  const createChat = useCallback(
+    (group: string[]) => {
       if (identity) {
         const newGroup = group.slice();
         newGroup.push(bufToHex(identity.publicKey));
@@ -61,14 +69,15 @@ export function ChatCreation({
             });
         setChatState(ChatState.ChatBody);
       }
-  };
+    },
+    [identity, createGroupChat, setChannel]
+  );
 
   return (
     <CreationWrapper>
       <CreationBar>
         <InputBar>
           <InputText>To:</InputText>
-          {styledGroup.length > 0 && (
           <StyledList>
             {styledGroup.map((member) => (
               <StyledMember key={member}>
@@ -79,24 +88,19 @@ export function ChatCreation({
               </StyledMember>
             ))}
           </StyledList>
-          )}
-          <SearchMembers>
           {styledGroup.length < 5 && (
-              <>
+            <SearchMembers>
               <Input
                 value={query}
                 onInput={(e) => setQuery(e.currentTarget.value)}
               />
-                {query && (
               <SearchBlock
                 query={query}
                 discludeList={styledGroup}
                 onClick={addMember}
               />
-                )}
-              </>
-            )}
             </SearchMembers>
+          )}
           {styledGroup.length === 5 && (
             <LimitAlert>5 user Limit reached</LimitAlert>
           )}

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -47,11 +47,13 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
   const inputRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (showEmoji) {
       window.addEventListener("click", () => setShowEmoji(false));
+    }
     return () => {
       window.removeEventListener("click", () => setShowEmoji(false));
     };
-  }, []);
+  }, [showEmoji]);
 
   const image = useMemo(
     () => (imageUint ? uintToImgUrl(imageUint) : ""),

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(

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 (

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 (

packages/react-chat/src/contexts/messengerProvider.tsx

@@ -25,6 +25,7 @@ const MessengerContext = createContext<MessengerType>({
   createGroupChat: () => undefined,
   changeGroupChatName: () => undefined,
   addMembers: () => undefined,
+  nickname: undefined,
 });
 
 export function useMessengerContext() {

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<string | undefined>(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 };
 }

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) => {

packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts

@@ -33,6 +33,8 @@ export function useLoadPrevDay(
             loadingPreviousMessages.current[id] = true;
             setLoadingMessages(true);
             let amountOfMessages = 0;
+            let failed = true;
+            try {
               if (groupChat && groupChats) {
                 amountOfMessages = await groupChats.retrievePreviousMessages(
                   id,
@@ -47,9 +49,13 @@ export function useLoadPrevDay(
                 );
               }
               lastLoadTime.current[id] = startTime;
+              failed = false;
+            } catch {
+              failed = true;
+            }
             loadingPreviousMessages.current[id] = false;
             setLoadingMessages(false);
-            if (amountOfMessages === 0) {
+            if (amountOfMessages === 0 && !failed) {
               loadPrevDay(id, groupChat);
             }
           }

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<ChannelData>({
@@ -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,
   };
 }

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(