perf: reduce rerenders of sidebar

src/components/ScreenWrapper/BaseScreenWrapper.js

@@ -43,6 +43,18 @@ class BaseScreenWrapper extends React.Component {
         });
     }
 
+    /**
+     * We explicitly want to ignore if props.modal changes, and only want to rerender if
+     * any of the other props **used for the rendering output** is changed.
+     * @param {Object} nextProps
+     * @param {Object} nextState
+     * @returns {boolean}
+     */
+    shouldComponentUpdate(nextProps, nextState) {
+        return !_.isEqual(this.state, nextState)
+            || !_.isEqual(_.omit(this.props, 'modal'), _.omit(nextProps, 'modal'));
+    }
+
     componentWillUnmount() {
         if (this.unsubscribeEscapeKey) {
             this.unsubscribeEscapeKey();

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

@@ -1,145 +1,42 @@
-import lodashGet from 'lodash/get';
-import _ from 'underscore';
 import React, {Component} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
 import SidebarLinks from '../SidebarLinks';
-import PopoverMenu from '../../../../components/PopoverMenu';
-import FloatingActionButton from '../../../../components/FloatingActionButton';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
-import compose from '../../../../libs/compose';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import ROUTES from '../../../../ROUTES';
 import Timing from '../../../../libs/actions/Timing';
 import CONST from '../../../../CONST';
-import * as Expensicons from '../../../../components/Icon/Expensicons';
-import Permissions from '../../../../libs/Permissions';
-import * as Policy from '../../../../libs/actions/Policy';
 import Performance from '../../../../libs/Performance';
-import * as Welcome from '../../../../libs/actions/Welcome';
-import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes';
 import withDrawerState from '../../../../components/withDrawerState';
-import withNavigationFocus from '../../../../components/withNavigationFocus';
 import KeyboardShortcutsModal from '../../../../components/KeyboardShortcutsModal';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
+import compose from '../../../../libs/compose';
+import sidebarPropTypes from './sidebarPropTypes';
 
 const propTypes = {
-
-    /** Callback function when the menu is shown */
-    onShowCreateMenu: PropTypes.func,
-
-    /** Callback function before the menu is hidden */
-    onHideCreateMenu: PropTypes.func,
-
-    /** reportID in the current navigation state */
-    reportIDFromRoute: PropTypes.string,
-
     ...sidebarPropTypes,
-};
-const defaultProps = {
-    onHideCreateMenu: () => {},
-    onShowCreateMenu: () => {},
-    ...sidebarDefaultProps,
+    ...windowDimensionsPropTypes,
 };
 
 class BaseSidebarScreen extends Component {
     constructor(props) {
         super(props);
 
-        this.hideCreateMenu = this.hideCreateMenu.bind(this);
         this.startTimer = this.startTimer.bind(this);
-        this.showCreateMenu = this.showCreateMenu.bind(this);
-
-        this.state = {
-            isCreateMenuActive: false,
-        };
+        this.navigateToSettings = this.navigateToSettings.bind(this);
     }
 
     componentDidMount() {
         Performance.markStart(CONST.TIMING.SIDEBAR_LOADED);
         Timing.start(CONST.TIMING.SIDEBAR_LOADED, true);
-
-        const routes = lodashGet(this.props.navigation.getState(), 'routes', []);
-        Welcome.show({routes, showCreateMenu: this.showCreateMenu});
-    }
-
-    componentDidUpdate(prevProps) {
-        if (!this.didScreenBecomeInactive(prevProps)) {
-            return;
-        }
-
-        // Hide menu manually when other pages are opened using shortcut key
-        this.hideCreateMenu();
     }
 
     /**
-     * Check if LHN status changed from active to inactive.
-     * Used to close already opened FAB menu when open any other pages (i.e. Press Command + K on web).
-     *
-     * @param {Object} prevProps
-     * @return {Boolean}
+     * Method called when avatar is clicked
      */
-    didScreenBecomeInactive(prevProps) {
-        // When the Drawer gets closed and ReportScreen is shown
-        if (!this.props.isDrawerOpen && prevProps.isDrawerOpen) {
-            return true;
-        }
-
-        // When any other page is opened over LHN
-        if (!this.props.isFocused && prevProps.isFocused) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Check if LHN is inactive.
-     * Used to prevent FAB menu showing after opening any other pages.
-     *
-     * @return {Boolean}
-     */
-    isScreenInactive() {
-        // When drawer is closed and Report page is open
-        if (this.props.isSmallScreenWidth && !this.props.isDrawerOpen) {
-            return true;
-        }
-
-        // When any other page is open
-        if (!this.props.isFocused) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Method called when we click the floating action button
-     */
-    showCreateMenu() {
-        if (this.isScreenInactive()) {
-            // Prevent showing menu when click FAB icon quickly after opening other pages
-            return;
-        }
-        this.setState({
-            isCreateMenuActive: true,
-        });
-        this.props.onShowCreateMenu();
-    }
-
-    /**
-     * Method called either when:
-     * Pressing the floating action button to open the CreateMenu modal
-     * Selecting an item on CreateMenu or closing it by clicking outside of the modal component
-     */
-    hideCreateMenu() {
-        if (!this.state.isCreateMenuActive) {
-            return;
-        }
-        this.props.onHideCreateMenu();
-        this.setState({
-            isCreateMenuActive: false,
-        });
+    navigateToSettings() {
+        Navigation.navigate(ROUTES.SETTINGS);
     }
 
     /**
@@ -151,8 +48,6 @@ class BaseSidebarScreen extends Component {
     }
 
     render() {
-        // Workspaces are policies with type === 'free'
-        const workspaces = _.filter(this.props.allPolicies, policy => policy && policy.type === CONST.POLICY.TYPE.FREE);
         return (
             <ScreenWrapper
                 includePaddingBottom={false}
@@ -164,76 +59,14 @@ class BaseSidebarScreen extends Component {
                             <SidebarLinks
                                 onLinkClick={this.startTimer}
                                 insets={insets}
+                                onAvatarClick={this.navigateToSettings}
                                 isSmallScreenWidth={this.props.isSmallScreenWidth}
                                 isDrawerOpen={this.props.isDrawerOpen}
-                                isCreateMenuOpen={this.state.isCreateMenuActive}
                                 reportIDFromRoute={this.props.reportIDFromRoute}
                             />
-                            <FloatingActionButton
-                                accessibilityLabel={this.props.translate('sidebarScreen.fabNewChat')}
-                                accessibilityRole="button"
-                                isActive={this.state.isCreateMenuActive}
-                                onPress={this.showCreateMenu}
-                            />
                         </View>
                         <KeyboardShortcutsModal />
-                        <PopoverMenu
-                            onClose={this.hideCreateMenu}
-                            isVisible={this.state.isCreateMenuActive}
-                            anchorPosition={styles.createMenuPositionSidebar}
-                            onItemSelected={this.hideCreateMenu}
-                            fromSidebarMediumScreen={!this.props.isSmallScreenWidth}
-                            menuItems={[
-                                {
-                                    icon: Expensicons.ChatBubble,
-                                    text: this.props.translate('sidebarScreen.newChat'),
-                                    onSelected: () => Navigation.navigate(ROUTES.NEW_CHAT),
-                                },
-                                {
-                                    icon: Expensicons.Users,
-                                    text: this.props.translate('sidebarScreen.newGroup'),
-                                    onSelected: () => Navigation.navigate(ROUTES.NEW_GROUP),
-                                },
-                                ...(Permissions.canUsePolicyRooms(this.props.betas) && workspaces.length ? [
-                                    {
-                                        icon: Expensicons.Hashtag,
-                                        text: this.props.translate('sidebarScreen.newRoom'),
-                                        onSelected: () => Navigation.navigate(ROUTES.WORKSPACE_NEW_ROOM),
-                                    },
-                                ] : []),
-                                ...(Permissions.canUseIOUSend(this.props.betas) ? [
-                                    {
-                                        icon: Expensicons.Send,
-                                        text: this.props.translate('iou.sendMoney'),
-                                        onSelected: () => Navigation.navigate(ROUTES.IOU_SEND),
-                                    },
-                                ] : []),
-                                ...(Permissions.canUseIOU(this.props.betas) ? [
-                                    {
-                                        icon: Expensicons.MoneyCircle,
-                                        text: this.props.translate('iou.requestMoney'),
-                                        onSelected: () => Navigation.navigate(ROUTES.IOU_REQUEST),
-                                    },
-                                ] : []),
-                                ...(Permissions.canUseIOU(this.props.betas) ? [
-                                    {
-                                        icon: Expensicons.Receipt,
-                                        text: this.props.translate('iou.splitBill'),
-                                        onSelected: () => Navigation.navigate(ROUTES.IOU_BILL),
-                                    },
-                                ] : []),
-                                ...(!Policy.hasActiveFreePolicy(this.props.allPolicies) ? [
-                                    {
-                                        icon: Expensicons.NewWorkspace,
-                                        iconWidth: 46,
-                                        iconHeight: 40,
-                                        text: this.props.translate('workspace.new.newWorkspace'),
-                                        description: this.props.translate('workspace.new.getTheExpensifyCardAndMore'),
-                                        onSelected: () => Policy.createWorkspace(),
-                                    },
-                                ] : []),
-                            ]}
-                        />
+                        {this.props.children}
                     </>
                 )}
             </ScreenWrapper>
@@ -242,9 +75,8 @@ class BaseSidebarScreen extends Component {
 }
 
 BaseSidebarScreen.propTypes = propTypes;
-BaseSidebarScreen.defaultProps = defaultProps;
 
 export default compose(
+    withWindowDimensions,
     withDrawerState,
-    withNavigationFocus,
 )(BaseSidebarScreen);