refactor: Profile Editing & Component Architecture Improvements (#1586)

Co-authored-by: Thierry <[email protected]>

Author: lourou

components/AccountSettingsButton.tsx

@@ -1,4 +1,4 @@
-import { IProfileSocials } from "@/features/profiles/profile-types";
+import { IProfileSocials } from "@/features/profiles/profile.types";
 import { getInboxProfileSocialsQueryConfig } from "@/queries/useInboxProfileSocialsQuery";
 import { captureErrorWithFriendlyToast } from "@/utils/capture-error";
 import { GroupWithCodecsType } from "@/utils/xmtpRN/xmtp-client/xmtp-client.types";
@@ -130,10 +130,11 @@ export const GroupScreenMembersTable: FC<GroupScreenMembersTableProps> = memo(
               async (selectedIndex?: number) => {
                 switch (selectedIndex) {
                   case 0:
-                    navigate("Profile", {
-                      address: a.address,
-                      fromGroupTopic: topic,
-                    });
+                    // TODO
+                    // navigate("Profile", {
+                    //   address: a.address,
+                    //   fromGroupTopic: topic,
+                    // });
                     break;
                   case promoteSuperAdminIndex:
                     logger.debug("Promoting super admin...");
@@ -221,7 +222,6 @@ export const GroupScreenMembersTable: FC<GroupScreenMembersTableProps> = memo(
       revokeSuperAdmin,
       styles.adminText,
       styles.tableViewRight,
-      topic,
     ]);
 
     return (

containers/GroupScreenMembersTable.tsx

@@ -9,12 +9,10 @@ import { ISettingsListRow } from "./settings-list.types";
 
 type ISettingsListRowProps = {
   row: ISettingsListRow;
-  editMode?: boolean;
 };
 
 export const SettingsListRow = memo(function SettingsListRow({
   row,
-  editMode,
 }: ISettingsListRowProps) {
   const { theme, themed } = useAppTheme();
 

design-system/settings-list/settings-list-row.tsx

@@ -1,28 +1,22 @@
+import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme";
 import React, { memo } from "react";
 import { View, ViewStyle } from "react-native";
-import { useAppTheme, ThemedStyle } from "@/theme/useAppTheme";
 import { SettingsListRow } from "./settings-list-row";
 import { ISettingsListRow } from "./settings-list.types";
 
 type ISettingsListProps = {
   rows: ISettingsListRow[];
-  editMode?: boolean;
 };
 
 export const SettingsList = memo(function SettingsList({
   rows,
-  editMode,
 }: ISettingsListProps) {
   const { themed } = useAppTheme();
 
   return (
     <View style={themed($container)}>
       {rows.map((row, index) => (
-        <SettingsListRow
-          key={row.label + index}
-          row={row}
-          editMode={editMode}
-        />
+        <SettingsListRow key={row.label + index} row={row} />
       ))}
     </View>
   );

design-system/settings-list/settings-list.tsx

@@ -137,7 +137,6 @@ function HeaderTitle() {
 function ProfileAvatar() {
   const { theme, themed } = useAppTheme();
   const navigation = useNavigation();
-  const currentAccount = useCurrentAccount();
   const currentAccountInboxId = useSafeCurrentAccountInboxId();
   const { data: preferredName } = usePreferredInboxName({
     inboxId: currentAccountInboxId,
@@ -154,7 +153,7 @@ function ProfileAvatar() {
     <Pressable
       onPress={() => {
         navigation.navigate("Profile", {
-          address: currentAccount!,
+          inboxId: currentAccountInboxId,
         });
       }}
       hitSlop={theme.spacing.sm}

features/conversation-list/conversation-list.screen-header.tsx

@@ -101,7 +101,7 @@ export function ChatGroupMemberLeft({ inboxId }: IChatGroupMemberLeftProps) {
         style={themed($pressableContent)}
         onPress={() => {
           navigate("Profile", {
-            address: firstSocials.address ?? "",
+            inboxId,
           });
         }}
       >
@@ -151,7 +151,7 @@ function ChatGroupMemberJoined({ inboxId }: IChatGroupMemberJoinedProps) {
       <Pressable
         onPress={() => {
           navigate("Profile", {
-            address: firstSocials.address ?? "",
+            inboxId,
           });
         }}
         style={themed($pressableContent)}
@@ -225,7 +225,7 @@ function ChatGroupMetadataUpdate({
       <Pressable
         onPress={() => {
           navigate("Profile", {
-            address: firstSocials.address ?? "",
+            inboxId: initiatorInboxId,
           });
         }}
         style={themed($pressableContent)}

features/conversation/conversation-message/conversation-message-content-types/conversation-message-chat-group-update.tsx

@@ -100,11 +100,11 @@ export function useConversationMessageReactionsRolledUp(args: {
     }));
 
     return {
+      messageId,
       totalCount,
       userReacted,
       preview,
       detailed,
-      messageId,
     };
   }, [reactionsBySender, membersSocials, messageId]);
 }

features/conversation/conversation-message/conversation-message-reactions/use-conversation-message-reactions-rolled-up.tsx

@@ -27,9 +27,9 @@ export function ConversationSenderAvatar({
 
   const openProfile = useCallback(() => {
     if (address) {
-      navigate("Profile", { address });
+      navigate("Profile", { inboxId });
     }
-  }, [address]);
+  }, [address, inboxId]);
 
   return (
     <TouchableOpacity onPress={openProfile}>

features/conversation/conversation-message/conversation-message-sender-avatar.tsx

@@ -1,5 +1,4 @@
 import { ConversationHeaderTitle } from "@/features/conversation/conversation-screen-header/conversation-screen-header-title";
-import { usePreferredInboxAddress } from "@/hooks/usePreferredInboxAddress";
 import { usePreferredInboxAvatar } from "@/hooks/usePreferredInboxAvatar";
 import { usePreferredInboxName } from "@/hooks/usePreferredInboxName";
 import { useDmPeerInboxIdQuery } from "@/queries/use-dm-peer-inbox-id-query";
@@ -28,15 +27,11 @@ export const DmConversationTitle = ({ topic }: DmConversationTitleProps) => {
     caller: "DmConversationTitle",
   });
 
-  const { data: peerAddress } = usePreferredInboxAddress({
-    inboxId: peerInboxId!,
-  });
-
   const onPress = useCallback(() => {
-    if (peerAddress) {
-      navigation.push("Profile", { address: peerAddress });
+    if (peerInboxId) {
+      navigation.push("Profile", { inboxId: peerInboxId });
     }
-  }, [navigation, peerAddress]);
+  }, [navigation, peerInboxId]);
 
   const onLongPress = useCallback(() => {
     copyToClipboard(JSON.stringify(topic));

features/conversation/conversation-screen-header/conversation-screen-dm-header-title.tsx

@@ -1,5 +1,7 @@
-import { getCurrentAccount } from "@/features/multi-inbox/multi-inbox.store";
-import { getSafeCurrentSender } from "@/features/multi-inbox/multi-inbox.store";
+import {
+  getCurrentAccount,
+  getSafeCurrentSender,
+} from "@/features/multi-inbox/multi-inbox.store";
 import {
   ensureDmPeerInboxIdQueryData,
   getDmPeerInboxIdQueryData,

features/conversation/conversation-screen-header/conversation-screen-new-dm-header-title.tsx

@@ -24,7 +24,9 @@ import { SearchBar } from "@/components/SearchBar";
 import TableView from "@/components/TableView/TableView";
 import { TableViewPicto } from "@/components/TableView/TableViewImage";
 import { config } from "@/config";
-import { IProfileSocials } from "@/features/profiles/profile-types";
+import { ActivityIndicator } from "@/design-system/activity-indicator";
+import { getSafeCurrentSender } from "@/features/multi-inbox/multi-inbox.store";
+import { IProfileSocials } from "@/features/profiles/profile.types";
 import { useGroupMembers } from "@/hooks/useGroupMembers";
 import { translate } from "@/i18n";
 import { setProfileRecordSocialsQueryData } from "@/queries/useProfileSocialsQuery";
@@ -35,8 +37,6 @@ import { getCleanAddress } from "@/utils/evm/getCleanAddress";
 import { isEmptyObject } from "@/utils/objects";
 import { getPreferredName } from "@/utils/profile";
 import { accountCanMessagePeer } from "@/utils/xmtpRN/xmtp-consent/account-can-message-peer";
-import { ActivityIndicator } from "@/design-system/activity-indicator";
-import { getSafeCurrentSender } from "@/features/multi-inbox/multi-inbox.store";
 export function InviteUsersToExistingGroupScreen({
   route,
   navigation,