Skip to content

Commit

Permalink
Merge pull request #18967 from dukenv0307/fix/18828
Browse files Browse the repository at this point in the history
Fix open some pages by link display page not found
  • Loading branch information
dangrous authored May 22, 2023
2 parents 23e5de4 + dce9b35 commit 5296b4e
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 59 deletions.
11 changes: 11 additions & 0 deletions src/pages/home/report/withReportOrNotFound.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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 <FullscreenLoadingIndicator />;
}
if (_.isEmpty(this.props.report) || !this.props.report.reportID) {
return <NotFoundPage />;
}
Expand Down Expand Up @@ -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);
}
5 changes: 3 additions & 2 deletions src/pages/workspace/WorkspaceInitialPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
import compose from '../../libs/compose';
import Avatar from '../../components/Avatar';
import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
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';
Expand Down Expand Up @@ -235,7 +236,7 @@ WorkspaceInitialPage.displayName = 'WorkspaceInitialPage';

export default compose(
withLocalize,
withPolicy,
withPolicyAndFullscreenLoading,
withWindowDimensions,
withOnyx({
reports: {
Expand Down
5 changes: 3 additions & 2 deletions src/pages/workspace/WorkspaceInviteMessagePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ 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';
Expand Down Expand Up @@ -219,7 +220,7 @@ WorkspaceInviteMessagePage.defaultProps = defaultProps;

export default compose(
withLocalize,
withPolicy,
withPolicyAndFullscreenLoading,
withOnyx({
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS,
Expand Down
101 changes: 50 additions & 51 deletions src/pages/workspace/WorkspaceInvitePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ 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';
Expand Down Expand Up @@ -256,57 +257,55 @@ class WorkspaceInvitePage extends React.Component {

return (
<ScreenWrapper shouldEnableMaxHeight>
{({didScreenTransitionEnd}) => (
<FullPageNotFoundView
shouldShow={_.isEmpty(this.props.policy)}
onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
<FullPageNotFoundView
shouldShow={_.isEmpty(this.props.policy)}
onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
>
<FormSubmit
style={[styles.flex1]}
onSubmit={this.inviteUser}
>
<FormSubmit
style={[styles.flex1]}
onSubmit={this.inviteUser}
>
<HeaderWithCloseButton
title={this.props.translate('workspace.invite.invitePeople')}
subtitle={policyName}
onCloseButtonPress={() => this.clearErrors(true)}
shouldShowGetAssistanceButton
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
<HeaderWithCloseButton
title={this.props.translate('workspace.invite.invitePeople')}
subtitle={policyName}
onCloseButtonPress={() => this.clearErrors(true)}
shouldShowGetAssistanceButton
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
/>
<View style={[styles.flex1]}>
<OptionsSelector
autoFocus={false}
canSelectMultipleOptions
sections={sections}
selectedOptions={this.state.selectedOptions}
value={this.state.searchTerm}
shouldShowOptions={OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails)}
onSelectRow={this.toggleOption}
onChangeText={this.updateOptionsWithSearchTerm}
onConfirmSelection={this.inviteUser}
headerMessage={headerMessage}
hideSectionHeaders
boldStyle
shouldFocusOnSelectRow
textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
/>
<View style={[styles.flex1]}>
<OptionsSelector
autoFocus={false}
canSelectMultipleOptions
sections={sections}
selectedOptions={this.state.selectedOptions}
value={this.state.searchTerm}
shouldShowOptions={didScreenTransitionEnd && OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails)}
onSelectRow={this.toggleOption}
onChangeText={this.updateOptionsWithSearchTerm}
onConfirmSelection={this.inviteUser}
headerMessage={headerMessage}
hideSectionHeaders
boldStyle
shouldFocusOnSelectRow
textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
/>
</View>
<View style={[styles.flexShrink0]}>
<FormAlertWithSubmitButton
isDisabled={!this.state.selectedOptions.length}
isAlertVisible={this.getShouldShowAlertPrompt()}
buttonText={this.props.translate('common.next')}
onSubmit={this.inviteUser}
message={this.props.policy.alertMessage}
containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto, styles.mb5]}
enabledWhenOffline
disablePressOnEnter
/>
</View>
</FormSubmit>
</FullPageNotFoundView>
)}
</View>
<View style={[styles.flexShrink0]}>
<FormAlertWithSubmitButton
isDisabled={!this.state.selectedOptions.length}
isAlertVisible={this.getShouldShowAlertPrompt()}
buttonText={this.props.translate('common.next')}
onSubmit={this.inviteUser}
message={this.props.policy.alertMessage}
containerStyles={[styles.flexReset, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto, styles.mb5]}
enabledWhenOffline
disablePressOnEnter
/>
</View>
</FormSubmit>
</FullPageNotFoundView>
</ScreenWrapper>
);
}
Expand All @@ -317,7 +316,7 @@ WorkspaceInvitePage.defaultProps = defaultProps;

export default compose(
withLocalize,
withPolicy,
withPolicyAndFullscreenLoading,
withNetwork(),
withOnyx({
personalDetails: {
Expand Down
5 changes: 3 additions & 2 deletions src/pages/workspace/WorkspaceMembersPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ 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';
Expand Down Expand Up @@ -501,7 +502,7 @@ WorkspaceMembersPage.defaultProps = defaultProps;
export default compose(
withLocalize,
withWindowDimensions,
withPolicy,
withPolicyAndFullscreenLoading,
withNetwork(),
withOnyx({
personalDetails: {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/workspace/WorkspacePageWithSections.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ 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';
Expand Down Expand Up @@ -153,6 +153,6 @@ export default compose(
key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
},
}),
withPolicy,
withPolicyAndFullscreenLoading,
withNetwork(),
)(WorkspacePageWithSections);
64 changes: 64 additions & 0 deletions src/pages/workspace/withPolicyAndFullscreenLoading.js
Original file line number Diff line number Diff line change
@@ -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 <FullscreenLoadingIndicator />;
}

const rest = _.omit(props, ['forwardedRef']);
return (
<WrappedComponent
// eslint-disable-next-line react/jsx-props-no-spreading
{...rest}
ref={props.forwardedRef}
/>
);
};

WithPolicyAndFullscreenLoading.propTypes = propTypes;
WithPolicyAndFullscreenLoading.defaultProps = defaultProps;
WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading(${getComponentDisplayName(WrappedComponent)})`;

const withPolicyAndFullscreenLoading = React.forwardRef((props, ref) => (
<WithPolicyAndFullscreenLoading
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
forwardedRef={ref}
/>
));

return compose(
withPolicy,
withOnyx({
isLoadingReportData: {
key: ONYXKEYS.IS_LOADING_REPORT_DATA,
},
}),
)(withPolicyAndFullscreenLoading);
}

0 comments on commit 5296b4e

Please sign in to comment.