fix the profile update through all the app

app/containers/RoomItem/IconOrAvatar.tsx

@@ -18,11 +18,19 @@ const IconOrAvatar = ({
 	teamMain,
 	showLastMessage,
 	displayMode,
-	sourceType
+	sourceType,
+	isUserProfile
 }: IIconOrAvatar): React.ReactElement | null => {
 	if (showAvatar) {
 		return (
-			<Avatar text={avatar} size={displayMode === DisplayMode.Condensed ? 36 : 48} type={type} style={styles.avatar} rid={rid} />
+			<Avatar
+				isUserProfile={isUserProfile}
+				text={avatar}
+				size={displayMode === DisplayMode.Condensed ? 36 : 48}
+				type={type}
+				style={styles.avatar}
+				rid={rid}
+			/>
 		);
 	}
 

app/containers/RoomItem/RoomItem.tsx

@@ -52,7 +52,8 @@ const RoomItem = ({
 	showAvatar,
 	displayMode,
 	sourceType,
-	hideMentionStatus
+	hideMentionStatus,
+	isUserProfile
 }: IRoomItemProps) => (
 	<Touchable
 		onPress={onPress}
@@ -83,6 +84,7 @@ const RoomItem = ({
 			showAvatar={showAvatar}
 			showLastMessage={!!showLastMessage}
 			sourceType={sourceType}
+			isUserProfile={isUserProfile}
 		>
 			{showLastMessage && displayMode === DisplayMode.Expanded ? (
 				<>

app/containers/RoomItem/index.tsx

@@ -34,7 +34,8 @@ const RoomItemContainer = React.memo(
 		getRoomTitle = () => 'title',
 		getRoomAvatar = () => '',
 		getIsRead = () => false,
-		swipeEnabled = true
+		swipeEnabled = true,
+		isUserProfile
 	}: IRoomItemContainerProps) => {
 		const name = getRoomTitle(item);
 		const testID = `rooms-list-view-item-${name}`;
@@ -127,6 +128,7 @@ const RoomItemContainer = React.memo(
 				showAvatar={showAvatar}
 				displayMode={displayMode}
 				sourceType={item.source}
+				isUserProfile={isUserProfile}
 			/>
 		);
 	},

app/containers/RoomItem/interfaces.ts

@@ -47,6 +47,7 @@ export interface IWrapperProps {
 	teamMain: boolean;
 	showAvatar: boolean;
 	sourceType: IOmnichannelSource;
+	isUserProfile: boolean;
 }
 
 export interface ITypeIconProps {
@@ -116,6 +117,7 @@ export interface IRoomItemProps extends IBaseRoomItem {
 	size?: number;
 	sourceType: IOmnichannelSource;
 	hideMentionStatus?: boolean;
+	isUserProfile: boolean;
 }
 
 export interface ILastMessageProps {
@@ -152,4 +154,5 @@ export interface IIconOrAvatar {
 	teamMain: boolean;
 	showLastMessage: boolean;
 	sourceType: IOmnichannelSource;
+	isUserProfile: boolean;
 }

app/containers/UserItem.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Pressable, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
+import { useAppSelector } from '../lib/hooks';
+import { getUserSelector } from '../selectors/login';
 import Avatar from './Avatar';
 import { CustomIcon, TIconsName } from './CustomIcon';
 import sharedStyles from '../views/Styles';
@@ -43,10 +45,12 @@ interface IUserItem {
 	style?: StyleProp<ViewStyle>;
 	icon?: TIconsName | null;
 	iconColor?: string;
+	id?: string;
 }
 
-const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, iconColor }: IUserItem) => {
+const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, iconColor, id }: IUserItem) => {
 	const { colors } = useTheme();
+	const { userId } = useAppSelector(state => ({ userId: getUserSelector(state).id }));
 
 	return (
 		<Pressable
@@ -61,7 +65,7 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, i
 			})}
 		>
 			<View style={[styles.container, styles.button, style]}>
-				<Avatar text={username} size={30} style={styles.avatar} />
+				<Avatar text={username} size={30} style={styles.avatar} isUserProfile={userId === id} />
 				<View style={styles.textContainer}>
 					<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
 						{name}

app/containers/message/MessageAvatar.tsx

@@ -20,6 +20,7 @@ const MessageAvatar = React.memo(({ isHeader, avatar, author, small, navToRoomIn
 				size={small ? 20 : 36}
 				borderRadius={small ? 2 : 4}
 				onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
+				isUserProfile={author._id === user.id}
 				getCustomEmoji={getCustomEmoji}
 				avatar={avatar}
 				emoji={emoji}

app/views/NewMessageView/index.tsx

@@ -93,6 +93,7 @@ const NewMessageView = () => {
 
 					return (
 						<UserItem
+							id={item._id}
 							name={useRealName && itemSearch.fname ? itemSearch.fname : itemModel.name}
 							username={itemSearch.search ? itemSearch.username : itemModel.name}
 							onPress={() => goRoom(itemModel)}

app/views/RoomInfoView/index.tsx

@@ -183,17 +183,17 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 			title: t === SubscriptionType.DIRECT ? I18n.t('User_Info') : I18n.t('Room_Info'),
 			headerRight: showEdit
 				? () => (
-						<HeaderButton.Container>
+					<HeaderButton.Container>
-							<HeaderButton.Item
+						<HeaderButton.Item
-								iconName='edit'
+							iconName='edit'
-								onPress={() => {
+							onPress={() => {
-									const isLivechat = t === SubscriptionType.OMNICHANNEL;
+								const isLivechat = t === SubscriptionType.OMNICHANNEL;
-									logEvent(events[`RI_GO_${isLivechat ? 'LIVECHAT' : 'RI'}_EDIT`]);
+								logEvent(events[`RI_GO_${isLivechat ? 'LIVECHAT' : 'RI'}_EDIT`]);
-									navigation.navigate(isLivechat ? 'LivechatEditView' : 'RoomInfoEditView', { rid, room, roomUser });
+								navigation.navigate(isLivechat ? 'LivechatEditView' : 'RoomInfoEditView', { rid, room, roomUser });
-								}}
+							}}
-								testID='room-info-view-edit-button'
+							testID='room-info-view-edit-button'
-							/>
+						/>
-						</HeaderButton.Container>
+					</HeaderButton.Container>
 				  )
 				: undefined
 		});
@@ -399,11 +399,26 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 			log(e);
 		}
 	};
+
+	handleEditAvatar = () => {
+		const {navigation} = this.props
+		navigation.navigate("ChangeAvatarView",{titleHeader:I18n.t('Room_Info')})
+	}
+
 	renderAvatar = (room: ISubscription, roomUser: IUserParsed) => {
 		const { theme } = this.props;
+		const { showEdit } = this.state;
+		const showAvatarEdit = showEdit && this.t !== SubscriptionType.OMNICHANNEL;
 
 		return (
-			<Avatar text={room.name || roomUser.username} style={styles.avatar} type={this.t} size={100} rid={room?.rid}>
+			<Avatar
+				text={room.name || roomUser.username}
+				style={styles.avatar}
+				type={this.t}
+				size={100}
+				rid={room?.rid}
+				handleEdit={showAvatarEdit ? this.handleEditAvatar : undefined}
+			>
 				{this.t === SubscriptionType.DIRECT && roomUser._id ? (
 					<View style={[sharedStyles.status, { backgroundColor: themes[theme].auxiliaryBackground }]}>
 						<Status size={20} id={roomUser._id} />

app/views/RoomInfoView/styles.ts

@@ -27,7 +27,7 @@ export default StyleSheet.create({
 		marginHorizontal: 10
 	},
 	roomTitleContainer: {
-		paddingTop: 20,
+		paddingTop: 32,
 		marginHorizontal: 16,
 		alignItems: 'center'
 	},

app/views/RoomsListView/index.tsx

@@ -935,7 +935,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 		const { item: currentItem } = this.state;
 		const {
-			user: { username },
+			user: { username, id: userId },
 			StoreLastMessage,
 			useRealName,
 			isMasterDetail,
@@ -945,6 +945,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		} = this.props;
 		const id = getUidDirectMessage(item);
 		const swipeEnabled = this.isSwipeEnabled(item);
+		const isUserProfile = id === userId;
 
 		return (
 			<RoomItem
@@ -965,6 +966,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 				swipeEnabled={swipeEnabled}
 				showAvatar={showAvatar}
 				displayMode={displayMode}
+				isUserProfile={isUserProfile}
 			/>
 		);
 	};

app/views/SelectedUsersView/index.tsx

@@ -155,6 +155,7 @@ const SelectedUsersView = () => {
 					const username = item.search ? (item.username as string) : item.name;
 					return (
 						<UserItem
+							id={item._id}
 							name={name}
 							username={username}
 							onPress={() => _onPressItem(item)}