From b55064fa7979baebb9e63a13503b40c44d74912a Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Mon, 7 Aug 2023 17:38:12 +0500 Subject: [PATCH 01/23] Fix infinite loader when using attachments deeplink --- .../AttachmentCarousel/createInitialState.js | 2 +- src/components/AttachmentCarousel/index.js | 5 ++ src/components/AttachmentModal.js | 2 +- src/libs/ReportActionsUtils.js | 10 ++++ src/pages/home/report/ReportAttachments.js | 52 +++++++++++++++++-- 5 files changed, 65 insertions(+), 6 deletions(-) diff --git a/src/components/AttachmentCarousel/createInitialState.js b/src/components/AttachmentCarousel/createInitialState.js index 9c9eb7b777f9..adbd1011c93f 100644 --- a/src/components/AttachmentCarousel/createInitialState.js +++ b/src/components/AttachmentCarousel/createInitialState.js @@ -49,7 +49,7 @@ function createInitialState(props) { attachments.reverse(); } - const page = _.findIndex(attachments, (a) => a.source === props.source); + const page = _.findIndex(attachments, (a) => a.source.includes(props.source)); if (page === -1) { Navigation.dismissModal(); return; diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 3f2524a2992e..81c4de8b1549 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -49,6 +49,11 @@ function AttachmentCarousel(props) { } useEffect(() => { + // Even an empty chat will have the 'created' report action, if its not there + // then we are coming from a deep link and actions are not yet loaded. We should + // wait until actions load. + if (_.isEmpty(props.reportActions)) return; + const initialState = createInitialState(props); if (initialState) { setPage(initialState.page); diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 7bfd6e30f398..2340a9c102b5 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -338,7 +338,7 @@ function AttachmentModal(props) { onCloseButtonPress={closeModal} /> - {!_.isEmpty(props.report) ? ( + {!_.isEmpty(props.report) && !props.report.isLoadingReportActions ? ( { + const report = ReportUtils.getReport(reportID); + + // Case 1 - if we are logged out and use the deep link for attachments and then login, then + // the report will not have reportID yet, and we wouldn't have loaded report and report actions + // data yet. call openReport to get both report and report actions data + if (!report.reportID) { + Report.openReport(reportID); + return; + } + + if (!report.isLoadingReportActions) { + // Case 2 - if we are already logged in and the report actions are not already loading and + // report has no report actions, then we are on a page other than report screen. Now call + // openReport to get report actions since we dont have them in onyx + const reportActions = ReportActionUtils.getReportActions(report.reportID); + if (_.isEmpty(reportActions)) { + Report.openReport(reportID); + return; + } + } + }, [reportID]); + return ( Navigation.dismissModal(reportID)} onCarouselAttachmentChange={(attachment) => { @@ -42,4 +82,8 @@ function ReportAttachments(props) { ReportAttachments.propTypes = propTypes; ReportAttachments.displayName = 'ReportAttachments'; -export default ReportAttachments; +export default withOnyx({ + report: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, + }, +})(ReportAttachments); From caacb7af296821e76fe2c598fcb8e7de851beb12 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Mon, 7 Aug 2023 18:14:12 +0500 Subject: [PATCH 02/23] Fix lint --- src/pages/home/report/ReportAttachments.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index c5782f4674ff..0231a7de65c6 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -1,6 +1,8 @@ import React, {useEffect} from 'react'; +import lodashGet from 'lodash/get'; import _ from 'underscore'; import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; import AttachmentModal from '../../../components/AttachmentModal'; import Navigation from '../../../libs/Navigation/Navigation'; import * as Report from '../../../libs/actions/Report'; @@ -8,8 +10,7 @@ import * as ReportUtils from '../../../libs/ReportUtils'; import * as ReportActionUtils from '../../../libs/ReportActionsUtils'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; -import lodashGet from 'lodash/get'; -import {withOnyx} from 'react-native-onyx'; +import reportPropTypes from '../../../pages/reportPropTypes'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -22,6 +23,13 @@ const propTypes = { source: PropTypes.string.isRequired, }).isRequired, }).isRequired, + + /** The report that has this attachment */ + report: reportPropTypes, +}; + +const defaultProps = { + report: {}, }; /** @@ -45,7 +53,7 @@ function ReportAttachments(props) { const report = ReportUtils.getReport(reportID); // Case 1 - if we are logged out and use the deep link for attachments and then login, then - // the report will not have reportID yet, and we wouldn't have loaded report and report actions + // the report will not have reportID yet, and we wouldn't have loaded report and report actions // data yet. call openReport to get both report and report actions data if (!report.reportID) { Report.openReport(reportID); @@ -80,6 +88,7 @@ function ReportAttachments(props) { } ReportAttachments.propTypes = propTypes; +ReportAttachments.defaultProps = defaultProps; ReportAttachments.displayName = 'ReportAttachments'; export default withOnyx({ From 8def131cfdad811f5f4e316a2e5c35140473e51d Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Mon, 7 Aug 2023 18:15:45 +0500 Subject: [PATCH 03/23] Remove unnecessary return --- src/pages/home/report/ReportAttachments.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 0231a7de65c6..6d42ae4f5806 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -67,7 +67,6 @@ function ReportAttachments(props) { const reportActions = ReportActionUtils.getReportActions(report.reportID); if (_.isEmpty(reportActions)) { Report.openReport(reportID); - return; } } }, [reportID]); From 9fedb1b8dfe1e50c2b8cace63f0849500aa2f3ba Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Mon, 7 Aug 2023 18:20:00 +0500 Subject: [PATCH 04/23] Updated import --- src/pages/home/report/ReportAttachments.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 6d42ae4f5806..312b1003fc15 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -10,7 +10,7 @@ import * as ReportUtils from '../../../libs/ReportUtils'; import * as ReportActionUtils from '../../../libs/ReportActionsUtils'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; -import reportPropTypes from '../../../pages/reportPropTypes'; +import reportPropTypes from '../../reportPropTypes'; const propTypes = { /** Navigation route context info provided by react navigation */ From 1ab671032e3690277e3b4f94d2134759014aeacc Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Mon, 7 Aug 2023 23:01:24 +0500 Subject: [PATCH 05/23] Updated logic to check empty report actions in report attachments --- .../extractAttachmentsFromReport.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js index 047a016674b7..20f6bf239efa 100644 --- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js +++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js @@ -13,6 +13,18 @@ import Navigation from '../../../libs/Navigation/Navigation'; * @returns {{attachments: Array, initialPage: Number, initialItem: Object, initialActiveSource: String}} */ function extractAttachmentsFromReport(report, reportActions, source) { + // Even an empty chat will have the 'created' report action, if its not there + // then we are coming from a deep link and actions are not yet loaded. We should + // wait until actions load. + if (_.isEmpty(reportActions)) { + return { + attachments: [], + initialPage: 0, + initialItem: undefined, + initialActiveSource: null, + }; + } + const actions = [ReportActionsUtils.getParentReportAction(report), ...ReportActionsUtils.getSortedReportActions(_.values(reportActions))]; let attachments = []; From c656d05d5dec0a2bb3a87b6977c0b51349bfb9bd Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Mon, 7 Aug 2023 23:21:50 +0500 Subject: [PATCH 06/23] Updated attachments comparison in report attachments --- .../AttachmentCarousel/extractAttachmentsFromReport.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js index 20f6bf239efa..a8999a3750e5 100644 --- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js +++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js @@ -14,7 +14,7 @@ import Navigation from '../../../libs/Navigation/Navigation'; */ function extractAttachmentsFromReport(report, reportActions, source) { // Even an empty chat will have the 'created' report action, if its not there - // then we are coming from a deep link and actions are not yet loaded. We should + // then we are coming from a deep link and actions are not yet loaded. We should // wait until actions load. if (_.isEmpty(reportActions)) { return { @@ -23,7 +23,7 @@ function extractAttachmentsFromReport(report, reportActions, source) { initialItem: undefined, initialActiveSource: null, }; - } + } const actions = [ReportActionsUtils.getParentReportAction(report), ...ReportActionsUtils.getSortedReportActions(_.values(reportActions))]; let attachments = []; @@ -56,7 +56,7 @@ function extractAttachmentsFromReport(report, reportActions, source) { attachments = attachments.reverse(); - const initialPage = _.findIndex(attachments, (a) => a.source === source); + const initialPage = _.findIndex(attachments, (a) => a.source.includes(source)); if (initialPage === -1) { Navigation.dismissModal(); return { From efab87a824323f3e05b5d49e0d37f7fbc07860ed Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Tue, 8 Aug 2023 11:17:36 +0500 Subject: [PATCH 07/23] Updated logic to use existing report data --- src/pages/home/report/ReportAttachments.js | 30 ++++++++++++---------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 312b1003fc15..dbf79df88905 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -1,4 +1,4 @@ -import React, {useEffect} from 'react'; +import React, {useEffect, useState} from 'react'; import lodashGet from 'lodash/get'; import _ from 'underscore'; import PropTypes from 'prop-types'; @@ -47,29 +47,33 @@ function getReportID(route) { function ReportAttachments(props) { const reportID = _.get(props, ['route', 'params', 'reportID']); const source = decodeURI(_.get(props, ['route', 'params', 'source'])); + const [initialReport, setInitialReport] = useState(props.report); - /** This effects handles 2x cases when report attachments are opened with deep link */ useEffect(() => { - const report = ReportUtils.getReport(reportID); + if (props.report.reportID && reportID !== props.report.reportID) { + setInitialReport(props.report); + } + }, [reportID, props.report]); + /** This effects handles 2x cases when report attachments are opened with deep link */ + useEffect(() => { // Case 1 - if we are logged out and use the deep link for attachments and then login, then // the report will not have reportID yet, and we wouldn't have loaded report and report actions // data yet. call openReport to get both report and report actions data - if (!report.reportID) { + if (!initialReport.reportID) { Report.openReport(reportID); return; } - if (!report.isLoadingReportActions) { - // Case 2 - if we are already logged in and the report actions are not already loading and - // report has no report actions, then we are on a page other than report screen. Now call - // openReport to get report actions since we dont have them in onyx - const reportActions = ReportActionUtils.getReportActions(report.reportID); - if (_.isEmpty(reportActions)) { - Report.openReport(reportID); - } + // Case 2 - if we are already logged in and the report actions are not already loading and + // report has no report actions (even an empty chat will have the 'created' report action), + // then we are on a page other than report screen. Now call openReport to get report actions + // since we dont have them in onyx. + const reportActions = ReportActionUtils.getReportActions(initialReport.reportID); + if (!initialReport.isLoadingReportActions && _.isEmpty(reportActions)) { + Report.openReport(reportID); } - }, [reportID]); + }, [initialReport]); return ( Date: Tue, 8 Aug 2023 11:30:46 +0500 Subject: [PATCH 08/23] Fix lint --- src/pages/home/report/ReportAttachments.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index dbf79df88905..a554f84eee0d 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -6,7 +6,6 @@ import {withOnyx} from 'react-native-onyx'; import AttachmentModal from '../../../components/AttachmentModal'; import Navigation from '../../../libs/Navigation/Navigation'; import * as Report from '../../../libs/actions/Report'; -import * as ReportUtils from '../../../libs/ReportUtils'; import * as ReportActionUtils from '../../../libs/ReportActionsUtils'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; @@ -73,7 +72,7 @@ function ReportAttachments(props) { if (!initialReport.isLoadingReportActions && _.isEmpty(reportActions)) { Report.openReport(reportID); } - }, [initialReport]); + }, [initialReport, reportID]); return ( Date: Tue, 8 Aug 2023 11:36:46 +0500 Subject: [PATCH 09/23] Use early return --- src/pages/home/report/ReportAttachments.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index a554f84eee0d..e032fb416879 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -69,9 +69,8 @@ function ReportAttachments(props) { // then we are on a page other than report screen. Now call openReport to get report actions // since we dont have them in onyx. const reportActions = ReportActionUtils.getReportActions(initialReport.reportID); - if (!initialReport.isLoadingReportActions && _.isEmpty(reportActions)) { - Report.openReport(reportID); - } + if (initialReport.isLoadingReportActions || !_.isEmpty(reportActions)) return; + Report.openReport(reportID); }, [initialReport, reportID]); return ( From 0b39a14e0d4fbdf0cbfcb63a31371cd95842dd7b Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Tue, 8 Aug 2023 11:39:48 +0500 Subject: [PATCH 10/23] Use early return --- src/pages/home/report/ReportAttachments.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index e032fb416879..02fef3e5e13d 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -49,9 +49,8 @@ function ReportAttachments(props) { const [initialReport, setInitialReport] = useState(props.report); useEffect(() => { - if (props.report.reportID && reportID !== props.report.reportID) { - setInitialReport(props.report); - } + if (!props.report.reportID || reportID === props.report.reportID) return; + setInitialReport(props.report); }, [reportID, props.report]); /** This effects handles 2x cases when report attachments are opened with deep link */ From 6ba09524fdbeba6c461543ea3b47d473066c4792 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 9 Aug 2023 16:06:37 +0500 Subject: [PATCH 11/23] Updated open report logic in report attachments in case of deep link --- src/pages/home/report/ReportAttachments.js | 33 +++++++++------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 02fef3e5e13d..05b3bef0f09d 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useRef} from 'react'; import lodashGet from 'lodash/get'; import _ from 'underscore'; import PropTypes from 'prop-types'; @@ -46,31 +46,26 @@ function getReportID(route) { function ReportAttachments(props) { const reportID = _.get(props, ['route', 'params', 'reportID']); const source = decodeURI(_.get(props, ['route', 'params', 'source'])); - const [initialReport, setInitialReport] = useState(props.report); - - useEffect(() => { - if (!props.report.reportID || reportID === props.report.reportID) return; - setInitialReport(props.report); - }, [reportID, props.report]); + const reportActionsLoadedRef = useRef(false); /** This effects handles 2x cases when report attachments are opened with deep link */ useEffect(() => { - // Case 1 - if we are logged out and use the deep link for attachments and then login, then - // the report will not have reportID yet, and we wouldn't have loaded report and report actions - // data yet. call openReport to get both report and report actions data - if (!initialReport.reportID) { - Report.openReport(reportID); + // return early if report actions are already loaded + if (reportActionsLoadedRef.current) return; + + // Case 1 - if we are logged out, then use deep link for attachments, then login, then + // the report will not have reportID as well as actions data loaded yet + // Case 2 (for small screens) - if we are logged in, then use the deep link for attachments, + // of a chat we haven't opened after login (from any page other than the chat itself), the + // report actions are not loaded for that report + const reportActions = ReportActionUtils.getReportActions(props.report.reportID); + if (props.report.isLoadingReportActions || !_.isEmpty(reportActions)) { + reportActionsLoadedRef.current = true; return; } - // Case 2 - if we are already logged in and the report actions are not already loading and - // report has no report actions (even an empty chat will have the 'created' report action), - // then we are on a page other than report screen. Now call openReport to get report actions - // since we dont have them in onyx. - const reportActions = ReportActionUtils.getReportActions(initialReport.reportID); - if (initialReport.isLoadingReportActions || !_.isEmpty(reportActions)) return; Report.openReport(reportID); - }, [initialReport, reportID]); + }, [props.report, reportID]); return ( Date: Fri, 18 Aug 2023 18:26:07 +0500 Subject: [PATCH 12/23] Moved empty reportActions check to platform files --- src/components/Attachments/AttachmentCarousel/index.js | 9 +++++++-- .../Attachments/AttachmentCarousel/index.native.js | 9 +++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index cec5f54508cb..4f5f0a5e7922 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -39,12 +39,17 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows(); useEffect(() => { + // Even an empty chat will have the 'created' report action, if its not there + // then we are coming from a deep link and actions are not yet loaded. We should + // wait until actions load. + if (_.isEmpty(reportActions)) return; + const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions); - const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source === source); + const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source.includes(source)); // Dismiss the modal when deleting an attachment during its display in preview. - if (initialPage === -1 && _.find(attachments, (a) => a.source === source)) { + if (initialPage === -1 && _.find(attachments, (a) => a.source.includes(source))) { Navigation.dismissModal(); } else { setPage(initialPage); diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index 4162cfae88e9..d319e075b1a6 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -28,12 +28,17 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows(); useEffect(() => { + // Even an empty chat will have the 'created' report action, if its not there + // then we are coming from a deep link and actions are not yet loaded. We should + // wait until actions load. + if (_.isEmpty(reportActions)) return; + const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions); - const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source === source); + const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source.includes(source)); // Dismiss the modal when deleting an attachment during its display in preview. - if (initialPage === -1 && _.find(attachments, (a) => a.source === source)) { + if (initialPage === -1 && _.find(attachments, (a) => a.source.includes(source))) { Navigation.dismissModal(); } else { setPage(initialPage); From 2db59df2bacfe5216fbebe11ea6d688d0e5780b4 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Sat, 19 Aug 2023 13:46:42 +0500 Subject: [PATCH 13/23] Added loader when report actions are loading --- src/components/AttachmentModal.js | 2 +- src/components/Attachments/AttachmentCarousel/index.js | 8 ++++++++ .../Attachments/AttachmentCarousel/index.native.js | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 00e31800487a..57bf3218abbc 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -344,7 +344,7 @@ function AttachmentModal(props) { onCloseButtonPress={closeModal} /> - {!_.isEmpty(props.report) && !props.report.isLoadingReportActions ? ( + {!_.isEmpty(props.report) ? ( ; + } + return ( ; + } + return ( Date: Tue, 22 Aug 2023 02:50:23 +0500 Subject: [PATCH 14/23] Use existing util to get report attachments --- src/libs/ReportActionsUtils.js | 10 ---------- src/pages/home/report/ReportAttachments.js | 2 +- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js index eeebe3f5545c..ca78dcc62a21 100644 --- a/src/libs/ReportActionsUtils.js +++ b/src/libs/ReportActionsUtils.js @@ -491,15 +491,6 @@ function getReportAction(reportID, reportActionID) { return lodashGet(allReportActions, [reportID, reportActionID], {}); } -/** - * - * @param {String} reportID - * @returns {Object} - */ -function getReportActions(reportID) { - return lodashGet(allReportActions, [reportID], {}); -} - /** * @returns {string} */ @@ -636,6 +627,5 @@ export { getReportAction, getNumberOfMoneyRequests, isSplitBillAction, - getReportActions, getAllReportActions, }; diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 05b3bef0f09d..14b6576bbdd7 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -58,7 +58,7 @@ function ReportAttachments(props) { // Case 2 (for small screens) - if we are logged in, then use the deep link for attachments, // of a chat we haven't opened after login (from any page other than the chat itself), the // report actions are not loaded for that report - const reportActions = ReportActionUtils.getReportActions(props.report.reportID); + const reportActions = ReportActionUtils.getAllReportActions(props.report.reportID); if (props.report.isLoadingReportActions || !_.isEmpty(reportActions)) { reportActionsLoadedRef.current = true; return; From 0b7b5bed71535e0b8e62697d9483a959e5c9e35e Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Mon, 2 Oct 2023 17:47:21 +0500 Subject: [PATCH 15/23] Fix lint --- src/components/Attachments/AttachmentCarousel/index.js | 4 +++- src/components/Attachments/AttachmentCarousel/index.native.js | 4 +++- src/pages/home/report/ReportAttachments.js | 4 +++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 6b389d06a2a9..c9e95bb18a0b 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -55,7 +55,9 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl // Even an empty chat will have the 'created' report action, if its not there // then we are coming from a deep link and actions are not yet loaded. We should // wait until actions load. - if (_.isEmpty(reportActions)) return; + if (_.isEmpty(reportActions)) { + return; + } const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions); diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index 882a1517ad0e..4a925d63d423 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -45,7 +45,9 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, // Even an empty chat will have the 'created' report action, if its not there // then we are coming from a deep link and actions are not yet loaded. We should // wait until actions load. - if (_.isEmpty(reportActions)) return; + if (_.isEmpty(reportActions)) { + return; + } const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions); diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index c283e41d8db6..57c23e197574 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -51,7 +51,9 @@ function ReportAttachments(props) { /** This effects handles 2x cases when report attachments are opened with deep link */ useEffect(() => { // return early if report actions are already loaded - if (reportActionsLoadedRef.current) return; + if (reportActionsLoadedRef.current) { + return; + } // Case 1 - if we are logged out, then use deep link for attachments, then login, then // the report will not have reportID as well as actions data loaded yet From 40fdf86f0ffb155485d4be90a611ca894a4ff725 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 4 Oct 2023 20:47:13 +0500 Subject: [PATCH 16/23] Use report metadata for loading state --- .../attachmentCarouselPropTypes.js | 5 +++++ .../Attachments/AttachmentCarousel/index.js | 10 ++++++++-- .../Attachments/AttachmentCarousel/index.native.js | 10 ++++++++-- src/pages/home/report/ReportAttachments.js | 14 +++++++++++--- 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js index 81f22f684243..c02d71170e16 100644 --- a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js +++ b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import reportPropTypes from '../../../pages/reportPropTypes'; import reportActionPropTypes from '../../../pages/home/report/reportActionPropTypes'; +import reportMetadataPropTypes from '../../../pages/reportMetadataPropTypes'; const propTypes = { /** source is used to determine the starting index in the array of attachments */ @@ -20,11 +21,15 @@ const propTypes = { /** The report currently being looked at */ report: reportPropTypes.isRequired, + + /** The report metadata */ + reportMetadata: reportMetadataPropTypes, }; const defaultProps = { source: '', reportActions: {}, + reportMetadata: {}, onNavigate: () => {}, onClose: () => {}, setDownloadButtonVisibility: () => {}, diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index c9e95bb18a0b..5f013fbf0617 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -28,7 +28,7 @@ const viewabilityConfig = { itemVisiblePercentThreshold: 95, }; -function AttachmentCarousel({report, reportActions, source, onNavigate, setDownloadButtonVisibility, translate}) { +function AttachmentCarousel({report, reportMetadata, reportActions, source, onNavigate, setDownloadButtonVisibility, translate}) { const scrollRef = useRef(null); const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen(); @@ -164,7 +164,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl // Even an empty chat will have the 'created' report action, if its not there // then we are coming from a deep link and actions are not yet loaded. We should // wait until actions load. - if (report.isLoadingReportActions || _.isEmpty(reportActions)) { + if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions)) { return ; } @@ -241,6 +241,12 @@ export default compose( key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, canEvict: false, }, + reportMetadata: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${report.reportID}`, + initialValue: { + isLoadingReportActions: false, + }, + }, }), withLocalize, withWindowDimensions, diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index 4a925d63d423..9960b42620bb 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -19,7 +19,7 @@ import withLocalize from '../../withLocalize'; import FullscreenLoadingIndicator from '../../FullscreenLoadingIndicator'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; -function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, setDownloadButtonVisibility, translate}) { +function AttachmentCarousel({report, reportMetadata, reportActions, source, onNavigate, setDownloadButtonVisibility, translate}) { const pagerRef = useRef(null); const [containerDimensions, setContainerDimensions] = useState({width: 0, height: 0}); @@ -125,7 +125,7 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, // Even an empty chat will have the 'created' report action, if its not there // then we are coming from a deep link and actions are not yet loaded. We should // wait until actions load. - if (report.isLoadingReportActions || _.isEmpty(reportActions)) { + if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions)) { return ; } @@ -189,6 +189,12 @@ export default compose( key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, canEvict: false, }, + reportMetadata: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${report.reportID}`, + initialValue: { + isLoadingReportActions: false, + }, + }, }), withLocalize, )(AttachmentCarousel); diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 57c23e197574..6dd2246f193e 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -10,6 +10,7 @@ import * as ReportActionUtils from '../../../libs/ReportActionsUtils'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; import reportPropTypes from '../../reportPropTypes'; +import reportMetadataPropTypes from '../../../pages/reportMetadataPropTypes'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -25,10 +26,14 @@ const propTypes = { /** The report that has this attachment */ report: reportPropTypes, + + /** The report metadata */ + reportMetadata: reportMetadataPropTypes, }; const defaultProps = { report: {}, + reportMetadata: {}, }; /** @@ -60,14 +65,14 @@ function ReportAttachments(props) { // Case 2 (for small screens) - if we are logged in, then use the deep link for attachments, // of a chat we haven't opened after login (from any page other than the chat itself), the // report actions are not loaded for that report - const reportActions = ReportActionUtils.getAllReportActions(props.report.reportID); - if (props.report.isLoadingReportActions || !_.isEmpty(reportActions)) { + const reportActions = ReportActionUtils.getAllReportActions(reportID); + if (props.reportMetadata.isLoadingReportActions || !_.isEmpty(reportActions)) { reportActionsLoadedRef.current = true; return; } Report.openReport(reportID); - }, [props.report, reportID]); + }, [props.reportMetadata, reportID]); return ( `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, }, + reportMetadata: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, + }, })(ReportAttachments); From 2ece4e7e081bf4e31a404293ab92782763ca582c Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Tue, 24 Oct 2023 15:02:41 +0500 Subject: [PATCH 17/23] Fix merge conflict --- src/components/Attachments/AttachmentCarousel/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index ea9b79c71031..00dd9eb8bdb6 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -19,7 +19,7 @@ import withLocalize from '../../withLocalize'; import FullscreenLoadingIndicator from '../../FullscreenLoadingIndicator'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; -function AttachmentCarousel({report, reportMetadata, reportActions, source, onNavigate, setDownloadButtonVisibility, translate}) { +function AttachmentCarousel({report, reportMetadata, reportActions, source, onNavigate, onClose, setDownloadButtonVisibility, translate}) { const pagerRef = useRef(null); const [containerDimensions, setContainerDimensions] = useState({width: 0, height: 0}); @@ -36,7 +36,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa const transactionID = _.get(action, ['originalMessage', 'IOUTransactionID']); return attachment.transactionID === transactionID; } - return attachment.source === source; + return attachment.source.includes(source); }, [source, report], ); From 90867755d4511e6014ef2e28d03b3d7aaeb94075 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Tue, 24 Oct 2023 15:30:14 +0500 Subject: [PATCH 18/23] Get report attachment if not in report actions --- src/pages/home/report/ReportAttachments.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 1311c651730f..385d4b044736 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -11,6 +11,7 @@ import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; import reportPropTypes from '../../reportPropTypes'; import reportMetadataPropTypes from '../../../pages/reportMetadataPropTypes'; +import CONST from '../../../CONST'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -51,6 +52,7 @@ function getReportID(route) { function ReportAttachments(props) { const reportID = _.get(props, ['route', 'params', 'reportID']); const source = decodeURI(_.get(props, ['route', 'params', 'source'])); + const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) || [])[1]; const reportActionsLoadedRef = useRef(false); /** This effects handles 2x cases when report attachments are opened with deep link */ @@ -66,7 +68,7 @@ function ReportAttachments(props) { // of a chat we haven't opened after login (from any page other than the chat itself), the // report actions are not loaded for that report const reportActions = ReportActionUtils.getAllReportActions(reportID); - if (props.reportMetadata.isLoadingReportActions || !_.isEmpty(reportActions)) { + if (props.reportMetadata.isLoadingReportActions || (!_.isEmpty(reportActions) && _.has(reportActions, sourceID))) { reportActionsLoadedRef.current = true; return; } From 6c40270ed0c4395c3a5e05e8a4c089a764729403 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 25 Oct 2023 15:47:13 +0500 Subject: [PATCH 19/23] Fix loader when actions are loading --- .../Attachments/AttachmentCarousel/index.js | 25 ++++++++++--------- .../AttachmentCarousel/index.native.js | 25 ++++++++++--------- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 5f013fbf0617..d3ecc321b8c7 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -21,6 +21,7 @@ import variables from '../../../styles/variables'; import FullscreenLoadingIndicator from '../../FullscreenLoadingIndicator'; import * as DeviceCapabilities from '../../../libs/DeviceCapabilities'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; +import CONST from '../../../CONST'; const viewabilityConfig = { // To facilitate paging through the attachments, we want to consider an item "viewable" when it is @@ -32,6 +33,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa const scrollRef = useRef(null); const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen(); + const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) || [])[1]; const [containerWidth, setContainerWidth] = useState(0); const [page, setPage] = useState(0); @@ -52,10 +54,11 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa ); useEffect(() => { - // Even an empty chat will have the 'created' report action, if its not there - // then we are coming from a deep link and actions are not yet loaded. We should - // wait until actions load. - if (_.isEmpty(reportActions)) { + // Wait until attachment is loaded and return early if + // - Report actions are loading, i.e we called OpenReport + // - Report has no actions, i.e we just logged in + // - The current attachment doesn't exist in report actions and we haven't called OpenReport yet + if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { return; } @@ -79,7 +82,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [reportActions, compareImage]); + }, [reportMetadata, reportActions, compareImage]); /** * Updates the page state when the user navigates between attachments @@ -161,10 +164,11 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa [activeSource, canUseTouchScreen, setShouldShowArrows, shouldShowArrows], ); - // Even an empty chat will have the 'created' report action, if its not there - // then we are coming from a deep link and actions are not yet loaded. We should - // wait until actions load. - if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions)) { + // Wait until attachment is loaded and return early if + // - Report actions are loading, i.e we called OpenReport + // - Report has no actions, i.e we just logged in + // - The current attachment doesn't exist in report actions and we haven't called OpenReport yet + if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { return ; } @@ -243,9 +247,6 @@ export default compose( }, reportMetadata: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${report.reportID}`, - initialValue: { - isLoadingReportActions: false, - }, }, }), withLocalize, diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index 00dd9eb8bdb6..243f787530f7 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -18,9 +18,11 @@ import compose from '../../../libs/compose'; import withLocalize from '../../withLocalize'; import FullscreenLoadingIndicator from '../../FullscreenLoadingIndicator'; import * as ReportActionsUtils from '../../../libs/ReportActionsUtils'; +import CONST from '../../../CONST'; function AttachmentCarousel({report, reportMetadata, reportActions, source, onNavigate, onClose, setDownloadButtonVisibility, translate}) { const pagerRef = useRef(null); + const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) || [])[1]; const [containerDimensions, setContainerDimensions] = useState({width: 0, height: 0}); const [page, setPage] = useState(0); @@ -42,10 +44,11 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa ); useEffect(() => { - // Even an empty chat will have the 'created' report action, if its not there - // then we are coming from a deep link and actions are not yet loaded. We should - // wait until actions load. - if (_.isEmpty(reportActions)) { + // Wait until attachment is loaded and return early if + // - Report actions are loading, i.e we called OpenReport + // - Report has no actions, i.e we just logged in + // - The current attachment doesn't exist in report actions and we haven't called OpenReport yet + if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { return; } @@ -69,7 +72,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [reportActions, compareImage]); + }, [reportMetadata, reportActions, compareImage]); /** * Updates the page state when the user navigates between attachments @@ -122,10 +125,11 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa [activeSource, setShouldShowArrows, shouldShowArrows], ); - // Even an empty chat will have the 'created' report action, if its not there - // then we are coming from a deep link and actions are not yet loaded. We should - // wait until actions load. - if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions)) { + // Wait until attachment is loaded and return early if + // - Report actions are loading, i.e we called OpenReport + // - Report has no actions, i.e we just logged in + // - The current attachment doesn't exist in report actions and we haven't called OpenReport yet + if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { return ; } @@ -191,9 +195,6 @@ export default compose( }, reportMetadata: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${report.reportID}`, - initialValue: { - isLoadingReportActions: false, - }, }, }), withLocalize, From 7b4bd67cceae70bce8d923572eb8788b87d3c548 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 25 Oct 2023 16:04:24 +0500 Subject: [PATCH 20/23] Replaced isLoadingReportActions with isLoadingInitialReportActions --- src/components/Attachments/AttachmentCarousel/index.js | 4 ++-- src/components/Attachments/AttachmentCarousel/index.native.js | 4 ++-- src/pages/home/report/ReportAttachments.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index d3ecc321b8c7..40172bcfd99d 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -58,7 +58,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa // - Report actions are loading, i.e we called OpenReport // - Report has no actions, i.e we just logged in // - The current attachment doesn't exist in report actions and we haven't called OpenReport yet - if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { + if (reportMetadata.isLoadingInitialReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { return; } @@ -168,7 +168,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa // - Report actions are loading, i.e we called OpenReport // - Report has no actions, i.e we just logged in // - The current attachment doesn't exist in report actions and we haven't called OpenReport yet - if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { + if (reportMetadata.isLoadingInitialReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { return ; } diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index 243f787530f7..45fabf00c079 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -48,7 +48,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa // - Report actions are loading, i.e we called OpenReport // - Report has no actions, i.e we just logged in // - The current attachment doesn't exist in report actions and we haven't called OpenReport yet - if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { + if (reportMetadata.isLoadingInitialReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { return; } @@ -129,7 +129,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa // - Report actions are loading, i.e we called OpenReport // - Report has no actions, i.e we just logged in // - The current attachment doesn't exist in report actions and we haven't called OpenReport yet - if (reportMetadata.isLoadingReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { + if (reportMetadata.isLoadingInitialReportActions || _.isEmpty(reportActions) || (_.isEmpty(reportMetadata) && !_.isEmpty(reportActions) && !_.has(reportActions, sourceID))) { return ; } diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 385d4b044736..46ea9e61e9e7 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -68,7 +68,7 @@ function ReportAttachments(props) { // of a chat we haven't opened after login (from any page other than the chat itself), the // report actions are not loaded for that report const reportActions = ReportActionUtils.getAllReportActions(reportID); - if (props.reportMetadata.isLoadingReportActions || (!_.isEmpty(reportActions) && _.has(reportActions, sourceID))) { + if (props.reportMetadata.isLoadingInitialReportActions || (!_.isEmpty(reportActions) && _.has(reportActions, sourceID))) { reportActionsLoadedRef.current = true; return; } From f38607214174068d472cd445542d21c96c8a8cd3 Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Wed, 25 Oct 2023 16:09:18 +0500 Subject: [PATCH 21/23] Fix lint --- src/components/Attachments/AttachmentCarousel/index.js | 2 +- src/components/Attachments/AttachmentCarousel/index.native.js | 2 +- src/pages/home/report/ReportAttachments.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 40172bcfd99d..5d047e32afdf 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -82,7 +82,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [reportMetadata, reportActions, compareImage]); + }, [reportMetadata, sourceID, reportActions, compareImage]); /** * Updates the page state when the user navigates between attachments diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index 45fabf00c079..d4846d5d0b87 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -72,7 +72,7 @@ function AttachmentCarousel({report, reportMetadata, reportActions, source, onNa } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [reportMetadata, reportActions, compareImage]); + }, [reportMetadata, sourceID, reportActions, compareImage]); /** * Updates the page state when the user navigates between attachments diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 46ea9e61e9e7..ff415ca21eda 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -10,7 +10,7 @@ import * as ReportActionUtils from '../../../libs/ReportActionsUtils'; import ROUTES from '../../../ROUTES'; import ONYXKEYS from '../../../ONYXKEYS'; import reportPropTypes from '../../reportPropTypes'; -import reportMetadataPropTypes from '../../../pages/reportMetadataPropTypes'; +import reportMetadataPropTypes from '../../reportMetadataPropTypes'; import CONST from '../../../CONST'; const propTypes = { @@ -74,7 +74,7 @@ function ReportAttachments(props) { } Report.openReport(reportID); - }, [props.reportMetadata, reportID]); + }, [props.reportMetadata, reportID, sourceID]); return ( Date: Wed, 13 Dec 2023 20:42:04 +0500 Subject: [PATCH 22/23] Fix lint --- .../attachmentCarouselPropTypes.js | 4 ++-- .../Attachments/AttachmentCarousel/index.js | 4 ++-- .../Attachments/AttachmentCarousel/index.native.js | 6 +++--- src/pages/home/report/ReportAttachments.js | 14 +++++++------- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js index 4b73f2192ee9..1c2dba77199b 100644 --- a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js +++ b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import transactionPropTypes from '@components/transactionPropTypes'; import reportActionPropTypes from '@pages/home/report/reportActionPropTypes'; -import reportPropTypes from '@pages/reportPropTypes'; import reportMetadataPropTypes from '@pages/reportMetadataPropTypes'; +import reportPropTypes from '@pages/reportPropTypes'; const propTypes = { /** source is used to determine the starting index in the array of attachments */ @@ -48,4 +48,4 @@ const defaultProps = { setDownloadButtonVisibility: () => {}, }; -export {propTypes, defaultProps}; \ No newline at end of file +export {propTypes, defaultProps}; diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 2335f753f963..ca67a31d9fcd 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -3,6 +3,7 @@ import {FlatList, Keyboard, PixelRatio, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import BlockingView from '@components/BlockingViews/BlockingView'; +import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import * as Illustrations from '@components/Icon/Illustrations'; import withLocalize from '@components/withLocalize'; import withWindowDimensions from '@components/withWindowDimensions'; @@ -20,7 +21,6 @@ import CarouselButtons from './CarouselButtons'; import CarouselItem from './CarouselItem'; import extractAttachmentsFromReport from './extractAttachmentsFromReport'; import useCarouselArrows from './useCarouselArrows'; -import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; const viewabilityConfig = { // To facilitate paging through the attachments, we want to consider an item "viewable" when it is @@ -251,4 +251,4 @@ export default compose( }), withLocalize, withWindowDimensions, -)(AttachmentCarousel); \ No newline at end of file +)(AttachmentCarousel); diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js index 5895409d2f8c..a208d96f5fe9 100644 --- a/src/components/Attachments/AttachmentCarousel/index.native.js +++ b/src/components/Attachments/AttachmentCarousel/index.native.js @@ -3,12 +3,14 @@ import {Keyboard, PixelRatio, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import BlockingView from '@components/BlockingViews/BlockingView'; +import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import * as Illustrations from '@components/Icon/Illustrations'; import withLocalize from '@components/withLocalize'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {defaultProps, propTypes} from './attachmentCarouselPropTypes'; import CarouselButtons from './CarouselButtons'; @@ -16,8 +18,6 @@ import CarouselItem from './CarouselItem'; import extractAttachmentsFromReport from './extractAttachmentsFromReport'; import AttachmentCarouselPager from './Pager'; import useCarouselArrows from './useCarouselArrows'; -import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; -import CONST from '@src/CONST'; function AttachmentCarousel({report, reportActions, parentReportActions, reportMetadata, source, onNavigate, setDownloadButtonVisibility, translate, onClose}) { const styles = useThemeStyles(); @@ -197,4 +197,4 @@ export default compose( }, }), withLocalize, -)(AttachmentCarousel); \ No newline at end of file +)(AttachmentCarousel); diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 4dd07b7febaa..abfc83fc4625 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -1,18 +1,18 @@ +import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useRef} from 'react'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import AttachmentModal from '@components/AttachmentModal'; +import * as Report from '@libs/actions/Report'; import ComposerFocusManager from '@libs/ComposerFocusManager'; import Navigation from '@libs/Navigation/Navigation'; -import * as Report from '@libs/actions/Report'; import * as ReportActionUtils from '@libs/ReportActionsUtils'; -import ROUTES from '@src/ROUTES'; -import lodashGet from 'lodash/get'; -import ONYXKEYS from '@src/ONYXKEYS'; -import CONST from '@src/CONST'; -import reportPropTypes from '@pages/reportPropTypes'; import reportMetadataPropTypes from '@pages/reportMetadataPropTypes'; +import reportPropTypes from '@pages/reportPropTypes'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -114,4 +114,4 @@ export default withOnyx({ reportMetadata: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, }, -})(ReportAttachments); \ No newline at end of file +})(ReportAttachments); From ffb750b7106cea8bb108d62d3e6e9dc85493c94b Mon Sep 17 00:00:00 2001 From: Huzaifa Rasheed Date: Tue, 9 Jan 2024 15:58:26 +0500 Subject: [PATCH 23/23] Fix lint --- src/components/Attachments/AttachmentCarousel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js index 10a31eea69c6..169a4f1f6cd5 100644 --- a/src/components/Attachments/AttachmentCarousel/index.js +++ b/src/components/Attachments/AttachmentCarousel/index.js @@ -29,7 +29,7 @@ const viewabilityConfig = { itemVisiblePercentThreshold: 95, }; -function AttachmentCarousel({report, reportActions, parentReportActions, reportMetadata, source, onNavigate, setDownloadButtonVisibility, translate, onClose}) { +function AttachmentCarousel({report, reportActions, parentReportActions, reportMetadata, source, onNavigate, setDownloadButtonVisibility, translate}) { const theme = useTheme(); const styles = useThemeStyles(); const scrollRef = useRef(null);