From 2927390f51d9b44f785d18f708c430f86cebb0e4 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 10 Aug 2023 18:26:45 +0700 Subject: [PATCH 01/10] fix: composer does not refocus when click the same chat --- src/pages/home/sidebar/SidebarLinks.js | 4 +++- src/pages/home/sidebar/SidebarLinksData.js | 8 +++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 5747ed0e1d4a7..2e618ee0781e5 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -59,6 +59,8 @@ const propTypes = { priorityMode: PropTypes.oneOf(_.values(CONST.PRIORITY_MODE)), + isActiveReport: PropTypes.func.isRequired, + ...withLocalizePropTypes, }; @@ -153,7 +155,7 @@ class SidebarLinks extends React.PureComponent { // or when clicking the active LHN row // or when continuously clicking different LHNs, only apply to small screen // since getTopmostReportId always returns on other devices - if (this.props.isCreateMenuOpen || this.props.currentReportID === option.reportID || (this.props.isSmallScreenWidth && Navigation.getTopmostReportId())) { + if (this.props.isCreateMenuOpen || (!this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID)) || (this.props.isSmallScreenWidth && Navigation.getTopmostReportId())) { return; } Navigation.navigate(ROUTES.getReportRoute(option.reportID)); diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 58a7e676403ac..68900eb5648b6 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -1,4 +1,4 @@ -import React, {useMemo, useRef} from 'react'; +import React, {useCallback, useMemo, useRef} from 'react'; import _ from 'underscore'; import {deepEqual} from 'fast-equals'; import {withOnyx} from 'react-native-onyx'; @@ -15,6 +15,7 @@ import CONST from '../../../CONST'; import useLocalize from '../../../hooks/useLocalize'; import styles from '../../../styles/styles'; import withNavigationFocus from '../../../components/withNavigationFocus'; +import usePrevious from "../../../hooks/usePrevious"; const propTypes = { ...basePropTypes, @@ -75,6 +76,10 @@ function SidebarLinksData({isFocused, allReportActions, betas, chatReports, curr return reportIDs; }, [allReportActions, betas, chatReports, currentReportID, policies, priorityMode]); + const prevCurrentReportID = usePrevious(currentReportID); + const isActiveReport = useCallback((reportID) => prevCurrentReportID === reportID, [prevCurrentReportID]); + console.log(currentReportID, prevCurrentReportID, 'SidebarLinksData') + const isLoading = _.isEmpty(chatReports) || isPersonalDetailsLoading; return ( @@ -90,6 +95,7 @@ function SidebarLinksData({isFocused, allReportActions, betas, chatReports, curr isSmallScreenWidth={isSmallScreenWidth} priorityMode={priorityMode} // Data props: + isActiveReport={isActiveReport} isLoading={isLoading} optionListItems={optionListItems} /> From adb010e186c5d63a4fa659cb4ae7c2340b424e3c Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 10 Aug 2023 18:32:37 +0700 Subject: [PATCH 02/10] prettier --- src/pages/home/sidebar/SidebarLinks.js | 6 +++++- src/pages/home/sidebar/SidebarLinksData.js | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 2e618ee0781e5..938e86e3a6e05 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -155,7 +155,11 @@ class SidebarLinks extends React.PureComponent { // or when clicking the active LHN row // or when continuously clicking different LHNs, only apply to small screen // since getTopmostReportId always returns on other devices - if (this.props.isCreateMenuOpen || (!this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID)) || (this.props.isSmallScreenWidth && Navigation.getTopmostReportId())) { + if ( + this.props.isCreateMenuOpen || + (!this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID)) || + (this.props.isSmallScreenWidth && Navigation.getTopmostReportId()) + ) { return; } Navigation.navigate(ROUTES.getReportRoute(option.reportID)); diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 68900eb5648b6..82423aa4357cb 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -15,7 +15,7 @@ import CONST from '../../../CONST'; import useLocalize from '../../../hooks/useLocalize'; import styles from '../../../styles/styles'; import withNavigationFocus from '../../../components/withNavigationFocus'; -import usePrevious from "../../../hooks/usePrevious"; +import usePrevious from '../../../hooks/usePrevious'; const propTypes = { ...basePropTypes, @@ -78,7 +78,7 @@ function SidebarLinksData({isFocused, allReportActions, betas, chatReports, curr const prevCurrentReportID = usePrevious(currentReportID); const isActiveReport = useCallback((reportID) => prevCurrentReportID === reportID, [prevCurrentReportID]); - console.log(currentReportID, prevCurrentReportID, 'SidebarLinksData') + console.log(currentReportID, prevCurrentReportID, 'SidebarLinksData'); const isLoading = _.isEmpty(chatReports) || isPersonalDetailsLoading; From 67e5169e183fae2795c23098e0a0787ff7e66d5f Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 10 Aug 2023 18:34:09 +0700 Subject: [PATCH 03/10] add comment --- src/pages/home/sidebar/SidebarLinks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 938e86e3a6e05..c535954773faa 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -152,7 +152,7 @@ class SidebarLinks extends React.PureComponent { */ showReportPage(option) { // Prevent opening Report page when clicking LHN row quickly after clicking FAB icon - // or when clicking the active LHN row + // or when clicking the active LHN row on large screens // or when continuously clicking different LHNs, only apply to small screen // since getTopmostReportId always returns on other devices if ( From fe9034bf454281bc2b1bec01abb94ec2c70e7c74 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 10 Aug 2023 18:37:30 +0700 Subject: [PATCH 04/10] remove console log --- src/pages/home/sidebar/SidebarLinksData.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 82423aa4357cb..219d697f39638 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -78,7 +78,6 @@ function SidebarLinksData({isFocused, allReportActions, betas, chatReports, curr const prevCurrentReportID = usePrevious(currentReportID); const isActiveReport = useCallback((reportID) => prevCurrentReportID === reportID, [prevCurrentReportID]); - console.log(currentReportID, prevCurrentReportID, 'SidebarLinksData'); const isLoading = _.isEmpty(chatReports) || isPersonalDetailsLoading; From bc0b9dfbc209195be7b10488aa39e364c47e526e Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 11 Aug 2023 23:41:10 +0700 Subject: [PATCH 05/10] useRef instead of usePrevious --- src/pages/home/sidebar/SidebarLinksData.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 219d697f39638..471812c27c54c 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -76,8 +76,9 @@ function SidebarLinksData({isFocused, allReportActions, betas, chatReports, curr return reportIDs; }, [allReportActions, betas, chatReports, currentReportID, policies, priorityMode]); - const prevCurrentReportID = usePrevious(currentReportID); - const isActiveReport = useCallback((reportID) => prevCurrentReportID === reportID, [prevCurrentReportID]); + const currentReportIDRef = useRef(currentReportID); + currentReportIDRef.current = currentReportID; + const isActiveReport = useCallback((reportID) => currentReportIDRef.current === reportID, []); const isLoading = _.isEmpty(chatReports) || isPersonalDetailsLoading; From ac5f2dc9e6d68e6000bee555aedbfd6957d26974 Mon Sep 17 00:00:00 2001 From: tienifr Date: Sat, 12 Aug 2023 00:41:18 +0700 Subject: [PATCH 06/10] fix lint --- src/pages/home/sidebar/SidebarLinksData.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 471812c27c54c..1a27eefa6077e 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -15,7 +15,6 @@ import CONST from '../../../CONST'; import useLocalize from '../../../hooks/useLocalize'; import styles from '../../../styles/styles'; import withNavigationFocus from '../../../components/withNavigationFocus'; -import usePrevious from '../../../hooks/usePrevious'; const propTypes = { ...basePropTypes, From cf5e3cae0d50cae7934fda43c70e538aca6d7a39 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 14 Aug 2023 16:47:50 +0700 Subject: [PATCH 07/10] move all currentReportID out of SidebarLinks --- .../LHNOptionsList/LHNOptionsList.js | 7 ++- src/pages/home/sidebar/SidebarLinks.js | 49 ++++--------------- src/pages/home/sidebar/SidebarLinksData.js | 18 ++++--- 3 files changed, 27 insertions(+), 47 deletions(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js index 13de5a5e8c52f..873ce47eb371c 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.js +++ b/src/components/LHNOptionsList/LHNOptionsList.js @@ -21,6 +21,9 @@ const propTypes = { /** Toggle between compact and default view of the option */ optionMode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)).isRequired, + /** Is loading report data */ + isLoading: PropTypes.bool.isRequired, + /** Whether to allow option focus or not */ shouldDisableFocusOptions: PropTypes.bool, }; @@ -29,7 +32,7 @@ const defaultProps = { shouldDisableFocusOptions: false, }; -function LHNOptionsList({contentContainerStyles, data, onSelectRow, optionMode, shouldDisableFocusOptions}) { +function LHNOptionsList({contentContainerStyles, data, onSelectRow, optionMode, shouldDisableFocusOptions, isLoading}) { /** * This function is used to compute the layout of any given item in our list. Since we know that each item will have the exact same height, this is a performance optimization * so that the heights can be determined before the options are rendered. Otherwise, the heights are determined when each option is rendering and it causes a lot of overhead on large @@ -67,7 +70,7 @@ function LHNOptionsList({contentContainerStyles, data, onSelectRow, optionMode, ); return ( - + - {this.props.isLoading ? ( - <> - {lodashGet(this.props.report, 'reportID') && ( - - )} - - - ) : ( - - )} + + {this.props.isLoading && } ); } @@ -262,15 +243,5 @@ class SidebarLinks extends React.PureComponent { SidebarLinks.propTypes = propTypes; SidebarLinks.defaultProps = defaultProps; -export default compose( - withLocalize, - withCurrentUserPersonalDetails, - withWindowDimensions, - withCurrentReportID, - withOnyx({ - report: { - key: ({currentReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${currentReportID}`, - }, - }), -)(SidebarLinks); +export default compose(withLocalize, withCurrentUserPersonalDetails, withWindowDimensions)(SidebarLinks); export {basePropTypes}; diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 8a0ee4f5c344c..244a00fd71842 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -66,22 +66,28 @@ const defaultProps = { function SidebarLinksData({isFocused, allReportActions, betas, chatReports, currentReportID, insets, isLoadingReportData, isSmallScreenWidth, onLinkClick, policies, priorityMode}) { const {translate} = useLocalize(); + const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData; + + const currentReportIDRef = useRef(currentReportID); + currentReportIDRef.current = currentReportID; + const reportIDsRef = useRef([]); const optionListItems = useMemo(() => { - const reportIDs = SidebarUtils.getOrderedReportIDs(currentReportID, chatReports, betas, policies, priorityMode, allReportActions); + if (isLoading && !lodashGet(chatReports, [`${ONYXKEYS.COLLECTION.REPORT}${currentReportIDRef.current}`, 'reportID'])) { + reportIDsRef.current = []; + return reportIDsRef.current; + } + + const reportIDs = SidebarUtils.getOrderedReportIDs(currentReportIDRef.current, chatReports, betas, policies, priorityMode, allReportActions); if (deepEqual(reportIDsRef.current, reportIDs)) { return reportIDsRef.current; } reportIDsRef.current = reportIDs; return reportIDs; - }, [allReportActions, betas, chatReports, currentReportID, policies, priorityMode]); + }, [allReportActions, betas, chatReports, isLoading, policies, priorityMode]); - const currentReportIDRef = useRef(currentReportID); - currentReportIDRef.current = currentReportID; const isActiveReport = useCallback((reportID) => currentReportIDRef.current === reportID, []); - const isLoading = SessionUtils.didUserLogInDuringSession() && isLoadingReportData; - return ( Date: Wed, 30 Aug 2023 02:23:03 +0700 Subject: [PATCH 08/10] fix lint --- src/pages/home/sidebar/SidebarLinks.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 6caa4fa98fee9..c91509e62aba8 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -134,7 +134,11 @@ class SidebarLinks extends React.PureComponent { // or when clicking the active LHN row on large screens // or when continuously clicking different LHNs, only apply to small screen // since getTopmostReportId always returns on other devices - if (this.props.isCreateMenuOpen || (!this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID)) || (this.props.isSmallScreenWidth && Navigation.getTopmostReportId())) { + if ( + this.props.isCreateMenuOpen || + (!this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID)) || + (this.props.isSmallScreenWidth && Navigation.getTopmostReportId()) + ) { return; } Navigation.navigate(ROUTES.getReportRoute(option.reportID)); @@ -190,8 +194,5 @@ class SidebarLinks extends React.PureComponent { SidebarLinks.propTypes = propTypes; SidebarLinks.defaultProps = defaultProps; -export default compose( - withLocalize, - withWindowDimensions, -)(SidebarLinks); +export default compose(withLocalize, withWindowDimensions)(SidebarLinks); export {basePropTypes}; From 4a671f79dfe9ffc9d0ae6ab169ecc8f1f488ce0a Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 30 Aug 2023 02:40:34 +0700 Subject: [PATCH 09/10] stale commit --- src/pages/home/sidebar/SidebarLinks.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index c91509e62aba8..2096de74403aa 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -138,6 +138,7 @@ class SidebarLinks extends React.PureComponent { this.props.isCreateMenuOpen || (!this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID)) || (this.props.isSmallScreenWidth && Navigation.getTopmostReportId()) + ) { return; } From d841942452a6f9516412c59e74394aca64e1d6e0 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 30 Aug 2023 02:40:50 +0700 Subject: [PATCH 10/10] fix lint --- src/pages/home/sidebar/SidebarLinks.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 2096de74403aa..c91509e62aba8 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -138,7 +138,6 @@ class SidebarLinks extends React.PureComponent { this.props.isCreateMenuOpen || (!this.props.isSmallScreenWidth && this.props.isActiveReport(option.reportID)) || (this.props.isSmallScreenWidth && Navigation.getTopmostReportId()) - ) { return; }