From 9270e990dfa08517e3d6548a83434faaf110e9d5 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 28 Jun 2023 10:33:28 +0700 Subject: [PATCH 1/8] fix: Update frequently used emojis API is spamming --- src/pages/home/report/ReportActionCompose.js | 26 +++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index a1b9a2121fd5..6c65379d4ff4 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -182,6 +182,7 @@ class ReportActionCompose extends React.Component { this.setExceededMaxCommentLength = this.setExceededMaxCommentLength.bind(this); this.updateNumberOfLines = this.updateNumberOfLines.bind(this); this.showPopoverMenu = this.showPopoverMenu.bind(this); + this.debounceReducedUpdateFrequentlyUsedEmojis = this.debounceReducedUpdateFrequentlyUsedEmojis().bind(this); this.comment = props.comment; // React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management @@ -629,8 +630,8 @@ class ReportActionCompose extends React.Component { }, suggestedEmojis: [], })); - const frequentEmojiList = EmojiUtils.getFrequentlyUsedEmojis(emojiObject); - User.updateFrequentlyUsedEmojis(frequentEmojiList); + console.log(emojiObject, "emojiobject") + this.debounceReducedUpdateFrequentlyUsedEmojis(emojiObject); } /** @@ -715,6 +716,24 @@ class ReportActionCompose extends React.Component { Report.broadcastUserIsTyping(this.props.reportID); } + debounceReducedUpdateFrequentlyUsedEmojis() { + let insertedEmojis = []; + + // normally-debounced fn that we will call later with the accumulated args + const wrapper = _.debounce(() => { + const args = insertedEmojis; + insertedEmojis = []; + User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(args)); + }, 1000); + + // what we actually return is this function which will really just add the new args to + // allArgs using the combine fn + return (emojis) => { + insertedEmojis = [...insertedEmojis, ...emojis]; + wrapper(); + }; + } + /** * Update the value of the comment in Onyx * @@ -725,7 +744,8 @@ class ReportActionCompose extends React.Component { const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth, this.props.preferredSkinTone); if (!_.isEmpty(emojis)) { - User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(emojis)); + console.log(emojis, "emojiobject") + this.debounceReducedUpdateFrequentlyUsedEmojis(emojis); } this.setState((prevState) => { From 293039a5d21047379e0683288958135f0599f7a3 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 28 Jun 2023 10:43:33 +0700 Subject: [PATCH 2/8] remove console --- src/pages/home/report/ReportActionCompose.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 6c65379d4ff4..bc4853e07f9d 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -630,7 +630,6 @@ class ReportActionCompose extends React.Component { }, suggestedEmojis: [], })); - console.log(emojiObject, "emojiobject") this.debounceReducedUpdateFrequentlyUsedEmojis(emojiObject); } @@ -719,15 +718,12 @@ class ReportActionCompose extends React.Component { debounceReducedUpdateFrequentlyUsedEmojis() { let insertedEmojis = []; - // normally-debounced fn that we will call later with the accumulated args const wrapper = _.debounce(() => { const args = insertedEmojis; insertedEmojis = []; User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(args)); }, 1000); - // what we actually return is this function which will really just add the new args to - // allArgs using the combine fn return (emojis) => { insertedEmojis = [...insertedEmojis, ...emojis]; wrapper(); @@ -744,7 +740,6 @@ class ReportActionCompose extends React.Component { const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth, this.props.preferredSkinTone); if (!_.isEmpty(emojis)) { - console.log(emojis, "emojiobject") this.debounceReducedUpdateFrequentlyUsedEmojis(emojis); } From 27f9c581e0bdc73f504fe1d74a562eec1ccc1f4a Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 29 Jun 2023 23:05:35 +0700 Subject: [PATCH 3/8] fix: update frequently used emojis --- src/pages/home/report/ReportActionCompose.js | 24 +++++++------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index bc4853e07f9d..8b587125420e 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -182,8 +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.debounceReducedUpdateFrequentlyUsedEmojis = this.debounceReducedUpdateFrequentlyUsedEmojis().bind(this); + this.debouncedUpdateFrequentlyUsedEmojis = this.debouncedUpdateFrequentlyUsedEmojis.bind(this); 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 @@ -630,7 +631,7 @@ class ReportActionCompose extends React.Component { }, suggestedEmojis: [], })); - this.debounceReducedUpdateFrequentlyUsedEmojis(emojiObject); + this.debouncedUpdateFrequentlyUsedEmojis(emojiObject); } /** @@ -715,19 +716,10 @@ class ReportActionCompose extends React.Component { Report.broadcastUserIsTyping(this.props.reportID); } - debounceReducedUpdateFrequentlyUsedEmojis() { - let insertedEmojis = []; - - const wrapper = _.debounce(() => { - const args = insertedEmojis; - insertedEmojis = []; - User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(args)); - }, 1000); - - return (emojis) => { - insertedEmojis = [...insertedEmojis, ...emojis]; - wrapper(); - }; + debouncedUpdateFrequentlyUsedEmojis(emojis) { + this.insertedEmojis = [...this.insertedEmojis, ...emojis]; + User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(this.insertedEmojis)); + this.insertedEmojis = []; } /** @@ -740,7 +732,7 @@ class ReportActionCompose extends React.Component { const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth, this.props.preferredSkinTone); if (!_.isEmpty(emojis)) { - this.debounceReducedUpdateFrequentlyUsedEmojis(emojis); + this.debouncedUpdateFrequentlyUsedEmojis(emojis); } this.setState((prevState) => { From 98e514e144f1f6a16ab924c1d2c20eef74af4597 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 29 Jun 2023 23:59:09 +0700 Subject: [PATCH 4/8] add debounce wait --- src/pages/home/report/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 8b587125420e..ab6a558fbd6e 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -182,7 +182,7 @@ 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 = this.debouncedUpdateFrequentlyUsedEmojis.bind(this); + this.debouncedUpdateFrequentlyUsedEmojis = _.debounce(this.debouncedUpdateFrequentlyUsedEmojis.bind(this), 1000, false); this.comment = props.comment; this.insertedEmojis = []; From 363018171f40267cfff0dc5e6de0c6676c0bf6fe Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 30 Jun 2023 00:13:56 +0700 Subject: [PATCH 5/8] fix debounced state --- src/pages/home/report/ReportActionCompose.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index ab6a558fbd6e..3b9a15921e80 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -631,6 +631,7 @@ class ReportActionCompose extends React.Component { }, suggestedEmojis: [], })); + this.insertedEmojis = [...this.insertedEmojis, emojiObject]; this.debouncedUpdateFrequentlyUsedEmojis(emojiObject); } @@ -716,8 +717,7 @@ class ReportActionCompose extends React.Component { Report.broadcastUserIsTyping(this.props.reportID); } - debouncedUpdateFrequentlyUsedEmojis(emojis) { - this.insertedEmojis = [...this.insertedEmojis, ...emojis]; + debouncedUpdateFrequentlyUsedEmojis() { User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(this.insertedEmojis)); this.insertedEmojis = []; } @@ -732,7 +732,8 @@ class ReportActionCompose extends React.Component { const {text: newComment = '', emojis = []} = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth, this.props.preferredSkinTone); if (!_.isEmpty(emojis)) { - this.debouncedUpdateFrequentlyUsedEmojis(emojis); + this.insertedEmojis = [...this.insertedEmojis, ...emojis]; + this.debouncedUpdateFrequentlyUsedEmojis(); } this.setState((prevState) => { From 6f37c6b4e3e0efb9c10285fe9c2db63af597a536 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 30 Jun 2023 13:27:55 +0700 Subject: [PATCH 6/8] debounced in message edit --- .../home/report/ReportActionItemMessageEdit.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 0d9870c1353c..be094f71d796 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -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 @@ -138,6 +139,15 @@ function ReportActionItemMessageEdit(props) { [props.reportID, props.action.reportActionID], ); + const debouncedUpdateFrequentlyUsedEmojis = useMemo( + () => + _.debounce(() => { + User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(insertedEmojis.current)); + insertedEmojis.current = []; + }, 1000), + [], + ); + /** * Update the value of the draft in Onyx * @@ -148,7 +158,8 @@ function ReportActionItemMessageEdit(props) { const {text: newDraft = '', emojis = []} = EmojiUtils.replaceEmojis(newDraftInput, isSmallScreenWidth, props.preferredSkinTone); if (!_.isEmpty(emojis)) { - User.updateFrequentlyUsedEmojis(EmojiUtils.getFrequentlyUsedEmojis(emojis)); + insertedEmojis.current = [...insertedEmojis.current, ...emojis]; + debouncedUpdateFrequentlyUsedEmojis(); } setDraft((prevDraft) => { if (newDraftInput !== newDraft) { @@ -172,7 +183,7 @@ function ReportActionItemMessageEdit(props) { debouncedSaveDraft(props.action.message[0].html); } }, - [props.action.message, debouncedSaveDraft, isSmallScreenWidth, props.preferredSkinTone], + [props.action.message, debouncedSaveDraft, debouncedUpdateFrequentlyUsedEmojis, isSmallScreenWidth, props.preferredSkinTone], ); /** From bf762a866b8abb7e31059a084475434fd58460ef Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 30 Jun 2023 13:40:44 +0700 Subject: [PATCH 7/8] declare insertedemojis --- src/pages/home/report/ReportActionItemMessageEdit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index d8d363c5e706..8fa5883da6ac 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -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 From d63f578a13430d82a804e3b023fa3c670de66b5f Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 3 Jul 2023 20:33:59 +0700 Subject: [PATCH 8/8] add comment --- src/pages/home/report/ReportActionCompose.js | 4 ++++ src/pages/home/report/ReportActionItemMessageEdit.js | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index bcc14a666412..15f86798b866 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -721,6 +721,10 @@ 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 = []; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 8fa5883da6ac..f3224b651bf0 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -139,6 +139,10 @@ 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(() => {