From e18534b0a9ba7d4e54f63ba9479da318afaeb83c Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 16 May 2023 01:50:12 +0700 Subject: [PATCH 1/8] Fix open some pages by link display page not found --- src/pages/DetailsPage.js | 12 ++++++++++++ src/pages/home/report/withReportOrNotFound.js | 11 +++++++++++ src/pages/iou/IOUDetailsModal.js | 11 +++++++++++ src/pages/workspace/WorkspaceInitialPage.js | 12 ++++++++++++ src/pages/workspace/WorkspaceInviteMessagePage.js | 12 ++++++++++++ src/pages/workspace/WorkspaceMembersPage.js | 12 ++++++++++++ src/pages/workspace/WorkspacePageWithSections.js | 12 ++++++++++++ 7 files changed, 82 insertions(+) diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index baee3381673b..5c91814fcec9 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -28,6 +28,7 @@ import * as Report from '../libs/actions/Report'; import OfflineWithFeedback from '../components/OfflineWithFeedback'; import AutoUpdateTime from '../components/AutoUpdateTime'; import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; +import FullscreenLoadingIndicator from '../components/FullscreenLoadingIndicator'; const matchType = PropTypes.shape({ params: PropTypes.shape({ @@ -53,6 +54,9 @@ const propTypes = { email: PropTypes.string.isRequired, }), + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -62,6 +66,7 @@ const defaultProps = { session: { email: null, }, + isLoadingReportData: true, }; /** @@ -113,6 +118,10 @@ class DetailsPage extends React.PureComponent { const phoneNumber = getPhoneNumber(details); const phoneOrEmail = isSMSLogin ? getPhoneNumber(details) : details.login; + if (this.props.isLoadingReportData && _.isEmpty(login)) { + return ; + } + return ( @@ -217,5 +226,8 @@ export default compose( personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS, }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, }), )(DetailsPage); diff --git a/src/pages/home/report/withReportOrNotFound.js b/src/pages/home/report/withReportOrNotFound.js index 204965e25bd8..ec561db20c81 100644 --- a/src/pages/home/report/withReportOrNotFound.js +++ b/src/pages/home/report/withReportOrNotFound.js @@ -6,6 +6,7 @@ import getComponentDisplayName from '../../../libs/getComponentDisplayName'; import NotFoundPage from '../../ErrorPage/NotFoundPage'; import ONYXKEYS from '../../../ONYXKEYS'; import reportPropTypes from '../../reportPropTypes'; +import FullscreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator'; export default function (WrappedComponent) { const propTypes = { @@ -15,15 +16,22 @@ export default function (WrappedComponent) { /** The report currently being looked at */ report: reportPropTypes, + + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, }; const defaultProps = { forwardedRef: () => {}, report: {}, + isLoadingReportData: true, }; class WithReportOrNotFound extends Component { render() { + if (this.props.isLoadingReportData && (_.isEmpty(this.props.report) || !this.props.report.reportID)) { + return ; + } if (_.isEmpty(this.props.report) || !this.props.report.reportID) { return ; } @@ -56,5 +64,8 @@ export default function (WrappedComponent) { report: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, })(withReportOrNotFound); } diff --git a/src/pages/iou/IOUDetailsModal.js b/src/pages/iou/IOUDetailsModal.js index 3403bf83fb23..3c292294f715 100644 --- a/src/pages/iou/IOUDetailsModal.js +++ b/src/pages/iou/IOUDetailsModal.js @@ -87,6 +87,9 @@ const propTypes = { hasOutstandingIOU: PropTypes.bool.isRequired, }), + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -100,6 +103,7 @@ const defaultProps = { chatReport: { participants: [], }, + isLoadingReportData: true, }; class IOUDetailsModal extends Component { @@ -159,6 +163,10 @@ class IOUDetailsModal extends Component { } render() { + if (this.props.isLoadingReportData && _.isEmpty(this.props.iouReport)) { + return ; + } + const sessionEmail = lodashGet(this.props.session, 'email', null); const pendingAction = this.findPendingAction(); const iouReportStateNum = lodashGet(this.props.iouReport, 'stateNum'); @@ -242,5 +250,8 @@ export default compose( key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.chatReportID}`, canEvict: false, }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, }), )(IOUDetailsModal); diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index bc4d6274534c..67f89232a501 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -18,6 +18,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import compose from '../../libs/compose'; import Avatar from '../../components/Avatar'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; +import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy'; import reportPropTypes from '../reportPropTypes'; import * as Policy from '../../libs/actions/Policy'; @@ -38,12 +39,16 @@ const propTypes = { /** Bank account attached to free plan */ reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes, + + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, }; const defaultProps = { reports: {}, ...policyDefaultProps, reimbursementAccount: {}, + isLoadingReportData: true, }; /** @@ -127,6 +132,10 @@ const WorkspaceInitialPage = (props) => { }, ]; + if (props.isLoadingReportData && _.isEmpty(props.policy)) { + return ; + } + return ( {({safeAreaPaddingBottomStyle}) => ( @@ -242,5 +251,8 @@ export default compose( reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, }), )(WorkspaceInitialPage); diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index b5e8714f1623..3c78f0c397ba 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -24,6 +24,7 @@ import ROUTES from '../../ROUTES'; import * as Localize from '../../libs/Localize'; import Form from '../../components/Form'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; +import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; const personalDetailsPropTypes = PropTypes.shape({ /** The login of the person (either email or phone number) */ @@ -54,6 +55,9 @@ const propTypes = { policyID: PropTypes.string, }), }).isRequired, + + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, ...policyPropTypes, ...withLocalizePropTypes, @@ -64,6 +68,7 @@ const defaultProps = { personalDetails: {}, betas: [], invitedMembersDraft: [], + isLoadingReportData: true }; class WorkspaceInviteMessagePage extends React.Component { @@ -125,6 +130,10 @@ class WorkspaceInviteMessagePage extends React.Component { } render() { + if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { + return ; + } + const policyName = lodashGet(this.props.policy, 'name'); return ( @@ -211,5 +220,8 @@ export default compose( invitedMembersDraft: { key: ({route}) => `${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID.toString()}`, }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, }), )(WorkspaceInviteMessagePage); diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js index 2d439efc9ef4..b6690584900c 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -26,6 +26,7 @@ import CONST from '../../CONST'; import OfflineWithFeedback from '../../components/OfflineWithFeedback'; import {withNetwork} from '../../components/OnyxProvider'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; +import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import * as ReportUtils from '../../libs/ReportUtils'; import FormHelpMessage from '../../components/FormHelpMessage'; @@ -53,6 +54,9 @@ const propTypes = { email: PropTypes.string, }), + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, + ...policyPropTypes, ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -64,6 +68,7 @@ const defaultProps = { session: { email: null, }, + isLoadingReportData: true, ...policyDefaultProps, }; @@ -363,6 +368,10 @@ class WorkspaceMembersPage extends React.Component { } render() { + if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { + return ; + } + const policyMemberList = lodashGet(this.props, 'policyMemberList', {}); const policyOwner = lodashGet(this.props.policy, 'owner'); const currentUserLogin = lodashGet(this.props.currentUserPersonalDetails, 'login'); @@ -513,6 +522,9 @@ export default compose( session: { key: ONYXKEYS.SESSION, }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, }), withCurrentUserPersonalDetails, )(WorkspaceMembersPage); diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js index 14cc6ac01403..bb12bb07d063 100644 --- a/src/pages/workspace/WorkspacePageWithSections.js +++ b/src/pages/workspace/WorkspacePageWithSections.js @@ -21,6 +21,7 @@ import {withNetwork} from '../../components/OnyxProvider'; import networkPropTypes from '../../components/networkPropTypes'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; import ScrollViewWithContext from '../../components/ScrollViewWithContext'; +import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; const propTypes = { shouldSkipVBBACall: PropTypes.bool, @@ -64,6 +65,9 @@ const propTypes = { /** Option to use the default scroll view */ shouldUseScrollView: PropTypes.bool, + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -75,6 +79,7 @@ const defaultProps = { guidesCallTaskID: '', shouldUseScrollView: false, shouldSkipVBBACall: false, + isLoadingReportData: true, }; class WorkspacePageWithSections extends React.Component { @@ -99,6 +104,10 @@ class WorkspacePageWithSections extends React.Component { } render() { + if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { + return ; + } + const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', ''); const hasVBA = achState === BankAccount.STATE.OPEN; const isUsingECard = lodashGet(this.props.user, 'isUsingExpensifyCard', false); @@ -152,6 +161,9 @@ export default compose( reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, }), withPolicy, withNetwork(), From 44bc029caabdd435c3aafd63059f75bddac79d54 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 16 May 2023 09:16:46 +0700 Subject: [PATCH 2/8] format code --- src/pages/workspace/WorkspaceInviteMessagePage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 3c78f0c397ba..33118eee64af 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -55,7 +55,7 @@ const propTypes = { policyID: PropTypes.string, }), }).isRequired, - + /** Indicated whether the report data is loading */ isLoadingReportData: PropTypes.bool, @@ -68,7 +68,7 @@ const defaultProps = { personalDetails: {}, betas: [], invitedMembersDraft: [], - isLoadingReportData: true + isLoadingReportData: true, }; class WorkspaceInviteMessagePage extends React.Component { From e99c51d75bb1fc536b8596a9830a3661ecd46af8 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 16 May 2023 14:44:16 +0700 Subject: [PATCH 3/8] fix display not found page in workspace invite page --- src/pages/workspace/WorkspaceInvitePage.js | 111 ++++++++++++--------- 1 file changed, 62 insertions(+), 49 deletions(-) diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index 67f9a1bbb11c..e5f8a5ed27cc 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -23,6 +23,7 @@ import {withNetwork} from '../../components/OnyxProvider'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; import networkPropTypes from '../../components/networkPropTypes'; import ROUTES from '../../ROUTES'; +import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; const personalDetailsPropTypes = PropTypes.shape({ /** The login of the person (either email or phone number) */ @@ -52,6 +53,9 @@ const propTypes = { }), }).isRequired, + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, + ...policyPropTypes, ...withLocalizePropTypes, network: networkPropTypes.isRequired, @@ -60,6 +64,7 @@ const propTypes = { const defaultProps = { personalDetails: {}, betas: [], + isLoadingReportData: true, ...policyDefaultProps, }; @@ -256,57 +261,62 @@ class WorkspaceInvitePage extends React.Component { return ( - {({didScreenTransitionEnd}) => ( - Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)} - > - { + if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { + return ; + } + return ( + Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)} > - this.clearErrors(true)} - shouldShowGetAssistanceButton - guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS} - shouldShowBackButton - onBackButtonPress={() => Navigation.goBack()} - /> - - - - - + this.clearErrors(true)} + shouldShowGetAssistanceButton + guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS} + shouldShowBackButton + onBackButtonPress={() => Navigation.goBack()} /> - - - - )} + + + + + + + + + ); + }} ); } @@ -326,5 +336,8 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, }), )(WorkspaceInvitePage); From 0595893a1c6f0093dbbea2208e5db10e51af9ea8 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 16 May 2023 16:14:58 +0700 Subject: [PATCH 4/8] fix bug workspace invite page --- src/pages/workspace/WorkspaceInvitePage.js | 106 ++++++++++----------- 1 file changed, 51 insertions(+), 55 deletions(-) diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index e5f8a5ed27cc..c192c79d0303 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -255,68 +255,64 @@ class WorkspaceInvitePage extends React.Component { } render() { + if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { + return ; + } const sections = this.getSections(); const headerMessage = OptionsListUtils.getHeaderMessage(this.state.personalDetails.length !== 0, Boolean(this.state.userToInvite), this.state.searchTerm); const policyName = lodashGet(this.props.policy, 'name'); return ( - {({didScreenTransitionEnd}) => { - if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { - return ; - } - return ( - Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)} - > - Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)} + > + + this.clearErrors(true)} + shouldShowGetAssistanceButton + guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS} + shouldShowBackButton + onBackButtonPress={() => Navigation.goBack()} + /> + + + + + - this.clearErrors(true)} - shouldShowGetAssistanceButton - guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS} - shouldShowBackButton - onBackButtonPress={() => Navigation.goBack()} - /> - - - - - - - - - ); - }} + message={this.props.policy.alertMessage} + containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto, styles.mb5]} + enabledWhenOffline + disablePressOnEnter + /> + + + ); } From d47ceb53b45d7536fa84a69a5de90490e6bb015c Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 18 May 2023 23:29:50 +0700 Subject: [PATCH 5/8] create new HOC to control loading in workspace pages --- src/pages/DetailsPage.js | 13 ---- src/pages/workspace/WorkspaceInitialPage.js | 17 +---- .../workspace/WorkspaceInviteMessagePage.js | 17 +---- src/pages/workspace/WorkspaceInvitePage.js | 16 +---- src/pages/workspace/WorkspaceMembersPage.js | 17 +---- .../workspace/WorkspacePageWithSections.js | 16 +---- .../withPolicyAndFullscreenLoading.js | 64 +++++++++++++++++++ 7 files changed, 78 insertions(+), 82 deletions(-) create mode 100644 src/pages/workspace/withPolicyAndFullscreenLoading.js diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 5c91814fcec9..13e3a17801a8 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -28,7 +28,6 @@ import * as Report from '../libs/actions/Report'; import OfflineWithFeedback from '../components/OfflineWithFeedback'; import AutoUpdateTime from '../components/AutoUpdateTime'; import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView'; -import FullscreenLoadingIndicator from '../components/FullscreenLoadingIndicator'; const matchType = PropTypes.shape({ params: PropTypes.shape({ @@ -54,9 +53,6 @@ const propTypes = { email: PropTypes.string.isRequired, }), - /** Indicated whether the report data is loading */ - isLoadingReportData: PropTypes.bool, - ...withLocalizePropTypes, }; @@ -66,7 +62,6 @@ const defaultProps = { session: { email: null, }, - isLoadingReportData: true, }; /** @@ -93,7 +88,6 @@ class DetailsPage extends React.PureComponent { const login = lodashGet(this.props.route.params, 'login', ''); const reportID = lodashGet(this.props.route.params, 'reportID', ''); let details = lodashGet(this.props.personalDetails, login); - if (!details) { details = { login, @@ -118,10 +112,6 @@ class DetailsPage extends React.PureComponent { const phoneNumber = getPhoneNumber(details); const phoneOrEmail = isSMSLogin ? getPhoneNumber(details) : details.login; - if (this.props.isLoadingReportData && _.isEmpty(login)) { - return ; - } - return ( @@ -226,8 +216,5 @@ export default compose( personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS, }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, }), )(DetailsPage); diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js index d99b57506585..d37191c770ec 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.js @@ -18,8 +18,8 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import compose from '../../libs/compose'; import Avatar from '../../components/Avatar'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; -import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; -import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy'; +import {policyPropTypes, policyDefaultProps} from './withPolicy'; +import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import reportPropTypes from '../reportPropTypes'; import * as Policy from '../../libs/actions/Policy'; import * as PolicyUtils from '../../libs/PolicyUtils'; @@ -40,16 +40,12 @@ const propTypes = { /** Bank account attached to free plan */ reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes, - - /** Indicated whether the report data is loading */ - isLoadingReportData: PropTypes.bool, }; const defaultProps = { reports: {}, ...policyDefaultProps, reimbursementAccount: {}, - isLoadingReportData: true, }; /** @@ -133,10 +129,6 @@ const WorkspaceInitialPage = (props) => { }, ]; - if (props.isLoadingReportData && _.isEmpty(props.policy)) { - return ; - } - return ( {({safeAreaPaddingBottomStyle}) => ( @@ -244,7 +236,7 @@ WorkspaceInitialPage.displayName = 'WorkspaceInitialPage'; export default compose( withLocalize, - withPolicy, + withPolicyAndFullscreenLoading, withWindowDimensions, withOnyx({ reports: { @@ -253,8 +245,5 @@ export default compose( reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, }), )(WorkspaceInitialPage); diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js index 04a964641e20..e47ee4f7bdf8 100644 --- a/src/pages/workspace/WorkspaceInviteMessagePage.js +++ b/src/pages/workspace/WorkspaceInviteMessagePage.js @@ -18,13 +18,13 @@ import MultipleAvatars from '../../components/MultipleAvatars'; import CONST from '../../CONST'; import * as Link from '../../libs/actions/Link'; import Text from '../../components/Text'; -import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy'; +import {policyPropTypes, policyDefaultProps} from './withPolicy'; +import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import * as OptionsListUtils from '../../libs/OptionsListUtils'; import ROUTES from '../../ROUTES'; import * as Localize from '../../libs/Localize'; import Form from '../../components/Form'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; -import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; const personalDetailsPropTypes = PropTypes.shape({ /** The login of the person (either email or phone number) */ @@ -56,9 +56,6 @@ const propTypes = { }), }).isRequired, - /** Indicated whether the report data is loading */ - isLoadingReportData: PropTypes.bool, - ...policyPropTypes, ...withLocalizePropTypes, }; @@ -68,7 +65,6 @@ const defaultProps = { personalDetails: {}, betas: [], invitedMembersDraft: [], - isLoadingReportData: true, }; class WorkspaceInviteMessagePage extends React.Component { @@ -148,10 +144,6 @@ class WorkspaceInviteMessagePage extends React.Component { } render() { - if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { - return ; - } - const policyName = lodashGet(this.props.policy, 'name'); return ( @@ -228,7 +220,7 @@ WorkspaceInviteMessagePage.defaultProps = defaultProps; export default compose( withLocalize, - withPolicy, + withPolicyAndFullscreenLoading, withOnyx({ personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS, @@ -239,8 +231,5 @@ export default compose( invitedMembersDraft: { key: ({route}) => `${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID.toString()}`, }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, }), )(WorkspaceInviteMessagePage); diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index c192c79d0303..a69c3fa7eeb5 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -18,12 +18,12 @@ import OptionsSelector from '../../components/OptionsSelector'; import * as OptionsListUtils from '../../libs/OptionsListUtils'; import CONST from '../../CONST'; import * as Link from '../../libs/actions/Link'; -import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy'; +import {policyPropTypes, policyDefaultProps} from './withPolicy'; +import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import {withNetwork} from '../../components/OnyxProvider'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; import networkPropTypes from '../../components/networkPropTypes'; import ROUTES from '../../ROUTES'; -import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; const personalDetailsPropTypes = PropTypes.shape({ /** The login of the person (either email or phone number) */ @@ -53,9 +53,6 @@ const propTypes = { }), }).isRequired, - /** Indicated whether the report data is loading */ - isLoadingReportData: PropTypes.bool, - ...policyPropTypes, ...withLocalizePropTypes, network: networkPropTypes.isRequired, @@ -64,7 +61,6 @@ const propTypes = { const defaultProps = { personalDetails: {}, betas: [], - isLoadingReportData: true, ...policyDefaultProps, }; @@ -255,9 +251,6 @@ class WorkspaceInvitePage extends React.Component { } render() { - if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { - return ; - } const sections = this.getSections(); const headerMessage = OptionsListUtils.getHeaderMessage(this.state.personalDetails.length !== 0, Boolean(this.state.userToInvite), this.state.searchTerm); const policyName = lodashGet(this.props.policy, 'name'); @@ -323,7 +316,7 @@ WorkspaceInvitePage.defaultProps = defaultProps; export default compose( withLocalize, - withPolicy, + withPolicyAndFullscreenLoading, withNetwork(), withOnyx({ personalDetails: { @@ -332,8 +325,5 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, }), )(WorkspaceInvitePage); diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js index 479f3ae146f5..4072b02c3262 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -21,12 +21,12 @@ import ConfirmModal from '../../components/ConfirmModal'; import personalDetailsPropType from '../personalDetailsPropType'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; import OptionRow from '../../components/OptionRow'; -import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy'; +import {policyPropTypes, policyDefaultProps} from './withPolicy'; +import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import CONST from '../../CONST'; import OfflineWithFeedback from '../../components/OfflineWithFeedback'; import {withNetwork} from '../../components/OnyxProvider'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; -import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; import networkPropTypes from '../../components/networkPropTypes'; import * as ReportUtils from '../../libs/ReportUtils'; import FormHelpMessage from '../../components/FormHelpMessage'; @@ -54,9 +54,6 @@ const propTypes = { email: PropTypes.string, }), - /** Indicated whether the report data is loading */ - isLoadingReportData: PropTypes.bool, - ...policyPropTypes, ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -68,7 +65,6 @@ const defaultProps = { session: { email: null, }, - isLoadingReportData: true, ...policyDefaultProps, }; @@ -374,10 +370,6 @@ class WorkspaceMembersPage extends React.Component { } render() { - if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { - return ; - } - const policyMemberList = lodashGet(this.props, 'policyMemberList', {}); const policyOwner = lodashGet(this.props.policy, 'owner'); const currentUserLogin = lodashGet(this.props.currentUserPersonalDetails, 'login'); @@ -519,7 +511,7 @@ WorkspaceMembersPage.defaultProps = defaultProps; export default compose( withLocalize, withWindowDimensions, - withPolicy, + withPolicyAndFullscreenLoading, withNetwork(), withOnyx({ personalDetails: { @@ -528,9 +520,6 @@ export default compose( session: { key: ONYXKEYS.SESSION, }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, }), withCurrentUserPersonalDetails, )(WorkspaceMembersPage); diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js index bb12bb07d063..8edafe18d950 100644 --- a/src/pages/workspace/WorkspacePageWithSections.js +++ b/src/pages/workspace/WorkspacePageWithSections.js @@ -16,12 +16,11 @@ import * as BankAccounts from '../../libs/actions/BankAccounts'; import BankAccount from '../../libs/models/BankAccount'; import * as ReimbursementAccountProps from '../ReimbursementAccount/reimbursementAccountPropTypes'; import userPropTypes from '../settings/userPropTypes'; -import withPolicy from './withPolicy'; +import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import {withNetwork} from '../../components/OnyxProvider'; import networkPropTypes from '../../components/networkPropTypes'; import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView'; import ScrollViewWithContext from '../../components/ScrollViewWithContext'; -import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; const propTypes = { shouldSkipVBBACall: PropTypes.bool, @@ -65,9 +64,6 @@ const propTypes = { /** Option to use the default scroll view */ shouldUseScrollView: PropTypes.bool, - /** Indicated whether the report data is loading */ - isLoadingReportData: PropTypes.bool, - ...withLocalizePropTypes, }; @@ -79,7 +75,6 @@ const defaultProps = { guidesCallTaskID: '', shouldUseScrollView: false, shouldSkipVBBACall: false, - isLoadingReportData: true, }; class WorkspacePageWithSections extends React.Component { @@ -104,10 +99,6 @@ class WorkspacePageWithSections extends React.Component { } render() { - if (this.props.isLoadingReportData && _.isEmpty(this.props.policy)) { - return ; - } - const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', ''); const hasVBA = achState === BankAccount.STATE.OPEN; const isUsingECard = lodashGet(this.props.user, 'isUsingExpensifyCard', false); @@ -161,10 +152,7 @@ export default compose( reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, }), - withPolicy, + withPolicyAndFullscreenLoading, withNetwork(), )(WorkspacePageWithSections); diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.js b/src/pages/workspace/withPolicyAndFullscreenLoading.js new file mode 100644 index 000000000000..1d5cc395c80e --- /dev/null +++ b/src/pages/workspace/withPolicyAndFullscreenLoading.js @@ -0,0 +1,64 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; +import compose from '../../libs/compose'; +import ONYXKEYS from '../../ONYXKEYS'; +import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy'; +import getComponentDisplayName from '../../libs/getComponentDisplayName'; +import FullscreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; + +export default function (WrappedComponent) { + const propTypes = { + /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component. + * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */ + forwardedRef: PropTypes.func, + + /** Indicated whether the report data is loading */ + isLoadingReportData: PropTypes.bool, + + ...policyPropTypes, + }; + + const defaultProps = { + forwardedRef: () => {}, + isLoadingReportData: true, + ...policyDefaultProps, + }; + + const WithPolicyAndFullscreenLoading = (props) => { + if (props.isLoadingReportData && _.isEmpty(props.policy)) { + return ; + } + + const rest = _.omit(props, ['forwardedRef']); + return ( + + ); + }; + + WithPolicyAndFullscreenLoading.propTypes = propTypes; + WithPolicyAndFullscreenLoading.defaultProps = defaultProps; + WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading(${getComponentDisplayName(WrappedComponent)})`; + + const withPolicyAndFullscreenLoading = React.forwardRef((props, ref) => ( + + )); + + return compose( + withPolicy, + withOnyx({ + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, + }), + )(withPolicyAndFullscreenLoading); +} From 0bcb41be6d8cb55ebbc7fdf92a6d75b0b41928d6 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 18 May 2023 23:31:04 +0700 Subject: [PATCH 6/8] restore detail page --- src/pages/DetailsPage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 13e3a17801a8..a6b76b8a4c79 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -88,6 +88,7 @@ class DetailsPage extends React.PureComponent { const login = lodashGet(this.props.route.params, 'login', ''); const reportID = lodashGet(this.props.route.params, 'reportID', ''); let details = lodashGet(this.props.personalDetails, login); + if (!details) { details = { login, From e7a6747178e7ed9dfc0105ccc69c7b7605522f8d Mon Sep 17 00:00:00 2001 From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com> Date: Thu, 18 May 2023 23:33:21 +0700 Subject: [PATCH 7/8] Update DetailsPage.js --- src/pages/DetailsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index a6b76b8a4c79..baee3381673b 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -88,7 +88,7 @@ class DetailsPage extends React.PureComponent { const login = lodashGet(this.props.route.params, 'login', ''); const reportID = lodashGet(this.props.route.params, 'reportID', ''); let details = lodashGet(this.props.personalDetails, login); - + if (!details) { details = { login, From dce9b352115c614c39c4c4793d5ddbfdef730505 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 22 May 2023 21:25:30 +0700 Subject: [PATCH 8/8] remove loading logic in IOUDetailsModal --- src/pages/iou/IOUDetailsModal.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/pages/iou/IOUDetailsModal.js b/src/pages/iou/IOUDetailsModal.js index fc8b975447f9..84de2a089242 100644 --- a/src/pages/iou/IOUDetailsModal.js +++ b/src/pages/iou/IOUDetailsModal.js @@ -87,9 +87,6 @@ const propTypes = { hasOutstandingIOU: PropTypes.bool.isRequired, }), - /** Indicated whether the report data is loading */ - isLoadingReportData: PropTypes.bool, - ...withLocalizePropTypes, }; @@ -103,7 +100,6 @@ const defaultProps = { chatReport: { participants: [], }, - isLoadingReportData: true, }; class IOUDetailsModal extends Component { @@ -138,10 +134,6 @@ class IOUDetailsModal extends Component { } render() { - if (this.props.isLoadingReportData && _.isEmpty(this.props.iouReport)) { - return ; - } - const sessionEmail = lodashGet(this.props.session, 'email', null); const pendingAction = this.findPendingAction(); const iouReportStateNum = lodashGet(this.props.iouReport, 'stateNum'); @@ -226,8 +218,5 @@ export default compose( key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.chatReportID}`, canEvict: false, }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, }), )(IOUDetailsModal);