Prevent crash after interacting with reaction tooltip

src/components/Reactions/ReactionTooltipContent.js

@@ -1,15 +1,14 @@
-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, {
+import {
+    withCurrentUserPersonalDetailsDefaultProps,
     withCurrentUserPersonalDetailsPropTypes,
 } from '../withCurrentUserPersonalDetails';
-import compose from '../../libs/compose';
 import withLocalize from '../withLocalize';
 
 const propTypes = {
@@ -31,10 +30,16 @@ 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}>
@@ -70,9 +75,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));

src/components/Reactions/ReportActionItemReactions.js

@@ -104,6 +104,7 @@ const ReportActionItemReactions = (props) => {
                                 emojiName={reaction.emoji}
                                 emojiCodes={emojiCodes}
                                 accountIDs={reactionUsers}
+                                currentUserPersonalDetails={props.currentUserPersonalDetails}
                             />
                         )}
                         renderTooltipContentKey={[...reactionUsers, ...emojiCodes]}
@@ -131,4 +132,3 @@ ReportActionItemReactions.displayName = 'ReportActionItemReactions';
 ReportActionItemReactions.propTypes = propTypes;
 ReportActionItemReactions.defaultProps = defaultProps;
 export default withCurrentUserPersonalDetails(ReportActionItemReactions);
-

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';
@@ -26,25 +26,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}
             />
         );
     };

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(personalDetails, (detail) => {
         for (let i = 0; i < accountIDs.length; i++) {
             if (detail.accountID === accountIDs[i]) {
-                if (shouldChangeUserDisplayName && currentAccountID.toString() === detail.accountID) {
+                if (shouldChangeUserDisplayName && currentUserAccountID.toString() === detail.accountID) {
                     result[i] = {
                         ...detail,
                         displayName: Localize.translateLocal('common.you'),

src/libs/actions/Report.js

@@ -1496,10 +1496,6 @@ function openReportFromDeepLink(url) {
     });
 }
 
-function getCurrentUserAccountID() {
-    return currentUserAccountID;
-}
-
 export {
     addComment,
     addAttachment,
@@ -1539,6 +1535,5 @@ export {
     removeEmojiReaction,
     toggleEmojiReaction,
     hasAccountIDReacted,
-    getCurrentUserAccountID,
     shouldShowReportActionNotification,
 };