From 4f7c07922350209626ad84a92614edd86c7cdefb Mon Sep 17 00:00:00 2001 From: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com> Date: Wed, 5 Jul 2023 20:25:44 +0800 Subject: [PATCH] Adrienne / integrated useSubscription hook for website status (#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 --- .../__tests__/cfd-server-error-dialog.spec.js | 9 ++++++ packages/core/src/Stores/client-store.js | 2 +- packages/stores/src/mockStore.ts | 5 ++++ .../src/providers/WebsiteStatusProvider.tsx | 29 +++++++++++++++++++ packages/stores/src/providers/index.ts | 1 + packages/stores/src/storeProvider.tsx | 9 ++++-- .../stores/src/stores/WebsiteStatusStore.ts | 8 +++++ packages/stores/src/stores/index.ts | 1 + packages/stores/types.ts | 3 +- 9 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 packages/stores/src/providers/WebsiteStatusProvider.tsx create mode 100644 packages/stores/src/stores/WebsiteStatusStore.ts 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 index dbe28275cdd0..c424c8a7ce38 100644 --- 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(' ', () => { let mockRootStore; beforeEach(() => { mockRootStore = { + client: { + is_authorize: false, + }, ui: { disableApp: jest.fn(), enableApp: jest.fn(), @@ -53,6 +56,9 @@ describe(' ', () => { 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(' ', () => { 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 index d7c1c6ca82fd..f3ed69fe216a 100644 --- 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 index a6d20e11ec82..0c0299471829 100644 --- 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 new file mode 100644 index 000000000000..42ad2e41fa90 --- /dev/null +++ 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) => { + 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 index ef166d8bd2b9..b998b4d94b35 100644 --- 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 index 73a35d0b28f3..67e8a02c849a 100644 --- 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 ( - {children} + + {children} + ); }; diff --git a/packages/stores/src/stores/WebsiteStatusStore.ts b/packages/stores/src/stores/WebsiteStatusStore.ts new file mode 100644 index 000000000000..5a10cc551026 --- /dev/null +++ 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 { + constructor() { + super('WebsiteStatusStore'); + } +} diff --git a/packages/stores/src/stores/index.ts b/packages/stores/src/stores/index.ts index 83324af5936b..1b725c02362d 100644 --- 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 index 0b8532114400..d10eb8d2a34b 100644 --- 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; };