From 9906b56d3ca5a646565dbee864be3063534d6ec9 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 16 Aug 2023 12:00:29 +0700 Subject: [PATCH 1/5] fix: 24261 user able to select 2 emoji at a time --- .../EmojiPickerMenu/index.native.js | 4 ++- src/hooks/useSingleExecution.js | 36 +++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/hooks/useSingleExecution.js diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index a794d4aa4bad..bfdaf1c13d1b 100644 --- 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 ( addToFrequentAndSelectEmoji(emoji, item)} + onPress={singleExecution((emoji) => addToFrequentAndSelectEmoji(emoji, item))} emoji={emojiCode} /> ); diff --git a/src/hooks/useSingleExecution.js b/src/hooks/useSingleExecution.js new file mode 100644 index 000000000000..b6012013ff48 --- /dev/null +++ b/src/hooks/useSingleExecution.js @@ -0,0 +1,36 @@ +import {InteractionManager} from 'react-native'; +import {useCallback, useState} from 'react'; + +/** + * With any action passed in, it will only allow 1 such action to occur at a time. + * + * @returns {Object} + */ +export default function useSingleExecution() { + const [isExecuting, setIsExecuting] = useState(false); + + const singleExecution = useCallback( + (action) => + (...params) => { + if (isExecuting) { + return; + } + + setIsExecuting(true); + + const execution = action(params); + InteractionManager.runAfterInteractions(() => { + if (!(execution instanceof Promise)) { + setIsExecuting(false); + return; + } + execution.finally(() => { + setIsExecuting(false); + }); + }); + }, + [isExecuting], + ); + + return {isExecuting, singleExecution}; +} From 28c5a5d99744e17cc1b53c4b76f8cf621911433f Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 16 Aug 2023 15:08:08 +0700 Subject: [PATCH 2/5] fix: update hook --- src/hooks/useSingleExecution.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/hooks/useSingleExecution.js b/src/hooks/useSingleExecution.js index b6012013ff48..8654118284bd 100644 --- a/src/hooks/useSingleExecution.js +++ b/src/hooks/useSingleExecution.js @@ -6,13 +6,16 @@ import {useCallback, useState} from 'react'; * * @returns {Object} */ -export default function useSingleExecution() { +function useSingleExecution() { const [isExecuting, setIsExecuting] = useState(false); + const isExecutingRef = useRef(); + + isExecutingRef.current = isExecuting; const singleExecution = useCallback( (action) => (...params) => { - if (isExecuting) { + if (isExecutingRef.current) { return; } @@ -29,7 +32,7 @@ export default function useSingleExecution() { }); }); }, - [isExecuting], + [], ); return {isExecuting, singleExecution}; From 331c5a8e4e9b674f34319efec64b3ea2f6117401 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 16 Aug 2023 15:22:58 +0700 Subject: [PATCH 3/5] fix: update use single execution hook --- ios/Podfile.lock | 2 +- src/hooks/useSingleExecution.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index af29315b58ca..d80ee7c6be61 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1241,4 +1241,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: ff7c8276619cfa428c00b8439045ffd134df7eb8 -COCOAPODS: 1.12.1 +COCOAPODS: 1.11.3 diff --git a/src/hooks/useSingleExecution.js b/src/hooks/useSingleExecution.js index 8654118284bd..5f5acebe744f 100644 --- a/src/hooks/useSingleExecution.js +++ b/src/hooks/useSingleExecution.js @@ -1,12 +1,12 @@ 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. * * @returns {Object} */ -function useSingleExecution() { +export default function useSingleExecution() { const [isExecuting, setIsExecuting] = useState(false); const isExecutingRef = useRef(); From d3b053f22a47fdde269c125e1079dbcc8ed04db4 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 16 Aug 2023 15:24:05 +0700 Subject: [PATCH 4/5] reset -podfile --- ios/Podfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index d80ee7c6be61..af29315b58ca 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1241,4 +1241,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: ff7c8276619cfa428c00b8439045ffd134df7eb8 -COCOAPODS: 1.11.3 +COCOAPODS: 1.12.1 From b8a58aeba139487b1ae6c4891b77eaf1daa6f569 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 29 Aug 2023 16:11:28 +0700 Subject: [PATCH 5/5] fix: update use single execution logic --- src/hooks/useSingleExecution.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/useSingleExecution.js b/src/hooks/useSingleExecution.js index 5f5acebe744f..6c28087e933c 100644 --- a/src/hooks/useSingleExecution.js +++ b/src/hooks/useSingleExecution.js @@ -20,6 +20,7 @@ export default function useSingleExecution() { } setIsExecuting(true); + isExecutingRef.current = true; const execution = action(params); InteractionManager.runAfterInteractions(() => {