From 7c164c713d3451d8cca8aaeffc7c5bba8f2b52b0 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 17 Oct 2023 12:07:33 +0200 Subject: [PATCH 1/5] [TS migration] Migrate 'CustomDevMenu' component to TypeScript --- .../CustomDevMenu/{index.native.js => index.native.tsx} | 0 src/components/CustomDevMenu/{index.js => index.tsx} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/components/CustomDevMenu/{index.native.js => index.native.tsx} (100%) rename src/components/CustomDevMenu/{index.js => index.tsx} (100%) diff --git a/src/components/CustomDevMenu/index.native.js b/src/components/CustomDevMenu/index.native.tsx similarity index 100% rename from src/components/CustomDevMenu/index.native.js rename to src/components/CustomDevMenu/index.native.tsx diff --git a/src/components/CustomDevMenu/index.js b/src/components/CustomDevMenu/index.tsx similarity index 100% rename from src/components/CustomDevMenu/index.js rename to src/components/CustomDevMenu/index.tsx From be405778ac0052d8848932832e6589435b45fea6 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 17 Oct 2023 12:07:39 +0200 Subject: [PATCH 2/5] [TS migration] Migrate 'CustomDevMenu' component to TypeScript --- src/components/CustomDevMenu/index.native.tsx | 3 ++- src/components/CustomDevMenu/index.tsx | 4 +++- src/components/CustomDevMenu/types.ts | 3 +++ 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/components/CustomDevMenu/types.ts diff --git a/src/components/CustomDevMenu/index.native.tsx b/src/components/CustomDevMenu/index.native.tsx index 52ca0e43782c..46dae5143d2c 100644 --- a/src/components/CustomDevMenu/index.native.tsx +++ b/src/components/CustomDevMenu/index.native.tsx @@ -1,8 +1,9 @@ import {useEffect} from 'react'; import DevMenu from 'react-native-dev-menu'; import toggleTestToolsModal from '../../libs/actions/TestTool'; +import CustomDevMenuElement from './types'; -function CustomDevMenu() { +function CustomDevMenu(): CustomDevMenuElement { useEffect(() => { DevMenu.addItem('Open Test Preferences', toggleTestToolsModal); }, []); diff --git a/src/components/CustomDevMenu/index.tsx b/src/components/CustomDevMenu/index.tsx index b8944c185d13..41dd054eead1 100644 --- a/src/components/CustomDevMenu/index.tsx +++ b/src/components/CustomDevMenu/index.tsx @@ -1,4 +1,6 @@ -const CustomDevMenu = () => {}; +import CustomDevMenuElement from './types'; + +const CustomDevMenu = (): CustomDevMenuElement => {}; CustomDevMenu.displayName = 'CustomDevMenu'; diff --git a/src/components/CustomDevMenu/types.ts b/src/components/CustomDevMenu/types.ts new file mode 100644 index 000000000000..4425f8f46c97 --- /dev/null +++ b/src/components/CustomDevMenu/types.ts @@ -0,0 +1,3 @@ +type CustomDevMenuElement = null | void; + +export default CustomDevMenuElement; From 0a85f578c58ff9cd1aa56a6aedc7c49a67d58e84 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 17 Oct 2023 12:57:41 +0200 Subject: [PATCH 3/5] Migrate customDevMenu --- src/components/CustomDevMenu/index.native.tsx | 4 ++-- src/components/CustomDevMenu/index.tsx | 2 +- src/components/CustomDevMenu/types.ts | 5 ++++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/CustomDevMenu/index.native.tsx b/src/components/CustomDevMenu/index.native.tsx index 46dae5143d2c..53e391c84aea 100644 --- a/src/components/CustomDevMenu/index.native.tsx +++ b/src/components/CustomDevMenu/index.native.tsx @@ -3,13 +3,13 @@ import DevMenu from 'react-native-dev-menu'; import toggleTestToolsModal from '../../libs/actions/TestTool'; import CustomDevMenuElement from './types'; -function CustomDevMenu(): CustomDevMenuElement { +const CustomDevMenu: CustomDevMenuElement = () => { useEffect(() => { DevMenu.addItem('Open Test Preferences', toggleTestToolsModal); }, []); return null; -} +}; CustomDevMenu.displayName = 'CustomDevMenu'; diff --git a/src/components/CustomDevMenu/index.tsx b/src/components/CustomDevMenu/index.tsx index 41dd054eead1..3db6c8814a60 100644 --- a/src/components/CustomDevMenu/index.tsx +++ b/src/components/CustomDevMenu/index.tsx @@ -1,6 +1,6 @@ import CustomDevMenuElement from './types'; -const CustomDevMenu = (): CustomDevMenuElement => {}; +const CustomDevMenu: CustomDevMenuElement = () => {}; CustomDevMenu.displayName = 'CustomDevMenu'; diff --git a/src/components/CustomDevMenu/types.ts b/src/components/CustomDevMenu/types.ts index 4425f8f46c97..3ed116bedafc 100644 --- a/src/components/CustomDevMenu/types.ts +++ b/src/components/CustomDevMenu/types.ts @@ -1,3 +1,6 @@ -type CustomDevMenuElement = null | void; +type CustomDevMenuElement = { + (): null | void; + displayName: string; +}; export default CustomDevMenuElement; From bd99ba5e57f2359bc1d3f710344c0eddbdc4d268 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 17 Oct 2023 13:00:40 +0200 Subject: [PATCH 4/5] Add eslint rule --- src/components/CustomDevMenu/index.native.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/CustomDevMenu/index.native.tsx b/src/components/CustomDevMenu/index.native.tsx index 53e391c84aea..bf051cf78923 100644 --- a/src/components/CustomDevMenu/index.native.tsx +++ b/src/components/CustomDevMenu/index.native.tsx @@ -3,6 +3,7 @@ import DevMenu from 'react-native-dev-menu'; import toggleTestToolsModal from '../../libs/actions/TestTool'; import CustomDevMenuElement from './types'; +// eslint-disable-next-line react/function-component-definition const CustomDevMenu: CustomDevMenuElement = () => { useEffect(() => { DevMenu.addItem('Open Test Preferences', toggleTestToolsModal); From e37c5ef6cf2a38719f3789f0549a414297cf7f76 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Thu, 23 Nov 2023 12:07:17 +0100 Subject: [PATCH 5/5] fix: reorganize component declaration --- src/components/CustomDevMenu/index.native.tsx | 21 ++++++++++--------- src/components/CustomDevMenu/index.tsx | 4 +--- src/components/CustomDevMenu/types.ts | 4 +++- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/CustomDevMenu/index.native.tsx b/src/components/CustomDevMenu/index.native.tsx index 5ff00a97e670..d8a0ea987171 100644 --- a/src/components/CustomDevMenu/index.native.tsx +++ b/src/components/CustomDevMenu/index.native.tsx @@ -3,15 +3,16 @@ import DevMenu from 'react-native-dev-menu'; import toggleTestToolsModal from '@userActions/TestTool'; import CustomDevMenuElement from './types'; -// eslint-disable-next-line react/function-component-definition -const CustomDevMenu: CustomDevMenuElement = () => { - useEffect(() => { - DevMenu.addItem('Open Test Preferences', toggleTestToolsModal); - }, []); - - return null; -}; - -CustomDevMenu.displayName = 'CustomDevMenu'; +const CustomDevMenu: CustomDevMenuElement = Object.assign( + () => { + useEffect(() => { + DevMenu.addItem('Open Test Preferences', toggleTestToolsModal); + }, []); + return <>; + }, + { + displayName: 'CustomDevMenu', + }, +); export default CustomDevMenu; diff --git a/src/components/CustomDevMenu/index.tsx b/src/components/CustomDevMenu/index.tsx index 3db6c8814a60..8384a9804fb4 100644 --- a/src/components/CustomDevMenu/index.tsx +++ b/src/components/CustomDevMenu/index.tsx @@ -1,7 +1,5 @@ import CustomDevMenuElement from './types'; -const CustomDevMenu: CustomDevMenuElement = () => {}; - -CustomDevMenu.displayName = 'CustomDevMenu'; +const CustomDevMenu: CustomDevMenuElement = Object.assign(() => <>, {displayName: 'CustomDevMenu'}); export default CustomDevMenu; diff --git a/src/components/CustomDevMenu/types.ts b/src/components/CustomDevMenu/types.ts index 3ed116bedafc..bdfc800a17f0 100644 --- a/src/components/CustomDevMenu/types.ts +++ b/src/components/CustomDevMenu/types.ts @@ -1,5 +1,7 @@ +import {ReactElement} from 'react'; + type CustomDevMenuElement = { - (): null | void; + (): ReactElement; displayName: string; };