From 7fad6acd16f97b14e8b3fccf6280fff86fa93fbf Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Fri, 27 Oct 2023 21:38:11 +0200 Subject: [PATCH 1/5] Prevent fetching older actions when offline --- src/pages/home/report/ReportActionsView.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 108e7505169..8eaefa244ee 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -21,6 +21,7 @@ import PopoverReactionList from './ReactionList/PopoverReactionList'; import getIsReportFullyVisible from '../../../libs/getIsReportFullyVisible'; import {ReactionListContext} from '../ReportScreenContext'; import useInitialValue from '../../../hooks/useInitialValue'; +import useNetwork from '../../../hooks/useNetwork'; const propTypes = { /** The report currently being looked at */ @@ -78,6 +79,7 @@ function ReportActionsView(props) { const prevNetworkRef = useRef(props.network); const prevIsSmallScreenWidthRef = useRef(props.isSmallScreenWidth); + const {isOffline} = useNetwork(); const isFocused = useIsFocused(); const reportID = props.report.reportID; @@ -85,6 +87,7 @@ function ReportActionsView(props) { * @returns {Boolean} */ const isReportFullyVisible = useMemo(() => getIsReportFullyVisible(isFocused), [isFocused]); + const isFullHistoryFetched = useMemo(() => _.last(props.reportActions).actionName === CONST.REPORT.ACTIONS.TYPE.CREATED, [props.reportActions]); const openReportIfNecessary = () => { // If the report is optimistic (AKA not yet created) we don't need to call openReport again @@ -149,18 +152,18 @@ function ReportActionsView(props) { * displaying. */ const loadOlderChats = () => { - // Only fetch more if we are not already fetching so that we don't initiate duplicate requests. - if (props.isLoadingOlderReportActions) { + // Only fetch more if we are neither already fetching (so that we don't initiate duplicate requests) nor offline. + if (props.isLoadingOlderReportActions || isOffline) { return; } - const oldestReportAction = _.last(props.reportActions); - // Don't load more chats if we're already at the beginning of the chat history - if (oldestReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { + if (isFullHistoryFetched) { return; } + // Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments + const oldestReportAction = _.last(props.reportActions); Report.getOlderActions(reportID, oldestReportAction.reportActionID); }; @@ -231,7 +234,7 @@ function ReportActionsView(props) { loadOlderChats={loadOlderChats} loadNewerChats={loadNewerChats} isLoadingInitialReportActions={props.isLoadingInitialReportActions} - isLoadingOlderReportActions={props.isLoadingOlderReportActions} + isLoadingOlderReportActions={props.isLoadingOlderReportActions || (isOffline && !isFullHistoryFetched)} isLoadingNewerReportActions={props.isLoadingNewerReportActions} policy={props.policy} /> From 5dd8afbc920b679b56a526824d00a1fcbec0e24c Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Wed, 1 Nov 2023 14:41:38 +0200 Subject: [PATCH 2/5] Show skeleton on first render when offline --- src/pages/home/report/ReportActionsList.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index e26aae7be7c..15827f64e1d 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -368,9 +368,10 @@ function ReportActionsList({ const lastReportAction = useMemo(() => _.last(sortedReportActions) || {}, [sortedReportActions]); const listFooterComponent = useCallback(() => { - // Skip this hook on the first render, as we are not sure if more actions are going to be loaded - // Therefore showing the skeleton on footer might be misleading - if (!hasFooterRendered.current) { + // Skip this hook on the first render (when online), as we are not sure if more actions are going to be loaded, + // Therefore showing the skeleton on footer might be misleading. + // When offline, there should be no second render, so we should show the skeleton if the corresponding loading prop is present + if (!isOffline && !hasFooterRendered.current) { hasFooterRendered.current = true; return null; } @@ -393,10 +394,11 @@ function ReportActionsList({ ); const listHeaderComponent = useCallback(() => { - if (!hasHeaderRendered.current) { + if (!isOffline && !hasHeaderRendered.current) { hasHeaderRendered.current = true; return null; } + return ( Date: Wed, 1 Nov 2023 14:42:27 +0200 Subject: [PATCH 3/5] Revert forced offline olderReportActions skeleton UI --- src/pages/home/report/ReportActionsView.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 7c8c7b8aa46..c685489fa25 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -87,7 +87,6 @@ function ReportActionsView(props) { * @returns {Boolean} */ const isReportFullyVisible = useMemo(() => getIsReportFullyVisible(isFocused), [isFocused]); - const isFullHistoryFetched = useMemo(() => _.last(props.reportActions).actionName === CONST.REPORT.ACTIONS.TYPE.CREATED, [props.reportActions]); const openReportIfNecessary = () => { // If the report is optimistic (AKA not yet created) we don't need to call openReport again @@ -153,17 +152,17 @@ function ReportActionsView(props) { */ const loadOlderChats = () => { // Only fetch more if we are neither already fetching (so that we don't initiate duplicate requests) nor offline. - if (props.isLoadingOlderReportActions || isOffline) { + if (isOffline || props.isLoadingOlderReportActions) { return; } + const oldestReportAction = _.last(props.reportActions); + // Don't load more chats if we're already at the beginning of the chat history - if (isFullHistoryFetched) { + if (oldestReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) { return; } - // Retrieve the next REPORT.ACTIONS.LIMIT sized page of comments - const oldestReportAction = _.last(props.reportActions); Report.getOlderActions(reportID, oldestReportAction.reportActionID); }; @@ -234,7 +233,7 @@ function ReportActionsView(props) { loadOlderChats={loadOlderChats} loadNewerChats={loadNewerChats} isLoadingInitialReportActions={props.isLoadingInitialReportActions} - isLoadingOlderReportActions={props.isLoadingOlderReportActions || (isOffline && !isFullHistoryFetched)} + isLoadingOlderReportActions={props.isLoadingOlderReportActions} isLoadingNewerReportActions={props.isLoadingNewerReportActions} policy={props.policy} /> From 58b99573636a701bb6b80a9444835092ae51f8e6 Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Wed, 1 Nov 2023 14:47:02 +0200 Subject: [PATCH 4/5] Add missing dependencies --- src/pages/home/report/ReportActionsList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 15827f64e1d..dafdf13599b 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -384,7 +384,7 @@ function ReportActionsList({ lastReportActionName={lastReportAction.actionName} /> ); - }, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName]); + }, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName, isOffline]); const onLayoutInner = useCallback( (event) => { @@ -405,7 +405,7 @@ function ReportActionsList({ isLoadingNewerReportActions={isLoadingNewerReportActions} /> ); - }, [isLoadingNewerReportActions]); + }, [isLoadingNewerReportActions, isOffline]); return ( <> From 772715011ce1431884bb499164faa36dcc8006e6 Mon Sep 17 00:00:00 2001 From: Pavlo Tsimura Date: Tue, 7 Nov 2023 19:03:24 +0100 Subject: [PATCH 5/5] Use props.network instead of useNetwork --- src/pages/home/report/ReportActionsView.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 73cb8473b90..01ec967d76b 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -10,7 +10,6 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import useCopySelectionHelper from '@hooks/useCopySelectionHelper'; import useInitialValue from '@hooks/useInitialValue'; -import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; import compose from '@libs/compose'; import getIsReportFullyVisible from '@libs/getIsReportFullyVisible'; @@ -95,7 +94,6 @@ function ReportActionsView(props) { const prevIsSmallScreenWidthRef = useRef(props.isSmallScreenWidth); - const {isOffline} = useNetwork(); const isFocused = useIsFocused(); const reportID = props.report.reportID; @@ -180,7 +178,7 @@ function ReportActionsView(props) { */ const loadOlderChats = () => { // Only fetch more if we are neither already fetching (so that we don't initiate duplicate requests) nor offline. - if (isOffline || props.isLoadingOlderReportActions) { + if (props.network.isOffline || props.isLoadingOlderReportActions) { return; }