From 2e340798ef635ac6929213a209cef9bb50acaf44 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Thu, 18 Aug 2022 15:34:59 +0800
Subject: [PATCH 1/2] Refactor WorkspaceInitialPage to no longer use
 withFullPolicy

---
 src/pages/workspace/WorkspaceInitialPage.js | 217 ++++++++++----------
 1 file changed, 113 insertions(+), 104 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index eb0c60ab9703..c0ecf036098e 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -18,8 +18,8 @@ import themedefault from '../../styles/themes/default';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import compose from '../../libs/compose';
 import Avatar from '../../components/Avatar';
-import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
-import withFullPolicy, {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
+import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
 import * as PolicyActions from '../../libs/actions/Policy';
 import CONST from '../../CONST';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -29,6 +29,15 @@ const propTypes = {
     ...fullPolicyPropTypes,
     ...withLocalizePropTypes,
 
+    /** URL Route params */
+    route: PropTypes.shape({
+        /** Params from the URL path */
+        params: PropTypes.shape({
+            /** policyID passed via route: /workspace/:policyID/invite */
+            policyID: PropTypes.string,
+        }),
+    }).isRequired,
+
     /** The employee list of this policy (coming from Onyx) */
     policyMemberList: PropTypes.objectOf(policyMemberPropType),
 };
@@ -76,10 +85,6 @@ class WorkspaceInitialPage extends React.Component {
 
     render() {
         const policy = this.props.policy;
-        if (_.isEmpty(policy)) {
-            return <FullScreenLoadingIndicator />;
-        }
-
         const hasMembersError = PolicyActions.hasPolicyMemberError(this.props.policyMemberList);
         const menuItems = [
             {
@@ -127,108 +132,110 @@ class WorkspaceInitialPage extends React.Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('workspace.common.workspace')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                    shouldShowThreeDotsButton
-                    shouldShowGetAssistanceButton
-                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INITIAL}
-                    threeDotsMenuItems={[
-                        {
-                            icon: Expensicons.Plus,
-                            text: this.props.translate('workspace.new.newWorkspace'),
-                            onSelected: () => PolicyActions.createAndNavigate(),
-                        }, {
-                            icon: Expensicons.Trashcan,
-                            text: this.props.translate('workspace.common.delete'),
-                            onSelected: () => this.setState({isDeleteModalOpen: true}),
-                        },
-                    ]}
-                    threeDotsAnchorPosition={styles.threeDotsPopoverOffset}
-                />
-                <ScrollView
-                    contentContainerStyle={[
-                        styles.flexGrow1,
-                        styles.flexColumn,
-                        styles.justifyContentBetween,
-                    ]}
-                >
-                    <View style={[styles.flex1]}>
-                        <View style={styles.pageWrapper}>
-                            <View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
-                                <Pressable
-                                    style={[styles.pRelative, styles.avatarLarge]}
-                                    onPress={this.openEditor}
-                                >
-                                    {this.props.policy.avatarURL
-                                        ? (
-                                            <Avatar
-                                                containerStyles={styles.avatarLarge}
-                                                imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
-                                                source={this.props.policy.avatarURL}
-                                                fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                                                size={CONST.AVATAR_SIZE.LARGE}
-                                            />
-                                        )
-                                        : (
-                                            <Icon
-                                                src={Expensicons.Workspace}
-                                                height={80}
-                                                width={80}
-                                                fill={themedefault.iconSuccessFill}
-                                            />
-                                        )}
-                                </Pressable>
-                                {!_.isEmpty(this.props.policy.name) && (
+                <FullPageNotFoundView shouldShow={_.isEmpty(this.props.policy)}>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('workspace.common.workspace')}
+                        shouldShowBackButton
+                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
+                        shouldShowThreeDotsButton
+                        shouldShowGetAssistanceButton
+                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INITIAL}
+                        threeDotsMenuItems={[
+                            {
+                                icon: Expensicons.Plus,
+                                text: this.props.translate('workspace.new.newWorkspace'),
+                                onSelected: () => PolicyActions.createAndNavigate(),
+                            }, {
+                                icon: Expensicons.Trashcan,
+                                text: this.props.translate('workspace.common.delete'),
+                                onSelected: () => this.setState({isDeleteModalOpen: true}),
+                            },
+                        ]}
+                        threeDotsAnchorPosition={styles.threeDotsPopoverOffset}
+                    />
+                    <ScrollView
+                        contentContainerStyle={[
+                            styles.flexGrow1,
+                            styles.flexColumn,
+                            styles.justifyContentBetween,
+                        ]}
+                    >
+                        <View style={[styles.flex1]}>
+                            <View style={styles.pageWrapper}>
+                                <View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
                                     <Pressable
-                                        style={[
-                                            styles.alignSelfCenter,
-                                            styles.mt4,
-                                            styles.mb6,
-                                            styles.w100,
-                                        ]}
+                                        style={[styles.pRelative, styles.avatarLarge]}
                                         onPress={this.openEditor}
                                     >
-                                        <Tooltip text={this.props.policy.name}>
-                                            <Text
-                                                numberOfLines={1}
-                                                style={[
-                                                    styles.displayName,
-                                                    styles.alignSelfCenter,
-                                                ]}
-                                            >
-                                                {this.props.policy.name}
-                                            </Text>
-                                        </Tooltip>
+                                        {this.props.policy.avatarURL
+                                            ? (
+                                                <Avatar
+                                                    containerStyles={styles.avatarLarge}
+                                                    imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
+                                                    source={this.props.policy.avatarURL}
+                                                    fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
+                                                    size={CONST.AVATAR_SIZE.LARGE}
+                                                />
+                                            )
+                                            : (
+                                                <Icon
+                                                    src={Expensicons.Workspace}
+                                                    height={80}
+                                                    width={80}
+                                                    fill={themedefault.iconSuccessFill}
+                                                />
+                                            )}
                                     </Pressable>
-                                )}
+                                    {!_.isEmpty(this.props.policy.name) && (
+                                        <Pressable
+                                            style={[
+                                                styles.alignSelfCenter,
+                                                styles.mt4,
+                                                styles.mb6,
+                                                styles.w100,
+                                            ]}
+                                            onPress={this.openEditor}
+                                        >
+                                            <Tooltip text={this.props.policy.name}>
+                                                <Text
+                                                    numberOfLines={1}
+                                                    style={[
+                                                        styles.displayName,
+                                                        styles.alignSelfCenter,
+                                                    ]}
+                                                >
+                                                    {this.props.policy.name}
+                                                </Text>
+                                            </Tooltip>
+                                        </Pressable>
+                                    )}
+                                </View>
                             </View>
+                            {_.map(menuItems, item => (
+                                <MenuItem
+                                    key={item.translationKey}
+                                    title={this.props.translate(item.translationKey)}
+                                    icon={item.icon}
+                                    iconRight={item.iconRight}
+                                    onPress={() => item.action()}
+                                    shouldShowRightIcon
+                                    brickRoadIndicator={item.error ? 'error' : null}
+                                />
+                            ))}
                         </View>
-                        {_.map(menuItems, item => (
-                            <MenuItem
-                                key={item.translationKey}
-                                title={this.props.translate(item.translationKey)}
-                                icon={item.icon}
-                                iconRight={item.iconRight}
-                                onPress={() => item.action()}
-                                shouldShowRightIcon
-                                brickRoadIndicator={item.error ? 'error' : null}
-                            />
-                        ))}
-                    </View>
-                </ScrollView>
-                <ConfirmModal
-                    title={this.props.translate('workspace.common.delete')}
-                    isVisible={this.state.isDeleteModalOpen}
-                    onConfirm={this.confirmDeleteAndHideModal}
-                    onCancel={() => this.toggleDeleteModal(false)}
-                    prompt={this.props.translate('workspace.common.deleteConfirmation')}
-                    confirmText={this.props.translate('common.delete')}
-                    cancelText={this.props.translate('common.cancel')}
-                    danger
-                />
+                    </ScrollView>
+                    <ConfirmModal
+                        title={this.props.translate('workspace.common.delete')}
+                        isVisible={this.state.isDeleteModalOpen}
+                        onConfirm={this.confirmDeleteAndHideModal}
+                        onCancel={() => this.toggleDeleteModal(false)}
+                        prompt={this.props.translate('workspace.common.deleteConfirmation')}
+                        confirmText={this.props.translate('common.delete')}
+                        cancelText={this.props.translate('common.cancel')}
+                        danger
+                    />
+                </FullPageNotFoundView>
             </ScreenWrapper>
         );
     }
