Merge pull request Expensify#20 from margelo/@chrispader/onyx-2-0-43-…

…null-undefined-changes

Onyx Bump 2.0.47: `null` -> `undefined` changes

package.json

@@ -154,7 +154,7 @@
     "react-native-linear-gradient": "^2.8.1",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "2.0.41",
+    "react-native-onyx": "2.0.47",
     "react-native-pager-view": "6.2.3",
     "react-native-pdf": "6.7.3",
     "react-native-performance": "^5.1.0",

src/components/AvatarWithDisplayName.tsx

@@ -34,7 +34,7 @@ type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
     report: OnyxEntry<Report>;
 
     /** The policy which the user has access to and which the report is tied to */
-    policy?: OnyxEntry<Policy>;
+    policy?: OnyxEntry<Policy> | null;
 
     /** The size of the avatar */
     size?: ValueOf<typeof CONST.AVATAR_SIZE>;

src/components/HeaderWithBackButton/index.tsx

@@ -30,7 +30,7 @@ function HeaderWithBackButton({
     onCloseButtonPress = () => Navigation.dismissModal(),
     onDownloadButtonPress = () => {},
     onThreeDotsButtonPress = () => {},
-    report = null,
+    report,
     policy,
     policyAvatar,
     shouldShowReportAvatarWithDisplay = false,

src/components/HeaderWithBackButton/types.ts

@@ -102,7 +102,7 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     report?: OnyxEntry<Report>;
 
     /** The report's policy, if we're showing the details for a report and need info about it for AvatarWithDisplay */
-    policy?: OnyxEntry<Policy>;
+    policy?: OnyxEntry<Policy> | null;
 
     /** Single execution function to prevent concurrent navigation actions */
     singleExecution?: <T extends unknown[]>(action: Action<T>) => Action<T>;

src/components/KYCWall/BaseKYCWall.tsx

@@ -166,7 +166,7 @@ function KYCWall({
 
             transferBalanceButtonRef.current = targetElement;
 
-            const isExpenseReport = ReportUtils.isExpenseReport(iouReport ?? null);
+            const isExpenseReport = ReportUtils.isExpenseReport(iouReport);
             const paymentCardList = fundList ?? {};
 
             // Check to see if user has a valid payment method on file and display the add payment popover if they don't

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -106,13 +106,13 @@ function LHNOptionsList({
      */
     const renderItem = useCallback(
         ({item: reportID}: RenderItemProps): ReactElement => {
-            const itemFullReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] ?? null;
-            const itemReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`] ?? null;
-            const itemParentReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${itemFullReport?.parentReportID}`] ?? null;
-            const itemParentReportAction = itemParentReportActions?.[itemFullReport?.parentReportActionID ?? ''] ?? null;
-            const itemPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${itemFullReport?.policyID}`] ?? null;
+            const itemFullReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
+            const itemReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`];
+            const itemParentReportActions = reportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${itemFullReport?.parentReportID}`];
+            const itemParentReportAction = itemParentReportActions?.[itemFullReport?.parentReportActionID ?? ''];
+            const itemPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${itemFullReport?.policyID}`];
             const transactionID = itemParentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? itemParentReportAction.originalMessage.IOUTransactionID ?? '' : '';
-            const itemTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] ?? null;
+            const itemTransaction = transactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`];
             const hasDraftComment = DraftCommentUtils.isValidDraftComment(draftComments?.[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`]);
             const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(itemReportActions);
             const lastReportAction = sortedReportActions[0];

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -123,7 +123,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const formattedDate = DateUtils.getStatusUntilDate(statusClearAfterDate);
     const statusContent = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText;
     const report = ReportUtils.getReport(optionItem.reportID ?? '');
-    const isStatusVisible = !!emojiCode && ReportUtils.isOneOnOneChat(!isEmptyObject(report) ? report : null);
+    const isStatusVisible = !!emojiCode && ReportUtils.isOneOnOneChat(!isEmptyObject(report) ? report : undefined);
 
     const isGroupChat = ReportUtils.isGroupChat(optionItem) || ReportUtils.isDeprecatedGroupDM(optionItem);
 

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -35,7 +35,7 @@ function OptionRowLHNData({
 
     const optionItemRef = useRef<OptionData>();
 
-    const shouldDisplayViolations = canUseViolations && ReportUtils.shouldDisplayTransactionThreadViolations(fullReport, transactionViolations, parentReportAction ?? null);
+    const shouldDisplayViolations = canUseViolations && ReportUtils.shouldDisplayTransactionThreadViolations(fullReport, transactionViolations, parentReportAction);
 
     const optionItem = useMemo(() => {
         // Note: ideally we'd have this as a dependent selector in onyx!

src/components/MoneyReportHeader.tsx

@@ -35,7 +35,7 @@ type MoneyReportHeaderProps = {
     report: OnyxTypes.Report;
 
     /** The policy tied to the expense report */
-    policy: OnyxEntry<OnyxTypes.Policy>;
+    policy: OnyxEntry<OnyxTypes.Policy> | null;
 
     /** Array of report actions for the report */
     reportActions: OnyxTypes.ReportAction[];

src/components/MoneyRequestConfirmationList.tsx

@@ -133,7 +133,7 @@ type MoneyRequestConfirmationListProps = MoneyRequestConfirmationListOnyxProps &
     selectedParticipants: Participant[];
 
     /** Payee of the expense with login */
-    payeePersonalDetails?: OnyxEntry<OnyxTypes.PersonalDetails>;
+    payeePersonalDetails?: OnyxEntry<OnyxTypes.PersonalDetails> | null;
 
     /** Should the list be read only, and not editable? */
     isReadOnly?: boolean;
@@ -184,7 +184,7 @@ type MoneyRequestConfirmationListProps = MoneyRequestConfirmationListOnyxProps &
 type MoneyRequestConfirmationListItem = Participant | ReportUtils.OptionData;
 
 function MoneyRequestConfirmationList({
-    transaction = null,
+    transaction,
     onSendMoney,
     onConfirm,
     iouType = CONST.IOU.TYPE.SUBMIT,
@@ -709,7 +709,7 @@ function MoneyRequestConfirmationList({
             if (selectedParticipants.length === 0) {
                 return;
             }
-            if (!isEditingSplitBill && isMerchantRequired && (isMerchantEmpty || (shouldDisplayFieldError && TransactionUtils.isMerchantMissing(transaction ?? null)))) {
+            if (!isEditingSplitBill && isMerchantRequired && (isMerchantEmpty || (shouldDisplayFieldError && TransactionUtils.isMerchantMissing(transaction)))) {
                 setFormError('iou.error.invalidMerchant');
                 return;
             }
@@ -739,7 +739,7 @@ function MoneyRequestConfirmationList({
                     return;
                 }
 
-                if (isEditingSplitBill && TransactionUtils.areRequiredFieldsEmpty(transaction ?? null)) {
+                if (isEditingSplitBill && TransactionUtils.areRequiredFieldsEmpty(transaction)) {
                     setDidConfirmSplit(true);
                     setFormError('iou.error.genericSmartscanFailureMessage');
                     return;
@@ -861,8 +861,8 @@ function MoneyRequestConfirmationList({
                     style={[styles.moneyRequestMenuItem, styles.mt2]}
                     titleStyle={styles.moneyRequestConfirmationAmount}
                     disabled={didConfirm}
-                    brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction ?? null) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
-                    errorText={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction ?? null) ? translate('common.error.enterAmount') : ''}
+                    brickRoadIndicator={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                    errorText={shouldDisplayFieldError && TransactionUtils.isAmountMissing(transaction) ? translate('common.error.enterAmount') : ''}
                 />
             ),
             shouldShow: shouldShowSmartScanFields,
@@ -1096,7 +1096,7 @@ function MoneyRequestConfirmationList({
         isThumbnail,
         fileExtension,
         isLocalFile,
-    } = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction ?? null, receiptPath, receiptFilename) : ({} as ReceiptUtils.ThumbnailAndImageURI);
+    } = receiptPath && receiptFilename ? ReceiptUtils.getThumbnailAndImageURIs(transaction, receiptPath, receiptFilename) : ({} as ReceiptUtils.ThumbnailAndImageURI);
 
     const resolvedThumbnail = isLocalFile ? receiptThumbnail : tryResolveUrlFromApiRoot(receiptThumbnail ?? '');
     const resolvedReceiptImage = isLocalFile ? receiptImage : tryResolveUrlFromApiRoot(receiptImage ?? '');

src/components/MoneyRequestHeader.tsx

@@ -35,10 +35,10 @@ type MoneyRequestHeaderProps = {
     report: Report;
 
     /** The policy which the report is tied to */
-    policy: OnyxEntry<Policy>;
+    policy: OnyxEntry<Policy> | null;
 
     /** The report action the transaction is tied to from the parent report */
-    parentReportAction: OnyxEntry<ReportAction>;
+    parentReportAction: OnyxEntry<ReportAction> | null;
 
     /** Whether we should display the header as in narrow layout */
     shouldUseNarrowLayout?: boolean;

src/components/ShowContextMenuContext.ts

@@ -19,9 +19,9 @@ type ShowContextMenuContextProps = {
 
 const ShowContextMenuContext = createContext<ShowContextMenuContextProps>({
     anchor: null,
-    report: null,
-    action: null,
-    transactionThreadReport: null,
+    report: undefined,
+    action: undefined,
+    transactionThreadReport: undefined,
     checkIfContextMenuActive: () => {},
 });
 

src/languages/types.ts

@@ -1,5 +1,5 @@
 import type {OnyxEntry} from 'react-native-onyx';
-import type {ReportAction} from '@src/types/onyx';
+import type {OnyxInputOrEntry, ReportAction} from '@src/types/onyx';
 import type {Unit} from '@src/types/onyx/Policy';
 import type en from './en';
 
@@ -41,15 +41,15 @@ type LocalTimeParams = {
 };
 
 type EditActionParams = {
-    action: OnyxEntry<ReportAction>;
+    action: OnyxInputOrEntry<ReportAction>;
 };
 
 type DeleteActionParams = {
-    action: OnyxEntry<ReportAction>;
+    action: OnyxInputOrEntry<ReportAction>;
 };
 
 type DeleteConfirmationParams = {
-    action: OnyxEntry<ReportAction>;
+    action: OnyxInputOrEntry<ReportAction>;
 };
 
 type BeginningOfChatHistoryDomainRoomPartOneParams = {

src/libs/DistanceRequestUtils.ts

@@ -4,7 +4,7 @@ import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import type {RateAndUnit} from '@src/CONST';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {LastSelectedDistanceRates, Report} from '@src/types/onyx';
+import type {LastSelectedDistanceRates, OnyxInputOrEntry, Report} from '@src/types/onyx';
 import type {Unit} from '@src/types/onyx/Policy';
 import type Policy from '@src/types/onyx/Policy';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
@@ -39,7 +39,7 @@ Onyx.connect({
 const METERS_TO_KM = 0.001; // 1 kilometer is 1000 meters
 const METERS_TO_MILES = 0.000621371; // There are approximately 0.000621371 miles in a meter
 
-function getMileageRates(policy: OnyxEntry<Policy>, includeDisabledRates = false): Record<string, MileageRate> {
+function getMileageRates(policy: OnyxInputOrEntry<Policy>, includeDisabledRates = false): Record<string, MileageRate> {
     const mileageRates: Record<string, MileageRate> = {};
 
     if (!policy || !policy?.customUnits) {
@@ -78,14 +78,14 @@ function getMileageRates(policy: OnyxEntry<Policy>, includeDisabledRates = false
  * @returns [currency] - The currency associated with the rate.
  * @returns [unit] - The unit of measurement for the distance.
  */
-function getDefaultMileageRate(policy: OnyxEntry<Policy> | EmptyObject): MileageRate | null {
+function getDefaultMileageRate(policy: OnyxInputOrEntry<Policy> | EmptyObject): MileageRate | undefined {
     if (isEmptyObject(policy) || !policy?.customUnits) {
-        return null;
+        return undefined;
     }
 
     const distanceUnit = PolicyUtils.getCustomUnit(policy);
     if (!distanceUnit?.rates) {
-        return null;
+        return;
     }
     const mileageRates = getMileageRates(policy);
 
@@ -252,8 +252,8 @@ function convertToDistanceInMeters(distance: number, unit: Unit): number {
  * Returns custom unit rate ID for the distance transaction
  */
 function getCustomUnitRateID(reportID: string) {
-    const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] ?? null;
-    const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
+    const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
+    const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`];
     const policy = PolicyUtils.getPolicy(report?.policyID ?? parentReport?.policyID ?? '');
     let customUnitRateID: string = CONST.CUSTOM_UNITS.FAKE_P2P_ID;
 

src/libs/IOUUtils.ts

@@ -1,8 +1,7 @@
-import type {OnyxEntry} from 'react-native-onyx';
 import type {IOUAction, IOUType} from '@src/CONST';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
-import type {Report, Transaction} from '@src/types/onyx';
+import type {OnyxInputOrEntry, Report, Transaction} from '@src/types/onyx';
 import type {IOURequestType} from './actions/IOU';
 import * as CurrencyUtils from './CurrencyUtils';
 import Navigation from './Navigation/Navigation';
@@ -60,7 +59,7 @@ function calculateAmount(numberOfParticipants: number, total: number, currency:
  * @param isDeleting - whether the user is deleting the expense
  * @param isUpdating - whether the user is updating the expense
  */
-function updateIOUOwnerAndTotal<TReport extends OnyxEntry<Report>>(
+function updateIOUOwnerAndTotal<TReport extends OnyxInputOrEntry<Report>>(
     iouReport: TReport,
     actorAccountID: number,
     amount: number,

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -127,7 +127,7 @@ Onyx.connect({
 
 Onyx.connect({
     key: ONYXKEYS.ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT,
-    callback: (value: OnyxEntry<number>) => {
+    callback: (value) => {
         lastUpdateIDAppliedToClient = value;
     },
 });

src/libs/Network/NetworkStore.ts

@@ -5,8 +5,8 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type Credentials from '@src/types/onyx/Credentials';
 
-let credentials: Credentials | null = null;
-let authToken: string | null = null;
+let credentials: Credentials | null | undefined;
+let authToken: string | null | undefined;
 let authTokenType: ValueOf<typeof CONST.AUTH_TOKEN_TYPES> | null;
 let currentUserEmail: string | null = null;
 let offline = false;
@@ -62,7 +62,7 @@ Onyx.connect({
 Onyx.connect({
     key: ONYXKEYS.CREDENTIALS,
     callback: (val) => {
-        credentials = val;
+        credentials = val ?? null;
         checkRequiredData();
     },
 });
@@ -86,15 +86,15 @@ Onyx.connect({
 });
 
 function getCredentials(): Credentials | null {
-    return credentials;
+    return credentials ?? null;
 }
 
 function isOffline(): boolean {
     return offline;
 }
 
 function getAuthToken(): string | null {
-    return authToken;
+    return authToken ?? null;
 }
 
 function isSupportRequest(command: string): boolean {