From fb478463a2760be2f5b13e97ee2278a2cdf49941 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 12 Jul 2024 14:36:24 +0200 Subject: [PATCH 01/12] fix: frequent component re-mount --- src/libs/freezeScreenWithLazyLoading.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/libs/freezeScreenWithLazyLoading.tsx b/src/libs/freezeScreenWithLazyLoading.tsx index 177d7826306c..080d18cb3dcb 100644 --- a/src/libs/freezeScreenWithLazyLoading.tsx +++ b/src/libs/freezeScreenWithLazyLoading.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import memoize from 'lodash/memoize'; import FreezeWrapper from './Navigation/FreezeWrapper'; function FrozenScreen(WrappedComponent: React.ComponentType) { @@ -13,8 +14,8 @@ function FrozenScreen(WrappedCompo } export default function freezeScreenWithLazyLoading(lazyComponent: () => React.ComponentType) { - return () => { + return memoize(() => { const Component = lazyComponent(); return FrozenScreen(Component); - }; + }); } From a600ac56df2c6f387cef850b7572e66ccd90fbeb Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 12 Jul 2024 14:46:49 +0200 Subject: [PATCH 02/12] fix: re-organize imports to avoid a crash --- src/libs/freezeScreenWithLazyLoading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/freezeScreenWithLazyLoading.tsx b/src/libs/freezeScreenWithLazyLoading.tsx index 080d18cb3dcb..01da7d7fda58 100644 --- a/src/libs/freezeScreenWithLazyLoading.tsx +++ b/src/libs/freezeScreenWithLazyLoading.tsx @@ -1,5 +1,5 @@ -import React from 'react'; import memoize from 'lodash/memoize'; +import React from 'react'; import FreezeWrapper from './Navigation/FreezeWrapper'; function FrozenScreen(WrappedComponent: React.ComponentType) { From 3f7cd2a6800454185c825bb78dc5450bbfab3799 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 12 Jul 2024 17:18:52 +0200 Subject: [PATCH 03/12] fix: re-create GestureDetector after freeze being enabled/disabled --- .../report/ReportActionCompose/SendButton.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SendButton.tsx b/src/pages/home/report/ReportActionCompose/SendButton.tsx index 4b902e2c6246..a36a674b2213 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.tsx +++ b/src/pages/home/report/ReportActionCompose/SendButton.tsx @@ -1,4 +1,4 @@ -import React, {memo} from 'react'; +import React, {memo, useCallback, useState} from 'react'; import {View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import Icon from '@components/Icon'; @@ -10,6 +10,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; +import {useFocusEffect} from '@react-navigation/native'; type SendButtonProps = { /** Whether the button is disabled */ @@ -24,10 +25,18 @@ function SendButton({isDisabled: isDisabledProp, handleSendMessage}: SendButtonP const styles = useThemeStyles(); const {translate} = useLocalize(); const {isSmallScreenWidth} = useResponsiveLayout(); + const [uniqueRenderId, setUniqueRenderId] = useState(0); + const Tap = Gesture.Tap().onEnd(() => { handleSendMessage(); }); + useFocusEffect( + useCallback(() => { + setUniqueRenderId((c) => c + 1); + }, []), + ); + return ( From fb434e0309fc37699badbdca28a56e6feebff62d Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 10:00:34 +0200 Subject: [PATCH 04/12] fix: eslint, disabled button on web --- .../AppNavigator/ModalStackNavigators/index.tsx | 2 +- .../report/ReportActionCompose/SendButton.tsx | 14 ++++---------- .../useFreezeId/index.native.ts | 16 ++++++++++++++++ .../ReportActionCompose/useFreezeId/index.ts | 3 +++ 4 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts create mode 100644 src/pages/home/report/ReportActionCompose/useFreezeId/index.ts diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index ce4028b87ea8..844f11cbdd01 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -483,7 +483,7 @@ const TransactionDuplicateStackNavigator = createModalStackNavigator({ - [SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default, + //[SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default, [SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: () => require('../../../../pages/Search/SearchHoldReasonPage').default, }); diff --git a/src/pages/home/report/ReportActionCompose/SendButton.tsx b/src/pages/home/report/ReportActionCompose/SendButton.tsx index a36a674b2213..acc383bd1122 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.tsx +++ b/src/pages/home/report/ReportActionCompose/SendButton.tsx @@ -1,4 +1,4 @@ -import React, {memo, useCallback, useState} from 'react'; +import React, {memo} from 'react'; import {View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import Icon from '@components/Icon'; @@ -10,7 +10,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import {useFocusEffect} from '@react-navigation/native'; +import useFreezeId from './useFreezeId'; type SendButtonProps = { /** Whether the button is disabled */ @@ -25,18 +25,12 @@ function SendButton({isDisabled: isDisabledProp, handleSendMessage}: SendButtonP const styles = useThemeStyles(); const {translate} = useLocalize(); const {isSmallScreenWidth} = useResponsiveLayout(); - const [uniqueRenderId, setUniqueRenderId] = useState(0); + const freezeId = useFreezeId(); const Tap = Gesture.Tap().onEnd(() => { handleSendMessage(); }); - useFocusEffect( - useCallback(() => { - setUniqueRenderId((c) => c + 1); - }, []), - ); - return ( diff --git a/src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts b/src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts new file mode 100644 index 000000000000..ff352a15857b --- /dev/null +++ b/src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts @@ -0,0 +1,16 @@ +import {useFocusEffect} from '@react-navigation/native'; +import {useCallback, useState} from 'react'; + +const useFreezeId = () => { + const [uniqueRenderId, setUniqueRenderId] = useState(0); + + useFocusEffect( + useCallback(() => { + setUniqueRenderId((c) => c + 1); + }, []), + ); + + return uniqueRenderId; +}; + +export default useFreezeId; diff --git a/src/pages/home/report/ReportActionCompose/useFreezeId/index.ts b/src/pages/home/report/ReportActionCompose/useFreezeId/index.ts new file mode 100644 index 000000000000..b2980b04bfa9 --- /dev/null +++ b/src/pages/home/report/ReportActionCompose/useFreezeId/index.ts @@ -0,0 +1,3 @@ +const useFreezeId = () => 0; + +export default useFreezeId; From d4b08857e37a048766d5cb3aaf338fe563e19a47 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 10:20:50 +0200 Subject: [PATCH 05/12] fix: revert accident changes --- src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 844f11cbdd01..ce4028b87ea8 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -483,7 +483,7 @@ const TransactionDuplicateStackNavigator = createModalStackNavigator({ - //[SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default, + [SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default, [SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: () => require('../../../../pages/Search/SearchHoldReasonPage').default, }); From 8224e3d568ffed07bca18a0d6ed9bcd00a9c12ad Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 10:37:20 +0200 Subject: [PATCH 06/12] fix: reassure test --- tests/perf-test/ReportActionCompose.perf-test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/perf-test/ReportActionCompose.perf-test.tsx b/tests/perf-test/ReportActionCompose.perf-test.tsx index e3aaccd1f050..eb007d9c6b33 100644 --- a/tests/perf-test/ReportActionCompose.perf-test.tsx +++ b/tests/perf-test/ReportActionCompose.perf-test.tsx @@ -34,6 +34,7 @@ jest.mock('@react-navigation/native', () => { navigate: jest.fn(), addListener: () => jest.fn(), }), + useFocusEffect: jest.fn(), useIsFocused: () => true, useNavigationState: () => {}, }; From 0b25d23e2e58e2ed5203335ba7123c2f7fdfec5d Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 10:59:59 +0200 Subject: [PATCH 07/12] refactor: move hooks to separate folder --- .../ReportActionCompose => hooks}/useFreezeId/index.native.ts | 0 .../report/ReportActionCompose => hooks}/useFreezeId/index.ts | 0 src/pages/home/report/ReportActionCompose/SendButton.tsx | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) rename src/{pages/home/report/ReportActionCompose => hooks}/useFreezeId/index.native.ts (100%) rename src/{pages/home/report/ReportActionCompose => hooks}/useFreezeId/index.ts (100%) diff --git a/src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts b/src/hooks/useFreezeId/index.native.ts similarity index 100% rename from src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts rename to src/hooks/useFreezeId/index.native.ts diff --git a/src/pages/home/report/ReportActionCompose/useFreezeId/index.ts b/src/hooks/useFreezeId/index.ts similarity index 100% rename from src/pages/home/report/ReportActionCompose/useFreezeId/index.ts rename to src/hooks/useFreezeId/index.ts diff --git a/src/pages/home/report/ReportActionCompose/SendButton.tsx b/src/pages/home/report/ReportActionCompose/SendButton.tsx index acc383bd1122..11e959d2325d 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.tsx +++ b/src/pages/home/report/ReportActionCompose/SendButton.tsx @@ -5,12 +5,12 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip'; +import useFreezeId from '@hooks/useFreezeId'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import useFreezeId from './useFreezeId'; type SendButtonProps = { /** Whether the button is disabled */ From c775f922acb205fa2fe5b0055063f5d0cc29d33d Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 12:15:23 +0200 Subject: [PATCH 08/12] Revert "refactor: move hooks to separate folder" This reverts commit 0b25d23e2e58e2ed5203335ba7123c2f7fdfec5d. --- src/pages/home/report/ReportActionCompose/SendButton.tsx | 2 +- .../report/ReportActionCompose}/useFreezeId/index.native.ts | 0 .../home/report/ReportActionCompose}/useFreezeId/index.ts | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename src/{hooks => pages/home/report/ReportActionCompose}/useFreezeId/index.native.ts (100%) rename src/{hooks => pages/home/report/ReportActionCompose}/useFreezeId/index.ts (100%) diff --git a/src/pages/home/report/ReportActionCompose/SendButton.tsx b/src/pages/home/report/ReportActionCompose/SendButton.tsx index 11e959d2325d..acc383bd1122 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.tsx +++ b/src/pages/home/report/ReportActionCompose/SendButton.tsx @@ -5,12 +5,12 @@ import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip'; -import useFreezeId from '@hooks/useFreezeId'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; +import useFreezeId from './useFreezeId'; type SendButtonProps = { /** Whether the button is disabled */ diff --git a/src/hooks/useFreezeId/index.native.ts b/src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts similarity index 100% rename from src/hooks/useFreezeId/index.native.ts rename to src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts diff --git a/src/hooks/useFreezeId/index.ts b/src/pages/home/report/ReportActionCompose/useFreezeId/index.ts similarity index 100% rename from src/hooks/useFreezeId/index.ts rename to src/pages/home/report/ReportActionCompose/useFreezeId/index.ts From 76c23d567c3892550d46f60cbeea1d4ea6bc5b1c Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 12:15:35 +0200 Subject: [PATCH 09/12] Revert "fix: reassure test" This reverts commit 8224e3d568ffed07bca18a0d6ed9bcd00a9c12ad. --- tests/perf-test/ReportActionCompose.perf-test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/perf-test/ReportActionCompose.perf-test.tsx b/tests/perf-test/ReportActionCompose.perf-test.tsx index eb007d9c6b33..e3aaccd1f050 100644 --- a/tests/perf-test/ReportActionCompose.perf-test.tsx +++ b/tests/perf-test/ReportActionCompose.perf-test.tsx @@ -34,7 +34,6 @@ jest.mock('@react-navigation/native', () => { navigate: jest.fn(), addListener: () => jest.fn(), }), - useFocusEffect: jest.fn(), useIsFocused: () => true, useNavigationState: () => {}, }; From 4897887daeb6d409199c562e0d53ceee40b48560 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 12:15:43 +0200 Subject: [PATCH 10/12] Revert "fix: revert accident changes" This reverts commit d4b08857e37a048766d5cb3aaf338fe563e19a47. --- src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index ce4028b87ea8..844f11cbdd01 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -483,7 +483,7 @@ const TransactionDuplicateStackNavigator = createModalStackNavigator({ - [SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default, + //[SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default, [SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: () => require('../../../../pages/Search/SearchHoldReasonPage').default, }); From db75cee0da845067bc03cf7b32c05d644adfebc0 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 12:15:49 +0200 Subject: [PATCH 11/12] Revert "fix: eslint, disabled button on web" This reverts commit fb434e0309fc37699badbdca28a56e6feebff62d. --- .../AppNavigator/ModalStackNavigators/index.tsx | 2 +- .../report/ReportActionCompose/SendButton.tsx | 14 ++++++++++---- .../useFreezeId/index.native.ts | 16 ---------------- .../ReportActionCompose/useFreezeId/index.ts | 3 --- 4 files changed, 11 insertions(+), 24 deletions(-) delete mode 100644 src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts delete mode 100644 src/pages/home/report/ReportActionCompose/useFreezeId/index.ts diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 844f11cbdd01..ce4028b87ea8 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -483,7 +483,7 @@ const TransactionDuplicateStackNavigator = createModalStackNavigator({ - //[SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default, + [SCREENS.SEARCH.REPORT_RHP]: () => require('../../../../pages/home/ReportScreen').default, [SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: () => require('../../../../pages/Search/SearchHoldReasonPage').default, }); diff --git a/src/pages/home/report/ReportActionCompose/SendButton.tsx b/src/pages/home/report/ReportActionCompose/SendButton.tsx index acc383bd1122..a36a674b2213 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.tsx +++ b/src/pages/home/report/ReportActionCompose/SendButton.tsx @@ -1,4 +1,4 @@ -import React, {memo} from 'react'; +import React, {memo, useCallback, useState} from 'react'; import {View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import Icon from '@components/Icon'; @@ -10,7 +10,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import useFreezeId from './useFreezeId'; +import {useFocusEffect} from '@react-navigation/native'; type SendButtonProps = { /** Whether the button is disabled */ @@ -25,12 +25,18 @@ function SendButton({isDisabled: isDisabledProp, handleSendMessage}: SendButtonP const styles = useThemeStyles(); const {translate} = useLocalize(); const {isSmallScreenWidth} = useResponsiveLayout(); - const freezeId = useFreezeId(); + const [uniqueRenderId, setUniqueRenderId] = useState(0); const Tap = Gesture.Tap().onEnd(() => { handleSendMessage(); }); + useFocusEffect( + useCallback(() => { + setUniqueRenderId((c) => c + 1); + }, []), + ); + return ( diff --git a/src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts b/src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts deleted file mode 100644 index ff352a15857b..000000000000 --- a/src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {useFocusEffect} from '@react-navigation/native'; -import {useCallback, useState} from 'react'; - -const useFreezeId = () => { - const [uniqueRenderId, setUniqueRenderId] = useState(0); - - useFocusEffect( - useCallback(() => { - setUniqueRenderId((c) => c + 1); - }, []), - ); - - return uniqueRenderId; -}; - -export default useFreezeId; diff --git a/src/pages/home/report/ReportActionCompose/useFreezeId/index.ts b/src/pages/home/report/ReportActionCompose/useFreezeId/index.ts deleted file mode 100644 index b2980b04bfa9..000000000000 --- a/src/pages/home/report/ReportActionCompose/useFreezeId/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -const useFreezeId = () => 0; - -export default useFreezeId; From 5492f90d0f12bab96790f5af18f0eddd980bdb6e Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Mon, 15 Jul 2024 12:15:58 +0200 Subject: [PATCH 12/12] Revert "fix: re-create GestureDetector after freeze being enabled/disabled" This reverts commit 3f7cd2a6800454185c825bb78dc5450bbfab3799. --- .../report/ReportActionCompose/SendButton.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SendButton.tsx b/src/pages/home/report/ReportActionCompose/SendButton.tsx index a36a674b2213..4b902e2c6246 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.tsx +++ b/src/pages/home/report/ReportActionCompose/SendButton.tsx @@ -1,4 +1,4 @@ -import React, {memo, useCallback, useState} from 'react'; +import React, {memo} from 'react'; import {View} from 'react-native'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import Icon from '@components/Icon'; @@ -10,7 +10,6 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import {useFocusEffect} from '@react-navigation/native'; type SendButtonProps = { /** Whether the button is disabled */ @@ -25,18 +24,10 @@ function SendButton({isDisabled: isDisabledProp, handleSendMessage}: SendButtonP const styles = useThemeStyles(); const {translate} = useLocalize(); const {isSmallScreenWidth} = useResponsiveLayout(); - const [uniqueRenderId, setUniqueRenderId] = useState(0); - const Tap = Gesture.Tap().onEnd(() => { handleSendMessage(); }); - useFocusEffect( - useCallback(() => { - setUniqueRenderId((c) => c + 1); - }, []), - ); - return (