Merge pull request #18037 from Expensify/marcaaron-preventCrashOnLogOut

Prevent crash after interacting with reaction tooltip
Expensify · May 10, 2023 · d3d0402 · d3d0402
2 parents 46390d6 + 359cead
commit d3d0402
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 21 deletions.
diff --git a/src/components/Reactions/ReactionTooltipContent.js b/src/components/Reactions/ReactionTooltipContent.js
@@ -1,13 +1,11 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import styles from '../../styles/styles';
-import {withPersonalDetails} from '../OnyxProvider';
 import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
 import Text from '../Text';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
-import compose from '../../libs/compose';
+import {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
 import withLocalize from '../withLocalize';
 
 const propTypes = {
@@ -29,13 +27,19 @@ const propTypes = {
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
+const defaultProps = {
+    ...withCurrentUserPersonalDetailsDefaultProps,
+};
+
 const ReactionTooltipContent = (props) => {
-    const users = PersonalDetailsUtils.getPersonalDetailsByIDs(props.accountIDs, true);
+    const users = useMemo(
+        () => PersonalDetailsUtils.getPersonalDetailsByIDs(props.accountIDs, props.currentUserPersonalDetails.accountID, true),
+        [props.currentUserPersonalDetails.accountID, props.accountIDs],
+    );
     const namesString = _.filter(
         _.map(users, (user) => user && user.displayName),
         (n) => n,
     ).join(', ');
-
     return (
         <View style={[styles.alignItemsCenter, styles.ph2]}>
             <View style={styles.flexRow}>
@@ -57,6 +61,6 @@ const ReactionTooltipContent = (props) => {
 };
 
 ReactionTooltipContent.propTypes = propTypes;
-ReactionTooltipContent.defaultProps = withCurrentUserPersonalDetails;
+ReactionTooltipContent.defaultProps = defaultProps;
 ReactionTooltipContent.displayName = 'ReactionTooltipContent';
-export default React.memo(compose(withPersonalDetails(), withLocalize)(ReactionTooltipContent));
+export default React.memo(withLocalize(ReactionTooltipContent));
diff --git a/src/components/Reactions/ReportActionItemReactions.js b/src/components/Reactions/ReportActionItemReactions.js
@@ -84,7 +84,7 @@ const ReportActionItemReactions = (props) => {
                     props.toggleReaction(emoji);
                 };
                 const onReactionListOpen = (event) => {
-                    const users = PersonalDetailsUtils.getPersonalDetailsByIDs(reactionUsers);
+                    const users = PersonalDetailsUtils.getPersonalDetailsByIDs(reactionUsers, props.currentUserPersonalDetails.accountID);
                     ReactionList.showReactionList(event, popoverReactionListAnchor.current, users, reaction.emoji, emojiCodes, reactionCount, hasUserReacted);
                 };
 
@@ -95,6 +95,7 @@ const ReportActionItemReactions = (props) => {
                                 emojiName={reaction.emoji}
                                 emojiCodes={emojiCodes}
                                 accountIDs={reactionUsers}
+                                currentUserPersonalDetails={props.currentUserPersonalDetails}
                             />
                         )}
                         renderTooltipContentKey={[...reactionUsers, ...emojiCodes]}

diff --git a/src/components/withCurrentUserPersonalDetails.js b/src/components/withCurrentUserPersonalDetails.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
@@ -23,25 +23,28 @@ export default function (WrappedComponent) {
         /** Session of the current user */
         session: PropTypes.shape({
             email: PropTypes.string,
+            accountID: PropTypes.number,
         }),
     };
     const defaultProps = {
         forwardedRef: undefined,
         personalDetails: {},
         session: {
             email: '',
+            accountID: 0,
         },
     };
 
     const WithCurrentUserPersonalDetails = (props) => {
         const currentUserEmail = props.session.email;
-
+        const accountID = props.session.accountID;
+        const currentUserPersonalDetails = useMemo(() => ({...props.personalDetails[currentUserEmail], accountID}), [props.personalDetails, currentUserEmail, accountID]);
         return (
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
                 ref={props.forwardedRef}
-                currentUserPersonalDetails={props.personalDetails[currentUserEmail]}
+                currentUserPersonalDetails={currentUserPersonalDetails}
             />
         );
     };

diff --git a/src/libs/PersonalDetailsUtils.js b/src/libs/PersonalDetailsUtils.js
@@ -1,7 +1,6 @@
 import Onyx from 'react-native-onyx';
 import _ from 'underscore';
 import ONYXKEYS from '../ONYXKEYS';
-import * as Report from './actions/Report';
 import * as Localize from './Localize';
 
 let personalDetails = [];
@@ -13,16 +12,16 @@ Onyx.connect({
 /**
  * Given a list of account IDs (as string) it will return an array of personal details objects.
  * @param {Array<string>} accountIDs  - Array of accountIDs
+ * @param {number} currentUserAccountID
  * @param {boolean} shouldChangeUserDisplayName - It will replace the current user's personal detail object's displayName with 'You'.
  * @returns {Array} - Array of personal detail objects
  */
-function getPersonalDetailsByIDs(accountIDs, shouldChangeUserDisplayName = false) {
+function getPersonalDetailsByIDs(accountIDs, currentUserAccountID, shouldChangeUserDisplayName = false) {
     const result = [];
-    const currentAccountID = Report.getCurrentUserAccountID();
     _.each(
         _.filter(personalDetails, (detail) => accountIDs.includes(detail.accountID)),
         (detail) => {
-            if (shouldChangeUserDisplayName && currentAccountID.toString() === detail.accountID) {
+            if (shouldChangeUserDisplayName && currentUserAccountID.toString() === detail.accountID) {
                 result.push({
                     ...detail,
                     displayName: Localize.translateLocal('common.you'),

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
@@ -1537,10 +1537,6 @@ function openReportFromDeepLink(url) {
     });
 }
 
-function getCurrentUserAccountID() {
-    return currentUserAccountID;
-}
-
 export {
     addComment,
     addAttachment,
@@ -1580,6 +1576,5 @@ export {
     removeEmojiReaction,
     toggleEmojiReaction,
     hasAccountIDReacted,
-    getCurrentUserAccountID,
     shouldShowReportActionNotification,
 };