Remove remaining withOnyx HOCs from the project | Batch 3.

src/components/AddPlaidBankAccount.tsx

@@ -1,9 +1,9 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {handlePlaidError, openPlaidBankAccountSelector, openPlaidBankLogin, setPlaidEvent} from '@libs/actions/BankAccounts';
@@ -22,15 +22,7 @@ import PlaidLink from './PlaidLink';
 import RadioButtons from './RadioButtons';
 import Text from './Text';
 
-type AddPlaidBankAccountOnyxProps = {
-    /** If the user has been throttled from Plaid */
-    isPlaidDisabled: OnyxEntry<boolean>;
-
-    /** Plaid SDK token to use to initialize the widget */
-    plaidLinkToken: OnyxEntry<string>;
-};
-
-type AddPlaidBankAccountProps = AddPlaidBankAccountOnyxProps & {
+type AddPlaidBankAccountProps = {
     /** Contains plaid data */
     plaidData: OnyxEntry<PlaidData>;
 
@@ -71,15 +63,13 @@ type AddPlaidBankAccountProps = AddPlaidBankAccountOnyxProps & {
 function AddPlaidBankAccount({
     plaidData,
     selectedPlaidAccountID = '',
-    plaidLinkToken,
     onExitPlaid = () => {},
     onSelect = () => {},
     text = '',
     receivedRedirectURI,
     plaidLinkOAuthToken = '',
     bankAccountID = 0,
     allowDebit = false,
-    isPlaidDisabled,
     errorText = '',
     onInputChange = () => {},
     isDisplayedInWalletFlow = false,
@@ -88,12 +78,13 @@ function AddPlaidBankAccount({
     const styles = useThemeStyles();
     const plaidBankAccounts = plaidData?.bankAccounts ?? [];
     const defaultSelectedPlaidAccount = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID);
-    const defaultSelectedPlaidAccountID = defaultSelectedPlaidAccount?.plaidAccountID ?? '-1';
+    const defaultSelectedPlaidAccountID = defaultSelectedPlaidAccount?.plaidAccountID;
     const defaultSelectedPlaidAccountMask = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID)?.mask ?? '';
     const subscribedKeyboardShortcuts = useRef<Array<() => void>>([]);
     const previousNetworkState = useRef<boolean | undefined>(undefined);
     const [selectedPlaidAccountMask, setSelectedPlaidAccountMask] = useState(defaultSelectedPlaidAccountMask);
-
+    const [plaidLinkToken] = useOnyx(ONYXKEYS.PLAID_LINK_TOKEN, {canBeMissing: true, initWithStoredValues: false});
+    const [isPlaidDisabled] = useOnyx(ONYXKEYS.IS_PLAID_DISABLED, {canBeMissing: true});
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
@@ -287,12 +278,4 @@ function AddPlaidBankAccount({
 
 AddPlaidBankAccount.displayName = 'AddPlaidBankAccount';
 
-export default withOnyx<AddPlaidBankAccountProps, AddPlaidBankAccountOnyxProps>({
-    plaidLinkToken: {
-        key: ONYXKEYS.PLAID_LINK_TOKEN,
-        initWithStoredValues: false,
-    },
-    isPlaidDisabled: {
-        key: ONYXKEYS.IS_PLAID_DISABLED,
-    },
-})(AddPlaidBankAccount);
+export default AddPlaidBankAccount;

src/pages/TeachersUnite/ImTeacherPage.tsx

@@ -1,27 +1,15 @@
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import * as LoginUtils from '@libs/LoginUtils';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type {Session} from '@src/types/onyx';
+import {useSession} from '@components/OnyxProvider';
+import {isEmailPublicDomain} from '@libs/LoginUtils';
 import ImTeacherUpdateEmailPage from './ImTeacherUpdateEmailPage';
 import IntroSchoolPrincipalPage from './IntroSchoolPrincipalPage';
 
-type ImTeacherPageOnyxProps = {
-    session: OnyxEntry<Session>;
-};
-
-type ImTeacherPageProps = ImTeacherPageOnyxProps;
-
-function ImTeacherPage(props: ImTeacherPageProps) {
-    const isLoggedInEmailPublicDomain = LoginUtils.isEmailPublicDomain(props.session?.email ?? '');
+function ImTeacherPage() {
+    const session = useSession();
+    const isLoggedInEmailPublicDomain = isEmailPublicDomain(session?.email ?? '');
     return isLoggedInEmailPublicDomain ? <ImTeacherUpdateEmailPage /> : <IntroSchoolPrincipalPage />;
 }
 
 ImTeacherPage.displayName = 'ImTeacherPage';
 
-export default withOnyx<ImTeacherPageProps, ImTeacherPageOnyxProps>({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(ImTeacherPage);
+export default ImTeacherPage;

src/pages/settings/Profile/CustomStatus/SetTimePage.tsx

@@ -1,34 +1,27 @@
 import React from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TimePicker from '@components/TimePicker/TimePicker';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as User from '@libs/actions/User';
+import {updateDraftCustomStatus} from '@libs/actions/User';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
 
-type SetTimePageOnyxProps = {
-    customStatus: OnyxEntry<OnyxTypes.CustomStatusDraft>;
-};
-
-type SetTimePageProps = SetTimePageOnyxProps;
-
-function SetTimePage({customStatus}: SetTimePageProps) {
+function SetTimePage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [customStatus] = useOnyx(ONYXKEYS.CUSTOM_STATUS_DRAFT, {canBeMissing: true});
     const clearAfter = customStatus?.clearAfter ?? '';
 
     const onSubmit = (time: string) => {
         const timeToUse = DateUtils.combineDateAndTime(time, clearAfter);
 
-        User.updateDraftCustomStatus({clearAfter: timeToUse});
+        updateDraftCustomStatus({clearAfter: timeToUse});
         Navigation.goBack(ROUTES.SETTINGS_STATUS_CLEAR_AFTER);
     };
 
@@ -53,8 +46,4 @@ function SetTimePage({customStatus}: SetTimePageProps) {
 
 SetTimePage.displayName = 'SetTimePage';
 
-export default withOnyx<SetTimePageProps, SetTimePageOnyxProps>({
-    customStatus: {
-        key: ONYXKEYS.CUSTOM_STATUS_DRAFT,
-    },
-})(SetTimePage);
+export default SetTimePage;