Skip to content

Commit

Permalink
Merge pull request #21772 from tienifr/fix/20827-update-frequently-us…
Browse files Browse the repository at this point in the history
…ed-emojis-spamming

Fix: `UpdateFrequentlyUsedEmojis` API spamming
  • Loading branch information
grgia authored Jul 5, 2023
2 parents 85ce1ed + d63f578 commit 15e547e
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 5 deletions.
18 changes: 15 additions & 3 deletions src/pages/home/report/ReportActionCompose.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,9 @@ class ReportActionCompose extends React.Component {
this.setExceededMaxCommentLength = this.setExceededMaxCommentLength.bind(this);
this.updateNumberOfLines = this.updateNumberOfLines.bind(this);
this.showPopoverMenu = this.showPopoverMenu.bind(this);
this.debouncedUpdateFrequentlyUsedEmojis = _.debounce(this.debouncedUpdateFrequentlyUsedEmojis.bind(this), 1000, false);
this.comment = props.comment;
this.insertedEmojis = [];

// React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management
// code that will refocus the compose input after a user closes a modal or some other actions, see usage of ReportActionComposeFocusManager
Expand Down Expand Up @@ -645,8 +647,8 @@ class ReportActionCompose extends React.Component {
},
suggestedEmojis: [],
}));
const frequentEmojiList = EmojiUtils.getFrequentlyUsedEmojis(emojiObject);
User.updateFrequentlyUsedEmojis(frequentEmojiList);
this.insertedEmojis = [...this.insertedEmojis, emojiObject];
this.debouncedUpdateFrequentlyUsedEmojis(emojiObject);
}

/**
Expand Down Expand Up @@ -731,6 +733,15 @@ class ReportActionCompose extends React.Component {
Report.broadcastUserIsTyping(this.props.reportID);
}

/**
* Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis
* API is not called too often.
*/
debouncedUpdateFrequentlyUsedEmojis() {
User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(this.insertedEmojis));
this.insertedEmojis = [];
}

/**
* Update the value of the comment in Onyx
*
Expand All @@ -741,7 +752,8 @@ class ReportActionCompose extends React.Component {
const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.preferredSkinTone);

if (!_.isEmpty(emojis)) {
User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(emojis));
this.insertedEmojis = [...this.insertedEmojis, ...emojis];
this.debouncedUpdateFrequentlyUsedEmojis();
}

this.setState((prevState) => {
Expand Down
19 changes: 17 additions & 2 deletions src/pages/home/report/ReportActionItemMessageEdit.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ function ReportActionItemMessageEdit(props) {

const textInputRef = useRef(null);
const isFocusedRef = useRef(false);
const insertedEmojis = useRef([]);

useEffect(() => {
// required for keeping last state of isFocused variable
Expand Down Expand Up @@ -138,6 +139,19 @@ function ReportActionItemMessageEdit(props) {
[props.reportID, props.action.reportActionID],
);

/**
* Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis
* API is not called too often.
*/
const debouncedUpdateFrequentlyUsedEmojis = useMemo(
() =>
_.debounce(() => {
User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(insertedEmojis.current));
insertedEmojis.current = [];
}, 1000),
[],
);

/**
* Update the value of the draft in Onyx
*
Expand All @@ -148,7 +162,8 @@ function ReportActionItemMessageEdit(props) {
const {text: newDraft = '', emojis = []} = EmojiUtils.replaceEmojis(newDraftInput, props.preferredSkinTone);

if (!_.isEmpty(emojis)) {
User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(emojis));
insertedEmojis.current = [...insertedEmojis.current, ...emojis];
debouncedUpdateFrequentlyUsedEmojis();
}
setDraft((prevDraft) => {
if (newDraftInput !== newDraft) {
Expand All @@ -172,7 +187,7 @@ function ReportActionItemMessageEdit(props) {
debouncedSaveDraft(props.action.message[0].html);
}
},
[props.action.message, debouncedSaveDraft, props.preferredSkinTone],
[props.action.message, debouncedSaveDraft, debouncedUpdateFrequentlyUsedEmojis, props.preferredSkinTone],
);

/**
Expand Down

0 comments on commit 15e547e

Please sign in to comment.