[No QA] [TS migration] Migrate 'withCurrentUserPersonalDetails.js' HOC to TypeScript

.eslintrc.js

@@ -116,7 +116,7 @@ module.exports = {
                     },
                     {
                         selector: ['parameter', 'method'],
-                        format: ['camelCase'],
+                        format: ['camelCase', 'PascalCase'],
                     },
                 ],
                 '@typescript-eslint/ban-types': [

src/components/withCurrentUserPersonalDetails.tsx

@@ -0,0 +1,67 @@
+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<string, never>;
+
+type OnyxProps = {
+    /** Personal details of all the users, including current user */
+    personalDetails: Record<string, PersonalDetails> | null;
+
+    /** Session of the current user */
+    session: OnyxEntry<Session>;
+};
+
+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: HOCProps = {
+    currentUserPersonalDetails: {},
+};
+
+export default function <TProps extends ComponentProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): ComponentType<Omit<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, keyof OnyxProps>> {
+    function WithCurrentUserPersonalDetails(props: Omit<TProps, keyof HOCProps>, ref: ForwardedRef<TRef>) {
+        const accountID = props.session?.accountID ?? 0;
+        const accountPersonalDetails = props.personalDetails?.[accountID];
+        const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo(
+            () => (accountPersonalDetails ? {...accountPersonalDetails, accountID} : {}),
+            [accountPersonalDetails, accountID],
+        );
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(props as TProps)}
+                ref={ref}
+                currentUserPersonalDetails={currentUserPersonalDetails}
+            />
+        );
+    }
+
+    WithCurrentUserPersonalDetails.displayName = `WithCurrentUserPersonalDetails(${getComponentDisplayName(WrappedComponent)})`;
+
+    const withCurrentUserPersonalDetails = React.forwardRef(WithCurrentUserPersonalDetails);
+
+    return withOnyx<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, OnyxProps>({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+    })(withCurrentUserPersonalDetails);
+}
+
+export {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps};

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<TProps>(component: ComponentType<TProps>): string {
     return component.displayName ?? component.name ?? 'Component';
 }