From 46d6a38a827b38878badca7aaec39e84bcf7b260 Mon Sep 17 00:00:00 2001 From: Abdelrahman Khattab Date: Wed, 8 Nov 2023 20:45:05 +0200 Subject: [PATCH] Introducing usePersonalDetails hoc in places that use withCurrentUserPersonalDetails --- .../HTMLRenderers/MentionUserRenderer.js | 19 ++++--------------- src/components/ReportActionItem/TaskView.js | 4 +++- src/pages/RoomMembersPage.js | 14 ++++---------- .../ReportActionCompose.js | 13 ++----------- src/pages/home/report/ReportActionsList.js | 1 - .../iou/steps/MoneyRequestConfirmPage.js | 15 +++++---------- src/pages/tasks/TaskAssigneeSelectorModal.js | 14 ++++---------- 7 files changed, 22 insertions(+), 58 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js index b7b7c43e7b58..ee2e5ff34915 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js @@ -1,14 +1,13 @@ import lodashGet from 'lodash/get'; import React from 'react'; -import {withOnyx} from 'react-native-onyx'; import {TNodeChildrenRenderer} from 'react-native-render-html'; import _ from 'underscore'; +import {usePersonalDetails} from '@components/OnyxProvider'; import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; -import compose from '@libs/compose'; import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -17,7 +16,6 @@ import personalDetailsPropType from '@pages/personalDetailsPropType'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import htmlRendererPropTypes from './htmlRendererPropTypes'; @@ -26,22 +24,20 @@ const propTypes = { /** Current user personal details */ currentUserPersonalDetails: personalDetailsPropType.isRequired, - - /** Personal details of all users */ - personalDetails: personalDetailsPropType.isRequired, }; function MentionUserRenderer(props) { const {translate} = useLocalize(); const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']); const htmlAttribAccountID = lodashGet(props.tnode.attributes, 'accountid'); + const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; let accountID; let displayNameOrLogin; let navigationRoute; if (!_.isEmpty(htmlAttribAccountID)) { - const user = lodashGet(props.personalDetails, htmlAttribAccountID); + const user = lodashGet(personalDetails, htmlAttribAccountID); accountID = parseInt(htmlAttribAccountID, 10); displayNameOrLogin = LocalePhoneNumber.formatPhoneNumber(lodashGet(user, 'login', '')) || lodashGet(user, 'displayName', '') || translate('common.hidden'); navigationRoute = ROUTES.PROFILE.getRoute(htmlAttribAccountID); @@ -97,11 +93,4 @@ function MentionUserRenderer(props) { MentionUserRenderer.propTypes = propTypes; MentionUserRenderer.displayName = 'MentionUserRenderer'; -export default compose( - withCurrentUserPersonalDetails, - withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - }), -)(MentionUserRenderer); +export default withCurrentUserPersonalDetails(MentionUserRenderer); diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js index b12d6ae32128..5bd0523ca694 100644 --- a/src/components/ReportActionItem/TaskView.js +++ b/src/components/ReportActionItem/TaskView.js @@ -9,6 +9,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import {usePersonalDetails} from '@components/OnyxProvider'; import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction'; import SpacerView from '@components/SpacerView'; import Text from '@components/Text'; @@ -53,6 +54,7 @@ function TaskView(props) { const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID); const disableState = !canModifyTask; const isDisableInteractive = !canModifyTask || !isOpen; + const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; return ( @@ -147,7 +149,7 @@ function TaskView(props) { { - const details = props.personalDetails[accountID]; + const details = personalDetails[accountID]; if (!details) { Log.hmmm(`[RoomMembersPage] no personal details found for room member with accountID: ${accountID}`); @@ -298,7 +295,7 @@ function RoomMembersPage(props) { headerMessage={headerMessage} onSelectRow={(item) => toggleUser(item.keyForList)} onSelectAll={() => toggleAllUsers(data)} - showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || !didLoadRoomMembers} + showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(personalDetails) || !didLoadRoomMembers} showScrollIndicator shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()} /> @@ -318,9 +315,6 @@ export default compose( withWindowDimensions, withReportOrNotFound(), withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, session: { key: ONYXKEYS.SESSION, }, diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index c0a1151f0202..77ad2ff12308 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -11,8 +11,7 @@ import EmojiPickerButton from '@components/EmojiPicker/EmojiPickerButton'; import ExceededCommentLength from '@components/ExceededCommentLength'; import OfflineIndicator from '@components/OfflineIndicator'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import {withNetwork} from '@components/OnyxProvider'; -import participantPropTypes from '@components/participantPropTypes'; +import {usePersonalDetails, withNetwork} from '@components/OnyxProvider'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -49,9 +48,6 @@ const propTypes = { /** Array of report actions for this report */ reportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)), - /** Personal details of all the users */ - personalDetails: PropTypes.objectOf(participantPropTypes), - /** The report currently being looked at */ report: reportPropTypes, @@ -84,7 +80,6 @@ const propTypes = { const defaultProps = { report: {}, blockedFromConcierge: {}, - personalDetails: {}, preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE, isComposerFullSize: false, pendingAction: null, @@ -108,7 +103,6 @@ function ReportActionCompose({ network, onSubmit, pendingAction, - personalDetails, report, reportID, reportActions, @@ -120,7 +114,7 @@ function ReportActionCompose({ const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions(); const animatedRef = useAnimatedRef(); const actionButtonRef = useRef(null); - + const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; /** * Updates the Highlight state of the composer */ @@ -473,9 +467,6 @@ export default compose( blockedFromConcierge: { key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE, }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, shouldShowComposeInput: { key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT, }, diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 759e73aa90e5..3240df2f89e3 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -70,7 +70,6 @@ const propTypes = { }; const defaultProps = { - personalDetails: {}, onScroll: () => {}, mostRecentIOUReportActionID: '', isLoadingInitialReportActions: false, diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js index 6b570ee872c3..ad3500326ca0 100644 --- a/src/pages/iou/steps/MoneyRequestConfirmPage.js +++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js @@ -7,6 +7,7 @@ import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import MoneyRequestConfirmationList from '@components/MoneyRequestConfirmationList'; +import {usePersonalDetails} from '@components/OnyxProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize from '@components/withLocalize'; @@ -20,7 +21,6 @@ import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes'; -import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; import styles from '@styles/styles'; import * as IOU from '@userActions/IOU'; @@ -47,15 +47,11 @@ const propTypes = { /** Holds data related to Money Request view state, rather than the underlying Money Request data. */ iou: iouPropTypes, - /** Personal details of all users */ - personalDetails: personalDetailsPropType, - ...withCurrentUserPersonalDetailsPropTypes, }; const defaultProps = { report: {}, - personalDetails: {}, iou: iouDefaultProps, ...withCurrentUserPersonalDetailsDefaultProps, }; @@ -69,16 +65,18 @@ function MoneyRequestConfirmPage(props) { const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType, props.selectedTab); const isScanRequest = MoneyRequestUtils.isScanRequest(props.selectedTab); const [receiptFile, setReceiptFile] = useState(); + const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; + const participants = useMemo( () => _.chain(props.iou.participants) .map((participant) => { const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false); - return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, props.personalDetails); + return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails); }) .filter((participant) => !!participant.login || !!participant.text) .value(), - [props.iou.participants, props.personalDetails], + [props.iou.participants, personalDetails], ); const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(props.report)), [props.report]); const isManualRequestDM = props.selectedTab === CONST.TAB.MANUAL && iouType === CONST.IOU.TYPE.REQUEST; @@ -421,9 +419,6 @@ export default compose( return `${ONYXKEYS.COLLECTION.REPORT}${reportID}`; }, }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, selectedTab: { key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`, }, diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js index 131755e02dfa..69d365f6b89c 100644 --- a/src/pages/tasks/TaskAssigneeSelectorModal.js +++ b/src/pages/tasks/TaskAssigneeSelectorModal.js @@ -7,6 +7,7 @@ import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import {usePersonalDetails} from '@components/OnyxProvider'; import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; @@ -16,7 +17,6 @@ import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import personalDetailsPropType from '@pages/personalDetailsPropType'; import reportPropTypes from '@pages/reportPropTypes'; import styles from '@styles/styles'; import * as Task from '@userActions/Task'; @@ -28,9 +28,6 @@ const propTypes = { /** Beta features list */ betas: PropTypes.arrayOf(PropTypes.string), - /** All of the personal details for everyone */ - personalDetails: PropTypes.objectOf(personalDetailsPropType), - /** All reports shared with the user */ reports: PropTypes.objectOf(reportPropTypes), @@ -65,7 +62,6 @@ const propTypes = { const defaultProps = { betas: [], - personalDetails: {}, reports: {}, session: {}, route: {}, @@ -80,13 +76,14 @@ function TaskAssigneeSelectorModal(props) { const [filteredUserToInvite, setFilteredUserToInvite] = useState(null); const [filteredCurrentUserOption, setFilteredCurrentUserOption] = useState(null); const [isLoading, setIsLoading] = React.useState(true); + const allPersonalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const {inputCallbackRef} = useAutoFocusInput(); const updateOptions = useCallback(() => { const {recentReports, personalDetails, userToInvite, currentUserOption} = OptionsListUtils.getFilteredOptions( props.reports, - props.personalDetails, + allPersonalDetails, props.betas, searchValue.trim(), [], @@ -111,7 +108,7 @@ function TaskAssigneeSelectorModal(props) { if (isLoading) { setIsLoading(false); } - }, [props, searchValue, isLoading]); + }, [props, searchValue, allPersonalDetails, isLoading]); useEffect(() => { const debouncedSearch = _.debounce(updateOptions, 200); @@ -249,9 +246,6 @@ export default compose( reports: { key: ONYXKEYS.COLLECTION.REPORT, }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, betas: { key: ONYXKEYS.BETAS, },