From e0085691066170291cffe80d153b35e2f6fb2be7 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Wed, 11 Oct 2023 09:57:25 +0200 Subject: [PATCH 1/9] ref: moved useCurrentReportID to TS --- src/hooks/{useCurrentReportID.js => useCurrentReportID.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/hooks/{useCurrentReportID.js => useCurrentReportID.ts} (100%) diff --git a/src/hooks/useCurrentReportID.js b/src/hooks/useCurrentReportID.ts similarity index 100% rename from src/hooks/useCurrentReportID.js rename to src/hooks/useCurrentReportID.ts From 38bad6ad4ba2d29faf8a3cde37791801fcee77b8 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Wed, 11 Oct 2023 12:56:59 +0200 Subject: [PATCH 2/9] ref: moved withCurrentReportID to TS --- ...entReportID.js => withCurrentReportID.tsx} | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) rename src/components/{withCurrentReportID.js => withCurrentReportID.tsx} (70%) diff --git a/src/components/withCurrentReportID.js b/src/components/withCurrentReportID.tsx similarity index 70% rename from src/components/withCurrentReportID.js rename to src/components/withCurrentReportID.tsx index 18f716981e65..01cfd2bb7c79 100644 --- a/src/components/withCurrentReportID.js +++ b/src/components/withCurrentReportID.tsx @@ -1,10 +1,18 @@ import React, {createContext, forwardRef, useCallback, useState, useMemo} from 'react'; import PropTypes from 'prop-types'; +import {NavigationState} from '@react-navigation/native'; import getComponentDisplayName from '../libs/getComponentDisplayName'; import Navigation from '../libs/Navigation/Navigation'; -const CurrentReportIDContext = createContext(null); +type CurrentReportIDContextType = { + updateCurrentReportID: (state: NavigationState) => void; + currentReportID: string; +}; +type CurrentReportIDContextProviderProps = { + children: React.ReactNode; +}; +const CurrentReportIDContext = createContext(null); const withCurrentReportIDPropTypes = { /** Function to update the state */ @@ -18,23 +26,23 @@ const withCurrentReportIDDefaultProps = { currentReportID: '', }; -function CurrentReportIDContextProvider(props) { +function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderProps) { const [currentReportID, setCurrentReportID] = useState(''); /** * This function is used to update the currentReportID - * @param {Object} state root navigation state + * @param state root navigation state */ const updateCurrentReportID = useCallback( - (state) => { - setCurrentReportID(Navigation.getTopmostReportId(state)); + (state: NavigationState) => { + setCurrentReportID(Navigation.getTopmostReportId(state) ?? ''); }, [setCurrentReportID], ); /** * The context this component exposes to child components - * @returns {Object} currentReportID to share between central pane and LHN + * @returns currentReportID to share between central pane and LHN */ const contextValue = useMemo( () => ({ @@ -53,7 +61,8 @@ CurrentReportIDContextProvider.propTypes = { children: PropTypes.node.isRequired, }; -export default function withCurrentReportID(WrappedComponent) { +// eslint-disable-next-line @typescript-eslint/naming-convention +export default function withCurrentReportID(WrappedComponent: React.ComponentType) { const WithCurrentReportID = forwardRef((props, ref) => ( {(currentReportIDUtils) => ( @@ -68,7 +77,7 @@ export default function withCurrentReportID(WrappedComponent) { )); - WithCurrentReportID.displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`; + (WithCurrentReportID as React.FC).displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`; return WithCurrentReportID; } From 54908a66570ed9afbd27db21bcd25ff545880a40 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Wed, 11 Oct 2023 14:23:41 +0200 Subject: [PATCH 3/9] fix: added correct type to hoc --- src/components/withCurrentReportID.tsx | 16 +++++++++------- src/hooks/useCurrentReportID.ts | 6 ------ src/hooks/useCurrentReportID.tsx | 6 ++++++ 3 files changed, 15 insertions(+), 13 deletions(-) delete mode 100644 src/hooks/useCurrentReportID.ts create mode 100644 src/hooks/useCurrentReportID.tsx diff --git a/src/components/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx index 01cfd2bb7c79..0e15c3ab96b8 100644 --- a/src/components/withCurrentReportID.tsx +++ b/src/components/withCurrentReportID.tsx @@ -1,18 +1,19 @@ -import React, {createContext, forwardRef, useCallback, useState, useMemo} from 'react'; +import React, {createContext, forwardRef, useCallback, useState, useMemo, RefAttributes, ComponentType} from 'react'; import PropTypes from 'prop-types'; import {NavigationState} from '@react-navigation/native'; import getComponentDisplayName from '../libs/getComponentDisplayName'; import Navigation from '../libs/Navigation/Navigation'; +import {type} from 'os'; -type CurrentReportIDContextType = { +type CurrentReportIDContextValue = { updateCurrentReportID: (state: NavigationState) => void; currentReportID: string; }; type CurrentReportIDContextProviderProps = { children: React.ReactNode; }; -const CurrentReportIDContext = createContext(null); +const CurrentReportIDContext = createContext(null); const withCurrentReportIDPropTypes = { /** Function to update the state */ @@ -45,7 +46,7 @@ function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderPro * @returns currentReportID to share between central pane and LHN */ const contextValue = useMemo( - () => ({ + (): CurrentReportIDContextValue => ({ updateCurrentReportID, currentReportID, }), @@ -62,8 +63,8 @@ CurrentReportIDContextProvider.propTypes = { }; // eslint-disable-next-line @typescript-eslint/naming-convention -export default function withCurrentReportID(WrappedComponent: React.ComponentType) { - const WithCurrentReportID = forwardRef((props, ref) => ( +export default function withCurrentReportID(WrappedComponent: ComponentType) { + const WithCurrentReportID: ComponentType>> = forwardRef((props, ref) => ( {(currentReportIDUtils) => ( )); - (WithCurrentReportID as React.FC).displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`; + WithCurrentReportID.displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`; return WithCurrentReportID; } export {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps, CurrentReportIDContextProvider, CurrentReportIDContext}; +export type {CurrentReportIDContextValue}; diff --git a/src/hooks/useCurrentReportID.ts b/src/hooks/useCurrentReportID.ts deleted file mode 100644 index b22ac55616e8..000000000000 --- a/src/hooks/useCurrentReportID.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {useContext} from 'react'; -import {CurrentReportIDContext} from '../components/withCurrentReportID'; - -export default function useCurrentReportID() { - return useContext(CurrentReportIDContext); -} diff --git a/src/hooks/useCurrentReportID.tsx b/src/hooks/useCurrentReportID.tsx new file mode 100644 index 000000000000..83d956cc7935 --- /dev/null +++ b/src/hooks/useCurrentReportID.tsx @@ -0,0 +1,6 @@ +import {useContext} from 'react'; +import {CurrentReportIDContext, CurrentReportIDContextValue} from '../components/withCurrentReportID'; + +export default function useCurrentReportID(): CurrentReportIDContextValue | null { + return useContext(CurrentReportIDContext); +} From 37e44efddcfbac59c7dd5c5651ded8d4f4429a78 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Wed, 11 Oct 2023 16:21:46 +0200 Subject: [PATCH 4/9] fix: remove unused import --- src/components/withCurrentReportID.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx index 0e15c3ab96b8..605884f99c94 100644 --- a/src/components/withCurrentReportID.tsx +++ b/src/components/withCurrentReportID.tsx @@ -4,7 +4,6 @@ import {NavigationState} from '@react-navigation/native'; import getComponentDisplayName from '../libs/getComponentDisplayName'; import Navigation from '../libs/Navigation/Navigation'; -import {type} from 'os'; type CurrentReportIDContextValue = { updateCurrentReportID: (state: NavigationState) => void; From 9b9d48e5f8d7c35a015fe7e106c261d331380154 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Fri, 13 Oct 2023 09:33:21 +0200 Subject: [PATCH 5/9] fix: added type fix --- .eslintrc.js | 2 +- src/components/withCurrentReportID.tsx | 1 - src/libs/getComponentDisplayName.ts | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) 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/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx index 605884f99c94..bbfbb3cb2f39 100644 --- a/src/components/withCurrentReportID.tsx +++ b/src/components/withCurrentReportID.tsx @@ -61,7 +61,6 @@ CurrentReportIDContextProvider.propTypes = { children: PropTypes.node.isRequired, }; -// eslint-disable-next-line @typescript-eslint/naming-convention export default function withCurrentReportID(WrappedComponent: ComponentType) { const WithCurrentReportID: ComponentType>> = forwardRef((props, ref) => ( 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 df83ec232c595b6e58178e9e9ef3428931410a5d Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Fri, 13 Oct 2023 12:43:26 +0200 Subject: [PATCH 6/9] fix: removed unnecessary proptypes --- src/components/withCurrentReportID.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx index bbfbb3cb2f39..370487c85497 100644 --- a/src/components/withCurrentReportID.tsx +++ b/src/components/withCurrentReportID.tsx @@ -12,8 +12,10 @@ type CurrentReportIDContextValue = { type CurrentReportIDContextProviderProps = { children: React.ReactNode; }; + const CurrentReportIDContext = createContext(null); +// TODO: Remove when depended components are migrated to TypeScript. const withCurrentReportIDPropTypes = { /** Function to update the state */ updateCurrentReportID: PropTypes.func.isRequired, @@ -56,20 +58,16 @@ function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderPro } CurrentReportIDContextProvider.displayName = 'CurrentReportIDContextProvider'; -CurrentReportIDContextProvider.propTypes = { - /** Actual content wrapped by this component */ - children: PropTypes.node.isRequired, -}; export default function withCurrentReportID(WrappedComponent: ComponentType) { - const WithCurrentReportID: ComponentType>> = forwardRef((props, ref) => ( + const WithCurrentReportID: ComponentType & RefAttributes>> = forwardRef((props, ref) => ( {(currentReportIDUtils) => ( )} From 79a0d2b3fa23aa3aa50788c0569e228e0b11c13e Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Fri, 13 Oct 2023 15:26:41 +0200 Subject: [PATCH 7/9] fix: resolved comments --- src/components/withCurrentReportID.tsx | 37 ++++++++++++++------------ 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx index 370487c85497..cc857942855c 100644 --- a/src/components/withCurrentReportID.tsx +++ b/src/components/withCurrentReportID.tsx @@ -1,4 +1,4 @@ -import React, {createContext, forwardRef, useCallback, useState, useMemo, RefAttributes, ComponentType} from 'react'; +import React, {createContext, forwardRef, useCallback, useState, useMemo, RefAttributes, ComponentType, ForwardedRef} from 'react'; import PropTypes from 'prop-types'; import {NavigationState} from '@react-navigation/native'; @@ -10,6 +10,7 @@ type CurrentReportIDContextValue = { currentReportID: string; }; type CurrentReportIDContextProviderProps = { + /** Actual content wrapped by this component */ children: React.ReactNode; }; @@ -44,7 +45,7 @@ function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderPro /** * The context this component exposes to child components - * @returns currentReportID to share between central pane and LHN + * @returns currentReportID to share between central pane and LHN */ const contextValue = useMemo( (): CurrentReportIDContextValue => ({ @@ -59,24 +60,26 @@ function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderPro CurrentReportIDContextProvider.displayName = 'CurrentReportIDContextProvider'; -export default function withCurrentReportID(WrappedComponent: ComponentType) { - const WithCurrentReportID: ComponentType & RefAttributes>> = forwardRef((props, ref) => ( - - {(currentReportIDUtils) => ( - - )} - - )); +export default function withCurrentReportID(WrappedComponent: ComponentType>) { + function WithCurrentReportID(props: Omit, ref: ForwardedRef) { + return ( + + {(currentReportIDUtils) => ( + + )} + + ); + } WithCurrentReportID.displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`; - return WithCurrentReportID; + return forwardRef(WithCurrentReportID); } export {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps, CurrentReportIDContextProvider, CurrentReportIDContext}; From f521c2d9ac47a39400b4f97b0dadbc844bdf1339 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Mon, 16 Oct 2023 11:49:21 +0200 Subject: [PATCH 8/9] fix: add return type to HOC --- src/components/withCurrentReportID.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx index cc857942855c..be59af06e4d1 100644 --- a/src/components/withCurrentReportID.tsx +++ b/src/components/withCurrentReportID.tsx @@ -60,7 +60,9 @@ function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderPro CurrentReportIDContextProvider.displayName = 'CurrentReportIDContextProvider'; -export default function withCurrentReportID(WrappedComponent: ComponentType>) { +export default function withCurrentReportID( + WrappedComponent: ComponentType>, +): (props: Omit & React.RefAttributes) => React.ReactElement | null { function WithCurrentReportID(props: Omit, ref: ForwardedRef) { return ( From 14578511bc0709bd6ec90045225193fecf77fc9d Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Tue, 31 Oct 2023 08:56:17 +0100 Subject: [PATCH 9/9] ref: prerify --- src/components/withCurrentReportID.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx index 90a41ec825a1..22da02159073 100644 --- a/src/components/withCurrentReportID.tsx +++ b/src/components/withCurrentReportID.tsx @@ -1,7 +1,6 @@ -import React, {createContext, forwardRef, useCallback, useState, useMemo, RefAttributes, ComponentType, ForwardedRef} from 'react'; -import PropTypes from 'prop-types'; import {NavigationState} from '@react-navigation/native'; - +import PropTypes from 'prop-types'; +import React, {ComponentType, createContext, ForwardedRef, forwardRef, RefAttributes, useCallback, useMemo, useState} from 'react'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import Navigation from '@libs/Navigation/Navigation';