Merge pull request #24614 from tienifr/fix/24261-user-able-to-select-…

…2-emoji-at-a-time fix: 24261 user able to select 2 emoji at a time
Expensify · Sep 4, 2023 · 4676492 · 4676492
2 parents f992844 + b8a58ae
commit 4676492
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -19,6 +19,7 @@ import * as User from '../../../libs/actions/User';
 import TextInput from '../../TextInput';
 import CategoryShortcutBar from '../CategoryShortcutBar';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import useSingleExecution from '../../../hooks/useSingleExecution';
 
 const propTypes = {
     /** Function to add the selected emoji to the main compose text input */
@@ -49,6 +50,7 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t
     const [filteredEmojis, setFilteredEmojis] = useState(allEmojis);
     const [headerIndices, setHeaderIndices] = useState(headerRowIndices);
     const {windowWidth} = useWindowDimensions();
+    const {singleExecution} = useSingleExecution();
 
     useEffect(() => {
         setFilteredEmojis(allEmojis);
@@ -150,7 +152,7 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t
 
         return (
             <EmojiPickerMenuItem
-                onPress={(emoji) => addToFrequentAndSelectEmoji(emoji, item)}
+                onPress={singleExecution((emoji) => addToFrequentAndSelectEmoji(emoji, item))}
                 emoji={emojiCode}
             />
         );

diff --git a/src/hooks/useSingleExecution.js b/src/hooks/useSingleExecution.js
@@ -1,5 +1,5 @@
 import {InteractionManager} from 'react-native';
-import {useCallback, useState} from 'react';
+import {useCallback, useState, useRef} from 'react';
 
 /**
  * With any action passed in, it will only allow 1 such action to occur at a time.
@@ -8,27 +8,32 @@ import {useCallback, useState} from 'react';
  */
 export default function useSingleExecution() {
     const [isExecuting, setIsExecuting] = useState(false);
+    const isExecutingRef = useRef();
 
-    const singleExecution = useCallback(
-        (action) => () => {
-            if (isExecuting) {
-                return;
-            }
-
-            setIsExecuting(true);
+    isExecutingRef.current = isExecuting;
 
-            const execution = action();
-            InteractionManager.runAfterInteractions(() => {
-                if (!(execution instanceof Promise)) {
-                    setIsExecuting(false);
+    const singleExecution = useCallback(
+        (action) =>
+            (...params) => {
+                if (isExecutingRef.current) {
                     return;
                 }
-                execution.finally(() => {
-                    setIsExecuting(false);
+
+                setIsExecuting(true);
+                isExecutingRef.current = true;
+
+                const execution = action(params);
+                InteractionManager.runAfterInteractions(() => {
+                    if (!(execution instanceof Promise)) {
+                        setIsExecuting(false);
+                        return;
+                    }
+                    execution.finally(() => {
+                        setIsExecuting(false);
+                    });
                 });
-            });
-        },
-        [isExecuting],
+            },
+        [],
     );
 
     return {isExecuting, singleExecution};