fix: display inbox that just joined group

ephemeraHQ · Jun 28, 2024 · e872c5e · e872c5e
1 parent f886c88
commit e872c5e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 45 deletions.
diff --git a/components/Chat/ChatGroupUpdatedMessage.tsx b/components/Chat/ChatGroupUpdatedMessage.tsx
@@ -4,9 +4,8 @@ import { useMemo } from "react";
 import { StyleSheet, Text, useColorScheme } from "react-native";
 
 import {
-  currentAccount,
-  getInboxIdStore,
-  getProfilesStore,
+  useInboxIdStore,
+  useProfilesStore,
 } from "../../data/store/accountsStore";
 import { getPreferredName } from "../../utils/profile";
 import { MessageToDisplay } from "./Message/Message";
@@ -17,48 +16,55 @@ export default function ChatGroupUpdatedMessage({
   message: MessageToDisplay;
 }) {
   const styles = useStyles();
-  const membersActions = useMemo(() => {
-    const content = JSON.parse(message.content) as GroupUpdatedContent;
-    const textMessages: string[] = [];
-    const profiles = getProfilesStore(currentAccount()).getState().profiles;
-    const byInboxId = getInboxIdStore(currentAccount()).getState().byInboxId;
+  const byInboxId = useInboxIdStore().byInboxId;
+  const profiles = useProfilesStore().profiles;
+  // JSON Parsing is heavy so useMemo
+  const parsedContent = useMemo(
+    () => JSON.parse(message.content) as GroupUpdatedContent,
+    [message.content]
+  );
+
+  // TODO: Feat: handle multiple members
+  const initiatedByAddress = byInboxId[parsedContent.initiatedByInboxId]?.[0];
+  const initiatedByReadableName = getPreferredName(
+    profiles[initiatedByAddress]?.socials,
+    initiatedByAddress
+  );
+  const membersActions: string[] = [];
+  parsedContent.membersAdded.forEach((m) => {
     // TODO: Feat: handle multiple members
-    const initiatedByAddress = byInboxId[content.initiatedByInboxId]?.[0];
-    const initiatedByReadableName = getPreferredName(
-      profiles[initiatedByAddress]?.socials,
-      initiatedByAddress
+    const firstAddress = byInboxId[m.inboxId]?.[0];
+    // We haven't synced yet the members
+    if (!firstAddress) return;
+    const readableName = getPreferredName(
+      profiles[firstAddress]?.socials,
+      firstAddress
     );
-    content.membersAdded.forEach((m) => {
-      // TODO: Feat: handle multiple members
-      const firstAddress = byInboxId[m.inboxId]?.[0];
-      const readableName = getPreferredName(
-        profiles[firstAddress]?.socials,
-        firstAddress
+    membersActions.push(`${readableName} joined the conversation`);
+  });
+  parsedContent.membersRemoved.forEach((m) => {
+    // TODO: Feat: handle multiple members
+    const firstAddress = byInboxId[m.inboxId]?.[0];
+    // We haven't synced yet the members
+    if (!firstAddress) return;
+    const readableName = getPreferredName(
+      profiles[firstAddress]?.socials,
+      firstAddress
+    );
+    membersActions.push(`${readableName} left the conversation`);
+  });
+  parsedContent.metadataFieldsChanged.forEach((f) => {
+    if (f.fieldName === "group_name") {
+      membersActions.push(
+        `The group name was changed to ${f.newValue} by ${initiatedByReadableName}`
       );
-      textMessages.push(`${readableName} joined the conversation`);
-    });
-    content.membersRemoved.forEach((m) => {
-      // TODO: Feat: handle multiple members
-      const firstAddress = byInboxId[m.inboxId]?.[0];
-      const readableName = getPreferredName(
-        profiles[firstAddress]?.socials,
-        firstAddress
+    } else if (f.fieldName === "group_image_url_square") {
+      membersActions.push(
+        `The group photo was changed by ${initiatedByReadableName}`
       );
-      textMessages.push(`${readableName} left the conversation`);
-    });
-    content.metadataFieldsChanged.forEach((f) => {
-      if (f.fieldName === "group_name") {
-        textMessages.push(
-          `The group name was changed to ${f.newValue} by ${initiatedByReadableName}`
-        );
-      } else if (f.fieldName === "group_image_url_square") {
-        textMessages.push(
-          `The group photo was changed by ${initiatedByReadableName}`
-        );
-      }
-    });
-    return textMessages;
-  }, [message.content]);
+    }
+  });
+
   return (
     <>
       {membersActions.map((a) => (

diff --git a/data/helpers/messages/handleGroupUpdatedMessage.ts b/data/helpers/messages/handleGroupUpdatedMessage.ts
@@ -1,18 +1,21 @@
+import { refreshGroup } from "@utils/xmtpRN/conversations";
 import { GroupUpdatedContent } from "@xmtp/react-native-sdk";
 
 import { invalidateGroupMembersQuery } from "../../../queries/useGroupMembersQuery";
 import { invalidateGroupNameQuery } from "../../../queries/useGroupNameQuery";
 import { invalidateGroupPhotoQuery } from "../../../queries/useGroupPhotoQuery";
 import { DecodedMessageWithCodecsType } from "../../../utils/xmtpRN/client";
 
-export const handleGroupUpdatedMessage = (
+export const handleGroupUpdatedMessage = async (
   account: string,
   topic: string,
   message: DecodedMessageWithCodecsType
 ) => {
   if (!message.contentTypeId.includes("group_updated")) return;
   const content = message.content() as GroupUpdatedContent;
   if (content.membersAdded.length > 0 || content.membersRemoved.length > 0) {
+    // This will refresh members
+    await refreshGroup(account, topic);
     invalidateGroupMembersQuery(account, topic);
   }
   if (content.metadataFieldsChanged.length > 0) {

diff --git a/data/store/inboxIdStore.ts b/data/store/inboxIdStore.ts
@@ -69,12 +69,14 @@ export const initInboxIdStore = (account: string) => {
               }
               const newState = { ...state };
               members.forEach((member) => {
-                newState.byInboxId[member.inboxId] =
-                  newState.byInboxId[member.inboxId] ?? [];
+                const addresses = new Set(
+                  newState.byInboxId[member.inboxId] ?? []
+                );
                 for (const address of member.addresses) {
                   newState.byAddress[address] = member.inboxId;
-                  newState.byInboxId[member.inboxId].push(address);
+                  addresses.add(address);
                 }
+                newState.byInboxId[member.inboxId] = Array.from(addresses);
               });
               return newState;
             }),

diff --git a/utils/xmtpRN/conversations.ts b/utils/xmtpRN/conversations.ts
@@ -508,6 +508,8 @@ export const refreshGroup = async (account: string, topic: string) => {
     [await protocolGroupToStateConversation(group)],
     true
   );
+  const members = await group.members();
+  saveMemberInboxIds(account, members);
 };
 
 export const loadConversationsHmacKeys = async (account: string) => {