Fix profile settings update flow and improve editor UX

components/ProfileHeader.js

@@ -1,21 +1,39 @@
 import React, { useState, useEffect } from 'react';
-import { View, Share } from 'react-native';
+import { View, Share, TouchableOpacity } from 'react-native';
 import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import UserName from './UserName';
 import FollowButton from './basics/FollowButton';
+import { useNavigation } from '@react-navigation/native';
+import { useSnapshot } from 'valtio';
+import GlobalState from '../contexts/GlobalState.js';
 
 const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
 
 const ProfileHeader = ({ profileObj }) => {
+    const navigation = useNavigation();
+    const viewer = useSnapshot(GlobalState).me || {};
     const safeProfileObj = profileObj || {};
     const safeProfile = safeProfileObj.profile || {};
     let photoUrl = safeProfile.photo ? 'https://social.emmint.com/' + safeProfile.photo + '?width=1000&height=1000' : DefaultPhoto;
+    const canEditProfileImage = !!(
+        safeProfileObj?._id &&
+        !safeProfileObj?.isGroup &&
+        String(safeProfileObj._id) === String(viewer?._id || '')
+    );
+
+    const handlePressPhoto = () => {
+        if (!canEditProfileImage) return;
+        navigation.navigate("ProfileSettings");
+    };
+
     return (
         <>
             <Card elevation={3}>
-                <Card.Cover source={{ uri: photoUrl, cache: 'force-cache' }} style={{
-                    height: 300
-                }} />
+                <TouchableOpacity activeOpacity={canEditProfileImage ? 0.8 : 1} onPress={handlePressPhoto}>
+                    <Card.Cover source={{ uri: photoUrl, cache: 'force-cache' }} style={{
+                        height: 300
+                    }} />
+                </TouchableOpacity>
                 <Card.Content style={{}}>
                     <Title style={{ position: "absolute", top: -60, left: 10, backgroundColor: "rgba(255,255,255,0.4)", padding: 10 }}>
                         <UserName profileid={safeProfileObj._id} />