Merge pull request #8409 from Tushu17/make-avatar-pressable

make avatar and welcome message pressable
Expensify · May 17, 2022 · c16d2eb · c16d2eb
2 parents f2218b6 + 69e76f2
commit c16d2eb
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 38 deletions.
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
@@ -10,6 +10,9 @@ import compose from '../libs/compose';
 import * as ReportUtils from '../libs/ReportUtils';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
 import ONYXKEYS from '../ONYXKEYS';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import Tooltip from './Tooltip';
 
 const personalDetailsPropTypes = PropTypes.shape({
     /** The login of the person (either email or phone number) */
@@ -85,7 +88,7 @@ const ReportWelcomeText = (props) => {
                     <Text style={styles.textAlignCenter}>
                         {roomWelcomeMessage.phrase1}
                     </Text>
-                    <Text style={[styles.textStrong]}>
+                    <Text style={[styles.textStrong]} onPress={() => Navigation.navigate(ROUTES.getReportDetailsRoute(props.report.reportID))}>
                         {props.report.reportName}
                     </Text>
                     <Text>
@@ -99,11 +102,15 @@ const ReportWelcomeText = (props) => {
                     <Text style={styles.textAlignCenter}>
                         {props.translate('reportActionsView.beginningOfChatHistory')}
                     </Text>
-                    {_.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => (
+                    {_.map(displayNamesWithTooltips, ({
+                        displayName, pronouns, tooltip,
+                    }, index) => (
                         <Text key={displayName}>
-                            <Text style={[styles.textStrong]}>
-                                {displayName}
-                            </Text>
+                            <Tooltip text={tooltip}>
+                                <Text style={[styles.textStrong]} onPress={() => Navigation.navigate(ROUTES.getDetailsRoute(participants[index]))}>
+                                    {displayName}
+                                </Text>
+                            </Tooltip>
                             {!_.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/components/Tooltip/index.native.js b/src/components/Tooltip/index.native.js
@@ -1,32 +1,21 @@
-import React from 'react';
-import {View} from 'react-native';
 import PropTypes from 'prop-types';
 
 // We can't use the common component for the Tooltip as Web implementation uses DOM specific method to
 // render the View which is not present on the Mobile.
 const propTypes = {
-    /** Styles to be assigned to the Tooltip wrapper views */
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
     /** Children to wrap with Tooltip. */
     children: PropTypes.node.isRequired,
 };
 
-const defaultProps = {
-    containerStyles: [],
-};
-
 /**
  * @param {propTypes} props
  * @returns {ReactNodeLike}
  */
 const Tooltip = props => (
-    <View style={props.containerStyles}>
-        {props.children}
-    </View>
+    props.children
 );
 
 Tooltip.propTypes = propTypes;
-Tooltip.defaultProps = defaultProps;
 Tooltip.displayName = 'Tooltip';
+
 export default Tooltip;
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
@@ -8,6 +8,8 @@ import * as Localize from './Localize';
 import * as LocalePhoneNumber from './LocalePhoneNumber';
 import * as Expensicons from '../components/Icon/Expensicons';
 import md5 from './md5';
+import Navigation from './Navigation/Navigation';
+import ROUTES from '../ROUTES';
 
 let sessionEmail;
 Onyx.connect({
@@ -481,6 +483,25 @@ function getReportName(report, personalDetailsForParticipants = {}, policies = {
     return _.map(displayNamesWithTooltips, ({displayName}) => displayName).join(', ');
 }
 
+/**
+ * Navigate to the details page of a given report
+ *
+ * @param {Object} report
+ */
+function navigateToDetailsPage(report) {
+    const participants = lodashGet(report, 'participants', []);
+
+    if (isChatRoom(report) || isPolicyExpenseChat(report)) {
+        Navigation.navigate(ROUTES.getReportDetailsRoute(report.reportID));
+        return;
+    }
+    if (participants.length === 1) {
+        Navigation.navigate(ROUTES.getDetailsRoute(participants[0]));
+        return;
+    }
+    Navigation.navigate(ROUTES.getReportParticipantsRoute(report.reportID));
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
@@ -507,4 +528,5 @@ export {
     getRoomWelcomeMessage,
     getDisplayNamesWithTooltips,
     getReportName,
+    navigateToDetailsPage,
 };
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
@@ -14,8 +14,6 @@ import * as Report from '../../libs/actions/Report';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import MultipleAvatars from '../../components/MultipleAvatars';
 import SubscriptAvatar from '../../components/SubscriptAvatar';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
 import DisplayNames from '../../components/DisplayNames';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import participantPropTypes from '../../components/participantPropTypes';
@@ -28,9 +26,6 @@ import Text from '../../components/Text';
 import Tooltip from '../../components/Tooltip';
 
 const propTypes = {
-    /** The ID of the report */
-    reportID: PropTypes.number.isRequired,
-
     /** Toggles the navigationMenu open and closed */
     onNavigationMenuButtonClicked: PropTypes.func.isRequired,
 
@@ -113,15 +108,7 @@ const HeaderView = (props) => {
                         ]}
                     >
                         <Pressable
-                            onPress={() => {
-                                if (isChatRoom || isPolicyExpenseChat) {
-                                    return Navigation.navigate(ROUTES.getReportDetailsRoute(props.reportID));
-                                }
-                                if (participants.length === 1) {
-                                    return Navigation.navigate(ROUTES.getDetailsRoute(participants[0]));
-                                }
-                                Navigation.navigate(ROUTES.getReportParticipantsRoute(props.reportID));
-                            }}
+                            onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
                             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
                         >
                             {shouldShowSubscript ? (

diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
@@ -1,5 +1,5 @@
 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 ONYXKEYS from '../../../ONYXKEYS';
@@ -17,7 +17,6 @@ const propTypes = {
 
         /** Whether the user is not an admin of policyExpenseChat chat */
         isOwnPolicyExpenseChat: PropTypes.bool,
-
     }),
 
     /** Personal details of all the users */
@@ -38,6 +37,7 @@ const defaultProps = {
 const ReportActionItemCreated = (props) => {
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
     const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies);
+
     return (
         <View style={[
             styles.chatContent,
@@ -46,10 +46,12 @@ const ReportActionItemCreated = (props) => {
         ]}
         >
             <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}>
-                <RoomHeaderAvatars
-                    icons={icons}
-                    shouldShowLargeAvatars={isPolicyExpenseChat}
-                />
+                <Pressable onPress={() => ReportUtils.navigateToDetailsPage(props.report)}>
+                    <RoomHeaderAvatars
+                        icons={icons}
+                        shouldShowLargeAvatars={isPolicyExpenseChat}
+                    />
+                </Pressable>
                 <ReportWelcomeText report={props.report} />
             </View>
         </View>