make user and room name pressable

Expensify · Apr 10, 2022 · 3e48b23 · 3e48b23
1 parent 43910fe
commit 3e48b23
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
@@ -4,6 +4,7 @@ import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import {Pressable} from 'react-native';
 import styles from '../styles/styles';
 import Text from './Text';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -12,6 +13,8 @@ import * as ReportUtils from '../libs/reportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import ONYXKEYS from '../ONYXKEYS';
 import CONST from '../CONST';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
 
 const personalDetailsPropTypes = PropTypes.shape({
     /** The login of the person (either email or phone number) */
@@ -70,6 +73,7 @@ const ReportWelcomeText = (props) => {
                 displayName: isMultipleParticipant ? shortName : longNameLocalized,
                 tooltip: Str.removeSMSDomain(login),
                 pronouns: finalPronouns,
+                login,
             };
         },
     );
@@ -103,9 +107,13 @@ const ReportWelcomeText = (props) => {
                     <Text style={styles.textAlignCenter}>
                         {roomWelcomeMessage.phrase1}
                     </Text>
-                    <Text style={[styles.textStrong]}>
-                        {props.report.reportName}
-                    </Text>
+                    <Pressable
+                        onPress={() => Navigation.navigate(ROUTES.getReportDetailsRoute(props.report.reportID))}
+                    >
+                        <Text style={[styles.textStrong]}>
+                            {props.report.reportName}
+                        </Text>
+                    </Pressable>
                     <Text>
                         {roomWelcomeMessage.phrase2}
                     </Text>
@@ -117,11 +125,13 @@ const ReportWelcomeText = (props) => {
                     <Text style={styles.textAlignCenter}>
                         {props.translate('reportActionsView.beginningOfChatHistory')}
                     </Text>
-                    {_.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => (
+                    {_.map(displayNamesWithTooltips, ({displayName, pronouns, login}, index) => (
                         <Text key={displayName}>
-                            <Text style={[styles.textStrong]}>
-                                {displayName}
-                            </Text>
+                            <Pressable onPress={() => Navigation.navigate(ROUTES.getDetailsRoute(login))}>
+                                <Text style={[styles.textStrong]}>
+                                    {displayName}
+                                </Text>
+                            </Pressable>
                             {!_.isEmpty(pronouns) && <Text>{` (${pronouns})`}</Text>}
                             {(index === displayNamesWithTooltips.length - 1) && <Text>.</Text>}
                             {(index === displayNamesWithTooltips.length - 2) && <Text>{` ${props.translate('common.and')} `}</Text>}

diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
@@ -1,13 +1,16 @@
 import React from 'react';
-import {View} from 'react-native';
+import {Pressable, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../../ONYXKEYS';
 import RoomHeaderAvatars from '../../../components/RoomHeaderAvatars';
 import ReportWelcomeText from '../../../components/ReportWelcomeText';
 import * as ReportUtils from '../../../libs/reportUtils';
 import styles from '../../../styles/styles';
 import * as OptionsListUtils from '../../../libs/OptionsListUtils';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -17,15 +20,31 @@ const propTypes = {
 
         /** Whether the user is not an admin of policyExpenseChat chat */
         isOwnPolicyExpenseChat: PropTypes.bool,
+
+        /** ID of the report */
+        reportID: PropTypes.number,
     }),
 };
 const defaultProps = {
     report: {},
 };
 
 const ReportActionItemCreated = (props) => {
+    const participants = lodashGet(props.report, 'participants', []);
+    const isChatRoom = ReportUtils.isChatRoom(props.report);
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
     const avatarIcons = OptionsListUtils.getAvatarSources(props.report);
+
+    function navigateToDetails() {
+        if (isChatRoom || isPolicyExpenseChat) {
+            return Navigation.navigate(ROUTES.getReportDetailsRoute(props.report.reportID));
+        }
+        if (participants.length === 1) {
+            return Navigation.navigate(ROUTES.getDetailsRoute(participants[0]));
+        }
+        Navigation.navigate(ROUTES.getReportParticipantsRoute(props.report.reportID));
+    }
+
     return (
         <View style={[
             styles.chatContent,
@@ -34,10 +53,12 @@ const ReportActionItemCreated = (props) => {
         ]}
         >
             <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}>
-                <RoomHeaderAvatars
-                    avatarIcons={avatarIcons}
-                    shouldShowLargeAvatars={isPolicyExpenseChat}
-                />
+                <Pressable onPress={navigateToDetails}>
+                    <RoomHeaderAvatars
+                        avatarIcons={avatarIcons}
+                        shouldShowLargeAvatars={isPolicyExpenseChat}
+                    />
+                </Pressable>
                 <ReportWelcomeText report={props.report} />
             </View>
         </View>