From d5c96b3f54efa2882825fd59dc75a3f747cf8430 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 16 Nov 2023 12:02:57 +0100 Subject: [PATCH 1/4] [TS migration] Migrate 'withPolicyAndFullscreenLoading.js' HOC to TypeScript --- src/pages/workspace/withPolicy.tsx | 1 + .../withPolicyAndFullscreenLoading.js | 67 ------------------- .../withPolicyAndFullscreenLoading.tsx | 44 ++++++++++++ 3 files changed, 45 insertions(+), 67 deletions(-) delete mode 100644 src/pages/workspace/withPolicyAndFullscreenLoading.js create mode 100644 src/pages/workspace/withPolicyAndFullscreenLoading.tsx diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx index 8db093ec24d0..8e6a67ce5ee7 100644 --- a/src/pages/workspace/withPolicy.tsx +++ b/src/pages/workspace/withPolicy.tsx @@ -116,3 +116,4 @@ export default function (WrappedComponent: } export {policyPropTypes, policyDefaultProps}; +export type {WithPolicyOnyxProps, WithPolicyProps}; diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.js b/src/pages/workspace/withPolicyAndFullscreenLoading.js deleted file mode 100644 index 2911eadccf5f..000000000000 --- a/src/pages/workspace/withPolicyAndFullscreenLoading.js +++ /dev/null @@ -1,67 +0,0 @@ -import isEmpty from 'lodash/isEmpty'; -import omit from 'lodash/omit'; -import PropTypes from 'prop-types'; -import React from 'react'; -import {withOnyx} from 'react-native-onyx'; -import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; -import compose from '@libs/compose'; -import getComponentDisplayName from '@libs/getComponentDisplayName'; -import ONYXKEYS from '@src/ONYXKEYS'; -import withPolicy, {policyDefaultProps, policyPropTypes} from './withPolicy'; - -export default function (WrappedComponent) { - const propTypes = { - /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component. - * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */ - forwardedRef: PropTypes.func, - - /** Indicated whether the report data is loading */ - isLoadingReportData: PropTypes.bool, - - ...policyPropTypes, - }; - - const defaultProps = { - forwardedRef: () => {}, - isLoadingReportData: true, - ...policyDefaultProps, - }; - - function WithPolicyAndFullscreenLoading(props) { - if (props.isLoadingReportData && isEmpty(props.policy) && isEmpty(props.policyDraft)) { - return ; - } - - const rest = omit(props, ['forwardedRef']); - return ( - - ); - } - - WithPolicyAndFullscreenLoading.propTypes = propTypes; - WithPolicyAndFullscreenLoading.defaultProps = defaultProps; - WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading(${getComponentDisplayName(WrappedComponent)})`; - - const WithPolicyAndFullscreenLoadingWithRef = React.forwardRef((props, ref) => ( - - )); - - WithPolicyAndFullscreenLoadingWithRef.displayName = 'WithPolicyAndFullscreenLoadingWithRef'; - - return compose( - withPolicy, - withOnyx({ - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, - }), - )(WithPolicyAndFullscreenLoadingWithRef); -} diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx new file mode 100644 index 000000000000..41fcc91a867a --- /dev/null +++ b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx @@ -0,0 +1,44 @@ +import isEmpty from 'lodash/isEmpty'; +import React, {ComponentType, ForwardedRef, forwardRef, RefAttributes} from 'react'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; +import compose from '@libs/compose'; +import ONYXKEYS from '@src/ONYXKEYS'; +import withPolicy, {WithPolicyProps} from './withPolicy'; + +type WithPolicyAndFullscreenLoadingOnyxProps = { + /** Indicated whether the report data is loading */ + isLoadingReportData: OnyxEntry; +}; + +type WithPolicyAndFullscreenLoadingProps = WithPolicyProps & WithPolicyAndFullscreenLoadingOnyxProps; + +// : React.ComponentType> +export default function withPolicyAndFullscreenLoading(WrappedComponent: ComponentType>) { + function WithPolicyAndFullscreenLoading(props: TProps, ref: ForwardedRef) { + const isLoadingReportData = props.isLoadingReportData ?? true; + + if (isLoadingReportData && isEmpty(props.policy) && isEmpty(props.policyDraft)) { + return ; + } + + return ( + + ); + } + + WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading`; + + return compose( + withOnyx, WithPolicyAndFullscreenLoadingOnyxProps>({ + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, + }), + withPolicy, + )(forwardRef(WithPolicyAndFullscreenLoading)); +} From 5f94894a88eb0ec2fb8f414f2dc177c6f688aaf9 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 16 Nov 2023 12:06:56 +0100 Subject: [PATCH 2/4] Add return type --- src/pages/workspace/withPolicyAndFullscreenLoading.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx index 41fcc91a867a..d221eb328aee 100644 --- a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx +++ b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx @@ -4,7 +4,7 @@ import {OnyxEntry, withOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import compose from '@libs/compose'; import ONYXKEYS from '@src/ONYXKEYS'; -import withPolicy, {WithPolicyProps} from './withPolicy'; +import withPolicy, {WithPolicyOnyxProps, WithPolicyProps} from './withPolicy'; type WithPolicyAndFullscreenLoadingOnyxProps = { /** Indicated whether the report data is loading */ @@ -13,8 +13,9 @@ type WithPolicyAndFullscreenLoadingOnyxProps = { type WithPolicyAndFullscreenLoadingProps = WithPolicyProps & WithPolicyAndFullscreenLoadingOnyxProps; -// : React.ComponentType> -export default function withPolicyAndFullscreenLoading(WrappedComponent: ComponentType>) { +export default function withPolicyAndFullscreenLoading( + WrappedComponent: ComponentType>, +): React.ComponentType, 'isLoadingReportData'>, keyof WithPolicyOnyxProps>> { function WithPolicyAndFullscreenLoading(props: TProps, ref: ForwardedRef) { const isLoadingReportData = props.isLoadingReportData ?? true; From 708f0805362357bc30becf91c8fef6b66a261714 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 21 Nov 2023 09:21:46 +0100 Subject: [PATCH 3/4] Adjust after code review --- .../withPolicyAndFullscreenLoading.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx index d221eb328aee..a227a3cd7ad7 100644 --- a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx +++ b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx @@ -13,20 +13,25 @@ type WithPolicyAndFullscreenLoadingOnyxProps = { type WithPolicyAndFullscreenLoadingProps = WithPolicyProps & WithPolicyAndFullscreenLoadingOnyxProps; +type ComponentWithPolicyAndFullscreenLoading = ComponentType< + Omit, keyof WithPolicyAndFullscreenLoadingOnyxProps>, keyof WithPolicyOnyxProps> +>; + export default function withPolicyAndFullscreenLoading( WrappedComponent: ComponentType>, -): React.ComponentType, 'isLoadingReportData'>, keyof WithPolicyOnyxProps>> { - function WithPolicyAndFullscreenLoading(props: TProps, ref: ForwardedRef) { - const isLoadingReportData = props.isLoadingReportData ?? true; - - if (isLoadingReportData && isEmpty(props.policy) && isEmpty(props.policyDraft)) { +): ComponentWithPolicyAndFullscreenLoading { + function WithPolicyAndFullscreenLoading({isLoadingReportData = true, policy, policyDraft, ...rest}: TProps, ref: ForwardedRef) { + if (isLoadingReportData && isEmpty(policy) && isEmpty(policyDraft)) { return ; } return ( ); From 3949504d1345086fe5f1f8dbd73e310c60d5f767 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 21 Nov 2023 10:16:30 +0100 Subject: [PATCH 4/4] Add default values to prevent any regression --- .../workspace/withPolicyAndFullscreenLoading.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx index a227a3cd7ad7..3e8bd3bdddb4 100644 --- a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx +++ b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx @@ -4,7 +4,7 @@ import {OnyxEntry, withOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import compose from '@libs/compose'; import ONYXKEYS from '@src/ONYXKEYS'; -import withPolicy, {WithPolicyOnyxProps, WithPolicyProps} from './withPolicy'; +import withPolicy, {policyDefaultProps, WithPolicyOnyxProps, WithPolicyProps} from './withPolicy'; type WithPolicyAndFullscreenLoadingOnyxProps = { /** Indicated whether the report data is loading */ @@ -20,7 +20,17 @@ type ComponentWithPolicyAndFullscreenLoading( WrappedComponent: ComponentType>, ): ComponentWithPolicyAndFullscreenLoading { - function WithPolicyAndFullscreenLoading({isLoadingReportData = true, policy, policyDraft, ...rest}: TProps, ref: ForwardedRef) { + function WithPolicyAndFullscreenLoading( + { + isLoadingReportData = true, + policy = policyDefaultProps.policy, + policyDraft = policyDefaultProps.policyDraft, + policyMembers = policyDefaultProps.policyMembers, + policyMembersDraft = policyDefaultProps.policyMembersDraft, + ...rest + }: TProps, + ref: ForwardedRef, + ) { if (isLoadingReportData && isEmpty(policy) && isEmpty(policyDraft)) { return ; } @@ -32,6 +42,8 @@ export default function withPolicyAndFullscreenLoading );