remove withOnyx from tooltip & implement in OptionRow

Expensify · Nov 20, 2023 · c672c59 · c672c59
1 parent 77be80b
commit c672c59
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
@@ -11,6 +11,7 @@ import type {Icon} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
 import Text from './Text';
 import Tooltip from './Tooltip';
+import participantPropTypes from './participantPropTypes';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
 type MultipleAvatarsProps = {
@@ -52,6 +53,9 @@ type MultipleAvatarsProps = {
 
     /** Prop to limit the amount of avatars displayed horizontally */
     maxAvatarsInRow?: number;
+
+    /** List of participants */
+    participants: PropTypes.arrayOf(participantPropTypes)
 };
 
 type AvatarStyles = {
@@ -92,6 +96,7 @@ function MultipleAvatars({
     shouldShowTooltip = true,
     shouldUseCardBackground = false,
     maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
+    participants = [],
 }: MultipleAvatarsProps) {
     let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
     const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
@@ -109,6 +114,13 @@ function MultipleAvatars({
         return CONST.AVATAR_SIZE.SMALLER;
     }, [isFocusMode, size]);
 
+    const participantsList = useMemo(() => _.reduce(participants, (all, participant) => {
+        // eslint-disable-next-line no-param-reassign
+        all[participant.accountID] = participant;
+
+        return all;
+    }, {}), [participants])
+
     const avatarRows = useMemo(() => {
         // If we're not displaying avatars in rows or the number of icons is less than or equal to the max avatars in a row, return a single row
         if (!shouldDisplayAvatarsInRows || icons.length <= maxAvatarsInRow) {
@@ -133,7 +145,7 @@ function MultipleAvatars({
     if (icons.length === 1 && !shouldStackHorizontally) {
         return (
             <UserDetailsTooltip
-                accountID={icons[0].id}
+                user={participantsList[icons[0].id]}
                 icon={icons[0]}
                 fallbackUserDetails={{
                     displayName: icons[0].name,
@@ -174,8 +186,8 @@ function MultipleAvatars({
                     >
                         {[...avatars].splice(0, maxAvatarsInRow).map((icon, index) => (
                             <UserDetailsTooltip
-                                key={`stackedAvatars-${icon.id}`}
-                                accountID={icon.id}
+                                key={`stackedAvatars-${index}`}
+                                user={participantsList[icon.id]}
                                 icon={icon}
                                 fallbackUserDetails={{
                                     displayName: icon.name,
@@ -246,7 +258,7 @@ function MultipleAvatars({
                 <View style={avatarContainerStyles}>
                     <View style={[singleAvatarStyle, icons[0].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[0].type) : {}]}>
                         <UserDetailsTooltip
-                            accountID={icons[0].id}
+                            user={participantsList[icons[0].id]}
                             icon={icons[0]}
                             fallbackUserDetails={{
                                 displayName: icons[0].name,
@@ -268,7 +280,7 @@ function MultipleAvatars({
                         <View style={[secondAvatarStyles, secondAvatarStyle, icons[1].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[1].type) : {}]}>
                             {icons.length === 2 ? (
                                 <UserDetailsTooltip
-                                    accountID={icons[1].id}
+                                    user={participantsList[icons[1].id]}
                                     icon={icons[1]}
                                     fallbackUserDetails={{
                                         displayName: icons[1].name,

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
@@ -211,6 +211,7 @@ function OptionRow(props) {
                                         />
                                     ) : (
                                         <MultipleAvatars
+                                            participants={props.option.participantsList}
                                             icons={props.option.icons}
                                             size={CONST.AVATAR_SIZE.DEFAULT}
                                             secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(hovered ? hoveredBackgroundColor : subscriptColor)]}

diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.web.js
@@ -19,11 +19,11 @@ function BaseUserDetailsTooltip(props) {
     const {translate} = useLocalize();
     const personalDetails = usePersonalDetails();
 
-    const userDetails = lodashGet(personalDetails, props.accountID, props.fallbackUserDetails);
-    let userDisplayName = ReportUtils.getDisplayNameForParticipant(props.accountID);
+    const userDetails = props.user || props.fallbackUserDetails;
+    let userDisplayName = userDetails.displayName ? userDetails.displayName.trim() : '';
     let userLogin = (userDetails.login || '').trim() && !_.isEqual(userDetails.login, userDetails.displayName) ? Str.removeSMSDomain(userDetails.login) : '';
     let userAvatar = userDetails.avatar;
-    let userAccountID = props.accountID;
+    let userAccountID = props.user ? props.user.accountID : props.accountID;
 
     // We replace the actor's email, name, and avatar with the Copilot manually for now. This will be improved upon when
     // the Copilot feature is implemented.

diff --git a/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js b/src/components/UserDetailsTooltip/userDetailsTooltipPropTypes.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import avatarPropTypes from '@components/avatarPropTypes';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
+import participantPropTypes from '@components/participantPropTypes';
 
 const propTypes = {
     /** User's Account ID */
@@ -20,21 +20,22 @@ const propTypes = {
     icon: avatarPropTypes,
     /** Component that displays the tooltip */
     children: PropTypes.node.isRequired,
-    /** List of personalDetails (keyed by accountID)  */
-    personalDetailsList: PropTypes.objectOf(personalDetailsPropType),
 
     /** The accountID of the copilot who took this action on behalf of the user */
     delegateAccountID: PropTypes.number,
 
     /** Any additional amount to manually adjust the horizontal position of the tooltip.
      A positive value shifts the tooltip to the right, and a negative value shifts it to the left. */
     shiftHorizontal: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+
+    /** User object containing the details needed to display in a tooltip */
+    user: participantPropTypes,
 };
 
 const defaultProps = {
     accountID: '',
     fallbackUserDetails: {displayName: '', login: '', avatar: '', type: ''},
-    personalDetailsList: {},
+    user: {},
     delegateAccountID: 0,
     icon: undefined,
     shiftHorizontal: 0,