george / rm65041 / migrate p2p-cashier component to TS (binary-com#6177)

* refactor(p2p-cashier): migrate p2p-cashier component to TS * commit * perf(types): add types for notification store * perf(types): add types for ui store * perf(types): convert p2p-cashier to TS * refactor(types): change RootStore type to TRootStore * test(p2p-cashier): test fix (change wrapper order fro p2p-cashier component) * refactor(types): refactor current_focus type * test(p2p-cashier): remove eslint disables
adrienne-deriv · Oct 7, 2022 · c6affa9 · c6affa9
1 parent 10a3e22
commit c6affa9
Show file tree

Hide file tree

Showing 19 changed files with 135 additions and 74 deletions.
diff --git a/packages/cashier/src/components/cashier-container/virtual/virtual.tsx b/packages/cashier/src/components/cashier-container/virtual/virtual.tsx
@@ -6,7 +6,7 @@ import { Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 import './virtual.scss';
 
 type TVirtualProps = RouteComponentProps & {
@@ -51,7 +51,7 @@ const Virtual = ({ is_dark_mode_on, toggleAccountsDialog }: TVirtualProps) => {
     );
 };
 
-export default connect(({ ui }: RootStore) => ({
+export default connect(({ ui }: TRootStore) => ({
     is_dark_mode_on: ui.is_dark_mode_on,
     toggleAccountsDialog: ui.toggleAccountsDialog,
 }))(withRouter(Virtual));
diff --git a/packages/cashier/src/components/cashier-locked/cashier-locked.tsx b/packages/cashier/src/components/cashier-locked/cashier-locked.tsx
@@ -4,7 +4,7 @@ import { Icon, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { formatDate } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 
 type TAccount = NonNullable<Authorize['account_list']>[0];
 
@@ -292,7 +292,7 @@ const CashierLocked = ({
     );
 };
 
-export default connect(({ client, modules }: RootStore) => ({
+export default connect(({ client, modules }: TRootStore) => ({
     account_status: client.account_status,
     accounts: client.accounts,
     current_currency_type: client.current_currency_type,

diff --git a/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx b/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx
@@ -4,7 +4,7 @@ import { DesktopWrapper, Input, Icon, MobileWrapper, Text, useInterval } from '@
 import { getCurrencyDisplayCode } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore, TReactChangeEvent, TReactChildren } from 'Types';
+import { TRootStore, TReactChangeEvent, TReactChildren } from 'Types';
 import './crypto-fiat-converter.scss';
 
 type TTimerProps = {
@@ -170,7 +170,7 @@ const CryptoFiatConverter = ({
     );
 };
 
-export default connect(({ modules }: RootStore) => ({
+export default connect(({ modules }: TRootStore) => ({
     converter_from_amount: modules.cashier.crypto_fiat_converter.converter_from_amount,
     converter_from_error: modules.cashier.crypto_fiat_converter.converter_from_error,
     converter_to_error: modules.cashier.crypto_fiat_converter.converter_to_error,

diff --git a/...s/cashier/src/components/crypto-transactions-history/crypto-transactions-cancel-modal.tsx b/...s/cashier/src/components/crypto-transactions-history/crypto-transactions-cancel-modal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Modal } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 
 type TCryptoTransactionsCancelModalProps = {
     cancelCryptoTransaction: (selected_crypto_transaction_id: string) => void;
@@ -45,7 +45,7 @@ const CryptoTransactionsCancelModal = ({
     );
 };
 
-export default connect(({ modules }: RootStore) => ({
+export default connect(({ modules }: TRootStore) => ({
     cancelCryptoTransaction: modules.cashier.transaction_history.cancelCryptoTransaction,
     hideCryptoTransactionsCancelModal: modules.cashier.transaction_history.hideCryptoTransactionsCancelModal,
     is_cancel_modal_visible: modules.cashier.transaction_history.is_crypto_transactions_cancel_modal_visible,

diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx
@@ -3,7 +3,7 @@ import { DataList, Icon, Loading, MobileWrapper, Table, Text } from '@deriv/comp
 import { isDesktop, isMobile, routes } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore, TCryptoTransactionDetails } from 'Types';
+import { TRootStore, TCryptoTransactionDetails } from 'Types';
 import CryptoTransactionsCancelModal from './crypto-transactions-cancel-modal';
 import CryptoTransactionsStatusModal from './crypto-transactions-status-modal';
 import CryptoTransactionsRenderer from './crypto-transactions-renderer';
@@ -102,7 +102,7 @@ const CryptoTransactionsHistory = ({
     );
 };
 
-export default connect(({ client, modules }: RootStore) => ({
+export default connect(({ client, modules }: TRootStore) => ({
     crypto_transactions: modules.cashier.transaction_history.crypto_transactions,
     currency: client.currency,
     is_loading: modules.cashier.transaction_history.is_loading,

diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx
@@ -5,7 +5,7 @@ import { epochToMoment, formatMoney, isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { getStatus } from 'Constants/transaction-status';
 import { connect } from 'Stores/connect';
-import { RootStore, TCryptoTransactionDetails } from 'Types';
+import { TRootStore, TCryptoTransactionDetails } from 'Types';
 
 type TCryptoTransactionsRendererProps = {
     row: TCryptoTransactionDetails;
@@ -304,7 +304,7 @@ const CryptoTransactionsRenderer = ({
     );
 };
 
-export default connect(({ client, modules }: RootStore) => ({
+export default connect(({ client, modules }: TRootStore) => ({
     currency: client.currency,
     cancelCryptoTransaction: modules.cashier.transaction_history.cancelCryptoTransaction,
     showCryptoTransactionsCancelModal: modules.cashier.transaction_history.showCryptoTransactionsCancelModal,

diff --git a/...s/cashier/src/components/crypto-transactions-history/crypto-transactions-status-modal.tsx b/...s/cashier/src/components/crypto-transactions-history/crypto-transactions-status-modal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Modal } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { TReactMouseEvent, RootStore } from 'Types';
+import { TReactMouseEvent, TRootStore } from 'Types';
 
 type TCryptoTransactionsStatusModalProps = {
     hideCryptoTransactionsStatusModal: (e: TReactMouseEvent) => void;
@@ -34,7 +34,7 @@ const CryptoTransactionsStatusModal = ({
     );
 };
 
-export default connect(({ modules }: RootStore) => ({
+export default connect(({ modules }: TRootStore) => ({
     hideCryptoTransactionsStatusModal: modules.cashier.transaction_history.hideCryptoTransactionsStatusModal,
     is_status_modal_visible: modules.cashier.transaction_history.is_crypto_transactions_status_modal_visible,
     selected_crypto_status: modules.cashier.transaction_history.selected_crypto_status,

diff --git a/packages/cashier/src/components/error-dialog/error-dialog.tsx b/packages/cashier/src/components/error-dialog/error-dialog.tsx
@@ -4,7 +4,7 @@ import { Dialog } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import { RootStore, TError, TReactElement } from 'Types';
+import { TRootStore, TError, TReactElement } from 'Types';
 
 type TErrorDialogProps = {
     disableApp: () => void;
@@ -148,7 +148,7 @@ const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) =
     );
 };
 
-export default connect(({ ui }: RootStore) => ({
+export default connect(({ ui }: TRootStore) => ({
     disableApp: ui.disableApp,
     enableApp: ui.enableApp,
 }))(ErrorDialog);
diff --git a/packages/cashier/src/components/funds-protection/funds-protection.tsx b/packages/cashier/src/components/funds-protection/funds-protection.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon, Button, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 import './funds-protection.scss';
 
 type TFundsProtectionProps = {
@@ -40,6 +40,6 @@ const FundsProtection = ({ submitFundsProtection }: TFundsProtectionProps) => {
     );
 };
 
-export default connect(({ modules }: RootStore) => ({
+export default connect(({ modules }: TRootStore) => ({
     submitFundsProtection: modules.cashier.deposit.submitFundsProtection,
 }))(FundsProtection);
diff --git a/packages/cashier/src/components/no-balance/no-balance.tsx b/packages/cashier/src/components/no-balance/no-balance.tsx
@@ -4,7 +4,7 @@ import { Button, Icon, Text } from '@deriv/components';
 import { routes, getCurrencyDisplayCode } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 
 type TNoBalanceProps = RouteComponentProps & {
     currency: string;
@@ -48,7 +48,7 @@ const NoBalance = ({ currency, history, is_deposit_locked, setTabIndex }: TNoBal
 };
 
 export default withRouter(
-    connect(({ client, modules }: RootStore) => ({
+    connect(({ client, modules }: TRootStore) => ({
         currency: client.currency,
         is_deposit_locked: modules.cashier.deposit.is_deposit_locked,
         setTabIndex: modules.cashier.general_store.setCashierTabIndex,

diff --git a/packages/cashier/src/components/recent-transaction/recent-transaction.tsx b/packages/cashier/src/components/recent-transaction/recent-transaction.tsx
@@ -4,7 +4,7 @@ import { ButtonLink, Text, Icon } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import { epochToMoment } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 import { getStatus } from 'Constants/transaction-status';
 import './recent-transaction.scss';
 
@@ -132,7 +132,7 @@ const RecentTransaction = ({
     );
 };
 
-export default connect(({ modules, client }: RootStore) => ({
+export default connect(({ modules, client }: TRootStore) => ({
     crypto_transactions: modules.cashier.transaction_history.crypto_transactions,
     currency: client.currency,
     onMount: modules.cashier.transaction_history.onMount,

diff --git a/...p2p-cashier/__tests__/p2p-cashier.spec.js → ...2p-cashier/__tests__/p2p-cashier.spec.tsx b/...p2p-cashier/__tests__/p2p-cashier.spec.js → ...2p-cashier/__tests__/p2p-cashier.spec.tsx
@@ -16,7 +16,7 @@ jest.mock('@deriv/components', () => ({
     Loading: () => <div>Loading</div>,
 }));
 
-jest.mock('@deriv/p2p', () => () => <div>P2P</div>);
+jest.mock('@deriv/p2p', () => jest.fn(() => 'P2P'));
 
 describe('<P2PCashier />', () => {
     const history = createBrowserHistory();

diff --git a/packages/cashier/src/pages/p2p-cashier/index.js b/packages/cashier/src/pages/p2p-cashier/index.js
diff --git a/packages/cashier/src/pages/p2p-cashier/index.ts b/packages/cashier/src/pages/p2p-cashier/index.ts
@@ -0,0 +1,3 @@
+import P2PCashier from './p2p-cashier';
+
+export default P2PCashier;
diff --git a/...ier/src/pages/p2p-cashier/p2p-cashier.jsx → ...ier/src/pages/p2p-cashier/p2p-cashier.tsx b/...ier/src/pages/p2p-cashier/p2p-cashier.jsx → ...ier/src/pages/p2p-cashier/p2p-cashier.tsx
@@ -1,16 +1,47 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
-import { getLanguage } from '@deriv/translations';
-import { routes, WS } from '@deriv/shared';
-import { Loading } from '@deriv/components';
 import P2P from '@deriv/p2p';
-import { connect } from 'Stores/connect';
+import { Loading } from '@deriv/components';
+import { routes, WS } from '@deriv/shared';
+import { getLanguage } from '@deriv/translations';
 import { get, init, timePromise } from 'Utils/server_time';
+import { connect } from 'Stores/connect';
+import { TClientStore, TCommonStore, TNotificationStore, TRootStore, TUiStore } from 'Types';
+
+type TLocalCurrencyConfig = {
+    currency: string;
+    decimal_places: number;
+};
+
+type TP2PCashierProps = RouteComponentProps & {
+    addNotificationMessage: TNotificationStore['addNotificationMessage'];
+    balance: TClientStore['balance'];
+    currency: TClientStore['currency'];
+    current_focus: TUiStore['current_focus'];
+    filterNotificationMessages: TNotificationStore['filterNotificationMessages'];
+    is_dark_mode_on: TUiStore['is_dark_mode_on'];
+    is_logging_in: TClientStore['is_logging_in'];
+    is_mobile: TUiStore['is_mobile'];
+    is_virtual: TClientStore['is_virtual'];
+    local_currency_config: TLocalCurrencyConfig;
+    loginid: TClientStore['loginid'];
+    Notifications: TUiStore['notification_messages_ui'];
+    platform: TCommonStore['platform'];
+    refreshNotifications: TNotificationStore['refreshNotifications'];
+    removeNotificationByKey: TNotificationStore['removeNotificationByKey'];
+    removeNotificationMessage: TNotificationStore['removeNotificationMessage'];
+    residence: TClientStore['residence'];
+    setCurrentFocus: TUiStore['setCurrentFocus'];
+    // TODO: replace setNotificationCount and setOnRemount types when cashier.general_store will be typed
+    setNotificationCount: (value: number) => void;
+    setOnRemount: (func: () => void) => void;
+};
 
 /* P2P will use the same websocket connection as Deriv/Binary, we need to pass it as a prop */
 const P2PCashier = ({
     addNotificationMessage,
+    balance,
     currency,
     current_focus,
     filterNotificationMessages,
@@ -28,31 +59,19 @@ const P2PCashier = ({
     removeNotificationByKey,
     removeNotificationMessage,
     residence,
-    setNotificationCount,
     setCurrentFocus,
-    balance,
+    setNotificationCount,
     setOnRemount,
-}) => {
-    const [order_id, setOrderId] = React.useState(null);
+}: TP2PCashierProps) => {
+    const [order_id, setOrderId] = React.useState<string | null>(null);
     const server_time = {
         get,
         init,
         timePromise,
     };
 
-    React.useEffect(() => {
-        const url_params = new URLSearchParams(location.search);
-        const passed_order_id = url_params.get('order');
-
-        if (passed_order_id) {
-            setQueryOrder(passed_order_id);
-        }
-
-        return () => setQueryOrder(null);
-    }, [location.search, setQueryOrder]);
-
     const setQueryOrder = React.useCallback(
-        input_order_id => {
+        (input_order_id: string | null) => {
             const current_query_params = new URLSearchParams(location.search);
 
             if (current_query_params.has('order')) {
@@ -84,6 +103,17 @@ const P2PCashier = ({
         [history, location.hash, location.search, order_id]
     );
 
+    React.useEffect(() => {
+        const url_params = new URLSearchParams(location.search);
+        const passed_order_id = url_params.get('order');
+
+        if (passed_order_id) {
+            setQueryOrder(passed_order_id);
+        }
+
+        return () => setQueryOrder(null);
+    }, [location.search, setQueryOrder]);
+
     if (is_logging_in) {
         return <Loading is_fullscreen />;
     }
@@ -118,30 +148,7 @@ const P2PCashier = ({
     );
 };
 
-P2PCashier.propTypes = {
-    addNotificationMessage: PropTypes.func,
-    balance: PropTypes.string,
-    currency: PropTypes.string,
-    current_focus: PropTypes.string,
-    filterNotificationMessages: PropTypes.func,
-    history: PropTypes.object,
-    is_dark_mode_on: PropTypes.bool,
-    is_logging_in: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    is_virtual: PropTypes.bool,
-    local_currency_config: PropTypes.object,
-    location: PropTypes.object,
-    loginid: PropTypes.string,
-    platform: PropTypes.any,
-    refreshNotifications: PropTypes.func,
-    removeNotificationByKey: PropTypes.func,
-    removeNotificationMessage: PropTypes.func,
-    residence: PropTypes.string,
-    setNotificationCount: PropTypes.func,
-    setCurrentFocus: PropTypes.func,
-};
-
-export default connect(({ client, common, modules, notifications, ui }) => ({
+export default connect(({ client, common, modules, notifications, ui }: TRootStore) => ({
     addNotificationMessage: notifications.addNotificationMessage,
     balance: client.balance,
     currency: client.currency,

diff --git a/packages/cashier/src/types/stores/index.ts b/packages/cashier/src/types/stores/index.ts
@@ -1,4 +1,5 @@
 export * from './client-store.types';
 export * from './common-store.types';
+export * from './notification-store.types';
 export * from './root-store.types';
 export * from './ui-store.types';