From 9ed2eaaa87524bf24cc6922751504fe2211785c1 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 13 Oct 2023 09:00:31 +0200 Subject: [PATCH 1/6] migrate HOC to TypeScript, remove proptypes --- .eslintrc.js | 2 +- src/components/withNavigation.js | 40 ------------------- src/components/withNavigation.tsx | 24 +++++++++++ .../Navigators/RightModalNavigator.js | 4 +- .../AppNavigator/ReportScreenIDSetter.js | 3 +- .../AppNavigator/ReportScreenWrapper.js | 3 +- 6 files changed, 29 insertions(+), 47 deletions(-) delete mode 100644 src/components/withNavigation.js create mode 100644 src/components/withNavigation.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 75a74ed371c4..89d178491a97 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -116,7 +116,7 @@ module.exports = { }, { selector: ['parameter', 'method'], - format: ['camelCase'], + format: ['camelCase, PascalCase'], }, ], '@typescript-eslint/ban-types': [ diff --git a/src/components/withNavigation.js b/src/components/withNavigation.js deleted file mode 100644 index ef0f599dc982..000000000000 --- a/src/components/withNavigation.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import {useNavigation} from '@react-navigation/native'; -import getComponentDisplayName from '../libs/getComponentDisplayName'; -import refPropTypes from './refPropTypes'; - -const withNavigationPropTypes = { - navigation: PropTypes.object.isRequired, -}; - -export default function withNavigation(WrappedComponent) { - function WithNavigation(props) { - const navigation = useNavigation(); - return ( - - ); - } - - WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`; - WithNavigation.propTypes = { - forwardedRef: refPropTypes, - }; - WithNavigation.defaultProps = { - forwardedRef: () => {}, - }; - return React.forwardRef((props, ref) => ( - - )); -} - -export {withNavigationPropTypes}; diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx new file mode 100644 index 000000000000..54143952bbc9 --- /dev/null +++ b/src/components/withNavigation.tsx @@ -0,0 +1,24 @@ +import React, {ComponentType, ForwardedRef, RefAttributes} from 'react'; +import {NavigationProp, useNavigation} from '@react-navigation/native'; +import getComponentDisplayName from '../libs/getComponentDisplayName'; + +type WithNavigationProps = { + navigation: NavigationProp; +}; + +export default function withNavigation(WrappedComponent: ComponentType>) { + function WithNavigation(props: Omit, ref: ForwardedRef) { + const navigation = useNavigation(); + return ( + + ); + } + + WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent as ComponentType)})`; + return React.forwardRef(WithNavigation); +} diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js index 27a15fa3d763..8b6ad60d05dc 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js @@ -1,11 +1,11 @@ import React from 'react'; import {View} from 'react-native'; import {createStackNavigator} from '@react-navigation/stack'; +import PropTypes from 'prop-types'; import * as ModalStackNavigators from '../ModalStackNavigators'; import RHPScreenOptions from '../RHPScreenOptions'; import useWindowDimensions from '../../../../hooks/useWindowDimensions'; -import {withNavigationPropTypes} from '../../../../components/withNavigation'; import styles from '../../../../styles/styles'; import Overlay from './Overlay'; import NoDropZone from '../../../../components/DragAndDrop/NoDropZone'; @@ -13,7 +13,7 @@ import NoDropZone from '../../../../components/DragAndDrop/NoDropZone'; const Stack = createStackNavigator(); const propTypes = { - ...withNavigationPropTypes, + navigation: PropTypes.object.isRequired, }; function RightModalNavigator(props) { diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js index 24f855645870..4298f0dd3664 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js +++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js @@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '../../../ONYXKEYS'; import * as ReportUtils from '../../ReportUtils'; import reportPropTypes from '../../../pages/reportPropTypes'; -import {withNavigationPropTypes} from '../../../components/withNavigation'; import * as App from '../../actions/App'; import usePermissions from '../../../hooks/usePermissions'; import CONST from '../../../CONST'; @@ -40,7 +39,7 @@ const propTypes = { }), }).isRequired, - ...withNavigationPropTypes, + navigation: PropTypes.object.isRequired, }; const defaultProps = { diff --git a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js index 767bd9793ac2..0ea16c6e9196 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js +++ b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; import React from 'react'; -import {withNavigationPropTypes} from '../../../components/withNavigation'; import ReportScreen from '../../../pages/home/ReportScreen'; import ReportScreenIDSetter from './ReportScreenIDSetter'; @@ -17,7 +16,7 @@ const propTypes = { }), }).isRequired, - ...withNavigationPropTypes, + navigation: PropTypes.object.isRequired, }; const defaultProps = {}; From b646d2f75404c8964d590c82d2122f7447480c55 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 13 Oct 2023 09:05:31 +0200 Subject: [PATCH 2/6] remove unnecessary eslint disable --- src/components/withNavigation.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx index 54143952bbc9..085a70b3db86 100644 --- a/src/components/withNavigation.tsx +++ b/src/components/withNavigation.tsx @@ -11,7 +11,6 @@ export default function withNavigation const navigation = useNavigation(); return ( Date: Fri, 13 Oct 2023 09:50:56 +0200 Subject: [PATCH 3/6] remove type casting from getCOmponentDisplayName --- src/components/withNavigation.tsx | 2 +- src/libs/getComponentDisplayName.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx index 085a70b3db86..73bd170b51ad 100644 --- a/src/components/withNavigation.tsx +++ b/src/components/withNavigation.tsx @@ -18,6 +18,6 @@ export default function withNavigation ); } - WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent as ComponentType)})`; + WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`; return React.forwardRef(WithNavigation); } diff --git a/src/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts index fd1bbcaea521..0bf52d543a84 100644 --- a/src/libs/getComponentDisplayName.ts +++ b/src/libs/getComponentDisplayName.ts @@ -1,6 +1,6 @@ import {ComponentType} from 'react'; /** Returns the display name of a component */ -export default function getComponentDisplayName(component: ComponentType): string { +export default function getComponentDisplayName(component: ComponentType): string { return component.displayName ?? component.name ?? 'Component'; } From d8414205eb96d60c6bbb5aca77d2079919c7f992 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 13 Oct 2023 10:24:48 +0200 Subject: [PATCH 4/6] fix typo in eslintrc --- .eslintrc.js | 2 +- src/components/withNavigation.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 89d178491a97..83e9479ce0c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -116,7 +116,7 @@ module.exports = { }, { selector: ['parameter', 'method'], - format: ['camelCase, PascalCase'], + format: ['camelCase', 'PascalCase'], }, ], '@typescript-eslint/ban-types': [ diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx index 73bd170b51ad..c0f7d9685849 100644 --- a/src/components/withNavigation.tsx +++ b/src/components/withNavigation.tsx @@ -11,6 +11,7 @@ export default function withNavigation const navigation = useNavigation(); return ( Date: Fri, 13 Oct 2023 11:20:44 +0200 Subject: [PATCH 5/6] fix navigation prop types --- .../AppNavigator/Navigators/RightModalNavigator.js | 5 ++++- src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js | 5 ++++- src/libs/Navigation/AppNavigator/ReportScreenWrapper.js | 5 ++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js index 8b6ad60d05dc..1c96a66f1d5a 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js @@ -13,7 +13,10 @@ import NoDropZone from '../../../../components/DragAndDrop/NoDropZone'; const Stack = createStackNavigator(); const propTypes = { - navigation: PropTypes.object.isRequired, + /* Navigation functions provided by React Navigation */ + navigation: PropTypes.shape({ + goBack: PropTypes.func.isRequired, + }).isRequired, }; function RightModalNavigator(props) { diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js index 4298f0dd3664..e371274f89fb 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js +++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js @@ -39,7 +39,10 @@ const propTypes = { }), }).isRequired, - navigation: PropTypes.object.isRequired, + /* Navigation functions provided by React Navigation */ + navigation: PropTypes.shape({ + setParams: PropTypes.func.isRequired, + }).isRequired, }; const defaultProps = { diff --git a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js index 0ea16c6e9196..542be8ed859e 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js +++ b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js @@ -16,7 +16,10 @@ const propTypes = { }), }).isRequired, - navigation: PropTypes.object.isRequired, + /* Navigation functions provided by React Navigation */ + navigation: PropTypes.shape({ + setParams: PropTypes.func.isRequired, + }).isRequired, }; const defaultProps = {}; From 611998248cf7e4864dd0429707c2620ae3c35dbf Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 16 Oct 2023 12:26:19 +0200 Subject: [PATCH 6/6] add return type to hoc --- src/components/withNavigation.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx index c0f7d9685849..c5842fdacc44 100644 --- a/src/components/withNavigation.tsx +++ b/src/components/withNavigation.tsx @@ -6,7 +6,9 @@ type WithNavigationProps = { navigation: NavigationProp; }; -export default function withNavigation(WrappedComponent: ComponentType>) { +export default function withNavigation( + WrappedComponent: ComponentType>, +): (props: Omit, ref: ForwardedRef) => React.JSX.Element | null { function WithNavigation(props: Omit, ref: ForwardedRef) { const navigation = useNavigation(); return (