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

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};

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}
  />