From 99fe3b68ff848b9bb72202689feeec941b160015 Mon Sep 17 00:00:00 2001
From: Louis Rouffineau <dev@louis.io>
Date: Thu, 16 Jan 2025 12:12:58 +0100
Subject: [PATCH] Use the QR code or compose button based on whether you are
 viewing your profile or someone else's

---
 screens/Profile.tsx | 140 +++++++++++++-------------------------------
 1 file changed, 40 insertions(+), 100 deletions(-)

diff --git a/screens/Profile.tsx b/screens/Profile.tsx
index d7542b9b8..5496f2917 100644
--- a/screens/Profile.tsx
+++ b/screens/Profile.tsx
@@ -100,11 +100,6 @@ import Animated, {
 } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { VStack } from "@/design-system/VStack";
-import { Button } from "@/design-system/Button/Button";
-
-const $sectionContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
-  marginBottom: spacing.lg,
-});
 
 export default function ProfileScreen() {
   return (
@@ -152,7 +147,6 @@ const ContactCard = memo(function ContactCard({
   avatarUri?: string;
 }) {
   const { theme } = useAppTheme();
-  const colorScheme = useColorScheme();
 
   const rotateX = useSharedValue(0);
   const rotateY = useSharedValue(0);
@@ -245,7 +239,7 @@ const ContactCard = memo(function ContactCard({
   );
 });
 
-function ProfileScreenImpl() {
+const ProfileScreenImpl = () => {
   const { theme, themed } = useAppTheme();
   const router = useRouter();
   const account = useCurrentAccount();
@@ -259,6 +253,19 @@ function ProfileScreenImpl() {
   const setPeersStatus = useSettingsStore((s) => s.setPeersStatus);
   const colorScheme = useColorScheme();
 
+  const userAddress = useCurrentAccount() as string;
+  const isMyProfile = peerAddress.toLowerCase() === userAddress?.toLowerCase();
+  const navigation = useRouter();
+
+  const handleChatPress = useCallback(() => {
+    navigation.dispatch(StackActions.popToTop());
+    navigation.dispatch(
+      StackActions.push("Conversation", {
+        peer: peerAddress,
+      })
+    );
+  }, [navigation, peerAddress]);
+
   useHeader(
     {
       safeAreaEdges: ["top"],
@@ -284,12 +291,16 @@ function ProfileScreenImpl() {
             columnGap: theme.spacing.xxs,
           }}
         >
-          <HeaderAction
-            icon="qrcode"
-            onPress={() => {
-              navigate("ShareProfile");
-            }}
-          />
+          {isMyProfile ? (
+            <HeaderAction
+              icon="qrcode"
+              onPress={() => {
+                navigate("ShareProfile");
+              }}
+            />
+          ) : (
+            <HeaderAction icon="square.and.pencil" onPress={handleChatPress} />
+          )}
           <ContextMenuButton
             style={{
               paddingVertical: theme.spacing.sm,
@@ -366,8 +377,6 @@ function ProfileScreenImpl() {
     [router, theme, peerAddress, preferredUserName, setPeersStatus, colorScheme]
   );
 
-  const navigation = useRouter();
-  const userAddress = useCurrentAccount() as string;
   const [copiedAddresses, setCopiedAddresses] = useState<{
     [address: string]: boolean;
   }>({});
@@ -514,7 +523,6 @@ function ProfileScreenImpl() {
     ),
   ];
 
-  const isMyProfile = peerAddress.toLowerCase() === userAddress?.toLowerCase();
   const appVersion = Constants.expoConfig?.version;
   const buildNumber =
     Platform.OS === "ios"
@@ -528,35 +536,7 @@ function ProfileScreenImpl() {
         id: "message",
         title: translate("send_a_message"),
         titleColor: primaryColor(colorScheme),
-        action: () => {
-          setTimeout(() => {
-            const isPreviouslyInNavStack = navigation
-              .getState()
-              .routes.some((route) => {
-                if (route.name !== "Conversation") {
-                  return false;
-                }
-                const params = route.params as ConversationNavParams;
-                return params?.peer === peerAddress.toLowerCase();
-              });
-            if (isPreviouslyInNavStack) {
-              navigation.popToTop();
-              navigation.navigate({
-                name: "Conversation",
-                params: {
-                  peer: peerAddress,
-                },
-              });
-            } else {
-              navigation.popToTop();
-              navigation.dispatch(
-                StackActions.push("Conversation", {
-                  peer: peerAddress,
-                })
-              );
-            }
-          }, 300);
-        },
+        action: handleChatPress,
         leftView:
           Platform.OS === "android" ? (
             <TableViewPicto
@@ -796,36 +776,9 @@ function ProfileScreenImpl() {
     promoteToSuperAdmin,
     revokeSuperAdmin,
     revokeAdmin,
+    handleChatPress,
   ]);
 
-  const handleChatPress = useCallback(() => {
-    const isPreviouslyInNavStack = navigation
-      .getState()
-      .routes.some((route) => {
-        if (route.name !== "Conversation") {
-          return false;
-        }
-        const params = route.params as ConversationNavParams;
-        return params?.peer === peerAddress.toLowerCase();
-      });
-    if (isPreviouslyInNavStack) {
-      navigation.popToTop();
-      navigation.navigate({
-        name: "Conversation",
-        params: {
-          peer: peerAddress,
-        },
-      });
-    } else {
-      navigation.popToTop();
-      navigation.dispatch(
-        StackActions.push("Conversation", {
-          peer: peerAddress,
-        })
-      );
-    }
-  }, [navigation, peerAddress]);
-
   return (
     <ScrollView
       style={{
@@ -844,25 +797,8 @@ function ProfileScreenImpl() {
         />
       )}
 
-      <Button
-        onPress={handleChatPress}
-        text="Chat"
-        variant="outline"
-        style={{
-          marginTop: theme.spacing.xxxs,
-          marginBottom: theme.spacing.xl,
-        }}
-      />
-
       {isMyProfile && shouldShowError && (
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "center",
-            marginBottom: theme.spacing.lg,
-          }}
-        >
+        <View style={themed($errorContainer)}>
           <Icon
             icon="exclamationmark.triangle"
             color={dangerColor(colorScheme)}
@@ -930,14 +866,7 @@ function ProfileScreenImpl() {
               id: "message",
               title: translate("send_a_message"),
               titleColor: primaryColor(colorScheme),
-              action: () => {
-                navigation.popToTop();
-                navigation.dispatch(
-                  StackActions.push("Conversation", {
-                    peer: route.params.address,
-                  })
-                );
-              },
+              action: handleChatPress,
             },
           ]}
           style={themed($sectionContainer)}
@@ -1117,4 +1046,15 @@ function ProfileScreenImpl() {
       <View style={{ height: insets.bottom }} />
     </ScrollView>
   );
-}
+};
+
+const $sectionContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  marginBottom: spacing.lg,
+});
+
+const $errorContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  marginBottom: spacing.lg,
+});