Converted SidebarLinks to fn component and improve use of window props

src/pages/home/sidebar/SidebarLinks.js

@@ -1,22 +1,19 @@
 /* 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';
 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,16 +27,15 @@ 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 */
     onLinkClick: PropTypes.func.isRequired,
 
     /** 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,97 +94,92 @@ 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
      *
      * @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 (
-            <View style={[styles.flex1, styles.h100]}>
-                <View
-                    style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]}
-                    dataSet={{dragArea: true}}
-                >
-                    <Header
-                        title={
-                            <LogoComponent
-                                fill={defaultTheme.text}
-                                width={variables.lhnLogoWidth}
-                                height={variables.lhnLogoHeight}
-                            />
-                        }
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        shouldShowEnvironmentBadge
-                    />
-                    <Tooltip text={this.props.translate('common.search')}>
-                        <PressableWithoutFeedback
-                            accessibilityLabel={this.props.translate('sidebarScreen.buttonSearch')}
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                            style={[styles.flexRow, styles.ph5]}
-                            onPress={Session.checkIfActionIsAllowed(this.showSearchPage)}
-                        >
-                            <Icon src={Expensicons.MagnifyingGlass} />
-                        </PressableWithoutFeedback>
-                    </Tooltip>
-                    <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={this.props.isCreateMenuOpen} />
-                </View>
-
-                <LHNOptionsList
-                    style={[this.props.isLoading ? styles.flexShrink1 : styles.flex1]}
-                    contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(this.props.insets).marginBottom}]}
-                    data={this.props.optionListItems}
-                    onSelectRow={this.showReportPage}
-                    shouldDisableFocusOptions={this.props.isSmallScreenWidth}
-                    optionMode={viewMode}
+        onLinkClick();
+    };
+
+    const viewMode = priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT;
+
+    return (
+        <View style={[styles.flex1, styles.h100]}>
+            <View
+                style={[styles.flexRow, styles.ph5, styles.pv3, styles.justifyContentBetween, styles.alignItemsCenter]}
+                dataSet={{dragArea: true}}
+            >
+                <Header
+                    title={
+                        <LogoComponent
+                            fill={defaultTheme.textLight}
+                            width={variables.lhnLogoWidth}
+                            height={variables.lhnLogoHeight}
+                        />
+                    }
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    shouldShowEnvironmentBadge
                 />
-                {this.props.isLoading && <OptionsListSkeletonView shouldAnimate />}
+                <Tooltip text={translate('common.search')}>
+                    <PressableWithoutFeedback
+                        accessibilityLabel={translate('sidebarScreen.buttonSearch')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        style={[styles.flexRow, styles.ph5]}
+                        onPress={Session.checkIfActionIsAllowed(showSearchPage)}
+                    >
+                        <Icon src={Expensicons.MagnifyingGlass} />
+                    </PressableWithoutFeedback>
+                </Tooltip>
+                <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
-        );
-    }
+
+            <LHNOptionsList
+                style={[isLoading ? styles.flexShrink1 : styles.flex1]}
+                contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
+                data={optionListItems}
+                onSelectRow={showReportPage}
+                shouldDisableFocusOptions={isSmallScreenWidth}
+                optionMode={viewMode}
+            />
+            {isLoading && <OptionsListSkeletonView shouldAnimate />}
+        </View>
+    );
 }
 
 SidebarLinks.propTypes = propTypes;
-SidebarLinks.defaultProps = defaultProps;
-export default compose(withLocalize, withWindowDimensions)(SidebarLinks);
+SidebarLinks.displayName = 'SidebarLinks';
+
+export default SidebarLinks;
 export {basePropTypes};

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}

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.
  */
@@ -42,7 +36,6 @@ function BaseSidebarScreen(props) {
                         <SidebarLinksData
                             onLinkClick={startTimer}
                             insets={insets}
-                            isSmallScreenWidth={props.isSmallScreenWidth}
                             onLayout={props.onLayout}
                         />
                     </View>
@@ -53,7 +46,7 @@ function BaseSidebarScreen(props) {
     );
 }
 
-BaseSidebarScreen.propTypes = propTypes;
+BaseSidebarScreen.propTypes = sidebarPropTypes;
 BaseSidebarScreen.displayName = 'BaseSidebarScreen';
 
-export default withWindowDimensions(BaseSidebarScreen);
+export default BaseSidebarScreen;

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(() => {
@@ -48,7 +49,7 @@ function SidebarScreen(props) {
     };
 
     return (
-        <FreezeWrapper keepVisible={!props.isSmallScreenWidth}>
+        <FreezeWrapper keepVisible={!isSmallScreenWidth}>
             <BaseSidebarScreen
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
@@ -66,4 +67,4 @@ function SidebarScreen(props) {
 SidebarScreen.propTypes = sidebarPropTypes;
 SidebarScreen.displayName = 'SidebarScreen';
 
-export default withWindowDimensions(SidebarScreen);
+export default SidebarScreen;

src/pages/home/sidebar/SidebarScreen/index.native.js

@@ -3,11 +3,12 @@ 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';
 
 function SidebarScreen(props) {
+    const {isSmallScreenWidth} = useWindowDimensions();
     return (
-        <FreezeWrapper keepVisible={!props.isSmallScreenWidth}>
+        <FreezeWrapper keepVisible={!isSmallScreenWidth}>
             <BaseSidebarScreen
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
@@ -21,4 +22,4 @@ function SidebarScreen(props) {
 SidebarScreen.propTypes = sidebarPropTypes;
 SidebarScreen.displayName = 'SidebarScreen';
 
-export default withWindowDimensions(SidebarScreen);
+export default SidebarScreen;

src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
-import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
 
 const sidebarPropTypes = {
     /** Callback when onLayout of sidebar is called */
     onLayout: PropTypes.func,
-    ...windowDimensionsPropTypes,
 };
 export default sidebarPropTypes;