Migrate from mobx-react to mobx-react-lite / Removed mobx-utils Depen…

…dency (#17759) * fix: 🚑 replace mobx-react with mobx-react-lite * refactor(trader): ♻️ refactor getPositionById method * chore: resolve package-lock.json
deriv-com · Dec 30, 2024 · 114a2e8 · 114a2e8
1 parent 221fcf7
commit 114a2e8
Show file tree

Hide file tree

Showing 51 changed files with 84 additions and 99 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js
@@ -83,7 +83,7 @@ module.exports = function (env) {
                 '@deriv/hooks': '@deriv/hooks',
                 '@deriv/stores': '@deriv/stores',
                 '@deriv/utils': '@deriv/utils',
-                '@deriv/quill-icons': `@deriv/quill-icons`,
+                '@deriv/quill-icons': '@deriv/quill-icons',
                 '@deriv-com/utils': '@deriv-com/utils',
                 '@deriv-com/translations': '@deriv-com/translations',
             },

diff --git a/packages/appstore/webpack.config.js b/packages/appstore/webpack.config.js
@@ -201,6 +201,7 @@ module.exports = function (env) {
                 'react-dom': true,
                 classnames: true,
                 mobx: true,
+                'mobx-react-lite': true,
                 'react-router': true,
                 'react-router-dom': true,
                 '@deriv/shared': true,
@@ -210,7 +211,7 @@ module.exports = function (env) {
                 '@deriv/cashier': true,
                 '@deriv/cfd': true,
                 '@deriv/utils': true,
-                '@deriv-com/analytics': `@deriv-com/analytics`,
+                '@deriv-com/analytics': '@deriv-com/analytics',
                 '@deriv-com/translations': '@deriv-com/translations',
             },
         ],

diff --git a/packages/bot-skeleton/package.json b/packages/bot-skeleton/package.json
@@ -46,7 +46,7 @@
         "localforage": "^1.9.0",
         "lz-string": "^1.4.4",
         "mobx": "^6.6.1",
-        "mobx-react": "^7.5.1",
+        "mobx-react-lite": "^3.4.0",
         "redux": "^4.0.1",
         "redux-thunk": "^2.2.0",
         "shx": "^0.3.2"

diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json
@@ -96,7 +96,7 @@
         "lodash.debounce": "^4.0.8",
         "lz-string": "^1.4.4",
         "mobx": "^6.6.1",
-        "mobx-react": "^7.5.1",
+        "mobx-react-lite": "^3.4.0",
         "moment": "^2.29.2",
         "pako": "^1.0.11",
         "prop-types": "^15.7.2",

diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/index.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/bot-builder-tour/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import BotBuilderTourDesktop from './bot-builder-tour-desktop';
 import BotBuilderTourMobile from './bot-builder-tour-mobile';
 

diff --git a/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/index.tsx b/packages/bot-web-ui/src/pages/tutorials/dbot-tours/onboarding-tour/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import OnboardingTourDesktop from './onboarding-tour-desktop';
 import OnboardingTourMobile from './onboarding-tour-mobile';
 

diff --git a/packages/bot-web-ui/webpack.config.js b/packages/bot-web-ui/webpack.config.js
@@ -152,7 +152,7 @@ module.exports = function (env) {
                 formik: 'formik',
                 react: 'react',
                 mobx: 'mobx',
-                'mobx-react': 'mobx-react',
+                'mobx-react-lite': 'mobx-react-lite',
                 'react-dom': 'react-dom',
                 '@deriv/utils': '@deriv/utils',
                 '@deriv/deriv-charts': '@deriv/deriv-charts',

diff --git a/packages/cashier/build/webpack.config.js b/packages/cashier/build/webpack.config.js
@@ -47,6 +47,7 @@ module.exports = function (env) {
                 'react-router-dom': 'react-router-dom',
                 'react-router': 'react-router',
                 mobx: 'mobx',
+                'mobx-react-lite': 'mobx-react-lite',
                 '@deriv/p2p': '@deriv/p2p',
                 '@deriv/shared': '@deriv/shared',
                 '@deriv/components': '@deriv/components',

diff --git a/packages/cfd/build/webpack.config.js b/packages/cfd/build/webpack.config.js
@@ -113,6 +113,7 @@ module.exports = function (env) {
                 'react-router-dom': 'react-router-dom',
                 'react-router': 'react-router',
                 mobx: 'mobx',
+                'mobx-react-lite': 'mobx-react-lite',
                 '@deriv/account': '@deriv/account',
                 '@deriv/shared': '@deriv/shared',
                 '@deriv/components': '@deriv/components',

diff --git a/packages/core/build/constants.js b/packages/core/build/constants.js
@@ -40,7 +40,7 @@ const HOISTED_PACKAGES = {
     'react-router': path.resolve(__dirname, '../../../node_modules/react-router'),
     'react-router-dom': path.resolve(__dirname, '../../../node_modules/react-router-dom'),
     mobx: path.resolve(__dirname, '../../../node_modules/mobx'),
-    'mobx-react': path.resolve(__dirname, '../../../node_modules/mobx-react'),
+    'mobx-react-lite': path.resolve(__dirname, '../../../node_modules/mobx-react-lite'),
     '@deriv/shared': path.resolve(__dirname, '../../../node_modules/@deriv/shared'),
     '@deriv/components': path.resolve(__dirname, '../../../node_modules/@deriv/components'),
     '@deriv/translations': path.resolve(__dirname, '../../../node_modules/@deriv/translations'),

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -136,8 +136,7 @@
         "lodash.debounce": "^4.0.8",
         "lodash.throttle": "^4.1.1",
         "mobx": "^6.6.1",
-        "mobx-react": "^7.5.1",
-        "mobx-utils": "^6.0.5",
+        "mobx-react-lite": "^3.4.0",
         "moment": "^2.29.2",
         "null-loader": "^4.0.1",
         "object.fromentries": "^2.0.0",

diff --git a/packages/core/src/App/Containers/trade-notifications.tsx b/packages/core/src/App/Containers/trade-notifications.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { MobileWrapper, Money, SwipeableNotification, Text } from '@deriv/components';
 import { useStore } from '@deriv/stores';
 import { getCardLabels, getContractPath } from '@deriv/shared';

diff --git a/packages/core/src/Components/markers/marker-line.jsx b/packages/core/src/Components/markers/marker-line.jsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon } from '@deriv/components';

diff --git a/packages/core/src/Components/markers/marker-spot-label.jsx b/packages/core/src/Components/markers/marker-spot-label.jsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Icon, Text } from '@deriv/components';

diff --git a/packages/core/src/Components/markers/marker-spot.jsx b/packages/core/src/Components/markers/marker-spot.jsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import PropTypes from 'prop-types';
 import React from 'react';
 

diff --git a/packages/core/src/Stores/connect.js b/packages/core/src/Stores/connect.js
@@ -1,4 +1,4 @@
-import { useObserver } from 'mobx-react';
+import { useObserver } from 'mobx-react-lite';
 import React from 'react';
 
 const isClassComponent = Component =>

diff --git a/packages/core/src/Stores/portfolio-store.js b/packages/core/src/Stores/portfolio-store.js
@@ -1,6 +1,7 @@
 import throttle from 'lodash.throttle';
-import { action, computed, observable, reaction, makeObservable, override } from 'mobx';
-import { computedFn } from 'mobx-utils';
+import { action, computed, makeObservable, observable, override, reaction } from 'mobx';
+
+import { Money } from '@deriv/components';
 import {
     ChartBarrierStore,
     contractCancelled,
@@ -10,29 +11,29 @@ import {
     formatPortfolioPosition,
     getContractPath,
     getCurrentTick,
-    getTotalProfit,
     getDisplayStatus,
     getDurationPeriod,
     getDurationTime,
     getDurationUnitText,
     getEndTime,
+    getTotalProfit,
     getTradeNotificationMessage,
     isAccumulatorContract,
     isDtraderV2DesktopEnabled,
     isDtraderV2MobileEnabled,
     isEmptyObject,
     isEnded,
-    isValidToSell,
     isMultiplierContract,
-    WS,
-    TRADE_TYPES,
+    isValidToSell,
     removeBarrier,
     routes,
     setLimitOrderBarriers,
+    TRADE_TYPES,
+    WS,
 } from '@deriv/shared';
-import { Money } from '@deriv/components';
-import { Analytics } from '@deriv-com/analytics';
 import { localize } from '@deriv/translations';
+import { Analytics } from '@deriv-com/analytics';
+
 import BaseStore from './base-store';
 
 export default class PortfolioStore extends BaseStore {
@@ -52,12 +53,12 @@ export default class PortfolioStore extends BaseStore {
     main_barrier = null;
     contract_type = '';
 
-    getPositionById = computedFn(id => this.positions.find(position => +position.id === +id));
-
     responseQueue = [];
 
     active_positions = [];
 
+    getPositionByIdCache = observable.map();
+
     constructor(root_store) {
         // TODO: [mobx-undecorate] verify the constructor arguments and the arguments of this automatically generated super call
         super(root_store);
@@ -109,6 +110,17 @@ export default class PortfolioStore extends BaseStore {
         this.root_store = root_store;
     }
 
+    getPositionById(id) {
+        // Check if we already have a cached position for the given ID.
+        if (!this.getPositionByIdCache.has(id)) {
+            // Compute the position and store it in the cache.
+            const position = this.positions.find(position => +position.id === +id);
+            this.getPositionByIdCache.set(id, position);
+        }
+
+        return this.getPositionByIdCache.get(id);
+    }
+
     async initializePortfolio() {
         if (this.has_subscribed_to_poc_and_transaction) {
             this.clearTable();
@@ -582,6 +594,9 @@ export default class PortfolioStore extends BaseStore {
     }
 
     updatePositions = () => {
+        // Whenever positions are updated, clear the cache to ensure consistency.
+        this.getPositionByIdCache.clear();
+
         this.responseQueue.forEach(res => this.proposalOpenContractHandler(res));
         this.responseQueue = [];
         this.setActivePositions();

diff --git a/packages/p2p/webpack.config.js b/packages/p2p/webpack.config.js
@@ -173,6 +173,8 @@ module.exports = function (env) {
                 'react-dom': 'react-dom',
                 'react-router': 'react-router',
                 'react-router-dom': 'react-router-dom',
+                mobx: 'mobx',
+                'mobx-react-lite': 'mobx-react-lite',
                 'prop-types': 'prop-types',
                 '@deriv-com/analytics': '@deriv-com/analytics',
                 '@deriv/shared': '@deriv/shared',

diff --git a/packages/reports/build/webpack.config.js b/packages/reports/build/webpack.config.js
@@ -40,6 +40,7 @@ module.exports = function (env) {
                 'react-router-dom': 'react-router-dom',
                 'react-router': 'react-router',
                 mobx: 'mobx',
+                'mobx-react-lite': 'mobx-react-lite',
                 '@deriv/shared': '@deriv/shared',
                 '@deriv/components': '@deriv/components',
                 '@deriv/translations': '@deriv/translations',

diff --git a/packages/trader/build/webpack.config.js b/packages/trader/build/webpack.config.js
@@ -40,7 +40,7 @@ module.exports = function (env) {
                 'react-router-dom': 'react-router-dom',
                 'react-router': 'react-router',
                 mobx: 'mobx',
-                'mobx-react': 'mobx-react',
+                'mobx-react-lite': 'mobx-react-lite',
                 '@deriv/shared': '@deriv/shared',
                 '@deriv/components': '@deriv/components',
                 '@deriv/translations': '@deriv/translations',

diff --git a/packages/trader/package.json b/packages/trader/package.json
@@ -113,8 +113,7 @@
         "lodash.debounce": "^4.0.8",
         "lodash.throttle": "^4.1.1",
         "mobx": "^6.6.1",
-        "mobx-react": "^7.5.1",
-        "mobx-utils": "^6.0.5",
+        "mobx-react-lite": "^3.4.0",
         "moment": "^2.29.2",
         "null-loader": "^4.0.1",
         "prop-types": "^15.7.2",

diff --git a/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx b/packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import clsx from 'clsx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { Localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
 import {

diff --git a/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx b/packages/trader/src/AppV2/Components/ContractDetailsFooter/contract-details-footer.tsx
@@ -3,7 +3,7 @@ import { Button, TButtonColor } from '@deriv-com/quill-ui';
 import { RemainingTime } from '@deriv/components';
 import { TContractInfo, getCardLabelsV2, isMultiplierContract, isValidToCancel, isValidToSell } from '@deriv/shared';
 import { useStore } from '@deriv/stores';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { TRegularSizesWithExtraLarge } from '@deriv-com/quill-ui/dist/types';
 import { FormatUtils } from '@deriv-com/utils';
 

diff --git a/packages/trader/src/AppV2/Components/CurrentSpot/current-spot.tsx b/packages/trader/src/AppV2/Components/CurrentSpot/current-spot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { Skeleton, usePrevious } from '@deriv/components';

diff --git a/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx b/packages/trader/src/AppV2/Components/PurchaseButton/purchase-button.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 import { Button, useNotifications } from '@deriv-com/quill-ui';

diff --git a/...src/AppV2/Components/TradeParameters/AccumulatorsInformation/accumulators-information.tsx b/...src/AppV2/Components/TradeParameters/AccumulatorsInformation/accumulators-information.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { Localize } from '@deriv/translations';
 import { Money, Skeleton } from '@deriv/components';
 import { Text } from '@deriv-com/quill-ui';

diff --git a/packages/trader/src/AppV2/Components/TradeParameters/AllowEquals/allow-equals.tsx b/packages/trader/src/AppV2/Components/TradeParameters/AllowEquals/allow-equals.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { observer } from 'mobx-react';
+import { observer } from 'mobx-react-lite';
 import { ActionSheet, ToggleSwitch, Text, Heading } from '@deriv-com/quill-ui';
 import { Localize } from '@deriv/translations';
 import { clickAndKeyEventHandler } from '@deriv/shared';