From 12766060cdabe7e43614f4522a04a2eb0dbfa66d Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Wed, 20 Sep 2023 16:33:03 +0530 Subject: [PATCH 1/7] converted SidebarLinks to fn component and improve use of windowprops --- src/pages/home/sidebar/SidebarLinks.js | 181 ++++++++---------- src/pages/home/sidebar/SidebarLinksData.js | 3 +- .../SidebarScreen/BaseSidebarScreen.js | 11 +- src/pages/home/sidebar/SidebarScreen/index.js | 7 +- .../sidebar/SidebarScreen/index.native.js | 7 +- .../sidebar/SidebarScreen/sidebarPropTypes.js | 2 - 6 files changed, 95 insertions(+), 116 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index c38ac9e01ccb..c8985d6b21dd 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -1,5 +1,5 @@ /* eslint-disable rulesdir/onyx-props-must-have-default */ -import React from 'react'; +import React, {useEffect, useRef} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import PropTypes from 'prop-types'; @@ -7,16 +7,13 @@ import styles from '../../../styles/styles'; import * as StyleUtils from '../../../styles/StyleUtils'; import ONYXKEYS from '../../../ONYXKEYS'; import safeAreaInsetPropTypes from '../../safeAreaInsetPropTypes'; -import compose from '../../../libs/compose'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import Icon from '../../../components/Icon'; import * as Expensicons from '../../../components/Icon/Expensicons'; import Tooltip from '../../../components/Tooltip'; import CONST from '../../../CONST'; -import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import * as App from '../../../libs/actions/App'; -import withWindowDimensions from '../../../components/withWindowDimensions'; import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList'; import SidebarUtils from '../../../libs/SidebarUtils'; import Header from '../../../components/Header'; @@ -30,6 +27,8 @@ import KeyboardShortcut from '../../../libs/KeyboardShortcut'; import onyxSubscribe from '../../../libs/onyxSubscribe'; import * as ReportActionContextMenu from '../report/ContextMenu/ReportActionContextMenu'; import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus'; +import useLocalize from '../../../hooks/useLocalize'; +import useWindowDimensions from '../../../hooks/useWindowDimensions'; const basePropTypes = { /** Toggles the navigation menu open and closed */ @@ -37,9 +36,6 @@ const basePropTypes = { /** Safe area insets required for mobile devices margins */ insets: safeAreaInsetPropTypes.isRequired, - - /** Whether we are viewing below the responsive breakpoint */ - isSmallScreenWidth: PropTypes.bool.isRequired, }; const propTypes = { @@ -49,47 +45,43 @@ const propTypes = { isLoading: PropTypes.bool.isRequired, + // eslint-disable-next-line react/require-default-props priorityMode: PropTypes.oneOf(_.values(CONST.PRIORITY_MODE)), isActiveReport: PropTypes.func.isRequired, - - ...withLocalizePropTypes, -}; - -const defaultProps = { - priorityMode: CONST.PRIORITY_MODE.DEFAULT, }; -class SidebarLinks extends React.PureComponent { - constructor(props) { - super(props); +function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priorityMode = CONST.PRIORITY_MODE.DEFAULT, isActiveReport, isCreateMenuOpen}) { + const modal = useRef({}); + const {translate} = useLocalize(); + const {isSmallScreenWidth} = useWindowDimensions(); - this.showSearchPage = this.showSearchPage.bind(this); - this.showReportPage = this.showReportPage.bind(this); - - if (this.props.isSmallScreenWidth) { - App.confirmReadyToOpenApp(); + useEffect(() => { + if (!isSmallScreenWidth) { + return; } - } + App.confirmReadyToOpenApp(); + }, [isSmallScreenWidth]); - componentDidMount() { + useEffect(() => { App.setSidebarLoaded(); SidebarUtils.setIsSidebarLoadedReady(); - this.isSidebarLoaded = true; - let modal = {}; - this.unsubscribeOnyxModal = onyxSubscribe({ + const unsubscribeOnyxModal = onyxSubscribe({ key: ONYXKEYS.MODAL, callback: (modalArg) => { - modal = modalArg; + if (_.isNull(modalArg)) { + return; + } + modal.current = modalArg; }, }); const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE; - this.unsubscribeEscapeKey = KeyboardShortcut.subscribe( + const unsubscribeEscapeKey = KeyboardShortcut.subscribe( shortcutConfig.shortcutKey, () => { - if (modal.willAlertModalBecomeVisible) { + if (modal.current.willAlertModalBecomeVisible) { return; } @@ -102,26 +94,26 @@ class SidebarLinks extends React.PureComponent { ); ReportActionContextMenu.hideContextMenu(false); - } - - componentWillUnmount() { - SidebarUtils.resetIsSidebarLoadedReadyPromise(); - if (this.unsubscribeEscapeKey) { - this.unsubscribeEscapeKey(); - } - if (this.unsubscribeOnyxModal) { - this.unsubscribeOnyxModal(); - } - } - showSearchPage() { - if (this.props.isCreateMenuOpen) { + return () => { + SidebarUtils.resetIsSidebarLoadedReadyPromise(); + if (unsubscribeEscapeKey) { + unsubscribeEscapeKey(); + } + if (unsubscribeOnyxModal) { + unsubscribeOnyxModal(); + } + }; + }, []); + + const showSearchPage = () => { + if (isCreateMenuOpen) { // Prevent opening Search page when click Search icon quickly after clicking FAB icon return; } Navigation.navigate(ROUTES.SEARCH); - } + }; /** * Show Report page with selected report id @@ -129,70 +121,65 @@ class SidebarLinks extends React.PureComponent { * @param {Object} option * @param {String} option.reportID */ - showReportPage(option) { + const showReportPage = (option) => { // Prevent opening Report page when clicking LHN row quickly after clicking FAB icon // 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 (isCreateMenuOpen || (!isSmallScreenWidth && isActiveReport(option.reportID)) || (isSmallScreenWidth && Navigation.getTopmostReportId())) { return; } Navigation.navigate(ROUTES.getReportRoute(option.reportID)); - this.props.onLinkClick(); - } - - render() { - const viewMode = this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT; - - return ( - - -
- } - accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} - shouldShowEnvironmentBadge - /> - - - - - - - - - + +
+ } + accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} + shouldShowEnvironmentBadge /> - {this.props.isLoading && } + + + + + + - ); - } + + + {isLoading && } + + ); } SidebarLinks.propTypes = propTypes; -SidebarLinks.defaultProps = defaultProps; -export default compose(withLocalize, withWindowDimensions)(SidebarLinks); +SidebarLinks.displayName = 'SidebarLinks'; + +export default SidebarLinks; export {basePropTypes}; diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js index 243ba24cdd00..f0a43e7647b8 100644 --- a/src/pages/home/sidebar/SidebarLinksData.js +++ b/src/pages/home/sidebar/SidebarLinksData.js @@ -63,7 +63,7 @@ const defaultProps = { policies: [], }; -function SidebarLinksData({isFocused, allReportActions, betas, chatReports, currentReportID, insets, isLoadingReportData, isSmallScreenWidth, onLinkClick, policies, priorityMode}) { +function SidebarLinksData({isFocused, allReportActions, betas, chatReports, currentReportID, insets, isLoadingReportData, onLinkClick, policies, priorityMode}) { const {translate} = useLocalize(); const reportIDsRef = useRef(null); @@ -107,7 +107,6 @@ function SidebarLinksData({isFocused, allReportActions, betas, chatReports, curr // Forwarded props: onLinkClick={onLinkClick} insets={insets} - isSmallScreenWidth={isSmallScreenWidth} priorityMode={priorityMode} // Data props: isActiveReport={isActiveReport} diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index 3d54306b6248..4d81634c8408 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -6,15 +6,9 @@ import ScreenWrapper from '../../../../components/ScreenWrapper'; import Timing from '../../../../libs/actions/Timing'; import CONST from '../../../../CONST'; import Performance from '../../../../libs/Performance'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; import sidebarPropTypes from './sidebarPropTypes'; import * as Browser from '../../../../libs/Browser'; -const propTypes = { - ...sidebarPropTypes, - ...windowDimensionsPropTypes, -}; - /** * Function called when a pinned chat is selected. */ @@ -41,7 +35,6 @@ function BaseSidebarScreen(props) { @@ -52,7 +45,7 @@ function BaseSidebarScreen(props) { ); } -BaseSidebarScreen.propTypes = propTypes; +BaseSidebarScreen.propTypes = sidebarPropTypes; BaseSidebarScreen.displayName = 'BaseSidebarScreen'; -export default withWindowDimensions(BaseSidebarScreen); +export default BaseSidebarScreen; diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js index 705d9d1e2d08..08aecb51d73e 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.js +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -5,12 +5,13 @@ import sidebarPropTypes from './sidebarPropTypes'; import BaseSidebarScreen from './BaseSidebarScreen'; import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover'; import FreezeWrapper from '../../../../libs/Navigation/FreezeWrapper'; -import withWindowDimensions from '../../../../components/withWindowDimensions'; +import useWindowDimensions from '../../../../hooks/useWindowDimensions'; import StatusBar from '../../../../libs/StatusBar'; import themeColors from '../../../../styles/themes/default'; function SidebarScreen(props) { const popoverModal = useRef(null); + const {isSmallScreenWidth} = useWindowDimensions(); useFocusEffect( useCallback(() => { @@ -38,7 +39,7 @@ function SidebarScreen(props) { }; return ( - + + Date: Mon, 25 Sep 2023 10:49:39 +0530 Subject: [PATCH 2/7] small changes --- src/pages/home/sidebar/SidebarLinks.js | 34 ++++++++++++++------------ 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 4b6874b93f14..36dff9d9e6ad 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -1,5 +1,5 @@ /* eslint-disable rulesdir/onyx-props-must-have-default */ -import React, {useEffect, useRef} from 'react'; +import React, {useEffect, useRef, useCallback} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import PropTypes from 'prop-types'; @@ -45,7 +45,6 @@ const propTypes = { isLoading: PropTypes.bool.isRequired, - // eslint-disable-next-line react/require-default-props priorityMode: PropTypes.oneOf(_.values(CONST.PRIORITY_MODE)), isActiveReport: PropTypes.func.isRequired, @@ -106,14 +105,14 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority }; }, []); - const showSearchPage = () => { + const showSearchPage = useCallback(() => { if (isCreateMenuOpen) { // Prevent opening Search page when click Search icon quickly after clicking FAB icon return; } Navigation.navigate(ROUTES.SEARCH); - }; + }, [isCreateMenuOpen]); /** * Show Report page with selected report id @@ -121,17 +120,20 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority * @param {Object} option * @param {String} option.reportID */ - const showReportPage = (option) => { - // Prevent opening Report page when clicking LHN row quickly after clicking FAB icon - // 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 (isCreateMenuOpen || (!isSmallScreenWidth && isActiveReport(option.reportID)) || (isSmallScreenWidth && Navigation.getTopmostReportId())) { - return; - } - Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option.reportID)); - onLinkClick(); - } + const showReportPage = useCallback( + (option) => { + // Prevent opening Report page when clicking LHN row quickly after clicking FAB icon + // 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 (isCreateMenuOpen || (!isSmallScreenWidth && isActiveReport(option.reportID)) || (isSmallScreenWidth && Navigation.getTopmostReportId())) { + return; + } + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option.reportID)); + onLinkClick(); + }, + [isCreateMenuOpen, isSmallScreenWidth, isActiveReport, onLinkClick], + ); const viewMode = priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT; @@ -144,7 +146,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
From 10f74b5ece5eb12d3f1a509c91f64bd3e62aca47 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Tue, 26 Sep 2023 11:10:24 +0530 Subject: [PATCH 3/7] fix lint error --- 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 36dff9d9e6ad..254fdf08f423 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -45,6 +45,7 @@ const propTypes = { isLoading: PropTypes.bool.isRequired, + // eslint-disable-next-line react/require-default-props priorityMode: PropTypes.oneOf(_.values(CONST.PRIORITY_MODE)), isActiveReport: PropTypes.func.isRequired, From e186315b2221e3c6889192729f75de687c36d475 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Thu, 28 Sep 2023 17:54:59 +0530 Subject: [PATCH 4/7] fix minor mistake --- src/pages/home/sidebar/SidebarLinks.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 75bf9f00d22c..833d962f315c 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -53,7 +53,7 @@ const propTypes = { function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priorityMode = CONST.PRIORITY_MODE.DEFAULT, isActiveReport, isCreateMenuOpen}) { const modal = useRef({}); - const {translate} = useLocalize(); + const {translate, updateLocale} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); useEffect(() => { @@ -69,7 +69,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority InteractionManager.runAfterInteractions(() => { requestAnimationFrame(() => { - this.props.updateLocale(); + updateLocale(); }); }); From 8e0955a573e5d99dd7de004196621b18e554a81c Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Thu, 28 Sep 2023 18:00:33 +0530 Subject: [PATCH 5/7] fix lint --- 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 833d962f315c..fbeb53a20024 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -110,6 +110,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority unsubscribeOnyxModal(); } }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const showSearchPage = useCallback(() => { From c25ceb54cd66932598e93cbb977f3b4c8754befb Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Thu, 28 Sep 2023 18:09:36 +0530 Subject: [PATCH 6/7] fix another lint --- 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 fbeb53a20024..ccd27efe515f 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -110,7 +110,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority unsubscribeOnyxModal(); } }; - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const showSearchPage = useCallback(() => { From fc8e156a3e94aa63481d722858be459990b76f50 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Mon, 2 Oct 2023 13:55:12 +0530 Subject: [PATCH 7/7] fix prettier --- src/pages/home/sidebar/SidebarLinks.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index fc48030ff5ac..32c224990df1 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -135,11 +135,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority // or when continuously clicking different LHNs, only apply to small screen // since getTopmostReportId always returns on other devices const reportActionID = Navigation.getTopmostReportActionId(); - if ( - isCreateMenuOpen || - (option.reportID === Navigation.getTopmostReportId() && !reportActionID) || - (isSmallScreenWidth && isActiveReport(option.reportID) && !reportActionID) - ) { + if (isCreateMenuOpen || (option.reportID === Navigation.getTopmostReportId() && !reportActionID) || (isSmallScreenWidth && isActiveReport(option.reportID) && !reportActionID)) { return; } Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option.reportID));