diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index 442276b19a0b..4cd3bdd71bbe 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, {useMemo} from 'react'; +import React, {useEffect, useMemo} from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -9,6 +9,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import MultipleAvatars from '@components/MultipleAvatars'; +import {withNetwork} from '@components/OnyxProvider'; import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle'; import participantPropTypes from '@components/participantPropTypes'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; @@ -76,6 +77,18 @@ function ReportDetailsPage(props) { const isGroupDMChat = useMemo(() => ReportUtils.isDM(props.report) && participants.length > 1, [props.report, participants.length]); + const isPrivateNotesFetchTriggered = !_.isUndefined(props.report.isLoadingPrivateNotes); + + useEffect(() => { + // Do not fetch private notes if isLoadingPrivateNotes is already defined, or if network is offline. + if (isPrivateNotesFetchTriggered || props.network.isOffline) { + return; + } + + Report.getReportPrivateNote(props.report.reportID); + // eslint-disable-next-line react-hooks/exhaustive-deps -- do not add report.isLoadingPrivateNotes to dependencies + }, [props.report.reportID, props.network.isOffline, isPrivateNotesFetchTriggered]); + const menuItems = useMemo(() => { const items = []; @@ -249,6 +262,7 @@ ReportDetailsPage.defaultProps = defaultProps; export default compose( withLocalize, withReportOrNotFound(), + withNetwork(), withOnyx({ personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST,