diff --git a/src/components/CardPreview.tsx b/src/components/CardPreview.tsx index 3ac56d6b26a8..acdf8a92fb5e 100644 --- a/src/components/CardPreview.tsx +++ b/src/components/CardPreview.tsx @@ -3,7 +3,6 @@ import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import ExpensifyCardImage from '@assets/images/expensify-card.svg'; -import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -22,7 +21,6 @@ type CardPreviewProps = CardPreviewOnyxProps; function CardPreview({privatePersonalDetails, session}: CardPreviewProps) { const styles = useThemeStyles(); - usePrivatePersonalDetails(); const {legalFirstName, legalLastName} = privatePersonalDetails ?? {}; const cardHolder = legalFirstName && legalLastName ? `${legalFirstName} ${legalLastName}` : session?.email ?? ''; diff --git a/src/hooks/usePrivatePersonalDetails.ts b/src/hooks/usePrivatePersonalDetails.ts deleted file mode 100644 index f17600e9878f..000000000000 --- a/src/hooks/usePrivatePersonalDetails.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {useContext, useEffect} from 'react'; -import {NetworkContext} from '@components/OnyxProvider'; -import * as PersonalDetails from '@userActions/PersonalDetails'; - -/** - * Hook for fetching private personal details - */ -export default function usePrivatePersonalDetails() { - const network = useContext(NetworkContext); - - useEffect(() => { - const personalDetails = PersonalDetails.getPrivatePersonalDetails(); - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - if (network?.isOffline || (Boolean(personalDetails) && personalDetails?.isLoading !== undefined)) { - return; - } - - PersonalDetails.openPersonalDetails(); - }, [network?.isOffline]); -} diff --git a/src/libs/actions/PersonalDetails.ts b/src/libs/actions/PersonalDetails.ts index 085d8b78e418..60aff19223bc 100644 --- a/src/libs/actions/PersonalDetails.ts +++ b/src/libs/actions/PersonalDetails.ts @@ -23,7 +23,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {DateOfBirthForm} from '@src/types/form'; -import type {PersonalDetails, PersonalDetailsList, PrivatePersonalDetails} from '@src/types/onyx'; +import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx'; import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails'; import * as Session from './Session'; @@ -43,12 +43,6 @@ Onyx.connect({ callback: (val) => (allPersonalDetails = val), }); -let privatePersonalDetails: OnyxEntry = null; -Onyx.connect({ - key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, - callback: (val) => (privatePersonalDetails = val), -}); - function updatePronouns(pronouns: string) { if (currentUserAccountID) { const parameters: UpdatePronounsParams = {pronouns}; @@ -240,43 +234,6 @@ function updateSelectedTimezone(selectedTimezone: SelectedTimezone) { Navigation.goBack(ROUTES.SETTINGS_TIMEZONE); } -/** - * Fetches additional personal data like legal name, date of birth, address - */ -function openPersonalDetails() { - const optimisticData: OnyxUpdate[] = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, - value: { - isLoading: true, - }, - }, - ]; - - const successData: OnyxUpdate[] = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, - value: { - isLoading: false, - }, - }, - ]; - - const failureData: OnyxUpdate[] = [ - { - onyxMethod: Onyx.METHOD.MERGE, - key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, - value: { - isLoading: false, - }, - }, - ]; - - API.read(READ_COMMANDS.OPEN_PERSONAL_DETAILS, {}, {optimisticData, successData, failureData}); -} - /** * Fetches public profile info about a given user. * The API will only return the accountID, displayName, and avatar for the user @@ -446,18 +403,9 @@ function clearAvatarErrors() { }); } -/** - * Get private personal details value - */ -function getPrivatePersonalDetails(): OnyxEntry { - return privatePersonalDetails; -} - export { clearAvatarErrors, deleteAvatar, - getPrivatePersonalDetails, - openPersonalDetails, openPublicProfilePage, updateAddress, updateAutomaticTimezone, diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.tsx b/src/pages/settings/Profile/PersonalDetails/AddressPage.tsx index ae724ce218ad..fcb018348b72 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.tsx @@ -8,7 +8,6 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useGeographicalStateFromRoute from '@hooks/useGeographicalStateFromRoute'; import useLocalize from '@hooks/useLocalize'; -import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; @@ -24,6 +23,8 @@ import type {Address} from '@src/types/onyx/PrivatePersonalDetails'; type AddressPageOnyxProps = { /** User's private personal details */ privatePersonalDetails: OnyxEntry; + /** Whether app is loading */ + isLoadingApp: OnyxEntry; }; type AddressPageProps = StackScreenProps & AddressPageOnyxProps; @@ -43,9 +44,8 @@ function updateAddress(values: FormOnyxValues privatePersonalDetails?.address, [privatePersonalDetails]); const countryFromUrlTemp = route?.params?.country; @@ -54,7 +54,6 @@ function AddressPage({privatePersonalDetails, route}: AddressPageProps) { const countryFromUrl = CONST.ALL_COUNTRIES[countryFromUrlTemp as keyof typeof CONST.ALL_COUNTRIES] ? countryFromUrlTemp : ''; const stateFromUrl = useGeographicalStateFromRoute(); const [currentCountry, setCurrentCountry] = useState(address?.country); - const isLoadingPersonalDetails = privatePersonalDetails?.isLoading ?? true; const [street1, street2] = (address?.street ?? '').split('\n'); const [state, setState] = useState(address?.state); const [city, setCity] = useState(address?.city); @@ -122,7 +121,7 @@ function AddressPage({privatePersonalDetails, route}: AddressPageProps) { shouldShowBackButton onBackButtonPress={() => Navigation.goBack()} /> - {isLoadingPersonalDetails ? ( + {isLoadingApp ? ( ) : ( ({ privatePersonalDetails: { key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, }, + isLoadingApp: { + key: ONYXKEYS.IS_LOADING_APP, + }, })(AddressPage); diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.tsx b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.tsx index fed313b69c7e..e91093731c03 100644 --- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.tsx @@ -10,7 +10,6 @@ import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; -import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; @@ -23,14 +22,14 @@ import type {PrivatePersonalDetails} from '@src/types/onyx'; type DateOfBirthPageOnyxProps = { /** User's private personal details */ privatePersonalDetails: OnyxEntry; + /** Whether app is loading */ + isLoadingApp: OnyxEntry; }; type DateOfBirthPageProps = DateOfBirthPageOnyxProps; -function DateOfBirthPage({privatePersonalDetails}: DateOfBirthPageProps) { +function DateOfBirthPage({privatePersonalDetails, isLoadingApp = true}: DateOfBirthPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - usePrivatePersonalDetails(); - const isLoadingPersonalDetails = privatePersonalDetails?.isLoading ?? true; /** * @returns An object containing the errors for each inputID @@ -59,7 +58,7 @@ function DateOfBirthPage({privatePersonalDetails}: DateOfBirthPageProps) { title={translate('common.dob')} onBackButtonPress={() => Navigation.goBack()} /> - {isLoadingPersonalDetails ? ( + {isLoadingApp ? ( ) : ( ({ privatePersonalDetails: { key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, }, + isLoadingApp: { + key: ONYXKEYS.IS_LOADING_APP, + }, })(DateOfBirthPage); diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx index 5e8e4ea493a0..a957740e81d0 100644 --- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.tsx @@ -10,7 +10,6 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import TextInput from '@components/TextInput'; import useLocalize from '@hooks/useLocalize'; -import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; import useThemeStyles from '@hooks/useThemeStyles'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -25,6 +24,8 @@ import type {Errors} from '@src/types/onyx/OnyxCommon'; type LegalNamePageOnyxProps = { /** User's private personal details */ privatePersonalDetails: OnyxEntry; + /** Whether app is loading */ + isLoadingApp: OnyxEntry; }; type LegalNamePageProps = LegalNamePageOnyxProps; @@ -33,13 +34,11 @@ const updateLegalName = (values: PrivatePersonalDetails) => { PersonalDetails.updateLegalName(values.legalFirstName?.trim() ?? '', values.legalLastName?.trim() ?? ''); }; -function LegalNamePage({privatePersonalDetails}: LegalNamePageProps) { +function LegalNamePage({privatePersonalDetails, isLoadingApp = true}: LegalNamePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - usePrivatePersonalDetails(); const legalFirstName = privatePersonalDetails?.legalFirstName ?? ''; const legalLastName = privatePersonalDetails?.legalLastName ?? ''; - const isLoadingPersonalDetails = privatePersonalDetails?.isLoading ?? true; const validate = useCallback((values: FormOnyxValues) => { const errors: Errors = {}; @@ -86,7 +85,7 @@ function LegalNamePage({privatePersonalDetails}: LegalNamePageProps) { title={translate('privatePersonalDetails.legalName')} onBackButtonPress={() => Navigation.goBack()} /> - {isLoadingPersonalDetails ? ( + {isLoadingApp ? ( ) : ( ({ privatePersonalDetails: { key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, }, + isLoadingApp: { + key: ONYXKEYS.IS_LOADING_APP, + }, })(LegalNamePage); diff --git a/src/pages/settings/Profile/ProfilePage.tsx b/src/pages/settings/Profile/ProfilePage.tsx index 58a323bf0a10..4c5ed88e6898 100755 --- a/src/pages/settings/Profile/ProfilePage.tsx +++ b/src/pages/settings/Profile/ProfilePage.tsx @@ -13,7 +13,6 @@ import Section from '@components/Section'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; -import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -33,6 +32,8 @@ type ProfilePageOnyxProps = { loginList: OnyxEntry; /** User's private personal details */ privatePersonalDetails: OnyxEntry; + /** Whether app is loading */ + isLoadingApp: OnyxEntry; }; type ProfilePageProps = ProfilePageOnyxProps & WithCurrentUserPersonalDetailsProps; @@ -53,6 +54,7 @@ function ProfilePage({ }, }, currentUserPersonalDetails, + isLoadingApp, }: ProfilePageProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -67,10 +69,8 @@ function ProfilePage({ const contactMethodBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(loginList); const emojiCode = currentUserPersonalDetails?.status?.emojiCode ?? ''; - usePrivatePersonalDetails(); const privateDetails = privatePersonalDetails ?? {}; const legalName = `${privateDetails.legalFirstName ?? ''} ${privateDetails.legalLastName ?? ''}`.trim(); - const isLoadingPersonalDetails = privatePersonalDetails?.isLoading ?? true; const publicOptions = [ { @@ -167,7 +167,7 @@ function ProfilePage({ childrenStyles={styles.pt3} titleStyles={styles.accountSettingsSectionTitle} > - {isLoadingPersonalDetails ? ( + {isLoadingApp ? ( ) : ( <> @@ -202,5 +202,8 @@ export default withCurrentUserPersonalDetails( privatePersonalDetails: { key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, }, + isLoadingApp: { + key: ONYXKEYS.IS_LOADING_APP, + }, })(ProfilePage), ); diff --git a/src/pages/settings/Wallet/ReportCardLostPage.tsx b/src/pages/settings/Wallet/ReportCardLostPage.tsx index f53ebfb65e3f..0c5c0a5c9ff2 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.tsx +++ b/src/pages/settings/Wallet/ReportCardLostPage.tsx @@ -11,7 +11,6 @@ import SingleOptionSelector from '@components/SingleOptionSelector'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; -import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -82,7 +81,6 @@ function ReportCardLostPage({ formData, }: ReportCardLostPageProps) { const styles = useThemeStyles(); - usePrivatePersonalDetails(); const domainCards = CardUtils.getDomainCards(cardList ?? {})[domain]; const physicalCard = CardUtils.findPhysicalCard(domainCards); diff --git a/src/pages/settings/Wallet/WalletPage/CardDetails.tsx b/src/pages/settings/Wallet/WalletPage/CardDetails.tsx index 77458384c214..4cce60cfa5c0 100644 --- a/src/pages/settings/Wallet/WalletPage/CardDetails.tsx +++ b/src/pages/settings/Wallet/WalletPage/CardDetails.tsx @@ -7,7 +7,6 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayToggle'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; -import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; import useThemeStyles from '@hooks/useThemeStyles'; import Clipboard from '@libs/Clipboard'; import Navigation from '@libs/Navigation/Navigation'; @@ -47,7 +46,6 @@ type CardDetailsProps = CardDetailsOnyxProps & { function CardDetails({pan = '', expiration = '', cvv = '', privatePersonalDetails, domain}: CardDetailsProps) { const styles = useThemeStyles(); - usePrivatePersonalDetails(); const {translate} = useLocalize(); const handleCopyToClipboard = () => { diff --git a/src/types/onyx/PrivatePersonalDetails.ts b/src/types/onyx/PrivatePersonalDetails.ts index 68199cf16e6e..3f0014bc96ff 100644 --- a/src/types/onyx/PrivatePersonalDetails.ts +++ b/src/types/onyx/PrivatePersonalDetails.ts @@ -20,9 +20,6 @@ type PrivatePersonalDetails = { /** User's home address */ address?: Address; - - /** Whether we are loading the data via the API */ - isLoading?: boolean; }; export default PrivatePersonalDetails; diff --git a/tests/unit/NetworkTest.ts b/tests/unit/NetworkTest.ts index 63b275a1a6b6..01689de89037 100644 --- a/tests/unit/NetworkTest.ts +++ b/tests/unit/NetworkTest.ts @@ -108,7 +108,7 @@ describe('NetworkTests', () => { HttpUtils.xhr = mockedXhr; // This should first trigger re-authentication and then a Failed to fetch - PersonalDetails.openPersonalDetails(); + PersonalDetails.openPublicProfilePage(TEST_USER_ACCOUNT_ID); return waitForBatchedUpdates() .then(() => Onyx.set(ONYXKEYS.NETWORK, {isOffline: false})) .then(() => { @@ -119,11 +119,11 @@ describe('NetworkTests', () => { return waitForBatchedUpdates(); }) .then(() => { - // Then we will eventually have 1 call to OpenPersonalDetailsPage and 1 calls to Authenticate - const callsToOpenPersonalDetails = (HttpUtils.xhr as Mock).mock.calls.filter(([command]) => command === 'OpenPersonalDetailsPage'); + // Then we will eventually have 1 call to OpenPublicProfilePage and 1 calls to Authenticate + const callsToOpenPublicProfilePage = (HttpUtils.xhr as Mock).mock.calls.filter(([command]) => command === 'OpenPublicProfilePage'); const callsToAuthenticate = (HttpUtils.xhr as Mock).mock.calls.filter(([command]) => command === 'Authenticate'); - expect(callsToOpenPersonalDetails.length).toBe(1); + expect(callsToOpenPublicProfilePage.length).toBe(1); expect(callsToAuthenticate.length).toBe(1); }); }); @@ -143,7 +143,7 @@ describe('NetworkTests', () => { const mockedXhr = jest.fn(); mockedXhr - // And mock the first call to openPersonalDetails return with an expired session code + // And mock the first call to openPublicProfilePage return with an expired session code .mockImplementationOnce(() => Promise.resolve({ jsonCode: CONST.JSON_CODE.NOT_AUTHENTICATED, @@ -176,17 +176,17 @@ describe('NetworkTests', () => { // And then make 3 API READ requests in quick succession with an expired authToken and handle the response // It doesn't matter which requests these are really as all the response is mocked we just want to see // that we get re-authenticated - PersonalDetails.openPersonalDetails(); - PersonalDetails.openPersonalDetails(); - PersonalDetails.openPersonalDetails(); + PersonalDetails.openPublicProfilePage(TEST_USER_ACCOUNT_ID); + PersonalDetails.openPublicProfilePage(TEST_USER_ACCOUNT_ID); + PersonalDetails.openPublicProfilePage(TEST_USER_ACCOUNT_ID); return waitForBatchedUpdates(); }) .then(() => { // We should expect to see the three calls to OpenApp, but only one call to Authenticate. // And we should also see the reconnection callbacks triggered. - const callsToOpenPersonalDetails = (HttpUtils.xhr as Mock).mock.calls.filter(([command]) => command === 'OpenPersonalDetailsPage'); + const callsToopenPublicProfilePage = (HttpUtils.xhr as Mock).mock.calls.filter(([command]) => command === 'OpenPublicProfilePage'); const callsToAuthenticate = (HttpUtils.xhr as Mock).mock.calls.filter(([command]) => command === 'Authenticate'); - expect(callsToOpenPersonalDetails.length).toBe(3); + expect(callsToopenPublicProfilePage.length).toBe(3); expect(callsToAuthenticate.length).toBe(1); expect(reconnectionCallbacksSpy.mock.calls.length).toBe(3); });