Merge pull request #9560 from Expensify/puneet-personaldetails-refactor

Stop using MY_PERSONAL_DETAILS and only use PERSONAL_DETAILS in Onyx

src/ONYXKEYS.js

@@ -46,9 +46,6 @@ export default {
     // Keeps track if there is modal currently visible or not
     MODAL: 'modal',
 
-    // Contains the personalDetails of the user as well as their timezone
-    MY_PERSONAL_DETAILS: 'myPersonalDetails',
-
     // Has information about the network status (offline/online)
     NETWORK: 'network',
 

src/components/IOUConfirmationList.js

@@ -16,6 +16,7 @@ import SettlementButton from './SettlementButton';
 import ROUTES from '../ROUTES';
 import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from './withCurrentUserPersonalDetails';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -63,20 +64,9 @@ const propTypes = {
 
     ...withLocalizePropTypes,
 
-    /* Onyx Props */
-
-    /** The personal details of the person who is logged in */
-    myPersonalDetails: PropTypes.shape({
-
-        /** Display name of the current user from their personal details */
-        displayName: PropTypes.string,
-
-        /** Avatar URL of the current user from their personal details */
-        avatar: PropTypes.string,
+    ...withCurrentUserPersonalDetailsPropTypes,
 
-        /** Primary login of the user */
-        login: PropTypes.string,
-    }),
+    /* Onyx Props */
 
     /** Holds data related to IOU view state, rather than the underlying IOU data. */
     iou: PropTypes.shape({
@@ -103,8 +93,8 @@ const defaultProps = {
     },
     onUpdateComment: null,
     comment: '',
-    myPersonalDetails: {},
     iouType: CONST.IOU.IOU_TYPE.REQUEST,
+    ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
 class IOUConfirmationList extends Component {
@@ -190,7 +180,7 @@ class IOUConfirmationList extends Component {
             const formattedParticipants = _.union(formattedSelectedParticipants, formattedUnselectedParticipants);
 
             const formattedMyPersonalDetails = OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(
-                this.props.myPersonalDetails,
+                this.props.currentUserPersonalDetails,
                 this.props.numberFormat(this.calculateAmount(selectedParticipants, true) / 100, {
                     style: 'currency',
                     currency: this.props.iou.selectedCurrencyCode,
@@ -246,7 +236,7 @@ class IOUConfirmationList extends Component {
         }));
 
         splits.push({
-            email: OptionsListUtils.addSMSDomainIfPhoneNumber(this.props.myPersonalDetails.login),
+            email: OptionsListUtils.addSMSDomainIfPhoneNumber(this.props.currentUserPersonalDetails.login),
 
             // The user is default and we should send in cents to API
             // USD is temporary and there must be support for other currencies in the future
@@ -266,7 +256,7 @@ class IOUConfirmationList extends Component {
         const selectedParticipants = this.getSelectedParticipants();
         return [
             ...selectedParticipants,
-            OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(this.props.myPersonalDetails),
+            OptionsListUtils.getIOUConfirmationOptionsFromMyPersonalDetail(this.props.currentUserPersonalDetails),
         ];
     }
 
@@ -395,11 +385,9 @@ export default compose(
     withLocalize,
     withWindowDimensions,
     withNetwork(),
+    withCurrentUserPersonalDetails,
     withOnyx({
         iou: {key: ONYXKEYS.IOU},
-        myPersonalDetails: {
-            key: ONYXKEYS.MY_PERSONAL_DETAILS,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },

src/components/withCurrentUserPersonalDetails.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+import ONYXKEYS from '../ONYXKEYS';
+import personalDetailsPropType from '../pages/personalDetailsPropType';
+
+const withCurrentUserPersonalDetailsPropTypes = {
+    currentUserPersonalDetails: personalDetailsPropType,
+};
+
+const withCurrentUserPersonalDetailsDefaultProps = {
+    currentUserPersonalDetails: {},
+};
+
+export default function (WrappedComponent) {
+    const WithCurrentUserPersonalDetails = (props) => {
+        const currentUserEmail = props.session.email;
+
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+                currentUserPersonalDetails={props.personalDetails[currentUserEmail]}
+            />
+        );
+    };
+
+    WithCurrentUserPersonalDetails.displayName = `WithCurrentUserPersonalDetails(${getComponentDisplayName(WrappedComponent)})`;
+    WithCurrentUserPersonalDetails.propTypes = {
+        forwardedRef: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+        ]),
+
+        /** Personal details of all the users, including current user */
+        personalDetails: PropTypes.objectOf(personalDetailsPropType),
+
+        /** Session of the current user */
+        session: PropTypes.shape({
+            email: PropTypes.string,
+        }),
+    };
+
+    WithCurrentUserPersonalDetails.defaultProps = {
+        forwardedRef: undefined,
+        personalDetails: {},
+        session: {
+            email: '',
+        },
+    };
+
+    const withCurrentUserPersonalDetails = React.forwardRef((props, ref) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <WithCurrentUserPersonalDetails {...props} forwardedRef={ref} />
+    ));
+
+    return withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+    })(withCurrentUserPersonalDetails);
+}
+
+export {
+    withCurrentUserPersonalDetailsPropTypes,
+    withCurrentUserPersonalDetailsDefaultProps,
+};

src/libs/DateUtils.js

@@ -12,11 +12,24 @@ import * as Localize from './Localize';
 import * as PersonalDetails from './actions/PersonalDetails';
 import * as CurrentDate from './actions/CurrentDate';
 
+let currentUserEmail;
+Onyx.connect({
+    key: ONYXKEYS.SESSION,
+    callback: (val) => {
+        // When signed out, val is undefined
+        if (!val) {
+            return;
+        }
+
+        currentUserEmail = val.email;
+    },
+});
+
 let timezone = CONST.DEFAULT_TIME_ZONE;
 Onyx.connect({
-    key: ONYXKEYS.MY_PERSONAL_DETAILS,
+    key: ONYXKEYS.PERSONAL_DETAILS,
     callback: (val) => {
-        timezone = lodashGet(val, 'timezone', CONST.DEFAULT_TIME_ZONE);
+        timezone = lodashGet(val, currentUserEmail, 'timezone', CONST.DEFAULT_TIME_ZONE);
     },
 });
 

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -40,14 +40,27 @@ import LogOutPreviousUserPage from '../../../pages/LogOutPreviousUserPage';
 import networkPropTypes from '../../../components/networkPropTypes';
 import {withNetwork} from '../../../components/OnyxProvider';
 
+let currentUserEmail;
 Onyx.connect({
-    key: ONYXKEYS.MY_PERSONAL_DETAILS,
+    key: ONYXKEYS.SESSION,
     callback: (val) => {
+        // When signed out, val is undefined
         if (!val) {
             return;
         }
 
-        const timezone = lodashGet(val, 'timezone', {});
+        currentUserEmail = val.email;
+    },
+});
+
+Onyx.connect({
+    key: ONYXKEYS.PERSONAL_DETAILS,
+    callback: (val) => {
+        if (!val) {
+            return;
+        }
+
+        const timezone = lodashGet(val, currentUserEmail, 'timezone', {});
         const currentTimezone = moment.tz.guess(true);
 
         // If the current timezone is different than the user's timezone, and their timezone is set to automatic

src/libs/actions/PersonalDetails.js

@@ -125,8 +125,6 @@ function fetchPersonalDetails() {
         returnValueList: 'personalDetailsList',
     })
         .then((data) => {
-            let myPersonalDetails = {};
-
             // If personalDetailsList does not have the current user ensure we initialize their details with an empty
             // object at least
             const personalDetailsList = _.isEmpty(data.personalDetailsList) ? {} : data.personalDetailsList;
@@ -136,15 +134,6 @@ function fetchPersonalDetails() {
 
             const allPersonalDetails = formatPersonalDetails(personalDetailsList);
             Onyx.merge(ONYXKEYS.PERSONAL_DETAILS, allPersonalDetails);
-
-            myPersonalDetails = allPersonalDetails[currentUserEmail];
-
-            // Add the first and last name to the current user's MY_PERSONAL_DETAILS key
-            myPersonalDetails.firstName = lodashGet(data.personalDetailsList, [currentUserEmail, 'firstName'], '');
-            myPersonalDetails.lastName = lodashGet(data.personalDetailsList, [currentUserEmail, 'lastName'], '');
-
-            // Set my personal details so they can be easily accessed and subscribed to on their own key
-            Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, myPersonalDetails);
         });
 }
 
@@ -262,8 +251,6 @@ function mergeLocalPersonalDetails(details) {
     // displayName is a generated field so we'll use the firstName and lastName + login to update it.
     mergedDetails.displayName = getDisplayName(currentUserEmail, mergedDetails);
 
-    // Update the associated Onyx keys
-    Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, mergedDetails);
     Onyx.merge(ONYXKEYS.PERSONAL_DETAILS, {[currentUserEmail]: mergedDetails});
 }
 
@@ -325,7 +312,7 @@ function fetchLocalCurrency() {
         })
         .then(getCurrencyList)
         .then(() => {
-            Onyx.merge(ONYXKEYS.MY_PERSONAL_DETAILS, {localCurrencyCode: currency});
+            Onyx.merge(ONYXKEYS.PERSONAL_DETAILS, {[currentUserEmail]: {localCurrencyCode: currency}});
         })
         .finally(() => {
             Onyx.merge(ONYXKEYS.IOU, {

src/libs/actions/Report.js

@@ -52,8 +52,8 @@ Onyx.connect({
 
 let myPersonalDetails;
 Onyx.connect({
-    key: ONYXKEYS.MY_PERSONAL_DETAILS,
-    callback: val => myPersonalDetails = val,
+    key: ONYXKEYS.PERSONAL_DETAILS,
+    callback: val => myPersonalDetails = val[currentUserEmail],
 });
 
 const allReports = {};

src/pages/EnablePayments/AdditionalDetailsStep.js

@@ -28,11 +28,12 @@ import AddressSearch from '../../components/AddressSearch';
 import DatePicker from '../../components/DatePicker';
 import FormHelper from '../../libs/FormHelper';
 import walletAdditionalDetailsDraftPropTypes from './walletAdditionalDetailsDraftPropTypes';
-import personalDetailsPropType from '../personalDetailsPropType';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../components/withCurrentUserPersonalDetails';
 import * as PersonalDetails from '../../libs/actions/PersonalDetails';
 
 const propTypes = {
     ...withLocalizePropTypes,
+    ...withCurrentUserPersonalDetailsPropTypes,
 
     /** Stores additional information about the additional details step e.g. loading state and errors with fields */
     walletAdditionalDetails: PropTypes.shape({
@@ -61,9 +62,6 @@ const propTypes = {
 
     /** Stores the personal details typed by the user */
     walletAdditionalDetailsDraft: walletAdditionalDetailsDraftPropTypes,
-
-    /** The personal details of the person who is logged in */
-    myPersonalDetails: personalDetailsPropType.isRequired,
 };
 
 const defaultProps = {
@@ -86,6 +84,7 @@ const defaultProps = {
         dob: '',
         ssn: '',
     },
+    ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
 class AdditionalDetailsStep extends React.Component {
@@ -275,7 +274,7 @@ class AdditionalDetailsStep extends React.Component {
         const isErrorVisible = _.size(this.getErrors()) > 0
             || lodashGet(this.props, 'walletAdditionalDetails.additionalErrorMessage', '').length > 0;
         const shouldAskForFullSSN = this.props.walletAdditionalDetails.shouldAskForFullSSN;
-        const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.myPersonalDetails);
+        const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
 
         return (
             <ScreenWrapper>
@@ -407,13 +406,11 @@ AdditionalDetailsStep.propTypes = propTypes;
 AdditionalDetailsStep.defaultProps = defaultProps;
 export default compose(
     withLocalize,
+    withCurrentUserPersonalDetails,
     withOnyx({
         walletAdditionalDetails: {
             key: ONYXKEYS.WALLET_ADDITIONAL_DETAILS,
             initWithStoredValues: false,
         },
-        myPersonalDetails: {
-            key: ONYXKEYS.MY_PERSONAL_DETAILS,
-        },
     }),
 )(AdditionalDetailsStep);

src/pages/RequestCallPage.js

@@ -19,7 +19,7 @@ import Icon from '../components/Icon';
 import CONST from '../CONST';
 import Growl from '../libs/Growl';
 import * as Inbox from '../libs/actions/Inbox';
-import personalDetailsPropType from './personalDetailsPropType';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../components/withCurrentUserPersonalDetails';
 import TextInput from '../components/TextInput';
 import Text from '../components/Text';
 import Section from '../components/Section';
@@ -38,9 +38,7 @@ import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
 
 const propTypes = {
     ...withLocalizePropTypes,
-
-    /** The personal details of the person who is logged in */
-    myPersonalDetails: personalDetailsPropType.isRequired,
+    ...withCurrentUserPersonalDetailsPropTypes,
 
     /** Login list for the user that is signed in */
     loginList: PropTypes.arrayOf(PropTypes.shape({
@@ -101,12 +99,13 @@ const defaultProps = {
     lastAccessedWorkspacePolicyID: '',
     blockedFromConcierge: {},
     loginList: [],
+    ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
 class RequestCallPage extends Component {
     constructor(props) {
         super(props);
-        const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(props.myPersonalDetails);
+        const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(props.currentUserPersonalDetails);
         this.state = {
             firstName,
             hasFirstNameError: false,
@@ -377,10 +376,8 @@ RequestCallPage.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withNetwork(),
+    withCurrentUserPersonalDetails,
     withOnyx({
-        myPersonalDetails: {
-            key: ONYXKEYS.MY_PERSONAL_DETAILS,
-        },
         loginList: {
             key: ONYXKEYS.LOGIN_LIST,
         },