Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix the user's name/picture is not dynamically updated if the Emoji popup is open #20243

Merged
merged 2 commits into from
Jun 7, 2023
Merged

Fix the user's name/picture is not dynamically updated if the Emoji popup is open #20243

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
986f410
Fix user's name/picture is not dynamically updated if the emoji popup
hoangzinh Jun 6, 2023
11d838d
Use constants instead of hard coded text
hoangzinh Jun 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/pages/home/report/ReactionList/PopoverReactionList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import withCurrentUserPersonalDetails from '../../../../components/withCurrentUs
import * as PersonalDetailsUtils from '../../../../libs/PersonalDetailsUtils';
import emojis from '../../../../../assets/emojis';
import * as EmojiUtils from '../../../../libs/EmojiUtils';
import CONST from '../../../../CONST';

const propTypes = {
/** Actions from the ChatReport */
Expand Down Expand Up @@ -68,23 +69,22 @@ class PopoverReactionList extends React.Component {
}

shouldComponentUpdate(nextProps, nextState) {
const prevSelectedReaction = this.getSelectedReaction(this.props.reportActions, this.state.reportActionID, this.state.emojiName);
const selectedReaction = this.getSelectedReaction(nextProps.reportActions, nextState.reportActionID, nextState.emojiName);
const previousLocale = lodashGet(this.props, 'preferredLocale', 'en');
const nextLocale = lodashGet(nextProps, 'preferredLocale', 'en');
const {emojiCount, emojiCodes, hasUserReacted, users} = this.getReactionInformation(selectedReaction);
const previousLocale = lodashGet(this.props, 'preferredLocale', CONST.LOCALES.DEFAULT);
const nextLocale = lodashGet(nextProps, 'preferredLocale', CONST.LOCALES.DEFAULT);

return (
this.state.isPopoverVisible !== nextState.isPopoverVisible ||
this.state.popoverAnchorPosition !== nextState.popoverAnchorPosition ||
previousLocale !== nextLocale ||
(this.state.isPopoverVisible &&
(!_.isEqual(prevSelectedReaction, selectedReaction) ||
Copy link
Contributor Author

@hoangzinh hoangzinh Jun 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we really need to compare prevSelectedReaction and selectedReaction. Reasons:

  • What we are displaying in the Popover is emojiName, emojiCount, emojiCode, hasUserReacted and users state which are retrieved from selectedReaction => I think we just need to compare those states are enough to decide whether the component should update
  • We're using deep comparison which will cause performance concern => If we can avoid, we should.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hoangzinh I think this is necessary, when user 2 reacts with new emoji, the popover doesn’t re-render and that will cause this bug , we should fix this case as well.

Bug.mov

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fedirjh could you give expectation when User 2 reacts with new emoji, what should be displayed in the Popoper?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I think I was wrong, I thought the popover should display all reacted emojis , but it seems that we don't have all emojis popover yet. So I guess this is fine for now

(this.state.reportActionID !== nextState.reportActionID ||
this.state.emojiName !== nextState.emojiName ||
this.state.emojiCount !== nextState.emojiCount ||
this.state.hasUserReacted !== nextState.hasUserReacted ||
this.state.reportActionID !== nextState.reportActionID ||
!_.isEqual(this.state.emojiCodes, nextState.emojiCodes) ||
!_.isEqual(this.state.users, nextState.users)))
this.state.emojiCount !== emojiCount ||
this.state.hasUserReacted !== hasUserReacted ||
!_.isEqual(this.state.emojiCodes, emojiCodes) ||
!_.isEqual(this.state.users, users)))
);
}

Expand Down