feat: enable navigate to my own profile from messages (#5293)

* enable navigation to my own profile

* fix block user logic

* fix types

* enable navigation to my own profile

* update snapshot

app/containers/message/MessageAvatar.tsx

@@ -9,17 +9,19 @@ import { SubscriptionType } from '../../definitions';
 const MessageAvatar = React.memo(({ isHeader, avatar, author, small, navToRoomInfo, emoji, getCustomEmoji }: IMessageAvatar) => {
 	const { user } = useContext(MessageContext);
 	if (isHeader && author) {
-		const navParam = {
+		const onPress = () =>
-			t: SubscriptionType.DIRECT,
+			navToRoomInfo({
-			rid: author._id
+				t: SubscriptionType.DIRECT,
-		};
+				rid: author._id,
+				itsMe: author._id === user.id
+			});
 		return (
 			<Avatar
 				style={small ? styles.avatarSmall : styles.avatar}
 				text={avatar ? '' : author.username}
 				size={small ? 20 : 36}
 				borderRadius={4}
-				onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
+				onPress={onPress}
 				getCustomEmoji={getCustomEmoji}
 				avatar={avatar}
 				emoji={emoji}

app/containers/message/User.tsx

@@ -1,16 +1,15 @@
+import moment from 'moment';
 import React, { useContext } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import moment from 'moment';
 
-import { themes } from '../../lib/constants';
-import { useTheme } from '../../theme';
-import sharedStyles from '../../views/Styles';
-import messageStyles from './styles';
-import MessageContext from './Context';
-import { messageHaveAuthorName } from './utils';
 import { MessageType, MessageTypesValues, SubscriptionType } from '../../definitions';
+import { useTheme } from '../../theme';
 import { IRoomInfoParam } from '../../views/SearchMessagesView';
+import sharedStyles from '../../views/Styles';
 import RightIcons from './Components/RightIcons';
+import MessageContext from './Context';
+import messageStyles from './styles';
+import { messageHaveAuthorName } from './utils';
 
 const styles = StyleSheet.create({
 	container: {
@@ -66,21 +65,21 @@ interface IMessageUser {
 const User = React.memo(
 	({ isHeader, useRealName, author, alias, ts, timeFormat, hasError, navToRoomInfo, type, isEdited, ...props }: IMessageUser) => {
 		const { user } = useContext(MessageContext);
-		const { theme } = useTheme();
+		const { colors } = useTheme();
 
 		if (isHeader) {
 			const username = (useRealName && author?.name) || author?.username;
-			const aliasUsername = alias ? (
+			const aliasUsername = alias ? <Text style={[styles.alias, { color: colors.auxiliaryText }]}> @{username}</Text> : null;
-				<Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text>
-			) : null;
 			const time = moment(ts).format(timeFormat);
+			const itsMe = author?._id === user.id;
+
 			const onUserPress = () => {
 				navToRoomInfo?.({
 					t: SubscriptionType.DIRECT,
-					rid: author?._id || ''
+					rid: author?._id || '',
+					itsMe
 				});
 			};
-			const isDisabled = author?._id === user.id;
 
 			const textContent = (
 				<>
@@ -88,14 +87,10 @@ const User = React.memo(
 					{aliasUsername}
 				</>
 			);
+
 			if (messageHaveAuthorName(type as MessageTypesValues)) {
 				return (
-					<Text
+					<Text style={[styles.usernameInfoMessage, { color: colors.titleText }]} onPress={onUserPress}>
-						style={[styles.usernameInfoMessage, { color: themes[theme].titleText }]}
-						onPress={onUserPress}
-						// @ts-ignore // TODO - check this prop
-						disabled={isDisabled}
-					>
 						{textContent}
 					</Text>
 				);
@@ -103,11 +98,11 @@ const User = React.memo(
 
 			return (
 				<View style={styles.container}>
-					<TouchableOpacity style={styles.titleContainer} onPress={onUserPress} disabled={isDisabled}>
+					<TouchableOpacity style={styles.titleContainer} onPress={onUserPress}>
-						<Text style={[styles.username, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.username, { color: colors.titleText }]} numberOfLines={1}>
 							{textContent}
 						</Text>
-						<Text style={[messageStyles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
+						<Text style={[messageStyles.time, { color: colors.auxiliaryText }]}>{time}</Text>
 					</TouchableOpacity>
 					<RightIcons
 						type={type}

app/lib/methods/helpers/helpers.ts

@@ -21,6 +21,10 @@ export function getUidDirectMessage(room) {
 		return null;
 	}
 
+	if (room.itsMe) {
+		return userId;
+	}
+
 	// legacy method
 	if (!room?.uids && room.rid && room.t === 'd' && userId) {
 		return room.rid.replace(userId, '').trim();

app/stacks/types.ts

@@ -69,6 +69,7 @@ export type ChatsStackParamList = {
 		t: SubscriptionType;
 		showCloseModal?: boolean;
 		fromRid?: string;
+		itsMe?: boolean;
 	};
 	RoomInfoEditView: {
 		rid: string;

app/views/MessagesView/index.tsx

@@ -126,10 +126,7 @@ class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewStat
 	};
 
 	navToRoomInfo = (navParam: IRoomInfoParam) => {
-		const { navigation, user } = this.props;
+		const { navigation } = this.props;
-		if (navParam.rid === user.id) {
-			return;
-		}
 		navigation.navigate('RoomInfoView', navParam);
 	};
 

app/views/RoomInfoView/components/RoomInfoButtons.tsx

@@ -75,15 +75,14 @@ export const RoomInfoButtons = ({
 }: IRoomInfoButtons): React.ReactElement => {
 	const room = roomFromRid || roomFromProps;
 	// Following the web behavior, when is a DM with myself, shouldn't appear block or ignore option
-	const isDmWithMyself = room?.uids && room.uids?.filter((uid: string) => uid !== roomUserId).length === 0;
+	const isDmWithMyself = room?.uids?.filter((uid: string) => uid !== roomUserId).length === 0;
-
 	const isFromDm = room?.t === SubscriptionType.DIRECT;
 	const isDirectFromSaved = isDirect && fromRid && room;
 	const isIgnored = room?.ignored?.includes?.(roomUserId || '');
 	const isBlocked = room?.blocker;
 
 	const renderIgnoreUser = isDirectFromSaved && !isFromDm && !isDmWithMyself;
-	const renderBlockUser = isDirectFromSaved && isFromDm;
+	const renderBlockUser = isDirectFromSaved && isFromDm && !isDmWithMyself;
 
 	return (
 		<View style={styles.roomButtonsContainer}>

app/views/RoomInfoView/index.tsx

@@ -39,7 +39,7 @@ type TRoomInfoViewRouteProp = RouteProp<ChatsStackParamList, 'RoomInfoView'>;
 
 const RoomInfoView = (): React.ReactElement => {
 	const {
-		params: { rid, t, fromRid, member, room: roomParam, showCloseModal }
+		params: { rid, t, fromRid, member, room: roomParam, showCloseModal, itsMe }
 	} = useRoute<TRoomInfoViewRouteProp>();
 	const { addListener, setOptions, navigate, goBack } = useNavigation<TRoomInfoViewNavigationProp>();
 
@@ -157,7 +157,7 @@ const RoomInfoView = (): React.ReactElement => {
 	const loadUser = async () => {
 		if (isEmpty(roomUser)) {
 			try {
-				const roomUserId = getUidDirectMessage(room || { rid, t });
+				const roomUserId = getUidDirectMessage(room || { rid, t, itsMe });
 				const result = await Services.getUserInfo(roomUserId);
 				if (result.success) {
 					const { user } = result;

app/views/RoomView/index.tsx

@@ -1133,13 +1133,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	};
 
 	navToRoomInfo = (navParam: any) => {
-		const { navigation, user, isMasterDetail } = this.props;
+		const { navigation, isMasterDetail } = this.props;
 		const { room } = this.state;
-
 		logEvent(events[`ROOM_GO_${navParam.t === 'd' ? 'USER' : 'ROOM'}_INFO`]);
-		if (navParam.rid === user.id) {
-			return;
-		}
 		navParam.fromRid = room.rid;
 		if (isMasterDetail) {
 			navParam.showCloseModal = true;

app/views/SearchMessagesView/index.tsx

@@ -55,6 +55,7 @@ export interface IRoomInfoParam {
 	rid: string;
 	t: SubscriptionType;
 	joined?: boolean;
+	itsMe?: boolean;
 }
 
 interface INavigationOption {