perf: memo SidebarLinks

src/components/ScreenWrapper/BaseScreenWrapper.js

@@ -2,7 +2,6 @@ import {KeyboardAvoidingView, View} from 'react-native';
 import React from 'react';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import _ from 'underscore';
-import {withOnyx} from 'react-native-onyx';
 import CONST from '../../CONST';
 import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -18,6 +17,7 @@ import withWindowDimensions from '../withWindowDimensions';
 import ONYXKEYS from '../../ONYXKEYS';
 import {withNetwork} from '../OnyxProvider';
 import {propTypes, defaultProps} from './propTypes';
+import onyxSubscribe from '../../libs/onyxSubscribe';
 
 class BaseScreenWrapper extends React.Component {
     constructor(props) {
@@ -29,9 +29,18 @@ class BaseScreenWrapper extends React.Component {
     }
 
     componentDidMount() {
+        let willAlertModalBecomeVisible = false;
+
+        this.unsubscribeOnyx = onyxSubscribe({
+            key: ONYXKEYS.MODAL,
+            callback: (object) => {
+                willAlertModalBecomeVisible = object.willAlertModalBecomeVisible;
+            },
+        });
+
         const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
         this.unsubscribeEscapeKey = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
-            if (this.props.modal.willAlertModalBecomeVisible) {
+            if (willAlertModalBecomeVisible) {
                 return;
             }
 
@@ -51,6 +60,9 @@ class BaseScreenWrapper extends React.Component {
         if (this.unsubscribeTransitionEnd) {
             this.unsubscribeTransitionEnd();
         }
+        if (this.unsubscribeOnyx) {
+            this.unsubscribeOnyx();
+        }
     }
 
     render() {
@@ -106,10 +118,5 @@ BaseScreenWrapper.defaultProps = defaultProps;
 export default compose(
     withNavigation,
     withWindowDimensions,
-    withOnyx({
-        modal: {
-            key: ONYXKEYS.MODAL,
-        },
-    }),
     withNetwork(),
 )(BaseScreenWrapper);

src/libs/onyxSubscribe.js

@@ -0,0 +1,12 @@
+import Onyx from 'react-native-onyx';
+
+/**
+ * Connect to onyx data. Same params as Onyx.connect(), but returns a function to unsubscribe.
+ *
+ * @param {Object} mapping Same as for Onyx.connect()
+ * @return {function(): void} Unsubscribe callback
+ */
+export default (mapping) => {
+    const connectionId = Onyx.connect(mapping);
+    return () => Onyx.disconnect(connectionId);
+};

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

@@ -1,56 +1,31 @@
 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 FAB from '../../../../components/FAB';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
 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 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.navigateToSettings = this.navigateToSettings.bind(this);
-        this.showCreateMenu = this.showCreateMenu.bind(this);
-
-        this.state = {
-            isCreateMenuActive: false,
-        };
     }
 
     componentDidMount() {
@@ -61,35 +36,13 @@ class BaseSidebarScreen extends Component {
         Welcome.show({routes, showCreateMenu: this.showCreateMenu});
     }
 
-    /**
-     * Method called when we click the floating action button
-     */
-    showCreateMenu() {
-        this.setState({
-            isCreateMenuActive: true,
-        });
-        this.props.onShowCreateMenu();
-    }
-
     /**
      * Method called when avatar is clicked
      */
     navigateToSettings() {
         Navigation.navigate(ROUTES.SETTINGS);
     }
 
-    /**
-     * 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() {
-        this.props.onHideCreateMenu();
-        this.setState({
-            isCreateMenuActive: false,
-        });
-    }
-
     /**
      * Method called when a pinned chat is selected.
      */
@@ -99,8 +52,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}
@@ -117,70 +68,7 @@ class BaseSidebarScreen extends Component {
                                 isDrawerOpen={this.props.isDrawerOpen}
                                 reportIDFromRoute={this.props.reportIDFromRoute}
                             />
-                            <FAB
-                                accessibilityLabel={this.props.translate('sidebarScreen.fabNewChat')}
-                                accessibilityRole="button"
-                                isActive={this.state.isCreateMenuActive}
-                                onPress={this.showCreateMenu}
-                            />
                         </View>
-                        <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.isAdminOfFreePolicy(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(),
-                                    },
-                                ] : []),
-                            ]}
-                        />
                     </>
                 )}
             </ScreenWrapper>
@@ -189,6 +77,8 @@ class BaseSidebarScreen extends Component {
 }
 
 BaseSidebarScreen.propTypes = propTypes;
-BaseSidebarScreen.defaultProps = defaultProps;
 
-export default withDrawerState(BaseSidebarScreen);
+export default compose(
+    withWindowDimensions,
+    withDrawerState,
+)(BaseSidebarScreen);