From 5d7ec0c52064ba714c4a554bf1be4788c592884d Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Fri, 13 Oct 2023 13:17:55 +0200 Subject: [PATCH 1/3] [TS migration] Migrate 'withCurrentUserPersonalDetails.js' HOC --- .eslintrc.js | 2 +- .../withCurrentUserPersonalDetails.js | 74 ------------------- .../withCurrentUserPersonalDetails.tsx | 63 ++++++++++++++++ src/libs/getComponentDisplayName.ts | 2 +- 4 files changed, 65 insertions(+), 76 deletions(-) delete mode 100644 src/components/withCurrentUserPersonalDetails.js create mode 100644 src/components/withCurrentUserPersonalDetails.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 75a74ed371c4..83e9479ce0c4 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/withCurrentUserPersonalDetails.js b/src/components/withCurrentUserPersonalDetails.js deleted file mode 100644 index 7a47ea7cc712..000000000000 --- a/src/components/withCurrentUserPersonalDetails.js +++ /dev/null @@ -1,74 +0,0 @@ -import React, {useMemo} from 'react'; -import PropTypes from 'prop-types'; -import {withOnyx} from 'react-native-onyx'; -import getComponentDisplayName from '../libs/getComponentDisplayName'; -import ONYXKEYS from '../ONYXKEYS'; -import personalDetailsPropType from '../pages/personalDetailsPropType'; -import refPropTypes from './refPropTypes'; - -const withCurrentUserPersonalDetailsPropTypes = { - currentUserPersonalDetails: personalDetailsPropType, -}; - -const withCurrentUserPersonalDetailsDefaultProps = { - currentUserPersonalDetails: {}, -}; - -export default function (WrappedComponent) { - const propTypes = { - forwardedRef: refPropTypes, - - /** Personal details of all the users, including current user */ - personalDetails: PropTypes.objectOf(personalDetailsPropType), - - /** Session of the current user */ - session: PropTypes.shape({ - accountID: PropTypes.number, - }), - }; - const defaultProps = { - forwardedRef: undefined, - personalDetails: {}, - session: { - accountID: 0, - }, - }; - - function WithCurrentUserPersonalDetails(props) { - const accountID = props.session.accountID; - const accountPersonalDetails = props.personalDetails[accountID]; - const currentUserPersonalDetails = useMemo(() => ({...accountPersonalDetails, accountID}), [accountPersonalDetails, accountID]); - return ( - - ); - } - - WithCurrentUserPersonalDetails.displayName = `WithCurrentUserPersonalDetails(${getComponentDisplayName(WrappedComponent)})`; - WithCurrentUserPersonalDetails.propTypes = propTypes; - - WithCurrentUserPersonalDetails.defaultProps = defaultProps; - - const withCurrentUserPersonalDetails = React.forwardRef((props, ref) => ( - - )); - - return withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - session: { - key: ONYXKEYS.SESSION, - }, - })(withCurrentUserPersonalDetails); -} - -export {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps}; diff --git a/src/components/withCurrentUserPersonalDetails.tsx b/src/components/withCurrentUserPersonalDetails.tsx new file mode 100644 index 000000000000..38493f29ca94 --- /dev/null +++ b/src/components/withCurrentUserPersonalDetails.tsx @@ -0,0 +1,63 @@ +import React, {ComponentType, RefAttributes, ForwardedRef, useMemo} from 'react'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import getComponentDisplayName from '../libs/getComponentDisplayName'; +import ONYXKEYS from '../ONYXKEYS'; +import personalDetailsPropType from '../pages/personalDetailsPropType'; +import type {PersonalDetails, Session} from '../types/onyx'; + +type CurrentUserPersonalDetails = PersonalDetails | Record; + +type WithCurrentUserPersonalDetailsProps = { + currentUserPersonalDetails: CurrentUserPersonalDetails; +}; + +type WithCurrentUserPersonalDetailsComponentProps = { + /** Personal details of all the users, including current user */ + personalDetails: Record | null; + + /** Session of the current user */ + session: OnyxEntry; +}; + +// TODO: remove when all components that use it will be migrated to TS +const withCurrentUserPersonalDetailsPropTypes = { + currentUserPersonalDetails: personalDetailsPropType, +}; + +const withCurrentUserPersonalDetailsDefaultProps: WithCurrentUserPersonalDetailsProps = { + currentUserPersonalDetails: {}, +}; + +export default function (WrappedComponent: ComponentType>) { + function WithCurrentUserPersonalDetails(props: Omit & WithCurrentUserPersonalDetailsComponentProps, ref: ForwardedRef) { + const accountID = props.session?.accountID ?? 0; + const accountPersonalDetails = props.personalDetails?.[accountID]; + const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo( + () => (accountPersonalDetails ? {...accountPersonalDetails, accountID} : {}), + [accountPersonalDetails, accountID], + ); + return ( + + ); + } + + WithCurrentUserPersonalDetails.displayName = `WithCurrentUserPersonalDetails(${getComponentDisplayName(WrappedComponent)})`; + + const withCurrentUserPersonalDetails = React.forwardRef(WithCurrentUserPersonalDetails); + + return withOnyx & WithCurrentUserPersonalDetailsComponentProps, WithCurrentUserPersonalDetailsComponentProps>({ + personalDetails: { + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + }, + session: { + key: ONYXKEYS.SESSION, + }, + })(withCurrentUserPersonalDetails); +} + +export {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps}; 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 5342f99d23ca2e26519b7951549d2e9ec1d4c56f Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Mon, 16 Oct 2023 18:57:31 +0200 Subject: [PATCH 2/3] Update withCurrentUserPersonalDetails HOC typing --- .../withCurrentUserPersonalDetails.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/withCurrentUserPersonalDetails.tsx b/src/components/withCurrentUserPersonalDetails.tsx index 38493f29ca94..810638e74c1a 100644 --- a/src/components/withCurrentUserPersonalDetails.tsx +++ b/src/components/withCurrentUserPersonalDetails.tsx @@ -7,11 +7,7 @@ import type {PersonalDetails, Session} from '../types/onyx'; type CurrentUserPersonalDetails = PersonalDetails | Record; -type WithCurrentUserPersonalDetailsProps = { - currentUserPersonalDetails: CurrentUserPersonalDetails; -}; - -type WithCurrentUserPersonalDetailsComponentProps = { +type OnyxProps = { /** Personal details of all the users, including current user */ personalDetails: Record | null; @@ -19,17 +15,25 @@ type WithCurrentUserPersonalDetailsComponentProps = { session: OnyxEntry; }; +type HOCProps = { + currentUserPersonalDetails: CurrentUserPersonalDetails; +}; + +type ComponentProps = OnyxProps & HOCProps; + // TODO: remove when all components that use it will be migrated to TS const withCurrentUserPersonalDetailsPropTypes = { currentUserPersonalDetails: personalDetailsPropType, }; -const withCurrentUserPersonalDetailsDefaultProps: WithCurrentUserPersonalDetailsProps = { +const withCurrentUserPersonalDetailsDefaultProps: HOCProps = { currentUserPersonalDetails: {}, }; -export default function (WrappedComponent: ComponentType>) { - function WithCurrentUserPersonalDetails(props: Omit & WithCurrentUserPersonalDetailsComponentProps, ref: ForwardedRef) { +export default function ( + WrappedComponent: ComponentType>, +): ComponentType & RefAttributes, keyof OnyxProps>> { + function WithCurrentUserPersonalDetails(props: Omit, ref: ForwardedRef) { const accountID = props.session?.accountID ?? 0; const accountPersonalDetails = props.personalDetails?.[accountID]; const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo( @@ -39,7 +43,7 @@ export default function @@ -50,7 +54,7 @@ export default function & WithCurrentUserPersonalDetailsComponentProps, WithCurrentUserPersonalDetailsComponentProps>({ + return withOnyx & RefAttributes, OnyxProps>({ personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST, }, From 5d016ef5e2e60e895b70f1bc9334a68aec988c2a Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Tue, 17 Oct 2023 12:42:48 +0200 Subject: [PATCH 3/3] Use OnyxEntry for the onyx type --- src/components/withCurrentUserPersonalDetails.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/withCurrentUserPersonalDetails.tsx b/src/components/withCurrentUserPersonalDetails.tsx index 810638e74c1a..e1472f280f17 100644 --- a/src/components/withCurrentUserPersonalDetails.tsx +++ b/src/components/withCurrentUserPersonalDetails.tsx @@ -9,7 +9,7 @@ type CurrentUserPersonalDetails = PersonalDetails | Record; type OnyxProps = { /** Personal details of all the users, including current user */ - personalDetails: Record | null; + personalDetails: OnyxEntry>; /** Session of the current user */ session: OnyxEntry;