-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Report screen performance improvements
- Add initial values to different components to allow immediate mounting/rendering - Delay the initialization of certain values to allow React to flush the queue immediately - Remove unnecessary Onyx values
- Loading branch information
Showing
13 changed files
with
263 additions
and
182 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
129 changes: 129 additions & 0 deletions
129
src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import {useEffect} from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import lodashGet from 'lodash/get'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import ONYXKEYS from '../../../ONYXKEYS'; | ||
| import * as ReportUtils from '../../ReportUtils'; | ||
| import reportPropTypes from '../../../pages/reportPropTypes'; | ||
| import {withNavigationPropTypes} from '../../../components/withNavigation'; | ||
| import * as App from '../../actions/App'; | ||
| import usePermissions from '../../../hooks/usePermissions'; | ||
| import CONST from '../../../CONST'; | ||
| import Navigation from '../Navigation'; | ||
|
|
||
| const propTypes = { | ||
| /** Available reports that would be displayed in this navigator */ | ||
| reports: PropTypes.objectOf(reportPropTypes), | ||
|
|
||
| /** The policies which the user has access to */ | ||
| policies: PropTypes.objectOf( | ||
| PropTypes.shape({ | ||
| /** The policy name */ | ||
| name: PropTypes.string, | ||
|
|
||
| /** The type of the policy */ | ||
| type: PropTypes.string, | ||
| }), | ||
| ), | ||
|
|
||
| isFirstTimeNewExpensifyUser: PropTypes.bool, | ||
|
|
||
| /** Navigation route context info provided by react navigation */ | ||
| route: PropTypes.shape({ | ||
| /** Route specific parameters used on this screen */ | ||
| params: PropTypes.shape({ | ||
| /** If the admin room should be opened */ | ||
| openOnAdminRoom: PropTypes.bool, | ||
|
|
||
| /** The ID of the report this screen should display */ | ||
| reportID: PropTypes.string, | ||
| }), | ||
| }).isRequired, | ||
|
|
||
| ...withNavigationPropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| reports: {}, | ||
| policies: {}, | ||
| isFirstTimeNewExpensifyUser: false, | ||
| }; | ||
|
|
||
| /** | ||
| * Get the most recently accessed report for the user | ||
| * | ||
| * @param {Object} reports | ||
| * @param {Boolean} [ignoreDefaultRooms] | ||
| * @param {Object} policies | ||
| * @param {Boolean} isFirstTimeNewExpensifyUser | ||
| * @param {Boolean} openOnAdminRoom | ||
| * @returns {Number} | ||
| */ | ||
| const getLastAccessedReportID = (reports, ignoreDefaultRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom) => { | ||
| // If deeplink url is of an attachment, we should show the report that the attachment comes from. | ||
| const currentRoute = Navigation.getActiveRoute(); | ||
| const matches = CONST.REGEX.ATTACHMENT_ROUTE.exec(currentRoute); | ||
| const reportID = lodashGet(matches, 1, null); | ||
| if (reportID) { | ||
| return reportID; | ||
| } | ||
|
|
||
| const lastReport = ReportUtils.findLastAccessedReport(reports, ignoreDefaultRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom); | ||
|
|
||
| return lodashGet(lastReport, 'reportID'); | ||
| }; | ||
|
|
||
| // This wrapper is reponsible for opening the last accessed report if there is no reportID specified in the route params | ||
| function ReportScreenIDSetter(props) { | ||
| const {canUseDefaultRooms} = usePermissions(); | ||
|
|
||
| useEffect(() => { | ||
| // Don't update if there is a reportID in the params already | ||
| if (lodashGet(props.route, 'params.reportID', null)) { | ||
| App.confirmReadyToOpenApp(); | ||
| return; | ||
| } | ||
|
|
||
| // If there is no reportID in route, try to find last accessed and use it for setParams | ||
| const reportID = getLastAccessedReportID( | ||
| props.reports, | ||
| !canUseDefaultRooms, | ||
| props.policies, | ||
| props.isFirstTimeNewExpensifyUser, | ||
| lodashGet(props.route, 'params.openOnAdminRoom', false), | ||
| ); | ||
|
|
||
| // It's possible that props.reports aren't fully loaded yet | ||
| // in that case the reportID is undefined | ||
| if (reportID) { | ||
| performance.mark('ReportScreenConfirmer_hook'); | ||
| performance.measure('ReportScreenConfirmer_hook_meassure', {start: 'ReportScreenConfirmer_hook', duration: 100}); | ||
| props.navigation.setParams({reportID: String(reportID)}); | ||
| } else { | ||
| App.confirmReadyToOpenApp(); | ||
| } | ||
| }, [props.route, props.navigation, props.reports, canUseDefaultRooms, props.policies, props.isFirstTimeNewExpensifyUser]); | ||
|
|
||
| // The ReportScreen without the reportID set will display a skeleton | ||
| // until the reportID is loaded and set in the route param | ||
| return null; | ||
| } | ||
|
|
||
| ReportScreenIDSetter.propTypes = propTypes; | ||
| ReportScreenIDSetter.defaultProps = defaultProps; | ||
| ReportScreenIDSetter.displayName = 'ReportScreenIDSetter'; | ||
|
|
||
| export default withOnyx({ | ||
| reports: { | ||
| key: ONYXKEYS.COLLECTION.REPORT, | ||
| allowStaleData: true, | ||
| }, | ||
| policies: { | ||
| key: ONYXKEYS.COLLECTION.POLICY, | ||
| allowStaleData: true, | ||
| }, | ||
| isFirstTimeNewExpensifyUser: { | ||
| key: ONYXKEYS.NVP_IS_FIRST_TIME_NEW_EXPENSIFY_USER, | ||
| initialValue: false, | ||
| }, | ||
| })(ReportScreenIDSetter); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.