[WALL] Farhan/WALL-3309/Multiple p2p order calls causing rate limit (#12917)

farhan-nurzi-deriv · web-flow · commit 9e4adf7215dc · 2024-01-24T11:39:05.000+04:00
* fix: 🔧 multiple subscriptions for p2p order notification

* fix: 🔧 failing tests

* fix: 🔧logout issue

* chore: empty commit
diff --git a/packages/core/src/App/Components/Layout/Header/toggle-notifications.jsx b/packages/core/src/App/Components/Layout/Header/toggle-notifications.jsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
 import { Counter, DesktopWrapper, Icon, MobileWrapper, Popover } from '@deriv/components';
-import { useP2PCompletedOrdersNotification } from '@deriv/hooks';
 import NotificationsDialog from 'App/Containers/NotificationsDialog';
 import 'Sass/app/modules/notifications-dialog.scss';
 
@@ -12,8 +11,6 @@ const ToggleNotificationsDrawer = ({
     tooltip_message,
     should_disable_pointer_events = false,
 }) => {
-    useP2PCompletedOrdersNotification();
-
     const notifications_toggler_el = (
         <div
             className={classNames('notifications-toggle__icon-wrapper', {
diff --git a/packages/core/src/App/Containers/Routes/routes.jsx b/packages/core/src/App/Containers/Routes/routes.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import Loadable from 'react-loadable';
 import { UILoader } from '@deriv/components';
+import { useP2PCompletedOrdersNotification } from '@deriv/hooks';
 import { urlForLanguage } from '@deriv/shared';
 import { getLanguage } from '@deriv/translations';
 import BinaryRoutes from 'App/Components/Routes';
@@ -24,6 +25,8 @@ const Routes = observer(({ history, location, passthrough }) => {
     const initial_route = React.useRef(null);
     const unlisten_to_change = React.useRef(null);
 
+    useP2PCompletedOrdersNotification();
+
     React.useEffect(() => {
         if (!unlisten_to_change.current && !initial_route.current) {
             initial_route.current = location.pathname;
diff --git a/packages/hooks/src/__tests__/useP2PCompletedOrdersNotification.spec.tsx b/packages/hooks/src/__tests__/useP2PCompletedOrdersNotification.spec.tsx
@@ -1,37 +1,62 @@
 import * as React from 'react';
-import { useFetch, useSubscription } from '@deriv/api';
+import { useSubscription } from '@deriv/api';
 import { mockStore, StoreProvider } from '@deriv/stores';
 import { renderHook } from '@testing-library/react-hooks';
 import useP2PCompletedOrdersNotification from '../useP2PCompletedOrdersNotification';
 
 jest.mock('@deriv/api', () => ({
     ...jest.requireActual('@deriv/api'),
-    useFetch: jest.fn(),
     useSubscription: jest.fn(),
 }));
 
-const mockUseFetch = useFetch as jest.MockedFunction<typeof useFetch<'website_status'>>;
 const mockUseSubscription = useSubscription as jest.MockedFunction<typeof useSubscription<'p2p_order_list'>>;
 
 describe('useP2PCompletedOrdersNotification', () => {
-    test('should unsubscribe from p2p_order_list if user is not authorized', () => {
+    test('should not subscribe to p2p_order_list if user is not logged in', () => {
         const mock = mockStore({
             client: {
                 is_authorize: false,
+                is_p2p_enabled: true,
                 currency: 'USD',
             },
             notifications: {
                 p2p_completed_orders: [],
             },
         });
 
-        // @ts-expect-error need to come up with a way to mock the return type of useFetch
-        mockUseFetch.mockReturnValue({ data: { website_status: { p2p_config: { supported_currencies: ['usd'] } } } });
+        // @ts-expect-error need to come up with a way to mock the return type of useSubscription
+        mockUseSubscription.mockReturnValue({
+            subscribe: jest.fn(),
+            unsubscribe: jest.fn(),
+            isSubscribed: false,
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        renderHook(() => useP2PCompletedOrdersNotification(), { wrapper });
+        expect(mockUseSubscription('p2p_order_list').subscribe).not.toBeCalled();
+        expect(mock.notifications.p2p_completed_orders).toEqual([]);
+    });
+
+    test('should not subscribe to p2p_order_list if user p2p is disabled', () => {
+        const mock = mockStore({
+            client: {
+                is_authorize: true,
+                is_p2p_enabled: false,
+                currency: 'EUR',
+            },
+            notifications: {
+                p2p_completed_orders: [],
+            },
+        });
 
         // @ts-expect-error need to come up with a way to mock the return type of useSubscription
         mockUseSubscription.mockReturnValue({
             subscribe: jest.fn(),
             unsubscribe: jest.fn(),
+            isSubscribed: false,
         });
 
         const wrapper = ({ children }: { children: JSX.Element }) => (
@@ -40,36 +65,66 @@ describe('useP2PCompletedOrdersNotification', () => {
 
         renderHook(() => useP2PCompletedOrdersNotification(), { wrapper });
 
-        expect(mockUseSubscription('p2p_order_list').unsubscribe).toBeCalled();
+        expect(mockUseSubscription('p2p_order_list').subscribe).not.toBeCalled();
         expect(mock.notifications.p2p_completed_orders).toEqual([]);
     });
 
-    test('should unsubscribe from p2p_order_list if user p2p is disabled', () => {
+    test('should not call unsubscribe from p2p_order_list if user is logged in and p2p is enabled but list is not subscribed', () => {
         const mock = mockStore({
             client: {
-                is_authorize: false,
-                currency: 'EUR',
+                is_authorize: true,
+                is_p2p_enabled: true,
+                currency: 'USD',
             },
             notifications: {
                 p2p_completed_orders: [],
             },
         });
 
-        // @ts-expect-error need to come up with a way to mock the return type of useFetch
-        mockUseFetch.mockReturnValue({ data: { website_status: { p2p_config: { supported_currencies: ['usd'] } } } });
+        // @ts-expect-error need to come up with a way to mock the return type of useSubscription
+        mockUseSubscription.mockReturnValue({
+            subscribe: jest.fn(),
+            unsubscribe: jest.fn(),
+            isSubscribed: false,
+        });
+
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
+
+        const { unmount } = renderHook(() => useP2PCompletedOrdersNotification(), { wrapper });
+
+        unmount();
+        expect(mockUseSubscription('p2p_order_list').unsubscribe).not.toBeCalled();
+        expect(mock.notifications.p2p_completed_orders).toEqual([]);
+    });
+
+    test('should unsubscribe from p2p_order_list if user is logged in and p2p is enabled and list is subscribed', () => {
+        const mock = mockStore({
+            client: {
+                is_authorize: true,
+                is_p2p_enabled: true,
+                currency: 'USD',
+            },
+            notifications: {
+                p2p_completed_orders: [],
+            },
+        });
 
         // @ts-expect-error need to come up with a way to mock the return type of useSubscription
         mockUseSubscription.mockReturnValue({
             subscribe: jest.fn(),
             unsubscribe: jest.fn(),
+            isSubscribed: true,
         });
 
         const wrapper = ({ children }: { children: JSX.Element }) => (
             <StoreProvider store={mock}>{children}</StoreProvider>
         );
 
-        renderHook(() => useP2PCompletedOrdersNotification(), { wrapper });
+        const { unmount } = renderHook(() => useP2PCompletedOrdersNotification(), { wrapper });
 
+        unmount();
         expect(mockUseSubscription('p2p_order_list').unsubscribe).toBeCalled();
         expect(mock.notifications.p2p_completed_orders).toEqual([]);
     });
@@ -78,16 +133,14 @@ describe('useP2PCompletedOrdersNotification', () => {
         const mock = mockStore({
             client: {
                 is_authorize: true,
+                is_p2p_enabled: true,
                 currency: 'USD',
             },
             notifications: {
                 p2p_completed_orders: [],
             },
         });
 
-        // @ts-expect-error need to come up with a way to mock the return type of useFetch
-        mockUseFetch.mockReturnValue({ data: { website_status: { p2p_config: { supported_currencies: ['usd'] } } } });
-
         const mock_p2p_order_list = [
             {
                 account_currency: 'USD',
diff --git a/packages/hooks/src/useP2PCompletedOrdersNotification.ts b/packages/hooks/src/useP2PCompletedOrdersNotification.ts
@@ -1,13 +1,11 @@
 import React from 'react';
 import { useStore } from '@deriv/stores';
-import useIsP2PEnabled from './useIsP2PEnabled';
 import useP2POrderList from './useP2POrderList';
 
 const useP2PCompletedOrdersNotification = () => {
-    const { data: is_p2p_enabled } = useIsP2PEnabled();
-    const { subscribe, data, unsubscribe } = useP2POrderList();
+    const { subscribe, data, unsubscribe, isSubscribed } = useP2POrderList();
     const { client, notifications } = useStore();
-    const { is_authorize } = client;
+    const { is_authorize, is_p2p_enabled } = client;
 
     React.useEffect(() => {
         if (is_authorize && is_p2p_enabled) {
@@ -16,10 +14,11 @@ const useP2PCompletedOrdersNotification = () => {
                     active: 0,
                 },
             });
-        } else {
-            unsubscribe();
         }
-    }, [is_authorize, is_p2p_enabled, subscribe, unsubscribe]);
+        return () => {
+            isSubscribed && unsubscribe();
+        };
+    }, [isSubscribed, is_authorize, is_p2p_enabled, subscribe, unsubscribe]);
 
     React.useEffect(() => {
         if (data?.p2p_order_list?.list.length && data?.p2p_order_list?.list !== notifications.p2p_completed_orders) {
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
@@ -153,6 +153,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_logging_in: false,
             is_mt5_password_not_set: false,
             is_mt5_account_list_updated: false,
+            is_p2p_enabled: false,
             is_proof_of_ownership_enabled: false,
             is_poa_expired: false,
             is_populating_dxtrade_account_list: false,
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
@@ -468,6 +468,7 @@ type TClientStore = {
     is_low_risk: boolean;
     is_mt5_password_not_set: boolean;
     is_mt5_account_list_updated: boolean;
+    is_p2p_enabled: boolean;
     is_proof_of_ownership_enabled: boolean;
     is_poa_expired: boolean;
     is_populating_dxtrade_account_list: boolean;
