[No QA] Only load full policies one-by-one as needed

src/languages/en.js

@@ -727,7 +727,7 @@ export default {
             personalMessagePrompt: 'Add a personal message (optional)',
             pleaseSelectUser: 'Please select a user from contacts.',
             genericFailureMessage: 'An error occurred inviting the user to the workspace, please try again.',
-            welcomeNote: ({workspaceName}) => `You have been invited to ${workspaceName}! Download the Expensify mobile app to start tracking your expenses.`,
+            welcomeNote: ({workspaceName}) => `You have been invited to ${workspaceName || 'a workspace'}! Download the Expensify mobile app to start tracking your expenses.`,
         },
         editor: {
             nameInputLabel: 'Name',

src/libs/API.js

@@ -474,11 +474,17 @@ function GetIOUReport(parameters) {
 
 /**
  * @returns {Promise}
+ * @param {String} policyID
  */
-function GetPolicyList() {
+function GetFullPolicy(policyID) {
+    if (!_.isString(policyID)) {
+        throw new Error('[API] Must include a single policyID with calls to API.GetFullPolicy');
+    }
+
     const commandName = 'Get';
     const parameters = {
         returnValueList: 'policyList',
+        policyIDList: [policyID],
     };
     return Network.post(commandName, parameters);
 }
@@ -1122,7 +1128,7 @@ export {
     GetAccountStatus,
     GetShortLivedAuthToken,
     GetIOUReport,
-    GetPolicyList,
+    GetFullPolicy,
     GetPolicySummaryList,
     GetReportSummaryList,
     GetRequestCountryCode,

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -52,7 +52,6 @@ import {
     SettingsModalStackNavigator,
     EnablePaymentsStackNavigator,
     AddPersonalBankAccountModalStackNavigator,
-    WorkspaceInviteModalStackNavigator,
     RequestCallModalStackNavigator,
     ReportDetailsModalStackNavigator,
 } from './ModalStackNavigators';
@@ -376,12 +375,6 @@ class AuthScreens extends React.Component {
                     component={AddPersonalBankAccountModalStackNavigator}
                     listeners={modalScreenListeners}
                 />
-                <RootStack.Screen
-                    name="WorkspaceInvite"
-                    options={modalScreenOptions}
-                    component={WorkspaceInviteModalStackNavigator}
-                    listeners={modalScreenListeners}
-                />
                 <RootStack.Screen
                     name="RequestCall"
                     options={modalScreenOptions}

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -10,7 +10,7 @@ import IOURequestPage from '../../../pages/iou/IOURequestPage';
 import IOUBillPage from '../../../pages/iou/IOUBillPage';
 import IOUSendPage from '../../../pages/iou/IOUSendPage';
 import IOUDetailsModal from '../../../pages/iou/IOUDetailsModal';
-import SettingsInitialPage from '../../../pages/settings/InitialPage';
+import SettingsInitialPage from '../../../pages/settings/InitialSettingsPage';
 import SettingsProfilePage from '../../../pages/settings/Profile/ProfilePage';
 import SettingsPreferencesPage from '../../../pages/settings/PreferencesPage';
 import SettingsAboutPage from '../../../pages/settings/AboutPage';
@@ -55,9 +55,7 @@ function createModalStackNavigator(screens) {
     const ModalStackNavigator = createStackNavigator();
     return () => (
         <ModalStackNavigator.Navigator
-            screenOptions={{
-                ...defaultSubRouteOptions,
-            }}
+            screenOptions={defaultSubRouteOptions}
         >
             {_.map(screens, screen => (
                 <ModalStackNavigator.Screen
@@ -220,6 +218,10 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         Component: WorkspaceBankAccountPage,
         name: 'Workspace_BankAccount',
     },
+    {
+        Component: WorkspaceInvitePage,
+        name: 'Workspace_Invite',
+    },
     {
         Component: ReimbursementAccountPage,
         name: 'ReimbursementAccount',
@@ -242,11 +244,6 @@ const ReimbursementAccountModalStackNavigator = createModalStackNavigator([{
     name: 'ReimbursementAccount_Root',
 }]);
 
-const WorkspaceInviteModalStackNavigator = createModalStackNavigator([{
-    Component: WorkspaceInvitePage,
-    name: 'WorkspaceInvite_Root',
-}]);
-
 const RequestCallModalStackNavigator = createModalStackNavigator([{
     Component: RequestCallPage,
     name: 'RequestCall_Root',
@@ -267,6 +264,5 @@ export {
     EnablePaymentsStackNavigator,
     AddPersonalBankAccountModalStackNavigator,
     ReimbursementAccountModalStackNavigator,
-    WorkspaceInviteModalStackNavigator,
     RequestCallModalStackNavigator,
 };

src/libs/Navigation/Navigation.js

@@ -128,7 +128,7 @@ function navigate(route = ROUTES.HOME) {
 /**
  * Dismisses a screen presented modally and returns us back to the previous view.
  *
- * @param {Boolean} shouldOpenDrawer
+ * @param {Boolean} [shouldOpenDrawer]
  */
 function dismissModal(shouldOpenDrawer = false) {
     if (!navigationRef.isReady()) {

src/libs/Navigation/linkingConfig.js

@@ -99,6 +99,9 @@ export default {
                         path: ROUTES.WORKSPACE_BANK_ACCOUNT,
                         exact: true,
                     },
+                    Workspace_Invite: {
+                        path: ROUTES.WORKSPACE_INVITE,
+                    },
                     ReimbursementAccount: {
                         path: ROUTES.BANK_ACCOUNT,
                         exact: true,
@@ -170,11 +173,6 @@ export default {
                     IOU_Enable_Payments: ROUTES.IOU_ENABLE_PAYMENTS,
                 },
             },
-            WorkspaceInvite: {
-                screens: {
-                    WorkspaceInvite_Root: ROUTES.WORKSPACE_INVITE,
-                },
-            },
             RequestCall: {
                 screens: {
                     RequestCall_Root: ROUTES.REQUEST_CALL,

src/libs/actions/Policy.js

@@ -1,6 +1,5 @@
 import _ from 'underscore';
 import Onyx from 'react-native-onyx';
-import lodashMerge from 'lodash/merge';
 import lodashGet from 'lodash/get';
 import * as API from '../API';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -42,40 +41,29 @@ function getSimplifiedEmployeeList(employeeList) {
  * Takes a full policy that is returned from the policyList and simplifies it so we are only storing
  * the pieces of data that we need to in Onyx
  *
- * @param {Object} fullPolicy
- * @param {String} fullPolicy.id
- * @param {String} fullPolicy.name
- * @param {String} fullPolicy.role
- * @param {String} fullPolicy.type
- * @param {String} fullPolicy.outputCurrency
- * @param {Object} fullPolicy.value.employeeList
- * @param {String} [fullPolicy.value.avatarURL]
+ * @param {Object} fullPolicyOrPolicySummary
+ * @param {String} fullPolicyOrPolicySummary.id
+ * @param {String} fullPolicyOrPolicySummary.name
+ * @param {String} fullPolicyOrPolicySummary.role
+ * @param {String} fullPolicyOrPolicySummary.type
+ * @param {String} fullPolicyOrPolicySummary.outputCurrency
+ * @param {String} [fullPolicyOrPolicySummary.value.avatarURL]
+ * @param {Object} [fullPolicyOrPolicySummary.value.employeeList]
  * @returns {Object}
  */
-function getSimplifiedPolicyObject(fullPolicy) {
+function getSimplifiedPolicyObject(fullPolicyOrPolicySummary) {
     return {
-        id: fullPolicy.id,
-        name: fullPolicy.name,
-        role: fullPolicy.role,
-        type: fullPolicy.type,
-        owner: fullPolicy.owner,
-        outputCurrency: fullPolicy.outputCurrency,
-        employeeList: getSimplifiedEmployeeList(lodashGet(fullPolicy, 'value.employeeList')),
-        avatarURL: lodashGet(fullPolicy, 'value.avatarURL', ''),
+        id: fullPolicyOrPolicySummary.id,
+        name: fullPolicyOrPolicySummary.name,
+        role: fullPolicyOrPolicySummary.role,
+        type: fullPolicyOrPolicySummary.type,
+        owner: fullPolicyOrPolicySummary.owner,
+        outputCurrency: fullPolicyOrPolicySummary.outputCurrency,
+        avatarURL: fullPolicyOrPolicySummary.avatarURL || '',
+        employeeList: getSimplifiedEmployeeList(lodashGet(fullPolicyOrPolicySummary, 'value.employeeList')),
     };
 }
 
-/**
- * @param {Array<Object>} policyList
- * @returns {Object}
- */
-function transformPolicyListToOnyxCollection(policyList) {
-    return _.reduce(policyList, (memo, policy) => ({
-        ...memo,
-        [`${ONYXKEYS.COLLECTION.POLICY}${policy.id}`]: getSimplifiedPolicyObject(policy),
-    }), {});
-}
-
 /**
  * Used to update ALL of the policies at once. If a policy is present locally, but not in the policies object passed here it will be removed.
  * @param {Object} policyCollection - object of policy key and partial policy object
@@ -124,7 +112,8 @@ function create(name = '') {
                 role: CONST.POLICY.ROLE.ADMIN,
                 outputCurrency: response.policy.outputCurrency,
             });
-        }).then(() => Promise.resolve(lodashGet(res, 'policyID')));
+        })
+        .then(() => Promise.resolve(lodashGet(res, 'policyID')));
 }
 
 /**
@@ -155,26 +144,18 @@ function createAndNavigate(name = '') {
  * and we also don't have to wait for full policies to load before navigating to the new policy.
  */
 function getPolicyList() {
-    const policyCollection = {};
     API.GetPolicySummaryList()
         .then((data) => {
             if (data.jsonCode === 200) {
-                lodashMerge(policyCollection, transformPolicyListToOnyxCollection(data.policySummaryList || []));
-            }
-
-            return API.GetPolicyList();
-        })
-        .then((data) => {
-            if (data.jsonCode === 200) {
-                lodashMerge(policyCollection, transformPolicyListToOnyxCollection(data.policyList || []));
-            }
-        })
-        .finally(() => {
-            if (_.isEmpty(policyCollection)) {
-                return;
+                const policyCollection = _.reduce(data.policySummaryList, (memo, policy) => ({
+                    ...memo,
+                    [`${ONYXKEYS.COLLECTION.POLICY}${policy.id}`]: getSimplifiedPolicyObject(policy),
+                }), {});
+
+                if (!_.isEmpty(policyCollection)) {
+                    updateAllPolicies(policyCollection);
+                }
             }
-
-            updateAllPolicies(policyCollection);
         });
 }
 
@@ -188,6 +169,21 @@ function createAndGetPolicyList() {
         .then(() => navigateToPolicy(newPolicyID));
 }
 
+/**
+ * @param {String} policyID
+ */
+function loadFullPolicy(policyID) {
+    API.GetFullPolicy(policyID)
+        .then((data) => {
+            if (data.jsonCode === 200) {
+                const policy = lodashGet(data, 'policyList[0]', {});
+                if (policy.id) {
+                    Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policy.id}`, getSimplifiedPolicyObject(policy));
+                }
+            }
+        });
+}
+
 /**
  * Is the user an admin of a free policy (aka workspace)?
  *
@@ -366,6 +362,7 @@ function hideWorkspaceAlertMessage(policyID) {
 
 export {
     getPolicyList,
+    loadFullPolicy,
     removeMembers,
     invite,
     isAdminOfFreePolicy,

src/pages/workspace/WorkspaceInitialPage.js

@@ -1,8 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
 import {View, ScrollView, Pressable} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import {withNavigationFocus} from '@react-navigation/compat';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -29,30 +27,20 @@ import themedefault from '../../styles/themes/default';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import compose from '../../libs/compose';
-import ONYXKEYS from '../../ONYXKEYS';
 import Avatar from '../../components/Avatar';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
+import withFullPolicy, {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
 
 const propTypes = {
     /** Whether the current screen is focused. */
     isFocused: PropTypes.bool.isRequired,
 
-    /** Policy for the current route */
-    policy: PropTypes.shape({
-        /** ID of the policy */
-        id: PropTypes.string,
-
-        /** Name of the policy */
-        name: PropTypes.string,
-    }),
-
+    ...fullPolicyPropTypes,
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 };
 
-const defaultProps = {
-    policy: {},
-};
+const defaultProps = fullPolicyDefaultProps;
 
 const WorkspaceInitialPage = ({
     translate, isSmallScreenWidth, policy, isFocused,
@@ -154,27 +142,29 @@ const WorkspaceInitialPage = ({
                                     )}
                             </Pressable>
 
-                            <Pressable
-                                style={[
-                                    styles.alignSelfCenter,
-                                    styles.mt4,
-                                    styles.mb6,
-                                    styles.w100,
-                                ]}
-                                onPress={openEditor}
-                            >
-                                <Tooltip text={policy.name}>
-                                    <Text
-                                        numberOfLines={1}
-                                        style={[
-                                            styles.displayName,
-                                            styles.alignSelfCenter,
-                                        ]}
-                                    >
-                                        {policy.name}
-                                    </Text>
-                                </Tooltip>
-                            </Pressable>
+                            {policy.name && (
+                                <Pressable
+                                    style={[
+                                        styles.alignSelfCenter,
+                                        styles.mt4,
+                                        styles.mb6,
+                                        styles.w100,
+                                    ]}
+                                    onPress={openEditor}
+                                >
+                                    <Tooltip text={policy.name}>
+                                        <Text
+                                            numberOfLines={1}
+                                            style={[
+                                                styles.displayName,
+                                                styles.alignSelfCenter,
+                                            ]}
+                                        >
+                                            {policy.name}
+                                        </Text>
+                                    </Tooltip>
+                                </Pressable>
+                            )}
                         </View>
                     </View>
                     {_.map(menuItems, (item) => {
@@ -206,14 +196,5 @@ export default compose(
     withLocalize,
     withWindowDimensions,
     withNavigationFocus,
-    withOnyx({
-        policy: {
-            key: (props) => {
-                const routes = lodashGet(props.navigation.getState(), 'routes', []);
-                const routeWithPolicyIDParam = _.find(routes, route => route.params && route.params.policyID);
-                const policyID = lodashGet(routeWithPolicyIDParam, ['params', 'policyID']);
-                return `${ONYXKEYS.COLLECTION.POLICY}${policyID}`;
-            },
-        },
-    }),
+    withFullPolicy,
 )(WorkspaceInitialPage);