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

2022-01-10 13:44:02 +01:00 · 2022-01-10 13:44:02 +01:00 · 7c0668d010
parent fe3c189f00
commit 7c0668d010
11 changed files with 94 additions and 83 deletions
--- 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 (
    <CreationWrapper>
      <CreationBar>
        <InputBar>
          <InputText>To:</InputText>
-          {styledGroup.length > 0 && (
-            <StyledList>
-              {styledGroup.map((member) => (
-                <StyledMember key={member}>
-                  <StyledName>{member.slice(0, 10)}</StyledName>
-                  <CloseButton onClick={() => removeMember(member)}>
-                    <CrossIcon memberView={true} />
-                  </CloseButton>
-                </StyledMember>
-              ))}
-            </StyledList>
+          <StyledList>
+            {styledGroup.map((member) => (
+              <StyledMember key={member}>
+                <StyledName>{member.slice(0, 10)}</StyledName>
+                <CloseButton onClick={() => removeMember(member)}>
+                  <CrossIcon memberView={true} />
+                </CloseButton>
+              </StyledMember>
+            ))}
+          </StyledList>
+          {styledGroup.length < 5 && (
+            <SearchMembers>
+              <Input
+                value={query}
+                onInput={(e) => setQuery(e.currentTarget.value)}
+              />
+              <SearchBlock
+                query={query}
+                discludeList={styledGroup}
+                onClick={addMember}
+              />
+            </SearchMembers>
          )}
-          <SearchMembers>
-            {styledGroup.length < 5 && (
-              <>
-                <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>
          )}
--- 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<HTMLDivElement>(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) : ""),
--- 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(
--- 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 (
--- 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 (
--- a/packages/react-chat/src/contexts/messengerProvider.tsx
+++ b/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() {
--- 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<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 };
 }
--- 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) => {
--- 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);
            }
          }
--- 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<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,
  };
 }
--- 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(