Merge pull request #34801 from margelo/@chrispader/replay-effect-fix

Bump onyx to fix replay effect (after revert)

config/webpack/webpack.desktop.js

@@ -54,15 +54,6 @@ module.exports = (env) => {
                     loader: 'babel-loader',
                     exclude: /node_modules/,
                 },
-                {
-                    test: /react-native-onyx/,
-                    use: {
-                        loader: 'babel-loader',
-                        options: {
-                            presets: ['@babel/preset-react'],
-                        },
-                    },
-                },
             ],
         },
     };

jest/setup.js

@@ -19,7 +19,7 @@ jest.mock('@react-native-clipboard/clipboard', () => mockClipboard);
 // Mock react-native-onyx storage layer because the SQLite storage layer doesn't work in jest.
 // Mocking this file in __mocks__ does not work because jest doesn't support mocking files that are not directly used in the testing project,
 // and we only want to mock the storage layer, not the whole Onyx module.
-jest.mock('react-native-onyx/lib/storage', () => require('react-native-onyx/lib/storage/__mocks__'));
+jest.mock('react-native-onyx/dist/storage', () => require('react-native-onyx/dist/storage/__mocks__'));
 
 // Turn off the console logs for timing events. They are not relevant for unit tests and create a lot of noise
 jest.spyOn(console, 'debug').mockImplementation((...params) => {

package.json

@@ -88,7 +88,6 @@
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "^10.0.11",
     "@shopify/flash-list": "^1.6.3",
-    "@types/node": "^18.14.0",
     "@ua/react-native-airship": "^15.3.1",
     "@vue/preload-webpack-plugin": "^2.0.0",
     "awesome-phonenumber": "^5.4.0",
@@ -99,7 +98,7 @@
     "date-fns-tz": "^2.0.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#c6bb3cfa56d12af9fa02e2bfc729646f5b64ef44",
+    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#4a61536649cbfe49236a35bc7542b5dfd0767e4a",
     "expo": "^50.0.0-preview.7",
     "expo-image": "1.10.1",
     "fbjs": "^3.0.2",
@@ -143,7 +142,7 @@
     "react-native-linear-gradient": "^2.8.1",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "1.0.118-1",
+    "react-native-onyx": "2.0.1",
     "react-native-pager-view": "6.2.2",
     "react-native-pdf": "6.7.3",
     "react-native-performance": "^5.1.0",
@@ -218,6 +217,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.195",
     "@types/mapbox-gl": "^2.7.13",
+    "@types/node": "^20.11.5",
     "@types/pusher-js": "^5.1.0",
     "@types/react": "18.2.45",
     "@types/react-beautiful-dnd": "^13.1.4",

src/ONYXKEYS.ts

@@ -1,4 +1,4 @@
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type CONST from './CONST';
 import type * as OnyxTypes from './types/onyx';

src/components/AnonymousReportFooter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';

src/components/BigNumberPad.tsx

@@ -31,7 +31,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
     const {toLocaleDigit} = useLocalize();
 
     const styles = useThemeStyles();
-    const [timer, setTimer] = useState<NodeJS.Timer | null>(null);
+    const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
     const {isExtraSmallScreenHeight} = useWindowDimensions();
 
     /**

src/components/ConfirmedRoute.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect} from 'react';
 import type {ReactNode} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';

src/components/Indicator.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
-import type {OnyxCollection} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as PolicyUtils from '@libs/PolicyUtils';

src/components/WalletStatementModal/types.ts

@@ -1,4 +1,4 @@
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import type {Session} from '@src/types/onyx';
 
 type WalletStatementOnyxProps = {

src/libs/E2E/utils/NetworkInterceptor.ts

@@ -123,7 +123,6 @@ export default function installNetworkInterceptor(
         globalResolveIsNetworkInterceptorInstalled();
     }
 
-    // @ts-expect-error Fetch global types weirdly include URL
     global.fetch = async (...args: Parameters<typeof fetch>) => {
         const options = fetchArgsGetRequestInit(args);
         const headers = getFetchRequestHeadersAsObject(options);

src/libs/Navigation/OnyxTabNavigator.tsx

@@ -3,7 +3,7 @@ import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs
 import type {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import Tab from '@userActions/Tab';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';

src/libs/ReportActionsUtils.ts

@@ -1,8 +1,8 @@
+import fastMerge from 'expensify-common/lib/fastMerge';
 import _ from 'lodash';
 import lodashFindLast from 'lodash/findLast';
 import type {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import OnyxUtils from 'react-native-onyx/lib/utils';
 import type {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -439,7 +439,7 @@ function replaceBaseURL(reportAction: ReportAction): ReportAction {
 /**
  */
 function getLastVisibleAction(reportID: string, actionsToMerge: ReportActions = {}): OnyxEntry<ReportAction> {
-    const reportActions = Object.values(OnyxUtils.fastMerge(allReportActions?.[reportID] ?? {}, actionsToMerge));
+    const reportActions = Object.values(fastMerge(allReportActions?.[reportID] ?? {}, actionsToMerge, true));
     const visibleReportActions = Object.values(reportActions ?? {}).filter((action) => shouldReportActionBeVisibleAsLastAction(action));
     const sortedReportActions = getSortedReportActions(visibleReportActions, true);
     if (sortedReportActions.length === 0) {
@@ -654,7 +654,7 @@ function isTaskAction(reportAction: OnyxEntry<ReportAction>): boolean {
  * If there are no visible actions left (including system messages), we can hide the report from view entirely
  */
 function doesReportHaveVisibleActions(reportID: string, actionsToMerge: ReportActions = {}): boolean {
-    const reportActions = Object.values(OnyxUtils.fastMerge(allReportActions?.[reportID] ?? {}, actionsToMerge));
+    const reportActions = Object.values(fastMerge(allReportActions?.[reportID] ?? {}, actionsToMerge, true));
     const visibleReportActions = Object.values(reportActions ?? {}).filter((action) => shouldReportActionBeVisibleAsLastAction(action));
 
     // Exclude the task system message and the created message

src/libs/Timers.ts

@@ -1,9 +1,9 @@
-const timers: NodeJS.Timer[] = [];
+const timers: NodeJS.Timeout[] = [];
 
 /**
  * Register a timer so it can be cleaned up later.
  */
-function register(timerID: NodeJS.Timer): NodeJS.Timer {
+function register(timerID: NodeJS.Timeout): NodeJS.Timeout {
     timers.push(timerID);
     return timerID;
 }

src/libs/actions/FormActions.ts

@@ -1,5 +1,5 @@
 import Onyx from 'react-native-onyx';
-import type {KeyValueMapping, NullishDeep} from 'react-native-onyx/lib/types';
+import type {KeyValueMapping, NullishDeep} from 'react-native-onyx';
 import type {OnyxFormKeyWithoutDraft} from '@components/Form/types';
 import FormUtils from '@libs/FormUtils';
 import type {OnyxFormKey} from '@src/ONYXKEYS';

src/libs/actions/IOU.js

@@ -1,9 +1,9 @@
 import {format} from 'date-fns';
+import fastMerge from 'expensify-common/lib/fastMerge';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import lodashHas from 'lodash/has';
 import Onyx from 'react-native-onyx';
-import OnyxUtils from 'react-native-onyx/lib/utils';
 import _ from 'underscore';
 import ReceiptGeneric from '@assets/images/receipt-generic.png';
 import * as API from '@libs/API';
@@ -779,7 +779,7 @@ function getMoneyRequestInformation(
     // to remind me to do this.
     const existingTransaction = allTransactionDrafts[`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${CONST.IOU.OPTIMISTIC_TRANSACTION_ID}`];
     if (existingTransaction && existingTransaction.iouRequestType === CONST.IOU.REQUEST_TYPE.DISTANCE) {
-        optimisticTransaction = OnyxUtils.fastMerge(existingTransaction, optimisticTransaction);
+        optimisticTransaction = fastMerge(existingTransaction, optimisticTransaction);
     }
 
     // STEP 4: Build optimistic reportActions. We need:

src/libs/actions/MemoryOnlyKeys/MemoryOnlyKeys.ts

@@ -1,5 +1,5 @@
 import Onyx from 'react-native-onyx';
-import type {OnyxKey} from 'react-native-onyx/lib/types';
+import type {OnyxKey} from 'react-native-onyx';
 import Log from '@libs/Log';
 import ONYXKEYS from '@src/ONYXKEYS';
 

src/libs/actions/PaymentMethods.ts

@@ -1,9 +1,8 @@
 import {createRef} from 'react';
 import type {MutableRefObject} from 'react';
 import type {GestureResponderEvent} from 'react-native';
-import type {OnyxUpdate} from 'react-native-onyx';
+import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import type {TransferMethod} from '@components/KYCWall/types';
 import * as API from '@libs/API';
 import type {AddPaymentCardParams, DeletePaymentCardParams, MakeDefaultPaymentMethodParams, PaymentCardParams, TransferWalletBalanceParams} from '@libs/API/parameters';

src/libs/actions/Policy.ts

@@ -4,9 +4,8 @@ import Str from 'expensify-common/lib/str';
 import {escapeRegExp} from 'lodash';
 import lodashClone from 'lodash/clone';
 import lodashUnion from 'lodash/union';
-import type {OnyxCollection, OnyxUpdate} from 'react-native-onyx';
+import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {NullishDeep, OnyxEntry} from 'react-native-onyx/lib/types';
 import * as API from '@libs/API';
 import type {
     AddMembersToWorkspaceParams,

src/libs/actions/Report.ts

@@ -3,9 +3,8 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
 import isEmpty from 'lodash/isEmpty';
 import {DeviceEventEmitter, InteractionManager, Linking} from 'react-native';
-import type {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
+import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {NullishDeep} from 'react-native-onyx/lib/types';
 import type {PartialDeep, ValueOf} from 'type-fest';
 import type {Emoji} from '@assets/emojis/types';
 import * as ActiveClientManager from '@libs/ActiveClientManager';

src/libs/actions/User.ts

@@ -1,7 +1,6 @@
 import {isBefore} from 'date-fns';
-import type {OnyxCollection, OnyxUpdate} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import type {ValueOf} from 'type-fest';
 import * as API from '@libs/API';
 import type {

src/libs/migrations/RenameReceiptFilename.ts

@@ -1,5 +1,5 @@
 import Onyx from 'react-native-onyx';
-import type {NullishDeep, OnyxCollection} from 'react-native-onyx/lib/types';
+import type {NullishDeep, OnyxCollection} from 'react-native-onyx';
 import Log from '@libs/Log';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type Transaction from '@src/types/onyx/Transaction';

src/pages/GetAssistancePage.tsx

@@ -2,7 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';

src/pages/TeachersUnite/IntroSchoolPrincipalPage.tsx

@@ -2,7 +2,7 @@ import Str from 'expensify-common/lib/str';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {OnyxFormValuesFields} from '@components/Form/types';

src/pages/TeachersUnite/KnowATeacherPage.tsx

@@ -2,7 +2,7 @@ import Str from 'expensify-common/lib/str';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {OnyxFormValuesFields} from '@components/Form/types';

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -3,7 +3,7 @@ import React, {useEffect, useMemo, useRef} from 'react';
 import type {ReactNode} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {OnyxEntry} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';

tests/unit/MigrationTest.js

@@ -51,8 +51,8 @@ describe('Migrations', () => {
         it('Should remove any individual reportActions that have no data in Onyx', () =>
             Onyx.multiSet({
                 [`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}1`]: {
-                    1: null,
-                    2: null,
+                    1: {},
+                    2: {},
                 },
             })
                 .then(PersonalDetailsByAccountID)

tests/unit/ReportActionsUtilsTest.js

@@ -368,7 +368,7 @@ describe('ReportActionsUtils', () => {
                                     callback: () => {
                                         Onyx.disconnect(connectionID);
                                         const res = ReportActionsUtils.getLastVisibleAction(report.reportID);
-                                        expect(res).toBe(action2);
+                                        expect(res).toEqual(action2);
                                         resolve();
                                     },
                                 });