diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 0057e16aed7c6..c91509e62aba8 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -3,7 +3,6 @@ import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import PropTypes from 'prop-types'; -import {withOnyx} from 'react-native-onyx'; import styles from '../../../styles/styles'; import * as StyleUtils from '../../../styles/StyleUtils'; import ONYXKEYS from '../../../ONYXKEYS'; @@ -30,7 +29,6 @@ import * as Session from '../../../libs/actions/Session'; import KeyboardShortcut from '../../../libs/KeyboardShortcut'; import onyxSubscribe from '../../../libs/onyxSubscribe'; import * as ReportActionContextMenu from '../report/ContextMenu/ReportActionContextMenu'; -import withCurrentReportID from '../../../components/withCurrentReportID'; import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus'; const basePropTypes = { @@ -53,22 +51,13 @@ const propTypes = { priorityMode: PropTypes.oneOf(_.values(CONST.PRIORITY_MODE)), - /** The top most report id */ - currentReportID: PropTypes.string, - - /* Onyx Props */ - report: PropTypes.shape({ - /** reportID (only present when there is a matching report) */ - reportID: PropTypes.string, - }), + isActiveReport: PropTypes.func.isRequired, ...withLocalizePropTypes, }; const defaultProps = { priorityMode: CONST.PRIORITY_MODE.DEFAULT, - currentReportID: '', - report: {}, }; class SidebarLinks extends React.PureComponent { @@ -142,10 +131,14 @@ 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 (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)); @@ -201,14 +194,5 @@ class SidebarLinks extends React.PureComponent { SidebarLinks.propTypes = propTypes; SidebarLinks.defaultProps = defaultProps; -export default compose( - withLocalize, - withWindowDimensions, - withCurrentReportID, - withOnyx({ - report: { - key: ({currentReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${currentReportID}`, - }, - }), -)(SidebarLinks); +export default compose(withLocalize, withWindowDimensions)(SidebarLinks); export {basePropTypes}; diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 3eca506f75911..5d0a21038d686 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'; @@ -81,6 +81,10 @@ function SidebarLinksData({isFocused, allReportActions, betas, chatReports, curr return reportIDsRef.current || []; }, [allReportActions, betas, chatReports, currentReportID, policies, priorityMode, isLoading]); + const currentReportIDRef = useRef(currentReportID); + currentReportIDRef.current = currentReportID; + const isActiveReport = useCallback((reportID) => currentReportIDRef.current === reportID, []); + return (