From a6525fea4bc5072a3c709537c23ece8458085580 Mon Sep 17 00:00:00 2001
From: code0406 <d842443@gmail.com>
Date: Tue, 4 Jul 2023 08:47:14 -0400
Subject: [PATCH 1/3] migrated to function component

---
 src/pages/workspace/WorkspacesListPage.js | 83 ++++++++++-------------
 1 file changed, 37 insertions(+), 46 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index 6f11c70a6707..a91232ac924b 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -99,31 +99,23 @@ function dismissWorkspaceError(policyID, pendingAction) {
     throw new Error('Not implemented');
 }
 
-class WorkspacesListPage extends Component {
-    constructor(props) {
-        super(props);
-
-        this.getWalletBalance = this.getWalletBalance.bind(this);
-        this.getWorkspaces = this.getWorkspaces.bind(this);
-        this.getMenuItem = this.getMenuItem.bind(this);
-    }
-
+function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, userWallet, betas, network, translate}) {
     /**
      * @param {Boolean} isPaymentItem whether the item being rendered is the payments menu item
      * @returns {Number} the user wallet balance
      */
-    getWalletBalance(isPaymentItem) {
-        return isPaymentItem && Permissions.canUseWallet(this.props.betas) ? CurrencyUtils.convertToDisplayString(this.props.userWallet.currentBalance) : undefined;
+    function getWalletBalance(isPaymentItem) {
+        return isPaymentItem && Permissions.canUseWallet(betas) ? CurrencyUtils.convertToDisplayString(userWallet.currentBalance) : undefined;
     }
 
     /**
      * Add free policies (workspaces) to the list of menu items and returns the list of menu items
      * @returns {Array} the menu item list
      */
-    getWorkspaces() {
-        const reimbursementAccountBrickRoadIndicator = !_.isEmpty(this.props.reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
-        return _.chain(this.props.policies)
-            .filter((policy) => PolicyUtils.shouldShowPolicy(policy, this.props.network.isOffline))
+    function getWorkspaces() {
+        const reimbursementAccountBrickRoadIndicator = !_.isEmpty(reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+        return _.chain(policies)
+            .filter((policy) => PolicyUtils.shouldShowPolicy(policy, network.isOffline))
             .map((policy) => ({
                 title: policy.name,
                 icon: policy.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
@@ -131,7 +123,7 @@ class WorkspacesListPage extends Component {
                 action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)),
                 iconFill: themeColors.textLight,
                 fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
-                brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.allPolicyMembers),
+                brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, allPolicyMembers),
                 pendingAction: policy.pendingAction,
                 errors: policy.errors,
                 dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
@@ -148,8 +140,8 @@ class WorkspacesListPage extends Component {
      * @param {Number} index
      * @returns {JSX}
      */
-    getMenuItem(item, index) {
-        const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
+    function getMenuItem(item, index) {
+        const keyTitle = item.translationKey ? translate(item.translationKey) : item.title;
         const isPaymentItem = item.translationKey === 'common.payments';
 
         return (
@@ -168,7 +160,7 @@ class WorkspacesListPage extends Component {
                     iconStyles={item.iconStyles}
                     iconFill={item.iconFill}
                     shouldShowRightIcon
-                    badgeText={this.getWalletBalance(isPaymentItem)}
+                    badgeText={getWalletBalance(isPaymentItem)}
                     fallbackIcon={item.fallbackIcon}
                     brickRoadIndicator={item.brickRoadIndicator}
                     disabled={item.disabled}
@@ -177,34 +169,33 @@ class WorkspacesListPage extends Component {
         );
     }
 
-    render() {
-        const workspaces = this.getWorkspaces();
-        return (
-            <ScreenWrapper>
-                <HeaderWithBackButton
-                    title={this.props.translate('common.workspaces')}
-                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
+    const workspaces = getWorkspaces();
+
+    return (
+        <ScreenWrapper>
+            <HeaderWithBackButton
+                title={translate('common.workspaces')}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
+            />
+            {_.isEmpty(workspaces) ? (
+                <BlockingView
+                    icon={Expensicons.Building}
+                    title={translate('workspace.emptyWorkspace.title')}
+                    subtitle={translate('workspace.emptyWorkspace.subtitle')}
                 />
-                {_.isEmpty(workspaces) ? (
-                    <BlockingView
-                        icon={Expensicons.Building}
-                        title={this.props.translate('workspace.emptyWorkspace.title')}
-                        subtitle={this.props.translate('workspace.emptyWorkspace.subtitle')}
-                    />
-                ) : (
-                    <ScrollView style={styles.flex1}>{_.map(workspaces, (item, index) => this.getMenuItem(item, index))}</ScrollView>
-                )}
-                <FixedFooter style={[styles.flexGrow0]}>
-                    <Button
-                        accessibilityLabel={this.props.translate('workspace.new.newWorkspace')}
-                        success
-                        text={this.props.translate('workspace.new.newWorkspace')}
-                        onPress={() => Policy.createWorkspace()}
-                    />
-                </FixedFooter>
-            </ScreenWrapper>
-        );
-    }
+            ) : (
+                <ScrollView style={styles.flex1}>{_.map(workspaces, (item, index) => getMenuItem(item, index))}</ScrollView>
+            )}
+            <FixedFooter style={[styles.flexGrow0]}>
+                <Button
+                    accessibilityLabel={translate('workspace.new.newWorkspace')}
+                    success
+                    text={translate('workspace.new.newWorkspace')}
+                    onPress={() => Policy.createWorkspace()}
+                />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
 }
 
 WorkspacesListPage.propTypes = propTypes;

From 92e7007416c2798bf3d1e7e5cbfacd0020598649 Mon Sep 17 00:00:00 2001
From: code0406 <d842443@gmail.com>
Date: Tue, 4 Jul 2023 09:45:45 -0400
Subject: [PATCH 2/3] fixed eslint

---
 src/pages/workspace/WorkspacesListPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index a91232ac924b..204157231e9b 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';

From ef8fcb9a618d8fc1d757ecb6fea1f7b17ed06f21 Mon Sep 17 00:00:00 2001
From: code0406 <d842443@gmail.com>
Date: Tue, 4 Jul 2023 18:52:52 -0400
Subject: [PATCH 3/3] useMemo to improve the performance

---
 src/pages/workspace/WorkspacesListPage.js | 52 +++++++++++------------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index 204157231e9b..ea8814373bb7 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -108,31 +108,6 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
         return isPaymentItem && Permissions.canUseWallet(betas) ? CurrencyUtils.convertToDisplayString(userWallet.currentBalance) : undefined;
     }
 
-    /**
-     * Add free policies (workspaces) to the list of menu items and returns the list of menu items
-     * @returns {Array} the menu item list
-     */
-    function getWorkspaces() {
-        const reimbursementAccountBrickRoadIndicator = !_.isEmpty(reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
-        return _.chain(policies)
-            .filter((policy) => PolicyUtils.shouldShowPolicy(policy, network.isOffline))
-            .map((policy) => ({
-                title: policy.name,
-                icon: policy.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
-                iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)),
-                iconFill: themeColors.textLight,
-                fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
-                brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, allPolicyMembers),
-                pendingAction: policy.pendingAction,
-                errors: policy.errors,
-                dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
-                disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
-            }))
-            .sortBy((policy) => policy.title.toLowerCase())
-            .value();
-    }
-
     /**
      * Gets the menu item for each workspace
      *
@@ -169,7 +144,30 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
         );
     }
 
-    const workspaces = getWorkspaces();
+    /**
+     * Add free policies (workspaces) to the list of menu items and returns the list of menu items
+     * @returns {Array} the menu item list
+     */
+    const workspaces = useMemo(() => {
+        const reimbursementAccountBrickRoadIndicator = !_.isEmpty(reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
+        return _.chain(policies)
+            .filter((policy) => PolicyUtils.shouldShowPolicy(policy, network.isOffline))
+            .map((policy) => ({
+                title: policy.name,
+                icon: policy.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policy.name),
+                iconType: policy.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON,
+                action: () => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policy.id)),
+                iconFill: themeColors.textLight,
+                fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
+                brickRoadIndicator: reimbursementAccountBrickRoadIndicator || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, allPolicyMembers),
+                pendingAction: policy.pendingAction,
+                errors: policy.errors,
+                dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
+                disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+            }))
+            .sortBy((policy) => policy.title.toLowerCase())
+            .value();
+    }, [reimbursementAccount.errors, policies, network.isOffline, allPolicyMembers]);
 
     return (
         <ScreenWrapper>