Adrienne / integrated useSubscription hook for website status (binary…

…-com#8702) * Create codeql.yml * Create codeql-test.yml * chore: removed codeql workflows * chore: removed dccache * chore: added escapeHtml function to login * refactor: added website status store * chore: removed old changes * chore: added checks for loginid * chore: fixed an issue where website status is not subscribed properly and not after authorize * chore: removed observer * chore: removed duplicate if statement * chore: added dependencies * chore: moved unsubscribe outside * refactor: use without websocket hooks * chore: updated comments * chore: removed prettier changes * chore: fixed wrong type * chore: fixed wrong type * chore: incorporated code reviews * chore: undo prettier formatting * chore: undo prettier formatting * chore: removed comments * fix: fixed some issues with testing website-status store --------- Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@deriv.com>
ameerul-deriv · Jul 5, 2023 · 4f7c079 · 4f7c079
1 parent ba08c0f
commit 4f7c079
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 5 deletions.
diff --git a/packages/cfd/src/Containers/__tests__/cfd-server-error-dialog.spec.js b/packages/cfd/src/Containers/__tests__/cfd-server-error-dialog.spec.js
@@ -13,6 +13,9 @@ describe('<CFDServerErrorDialog /> ', () => {
     let mockRootStore;
     beforeEach(() => {
         mockRootStore = {
+            client: {
+                is_authorize: false,
+            },
             ui: {
                 disableApp: jest.fn(),
                 enableApp: jest.fn(),
@@ -53,6 +56,9 @@ describe('<CFDServerErrorDialog /> ', () => {
 
     it('should not render the component if has_cfd_error is false', () => {
         const new_mockRootStore = {
+            client: {
+                is_authorize: false,
+            },
             ui: {
                 ...mockRootStore.ui,
             },
@@ -72,6 +78,9 @@ describe('<CFDServerErrorDialog /> ', () => {
 
     it('should not render the component if is_cfd_success_dialog_enabled', () => {
         const new_mockRootStore = {
+            client: {
+                is_authorize: false,
+            },
             ui: {
                 ...mockRootStore.ui,
             },

diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
@@ -2118,8 +2118,8 @@ export default class ClientStore extends BaseStore {
 
         if (response?.logout === 1) {
             this.cleanUp();
-
             RudderStack.reset();
+            this.setIsAuthorize(false);
             this.setLogout(true);
         }
 

diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
@@ -432,6 +432,11 @@ const mock = (): TStores & { is_mock: boolean } => {
             update: jest.fn(),
             unmount: jest.fn(),
         },
+        website_status: {
+            data: undefined,
+            update: jest.fn(),
+            unmount: jest.fn(),
+        },
         feature_flags: {
             data: undefined,
             update: jest.fn(),

diff --git a/packages/stores/src/providers/WebsiteStatusProvider.tsx b/packages/stores/src/providers/WebsiteStatusProvider.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { useSubscription } from '@deriv/api';
+import { observer } from 'mobx-react-lite';
+import useStore from '../useStore';
+import merge from 'lodash.merge';
+
+const WebsiteStatusProvider = observer(({ children }: React.PropsWithChildren<unknown>) => {
+    const { data, subscribe, unsubscribe } = useSubscription('website_status');
+    const {
+        client: { is_authorize },
+        website_status: { update },
+    } = useStore();
+
+    useEffect(() => {
+        if (data) {
+            const { website_status } = data;
+            if (website_status) update(prev => merge(prev, website_status));
+        }
+    }, [update, data]);
+
+    useEffect(() => {
+        if (is_authorize) unsubscribe()
+        subscribe()
+    }, [is_authorize, subscribe, unsubscribe]);
+
+    return <>{children}</>;
+});
+
+export default WebsiteStatusProvider;
diff --git a/packages/stores/src/providers/index.ts b/packages/stores/src/providers/index.ts
@@ -1 +1,2 @@
 export { default as ExchangeRatesProvider } from './ExchangeRatesProvider';
+export { default as WebsiteStatusProvider } from './WebsiteStatusProvider';
diff --git a/packages/stores/src/storeProvider.tsx b/packages/stores/src/storeProvider.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
-import { ExchangeRatesProvider } from './providers';
 import StoreContext from './storeContext';
-import { ExchangeRatesStore, FeatureFlagsStore } from './stores';
+import { ExchangeRatesStore, FeatureFlagsStore, WebsiteStatusStore } from './stores';
+import { ExchangeRatesProvider, WebsiteStatusProvider } from './providers';
 import type { TCoreStores, TStores } from '../types';
 
 const StoreProvider = ({ children, store }: React.PropsWithChildren<{ store: TCoreStores }>) => {
@@ -14,6 +14,7 @@ const StoreProvider = ({ children, store }: React.PropsWithChildren<{ store: TCo
             ...store,
             exchange_rates: new ExchangeRatesStore(),
             feature_flags: new FeatureFlagsStore(),
+            website_status: new WebsiteStatusStore(),
         };
     }, [store]);
 
@@ -27,7 +28,9 @@ const StoreProvider = ({ children, store }: React.PropsWithChildren<{ store: TCo
 
     return (
         <StoreContext.Provider value={memoizedValue}>
-            <ExchangeRatesProvider>{children}</ExchangeRatesProvider>
+            <WebsiteStatusProvider>
+                <ExchangeRatesProvider>{children}</ExchangeRatesProvider>
+            </WebsiteStatusProvider>
         </StoreContext.Provider>
     );
 };

diff --git a/packages/stores/src/stores/WebsiteStatusStore.ts b/packages/stores/src/stores/WebsiteStatusStore.ts
@@ -0,0 +1,8 @@
+import type { ServerStatusResponse } from '@deriv/api-types';
+import BaseStore from './BaseStore';
+
+export default class WebsiteStatusStore extends BaseStore<ServerStatusResponse['website_status']> {
+    constructor() {
+        super('WebsiteStatusStore');
+    }
+}
diff --git a/packages/stores/src/stores/index.ts b/packages/stores/src/stores/index.ts
@@ -1,2 +1,3 @@
 export { default as ExchangeRatesStore } from './ExchangeRatesStore';
 export { default as FeatureFlagsStore } from './FeatureFlagsStore';
+export { default as WebsiteStatusStore } from './WebsiteStatusStore';
diff --git a/packages/stores/types.ts b/packages/stores/types.ts
@@ -14,7 +14,7 @@ import type {
 } from '@deriv/api-types';
 import type { Moment } from 'moment';
 import type { RouteComponentProps } from 'react-router';
-import type { ExchangeRatesStore, FeatureFlagsStore } from './src/stores';
+import type { ExchangeRatesStore, FeatureFlagsStore, WebsiteStatusStore } from './src/stores';
 
 type TPopulateSettingsExtensionsMenuItem = {
     icon: string;
@@ -498,5 +498,6 @@ export type TCoreStores = {
 
 export type TStores = TCoreStores & {
     exchange_rates: ExchangeRatesStore;
+    website_status: WebsiteStatusStore;
     feature_flags: FeatureFlagsStore;
 };