From 3e48b231ec44775684ea4176795923eea3f6f81a Mon Sep 17 00:00:00 2001 From: Tushu17 Date: Mon, 11 Apr 2022 02:50:05 +0530 Subject: [PATCH 1/6] make user and room name pressable --- src/components/ReportWelcomeText.js | 24 +++++++++----- .../home/report/ReportActionItemCreated.js | 31 ++++++++++++++++--- 2 files changed, 43 insertions(+), 12 deletions(-) diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index 0d86d1071018..e0974bdad071 100644 --- 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) => { {roomWelcomeMessage.phrase1} - - {props.report.reportName} - + Navigation.navigate(ROUTES.getReportDetailsRoute(props.report.reportID))} + > + + {props.report.reportName} + + {roomWelcomeMessage.phrase2} @@ -117,11 +125,13 @@ const ReportWelcomeText = (props) => { {props.translate('reportActionsView.beginningOfChatHistory')} - {_.map(displayNamesWithTooltips, ({displayName, pronouns}, index) => ( + {_.map(displayNamesWithTooltips, ({displayName, pronouns, login}, index) => ( - - {displayName} - + Navigation.navigate(ROUTES.getDetailsRoute(login))}> + + {displayName} + + {!_.isEmpty(pronouns) && {` (${pronouns})`}} {(index === displayNamesWithTooltips.length - 1) && .} {(index === displayNamesWithTooltips.length - 2) && {` ${props.translate('common.and')} `}} diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 670539b9d026..1bdca0cf3df3 100644 --- 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,6 +20,9 @@ const propTypes = { /** Whether the user is not an admin of policyExpenseChat chat */ isOwnPolicyExpenseChat: PropTypes.bool, + + /** ID of the report */ + reportID: PropTypes.number, }), }; const defaultProps = { @@ -24,8 +30,21 @@ const defaultProps = { }; 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 ( { ]} > - + + + From 1877d03907d85337453fa53c9a380a1f93f3746c Mon Sep 17 00:00:00 2001 From: Tushu17 Date: Tue, 19 Apr 2022 21:47:04 +0530 Subject: [PATCH 2/6] add tooltip --- src/components/ReportWelcomeText.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index e0974bdad071..f767b18a0bae 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -15,6 +15,7 @@ import ONYXKEYS from '../ONYXKEYS'; import CONST from '../CONST'; 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) */ @@ -125,13 +126,17 @@ const ReportWelcomeText = (props) => { {props.translate('reportActionsView.beginningOfChatHistory')} - {_.map(displayNamesWithTooltips, ({displayName, pronouns, login}, index) => ( + {_.map(displayNamesWithTooltips, ({ + displayName, pronouns, login, tooltip, + }, index) => ( - Navigation.navigate(ROUTES.getDetailsRoute(login))}> - - {displayName} - - + + Navigation.navigate(ROUTES.getDetailsRoute(login))}> + + {displayName} + + + {!_.isEmpty(pronouns) && {` (${pronouns})`}} {(index === displayNamesWithTooltips.length - 1) && .} {(index === displayNamesWithTooltips.length - 2) && {` ${props.translate('common.and')} `}} From 5ace2ad79b57b26e9a0bd39965788a508dbcafa4 Mon Sep 17 00:00:00 2001 From: Tushu17 Date: Wed, 4 May 2022 01:07:38 +0530 Subject: [PATCH 3/6] remove pressable --- src/components/ReportWelcomeText.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js index f767b18a0bae..ae11faff0e24 100644 --- a/src/components/ReportWelcomeText.js +++ b/src/components/ReportWelcomeText.js @@ -4,7 +4,6 @@ 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'; @@ -108,13 +107,9 @@ const ReportWelcomeText = (props) => { {roomWelcomeMessage.phrase1} - Navigation.navigate(ROUTES.getReportDetailsRoute(props.report.reportID))} - > - - {props.report.reportName} - - + Navigation.navigate(ROUTES.getReportDetailsRoute(props.report.reportID))}> + {props.report.reportName} + {roomWelcomeMessage.phrase2} @@ -131,11 +126,9 @@ const ReportWelcomeText = (props) => { }, index) => ( - Navigation.navigate(ROUTES.getDetailsRoute(login))}> - - {displayName} - - + Navigation.navigate(ROUTES.getDetailsRoute(login))}> + {displayName} + {!_.isEmpty(pronouns) && {` (${pronouns})`}} {(index === displayNamesWithTooltips.length - 1) && .} From 0a1f26f69957d81758f2d5c28ba58d2d3803a301 Mon Sep 17 00:00:00 2001 From: Tushu17 Date: Wed, 4 May 2022 01:10:43 +0530 Subject: [PATCH 4/6] remove view --- src/components/Tooltip/index.native.js | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/src/components/Tooltip/index.native.js b/src/components/Tooltip/index.native.js index ea7556928c77..89fb88bd8a39 100644 --- 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 => ( - - {props.children} - + props.children ); Tooltip.propTypes = propTypes; -Tooltip.defaultProps = defaultProps; Tooltip.displayName = 'Tooltip'; + export default Tooltip; From f590ea6c73b0c7baaa477a08259c2ba0552362e8 Mon Sep 17 00:00:00 2001 From: Tushu17 Date: Fri, 13 May 2022 02:07:00 +0530 Subject: [PATCH 5/6] make navigateToDetailsPage a util function --- src/libs/ReportUtils.js | 21 +++++++++++++++++++ src/pages/home/HeaderView.js | 15 +------------ .../home/report/ReportActionItemCreated.js | 18 +--------------- 3 files changed, 23 insertions(+), 31 deletions(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index 2cfdfa289711..f55c5788d22f 100644 --- 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,24 @@ function getReportName(report, personalDetailsForParticipants = {}, policies = { return _.map(displayNamesWithTooltips, ({displayName}) => displayName).join(', '); } +/** + * Navigate to the details page of a given report + * + * @param {Object} report + * @param {Array} participants + */ +function navigateToDetailsPage(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 +527,5 @@ export { getRoomWelcomeMessage, getDisplayNamesWithTooltips, getReportName, + navigateToDetailsPage, }; diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index a8f6209d1190..bd2ee2a02daf 100644 --- 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) => { ]} > { - 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, participants)} style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]} > {shouldShowSubscript ? ( diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index f4b125c3bfc8..a76af7d5ec6d 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -9,8 +9,6 @@ import ReportWelcomeText from '../../../components/ReportWelcomeText'; import participantPropTypes from '../../../components/participantPropTypes'; import * as ReportUtils from '../../../libs/ReportUtils'; import styles from '../../../styles/styles'; -import Navigation from '../../../libs/Navigation/Navigation'; -import ROUTES from '../../../ROUTES'; const propTypes = { /** The report currently being looked at */ @@ -20,9 +18,6 @@ const propTypes = { /** Whether the user is not an admin of policyExpenseChat chat */ isOwnPolicyExpenseChat: PropTypes.bool, - - /** ID of the report */ - reportID: PropTypes.number, }), /** Personal details of all the users */ @@ -42,20 +37,9 @@ const defaultProps = { const ReportActionItemCreated = (props) => { const participants = lodashGet(props.report, 'participants', []); - const isChatRoom = ReportUtils.isChatRoom(props.report); const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report); const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies); - function navigateToDetailsPage() { - 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 ( { ]} > - + ReportUtils.navigateToDetailsPage(props.report, participants)}> Date: Tue, 17 May 2022 01:11:30 +0530 Subject: [PATCH 6/6] remove particpants from the param --- src/libs/ReportUtils.js | 5 +++-- src/pages/home/HeaderView.js | 2 +- src/pages/home/report/ReportActionItemCreated.js | 4 +--- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index f55c5788d22f..e1fff4ab699e 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -487,9 +487,10 @@ function getReportName(report, personalDetailsForParticipants = {}, policies = { * Navigate to the details page of a given report * * @param {Object} report - * @param {Array} participants */ -function navigateToDetailsPage(report, participants) { +function navigateToDetailsPage(report) { + const participants = lodashGet(report, 'participants', []); + if (isChatRoom(report) || isPolicyExpenseChat(report)) { Navigation.navigate(ROUTES.getReportDetailsRoute(report.reportID)); return; diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index bd2ee2a02daf..88a88b7d10b2 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -108,7 +108,7 @@ const HeaderView = (props) => { ]} > ReportUtils.navigateToDetailsPage(props.report, participants)} + 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 index a76af7d5ec6d..f0a2a3a6e09d 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -2,7 +2,6 @@ import React from 'react'; 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'; @@ -36,7 +35,6 @@ const defaultProps = { }; const ReportActionItemCreated = (props) => { - const participants = lodashGet(props.report, 'participants', []); const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report); const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies); @@ -48,7 +46,7 @@ const ReportActionItemCreated = (props) => { ]} > - ReportUtils.navigateToDetailsPage(props.report, participants)}> + ReportUtils.navigateToDetailsPage(props.report)}>