@@ -240,10 +247,12 @@ WorkspaceInitialPage.displayName = 'WorkspaceInitialPage';
 
 export default compose(
     withLocalize,
-    withFullPolicy,
     withOnyx({
         policyMemberList: {
-            key: ({policy}) => `${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${policy.id}`,
+            key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${route.params.policyID}`,
+        },
+        policy: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`,
         },
     }),
 )(WorkspaceInitialPage);

From 3080e9d602a06498fef379883c0a2a41fb22382d Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Mon, 22 Aug 2022 09:11:27 +0800
Subject: [PATCH 2/2] Keep withFullPolicy

---
 src/pages/workspace/WorkspaceInitialPage.js | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index c0ecf036098e..a4b086c31962 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -19,7 +19,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import compose from '../../libs/compose';
 import Avatar from '../../components/Avatar';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
-import {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
+import withFullPolicy, {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
 import * as PolicyActions from '../../libs/actions/Policy';
 import CONST from '../../CONST';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -29,15 +29,6 @@ const propTypes = {
     ...fullPolicyPropTypes,
     ...withLocalizePropTypes,
 
-    /** URL Route params */
-    route: PropTypes.shape({
-        /** Params from the URL path */
-        params: PropTypes.shape({
-            /** policyID passed via route: /workspace/:policyID/invite */
-            policyID: PropTypes.string,
-        }),
-    }).isRequired,
-
     /** The employee list of this policy (coming from Onyx) */
     policyMemberList: PropTypes.objectOf(policyMemberPropType),
 };
@@ -247,12 +238,10 @@ WorkspaceInitialPage.displayName = 'WorkspaceInitialPage';
 
 export default compose(
     withLocalize,
+    withFullPolicy,
     withOnyx({
         policyMemberList: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${route.params.policyID}`,
-        },
-        policy: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`,
+            key: ({policy}) => `${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${policy.id}`,
         },
     }),
 )(WorkspaceInitialPage);