Merge pull request #24360 from tienifr/fix/23676-composer-refocus-whe…

…n-click-the-same-chat Fix: Composer does not refocus when click the same chat
Expensify · Sep 6, 2023 · 1223e1e · 1223e1e
2 parents 1bdc5ac + d841942
commit 1223e1e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 25 deletions.
diff --git 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
@@ -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 (
         <View
             accessibilityElementsHidden={!isFocused}
@@ -94,6 +98,7 @@ function SidebarLinksData({isFocused, allReportActions, betas, chatReports, curr
                 isSmallScreenWidth={isSmallScreenWidth}
                 priorityMode={priorityMode}
                 // Data props:
+                isActiveReport={isActiveReport}
                 isLoading={isLoading}
                 optionListItems={optionListItems}
             />