Farzin/76562/Remove legacy connect method from cashier (#7238)

* refactor(cashier): 🔥 remove `mobx-react-lite` from `cashier` * refactor(cashier): ♻️ replace `connect` with `useStore` for remaining components * refactor(cashier): ♻️ fix test files to use `StoreProvider` * refactor(cashier): 🔥 remove `connect` from `cashier` * refactor(cashier): 🔥 remove extra store related types from `cashier` * fix(stores): 🐛 stop persisting the stores when store is unmount Co-authored-by: Farzin Mirzaie <farzin@deriv.com>
binary-com · Jan 3, 2023 · ad1dc0b · ad1dc0b
1 parent c743761
commit ad1dc0b
Show file tree

Hide file tree

Showing 55 changed files with 1,023 additions and 567 deletions.
diff --git a/packages/cashier/build/webpack.config.js b/packages/cashier/build/webpack.config.js
@@ -47,7 +47,6 @@ 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/cashier/package.json b/packages/cashier/package.json
@@ -48,7 +48,6 @@
         "loadjs": "^4.2.0",
         "lodash.debounce": "^4.0.8",
         "mobx": "^6.6.1",
-        "mobx-react": "^7.5.1",
         "moment": "^2.29.2",
         "prop-types": "^15.7.2",
         "qrcode.react": "^1.0.0",

diff --git a/packages/cashier/src/app.jsx b/packages/cashier/src/app.jsx
@@ -3,7 +3,6 @@ import { setWebsocket } from '@deriv/shared';
 import { StoreProvider } from '@deriv/stores';
 import { init } from 'Utils/server_time';
 import Routes from 'Containers/routes';
-import { MobxContentProvider } from 'Stores/connect';
 
 const App = ({ passthrough: { WS, root_store } }) => {
     React.useEffect(() => {
@@ -13,11 +12,9 @@ const App = ({ passthrough: { WS, root_store } }) => {
     }, []);
 
     return (
-        <MobxContentProvider store={root_store}>
-            <StoreProvider store={root_store}>
-                <Routes />
-            </StoreProvider>
-        </MobxContentProvider>
+        <StoreProvider store={root_store}>
+            <Routes />
+        </StoreProvider>
     );
 };
 

diff --git a/packages/cashier/src/components/cashier-locked/__tests__/cashier-locked.spec.tsx b/packages/cashier/src/components/cashier-locked/__tests__/cashier-locked.spec.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import CashierLocked from '../cashier-locked';
 import { StoreProvider } from '@deriv/stores';
-import { TRootStore } from '../../../types';
-import type { DeepPartial } from '@deriv/stores/types';
+import { TRootStore } from 'Types';
 
 describe('<CashierLocked />', () => {
     it('should show the proper message if there is a cryptocashier maintenance', () => {

diff --git a/...es/cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding-details.spec.js b/...es/cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding-details.spec.js
@@ -2,12 +2,6 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import CashierOnboardingDetails from '../cashier-onboarding-details';
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<CashierOnboardingDetails />', () => {
     let props;
     beforeEach(() => {

diff --git a/.../cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding-side-note.spec.js b/.../cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding-side-note.spec.js
@@ -3,12 +3,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import CashierOnboardingSideNote from '../cashier-onboarding-side-note';
 import { StoreProvider } from '@deriv/stores';
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<CashierOnboardingSideNote />', () => {
     let mockRootStore;
     beforeEach(() => {

diff --git a/packages/cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding.spec.js b/packages/cashier/src/components/cashier-onboarding/__tests__/cashier-onboarding.spec.js
@@ -6,12 +6,6 @@ import { Router } from 'react-router';
 import { routes } from '@deriv/shared';
 import { StoreProvider } from '@deriv/stores';
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<CashierOnboarding />', () => {
     let mockRootStore;
     beforeEach(() => {

diff --git a/...ges/cashier/src/components/crypto-fiat-converter/__tests__/crypto-fiat-converter.spec.tsx b/...ges/cashier/src/components/crypto-fiat-converter/__tests__/crypto-fiat-converter.spec.tsx
@@ -5,12 +5,6 @@ import { StoreProvider } from '@deriv/stores';
 import { Formik } from 'formik';
 import * as formik from 'formik';
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<CryptoFiatConverter />', () => {
     let mockRootStore, mockProps;
 

diff --git a/...omponents/crypto-transactions-history/__tests__/crypto-transactions-cancel-modal.spec.tsx b/...omponents/crypto-transactions-history/__tests__/crypto-transactions-cancel-modal.spec.tsx
@@ -3,12 +3,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import CryptoTransactionsCancelModal from '../crypto-transactions-cancel-modal';
 import { StoreProvider } from '@deriv/stores';
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<CryptoTransactionsCancelModal />', () => {
     let modal_root_el, mockRootStore;
     beforeEach(() => {

diff --git a/...src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx b/...src/components/crypto-transactions-history/__tests__/crypto-transactions-history.spec.tsx
@@ -3,12 +3,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import CryptoTransactionsHistory from '../crypto-transactions-history';
 import { StoreProvider } from '@deriv/stores';
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<CryptoTransactionsHistory />', () => {
     let mockRootStore;
 

diff --git a/...rc/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx b/...rc/components/crypto-transactions-history/__tests__/crypto-transactions-renderer.spec.tsx
@@ -4,12 +4,6 @@ import { isMobile } from '@deriv/shared';
 import CryptoTransactionsRenderer from '../crypto-transactions-renderer';
 import { StoreProvider } from '@deriv/stores';
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
     ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
     isMobile: jest.fn(),

diff --git a/...omponents/crypto-transactions-history/__tests__/crypto-transactions-status-modal.spec.tsx b/...omponents/crypto-transactions-history/__tests__/crypto-transactions-status-modal.spec.tsx
@@ -3,12 +3,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import CryptoTransactionsStatusModal from '../crypto-transactions-status-modal';
 import { StoreProvider } from '@deriv/stores';
 
-jest.mock('Stores/connect.js', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<CryptoTransactionsStatusModal />', () => {
     let modal_root_el, mockRootStore;
     beforeEach(() => {

diff --git a/...mponents/email-verification-empty-state/__tests__/email-verification-empty-state.test.tsx b/...mponents/email-verification-empty-state/__tests__/email-verification-empty-state.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import EmailVerificationEmptyState from '../email-verification-empty-state';
 import { StoreProvider } from '@deriv/stores';
-import { TRootStore } from '../../../types';
+import { TRootStore } from 'Types';
 
 const mock_store: DeepPartial<TRootStore> = {
     client: {

diff --git a/packages/cashier/src/components/error-dialog/__tests__/error-dialog.spec.tsx b/packages/cashier/src/components/error-dialog/__tests__/error-dialog.spec.tsx
@@ -5,8 +5,7 @@ import { Router } from 'react-router';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { routes } from '@deriv/shared';
 import { StoreProvider } from '@deriv/stores';
-import { TRootStore } from '../../../types';
-import type { DeepPartial } from '@deriv/stores/types';
+import { TRootStore } from 'Types';
 
 const mockRootStore: DeepPartial<TRootStore> = {
     ui: { disableApp: jest.fn(), enableApp: jest.fn() },

diff --git a/packages/cashier/src/components/funds-protection/__tests__/funds-protection.spec.tsx b/packages/cashier/src/components/funds-protection/__tests__/funds-protection.spec.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import FundsProtection from '../funds-protection';
 import { StoreProvider } from '@deriv/stores';
-import { TRootStore } from '../../../types';
-import type { DeepPartial } from '@deriv/stores/types';
+import { TRootStore } from 'Types';
 
 const mockRootStore: DeepPartial<TRootStore> = {
     modules: {

diff --git a/packages/cashier/src/components/recent-transaction/__tests__/recent-transaction.spec.tsx b/packages/cashier/src/components/recent-transaction/__tests__/recent-transaction.spec.tsx
@@ -5,12 +5,6 @@ import { createBrowserHistory } from 'history';
 import { Router } from 'react-router';
 import { StoreProvider } from '@deriv/stores';
 
-jest.mock('Stores/connect', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<RecentTransaction />', () => {
     let history, mockRootStore;
     beforeEach(() => {

diff --git a/packages/cashier/src/components/transfer-confirm/__tests__/transfer-confirm.spec.tsx b/packages/cashier/src/components/transfer-confirm/__tests__/transfer-confirm.spec.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import TransferConfirm from '../transfer-confirm';
 import { StoreProvider } from '@deriv/stores';
-import { TRootStore } from '../../../types';
-import type { DeepPartial } from '@deriv/stores/types';
+import { TRootStore } from 'Types';
 
 const mockRootStore: DeepPartial<TRootStore> = {
     ui: {
@@ -12,12 +11,6 @@ const mockRootStore: DeepPartial<TRootStore> = {
     },
 };
 
-jest.mock('Stores/connect', () => ({
-    __esModule: true,
-    default: 'mockedDefaultExport',
-    connect: () => Component => Component,
-}));
-
 describe('<TransferConfirm />', () => {
     let modal_root_el;
     beforeAll(() => {