list refactoring

Expensify · Feb 5, 2024 · 933f5c8 · 933f5c8
1 parent a1b33ef
commit 933f5c8
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 141 deletions.
diff --git a/src/components/OnyxProvider.tsx b/src/components/OnyxProvider.tsx
@@ -10,11 +10,12 @@ const [withPersonalDetails, PersonalDetailsProvider, , usePersonalDetails] = cre
 const [withCurrentDate, CurrentDateProvider] = createOnyxContext(ONYXKEYS.CURRENT_DATE);
 const [withReportActionsDrafts, ReportActionsDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS);
 const [withBlockedFromConcierge, BlockedFromConciergeProvider] = createOnyxContext(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
-const [withBetas, BetasProvider, BetasContext] = createOnyxContext(ONYXKEYS.BETAS);
+const [withBetas, BetasProvider, BetasContext, useBetas] = createOnyxContext(ONYXKEYS.BETAS);
 const [withReportCommentDrafts, ReportCommentDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
 const [withPreferredTheme, PreferredThemeProvider, PreferredThemeContext] = createOnyxContext(ONYXKEYS.PREFERRED_THEME);
 const [withFrequentlyUsedEmojis, FrequentlyUsedEmojisProvider, , useFrequentlyUsedEmojis] = createOnyxContext(ONYXKEYS.FREQUENTLY_USED_EMOJIS);
 const [withPreferredEmojiSkinTone, PreferredEmojiSkinToneProvider, PreferredEmojiSkinToneContext] = createOnyxContext(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE);
+const [, SessionProvider, , useSession] = createOnyxContext(ONYXKEYS.SESSION);
 
 type OnyxProviderProps = {
     /** Rendered child component */
@@ -35,6 +36,7 @@ function OnyxProvider(props: OnyxProviderProps) {
                 PreferredThemeProvider,
                 FrequentlyUsedEmojisProvider,
                 PreferredEmojiSkinToneProvider,
+                SessionProvider,
             ]}
         >
             {props.children}
@@ -59,8 +61,10 @@ export {
     withReportCommentDrafts,
     withPreferredTheme,
     PreferredThemeContext,
+    useBetas,
     withFrequentlyUsedEmojis,
     useFrequentlyUsedEmojis,
     withPreferredEmojiSkinTone,
     PreferredEmojiSkinToneContext,
+    useSession,
 };
diff --git a/src/components/withCurrentUserPersonalDetails.tsx b/src/components/withCurrentUserPersonalDetails.tsx
@@ -1,26 +1,17 @@
 import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
-import React, {useMemo} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import React from 'react';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type {PersonalDetails, Session} from '@src/types/onyx';
-import {usePersonalDetails} from './OnyxProvider';
+import type {PersonalDetails} from '@src/types/onyx';
 
 type CurrentUserPersonalDetails = PersonalDetails | Record<string, never>;
 
-type OnyxProps = {
-    /** Session of the current user */
-    session: OnyxEntry<Session>;
-};
-
 type HOCProps = {
     currentUserPersonalDetails: CurrentUserPersonalDetails;
 };
 
-type WithCurrentUserPersonalDetailsProps = OnyxProps & HOCProps;
+type WithCurrentUserPersonalDetailsProps = HOCProps;
 
 // TODO: remove when all components that use it will be migrated to TS
 const withCurrentUserPersonalDetailsPropTypes = {
@@ -33,15 +24,9 @@ const withCurrentUserPersonalDetailsDefaultProps: HOCProps = {
 
 export default function <TProps extends WithCurrentUserPersonalDetailsProps, TRef>(
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
-): ComponentType<Omit<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, keyof OnyxProps>> {
+): ComponentType<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>> {
     function WithCurrentUserPersonalDetails(props: Omit<TProps, keyof HOCProps>, ref: ForwardedRef<TRef>) {
-        const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT;
-        const accountID = props.session?.accountID ?? 0;
-        const accountPersonalDetails = personalDetails?.[accountID];
-        const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo(
-            () => (accountPersonalDetails ? {...accountPersonalDetails, accountID} : {}) as CurrentUserPersonalDetails,
-            [accountPersonalDetails, accountID],
-        );
+        const currentUserPersonalDetails = useCurrentUserPersonalDetails();
         return (
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
@@ -54,13 +39,7 @@ export default function <TProps extends WithCurrentUserPersonalDetailsProps, TRe
 
     WithCurrentUserPersonalDetails.displayName = `WithCurrentUserPersonalDetails(${getComponentDisplayName(WrappedComponent)})`;
 
-    const withCurrentUserPersonalDetails = React.forwardRef(WithCurrentUserPersonalDetails);
-
-    return withOnyx<Omit<TProps, keyof HOCProps> & RefAttributes<TRef>, OnyxProps>({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    })(withCurrentUserPersonalDetails);
+    return React.forwardRef(WithCurrentUserPersonalDetails);
 }
 
 export {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps};

diff --git a/src/hooks/useCurrentUserPersonalDetails.ts b/src/hooks/useCurrentUserPersonalDetails.ts
@@ -0,0 +1,21 @@
+import {useMemo} from 'react';
+import {usePersonalDetails, useSession} from '@components/OnyxProvider';
+import CONST from '@src/CONST';
+import type {PersonalDetails} from '@src/types/onyx';
+
+type CurrentUserPersonalDetails = PersonalDetails | Record<string, never>;
+
+function useCurrentUserPersonalDetails() {
+    const session = useSession();
+    const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT;
+    const accountID = session?.accountID ?? 0;
+    const accountPersonalDetails = personalDetails?.[accountID];
+    const currentUserPersonalDetails: CurrentUserPersonalDetails = useMemo(
+        () => (accountPersonalDetails ? {...accountPersonalDetails, accountID} : {}) as CurrentUserPersonalDetails,
+        [accountPersonalDetails, accountID],
+    );
+
+    return currentUserPersonalDetails;
+}
+
+export default useCurrentUserPersonalDetails;
diff --git a/src/pages/home/sidebar/SignInOrAvatarWithOptionalStatus.js b/src/pages/home/sidebar/SignInOrAvatarWithOptionalStatus.js
@@ -2,29 +2,23 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
-import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import * as Session from '@userActions/Session';
 import AvatarWithOptionalStatus from './AvatarWithOptionalStatus';
 import PressableAvatarWithIndicator from './PressableAvatarWithIndicator';
 import SignInButton from './SignInButton';
 
 const propTypes = {
-    /** The personal details of the person who is logged in */
-    currentUserPersonalDetails: personalDetailsPropType,
-
     /** Whether the create menu is open or not */
     isCreateMenuOpen: PropTypes.bool,
 };
 
 const defaultProps = {
     isCreateMenuOpen: false,
-    currentUserPersonalDetails: {
-        status: {emojiCode: ''},
-    },
 };
 
-function SignInOrAvatarWithOptionalStatus({currentUserPersonalDetails, isCreateMenuOpen}) {
+function SignInOrAvatarWithOptionalStatus({isCreateMenuOpen}) {
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const emojiStatus = lodashGet(currentUserPersonalDetails, 'status.emojiCode', '');
 
     if (Session.isAnonymousUser()) {
@@ -44,4 +38,4 @@ function SignInOrAvatarWithOptionalStatus({currentUserPersonalDetails, isCreateM
 SignInOrAvatarWithOptionalStatus.propTypes = propTypes;
 SignInOrAvatarWithOptionalStatus.defaultProps = defaultProps;
 SignInOrAvatarWithOptionalStatus.displayName = 'SignInOrAvatarWithOptionalStatus';
-export default withCurrentUserPersonalDetails(SignInOrAvatarWithOptionalStatus);
+export default SignInOrAvatarWithOptionalStatus;