From 3578324258b23c0bd930d128cb6514a9530e4ee8 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Thu, 16 Feb 2023 10:50:54 +0300 Subject: [PATCH 01/11] feat: add query parameter for dark mode --- packages/core/src/App/Containers/Routes/routes.jsx | 12 ++++++++++-- packages/shared/src/utils/url/url.ts | 12 ++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/core/src/App/Containers/Routes/routes.jsx b/packages/core/src/App/Containers/Routes/routes.jsx index df30a7ad900d..6e79b7a44ebf 100644 --- a/packages/core/src/App/Containers/Routes/routes.jsx +++ b/packages/core/src/App/Containers/Routes/routes.jsx @@ -4,7 +4,7 @@ import React from 'react'; import { withRouter } from 'react-router'; import Loadable from 'react-loadable'; import { UILoader } from '@deriv/components'; -import { urlForLanguage } from '@deriv/shared'; +import { urlForLanguage, urlForDark } from '@deriv/shared'; import { getLanguage } from '@deriv/translations'; import BinaryRoutes from 'App/Components/Routes'; import { connect } from 'Stores/connect'; @@ -23,6 +23,7 @@ const Routes = ({ error, has_error, history, + is_dark_mode_on, is_logged_in, is_logging_in, location, @@ -56,6 +57,10 @@ const Routes = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + React.useEffect(() => { + window.history.replaceState({}, document.title, urlForDark(is_dark_mode_on)); + }, [is_dark_mode_on]); + const lang = getLanguage(); const lang_regex = /[?&]lang=/; const has_lang = lang_regex.test(location.search); @@ -71,6 +76,7 @@ const Routes = ({ // shows up in the URL. This is not in sync // with the default language (EN), so we // will remove it. + // const if ((!has_lang && lang !== 'EN') || (has_lang && lang === 'EN')) { window.history.replaceState({}, document.title, urlForLanguage(lang)); } @@ -83,6 +89,7 @@ Routes.propTypes = { error: MobxPropTypes.objectOrObservableObject, has_error: PropTypes.bool, history: PropTypes.object, + is_dark_mode_on: PropTypes.bool, is_logged_in: PropTypes.bool, is_logging_in: PropTypes.bool, is_virtual: PropTypes.bool, @@ -95,7 +102,8 @@ Routes.propTypes = { // need to wrap withRouter around connect // to prevent updates on from being blocked export default withRouter( - connect(({ client, common }) => ({ + connect(({ client, common, ui }) => ({ + is_dark_mode_on: ui.is_dark_mode_on, is_logged_in: client.is_logged_in, is_logging_in: client.is_logging_in, error: common.error, diff --git a/packages/shared/src/utils/url/url.ts b/packages/shared/src/utils/url/url.ts index f7ef9304dbbb..57cc1054c811 100644 --- a/packages/shared/src/utils/url/url.ts +++ b/packages/shared/src/utils/url/url.ts @@ -35,6 +35,18 @@ export const urlForLanguage = (lang: string, url: string = window.location.href) return `${current_url}`; }; +export const urlForDark = (dark: boolean, url: string = window.location.href) => { + const current_url = new URL(url); + + if (dark) { + current_url.searchParams.set('dark', '1'); + } else { + current_url.searchParams.delete('dark'); + } + + return `${current_url}`; +}; + export const reset = () => { location_url = window?.location ?? location_url; }; From 9b24a19c700bece33641984460409cd506da3e9c Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Thu, 16 Feb 2023 11:22:58 +0300 Subject: [PATCH 02/11] chore: empty to start build again From 0b125f655880aed4e993b390044b11dce586a777 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Thu, 16 Feb 2023 11:32:29 +0300 Subject: [PATCH 03/11] fix: update dark query parameter for every render --- packages/core/src/App/Containers/Routes/routes.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/core/src/App/Containers/Routes/routes.jsx b/packages/core/src/App/Containers/Routes/routes.jsx index 6e79b7a44ebf..b826df0eab79 100644 --- a/packages/core/src/App/Containers/Routes/routes.jsx +++ b/packages/core/src/App/Containers/Routes/routes.jsx @@ -57,9 +57,10 @@ const Routes = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - React.useEffect(() => { - window.history.replaceState({}, document.title, urlForDark(is_dark_mode_on)); - }, [is_dark_mode_on]); + // React.useEffect(() => { + // window.history.replaceState({}, document.title, urlForDark(is_dark_mode_on)); + // // }, [is_dark_mode_on]); + // }); // need to update for every change const lang = getLanguage(); const lang_regex = /[?&]lang=/; @@ -76,11 +77,13 @@ const Routes = ({ // shows up in the URL. This is not in sync // with the default language (EN), so we // will remove it. - // const if ((!has_lang && lang !== 'EN') || (has_lang && lang === 'EN')) { window.history.replaceState({}, document.title, urlForLanguage(lang)); } + // need to update for every render + window.history.replaceState({}, document.title, urlForDark(is_dark_mode_on)); + return ; }; From ac2359a5e5c40f6507a76a16d09869ede32ac25a Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Thu, 16 Feb 2023 14:23:02 +0300 Subject: [PATCH 04/11] feat: combine lang and dark query --- .../core/src/App/Containers/Routes/routes.jsx | 15 +++++---------- packages/shared/src/utils/url/url.ts | 18 +++++++++++++----- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/core/src/App/Containers/Routes/routes.jsx b/packages/core/src/App/Containers/Routes/routes.jsx index b826df0eab79..afd002e7b852 100644 --- a/packages/core/src/App/Containers/Routes/routes.jsx +++ b/packages/core/src/App/Containers/Routes/routes.jsx @@ -4,7 +4,7 @@ import React from 'react'; import { withRouter } from 'react-router'; import Loadable from 'react-loadable'; import { UILoader } from '@deriv/components'; -import { urlForLanguage, urlForDark } from '@deriv/shared'; +import { urlSetQuery } from '@deriv/shared'; import { getLanguage } from '@deriv/translations'; import BinaryRoutes from 'App/Components/Routes'; import { connect } from 'Stores/connect'; @@ -57,11 +57,6 @@ const Routes = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - // React.useEffect(() => { - // window.history.replaceState({}, document.title, urlForDark(is_dark_mode_on)); - // // }, [is_dark_mode_on]); - // }); // need to update for every change - const lang = getLanguage(); const lang_regex = /[?&]lang=/; const has_lang = lang_regex.test(location.search); @@ -77,12 +72,12 @@ const Routes = ({ // shows up in the URL. This is not in sync // with the default language (EN), so we // will remove it. + let langQuery = ''; if ((!has_lang && lang !== 'EN') || (has_lang && lang === 'EN')) { - window.history.replaceState({}, document.title, urlForLanguage(lang)); + langQuery = lang; } - - // need to update for every render - window.history.replaceState({}, document.title, urlForDark(is_dark_mode_on)); + // replace state + window.history.replaceState({}, document.title, urlSetQuery({ lang: langQuery, dark: is_dark_mode_on ? '1' : '' })); return ; }; diff --git a/packages/shared/src/utils/url/url.ts b/packages/shared/src/utils/url/url.ts index 57cc1054c811..e4c9244252a3 100644 --- a/packages/shared/src/utils/url/url.ts +++ b/packages/shared/src/utils/url/url.ts @@ -9,6 +9,11 @@ type TOption = { language?: string; }; +type TQueryObj = { + dark: string; + lang: string; +}; + const default_domain = 'binary.com'; const host_map = { // the exceptions regarding updating the URLs @@ -35,13 +40,16 @@ export const urlForLanguage = (lang: string, url: string = window.location.href) return `${current_url}`; }; -export const urlForDark = (dark: boolean, url: string = window.location.href) => { +export const urlSetQuery = (queryObj: TQueryObj, url: string = window.location.href) => { const current_url = new URL(url); - if (dark) { - current_url.searchParams.set('dark', '1'); - } else { - current_url.searchParams.delete('dark'); + // eslint-disable-next-line no-restricted-syntax + for (const [key, value] of Object.entries(queryObj)) { + if (value) { + current_url.searchParams.set(key, value); + } else { + current_url.searchParams.delete(key); + } } return `${current_url}`; From aa25f72b7d3edc70d2d5b8c2bb78ca79acc8e429 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Thu, 16 Feb 2023 15:33:09 +0300 Subject: [PATCH 05/11] feat: change logic of getting lang_from_url in client-store --- .../core/src/App/Containers/Routes/routes.jsx | 15 ++++++--------- packages/core/src/Stores/client-store.js | 3 ++- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/core/src/App/Containers/Routes/routes.jsx b/packages/core/src/App/Containers/Routes/routes.jsx index afd002e7b852..f28fef72fabb 100644 --- a/packages/core/src/App/Containers/Routes/routes.jsx +++ b/packages/core/src/App/Containers/Routes/routes.jsx @@ -58,8 +58,6 @@ const Routes = ({ }, []); const lang = getLanguage(); - const lang_regex = /[?&]lang=/; - const has_lang = lang_regex.test(location.search); if (has_error) { return ; @@ -71,13 +69,12 @@ const Routes = ({ // non-supported language, the language still // shows up in the URL. This is not in sync // with the default language (EN), so we - // will remove it. - let langQuery = ''; - if ((!has_lang && lang !== 'EN') || (has_lang && lang === 'EN')) { - langQuery = lang; - } - // replace state - window.history.replaceState({}, document.title, urlSetQuery({ lang: langQuery, dark: is_dark_mode_on ? '1' : '' })); + // will remove it. (The same thing for dark_mode) + window.history.replaceState( + {}, + document.title, + urlSetQuery({ lang: lang !== 'EN' ? lang : '', dark: is_dark_mode_on ? '1' : '' }) + ); return ; }; diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js index 12a4d03fe9e1..740d6df0e531 100644 --- a/packages/core/src/Stores/client-store.js +++ b/packages/core/src/Stores/client-store.js @@ -409,7 +409,8 @@ export default class ClientStore extends BaseStore { () => [this.account_settings], () => { const { trading_hub } = this.account_settings; - const lang_from_url = window.location.search.slice(-2); + const lang_from_url = new URL(window.location.href).searchParams.get('lang'); + this.is_pre_appstore = !!trading_hub; localStorage.setItem('is_pre_appstore', !!trading_hub); if (lang_from_url) { From f83acf6f4eb3725cb9c53f52322e8b925521350a Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Thu, 16 Feb 2023 16:15:27 +0300 Subject: [PATCH 06/11] feat: sort query parameters --- packages/shared/src/utils/url/url.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/shared/src/utils/url/url.ts b/packages/shared/src/utils/url/url.ts index e4c9244252a3..7ea48bde887d 100644 --- a/packages/shared/src/utils/url/url.ts +++ b/packages/shared/src/utils/url/url.ts @@ -52,6 +52,8 @@ export const urlSetQuery = (queryObj: TQueryObj, url: string = window.location.h } } + current_url.searchParams.sort(); + return `${current_url}`; }; From 596d6832f135fe4a3a923aa66a122cae0e9c02e0 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Wed, 22 Feb 2023 17:48:56 +0300 Subject: [PATCH 07/11] feat: reinit livechat when query parameters change --- .../src/App/Components/Elements/LiveChat/use-livechat.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts index 33b56e0b4e48..f2201600b689 100644 --- a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts +++ b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts @@ -101,6 +101,11 @@ const useLiveChat = (has_cookie_account = false) => { }); }; + useEffect(() => { + onHistoryChange(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [window.location.search]); + useEffect(() => { history.listen(onHistoryChange); From fea0c16a9c1fc939cf0827b1976c3fa6505fa92f Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Fri, 24 Feb 2023 12:14:12 +0300 Subject: [PATCH 08/11] refactor: apply Farzins suggestions --- .../src/App/Components/Elements/LiveChat/use-livechat.ts | 2 +- packages/core/src/App/Containers/Routes/routes.jsx | 2 +- packages/shared/src/utils/url/url.ts | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts index f2201600b689..a845a485bcc7 100644 --- a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts +++ b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts @@ -104,7 +104,7 @@ const useLiveChat = (has_cookie_account = false) => { useEffect(() => { onHistoryChange(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [window.location.search]); + }, [window.location.search, onHistoryChange]); useEffect(() => { history.listen(onHistoryChange); diff --git a/packages/core/src/App/Containers/Routes/routes.jsx b/packages/core/src/App/Containers/Routes/routes.jsx index f28fef72fabb..2765c6f935f8 100644 --- a/packages/core/src/App/Containers/Routes/routes.jsx +++ b/packages/core/src/App/Containers/Routes/routes.jsx @@ -73,7 +73,7 @@ const Routes = ({ window.history.replaceState( {}, document.title, - urlSetQuery({ lang: lang !== 'EN' ? lang : '', dark: is_dark_mode_on ? '1' : '' }) + urlSetQuery({ lang: lang.replace('EN', ''), dark: Number(is_dark_mode_on) }) ); return ; diff --git a/packages/shared/src/utils/url/url.ts b/packages/shared/src/utils/url/url.ts index 4c27ac1a7561..db6c0729df24 100644 --- a/packages/shared/src/utils/url/url.ts +++ b/packages/shared/src/utils/url/url.ts @@ -43,18 +43,18 @@ export const urlForLanguage = (lang: string, url: string = window.location.href) export const urlSetQuery = (queryObj: TQueryObj, url: string = window.location.href) => { const current_url = new URL(url); - // eslint-disable-next-line no-restricted-syntax - for (const [key, value] of Object.entries(queryObj)) { + Object.entries(queryObj).forEach(element => { + const [key, value] = element; if (value) { current_url.searchParams.set(key, value); } else { current_url.searchParams.delete(key); } - } + }); current_url.searchParams.sort(); - return `${current_url}`; + return current_url.toString(); }; export const reset = () => { From a896270efaef96d887d05c4162a77417e768e6f8 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Mon, 13 Mar 2023 11:34:44 +0300 Subject: [PATCH 09/11] feat: add search_params const --- .../core/src/App/Components/Elements/LiveChat/use-livechat.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts index a845a485bcc7..a756758d325b 100644 --- a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts +++ b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts @@ -9,6 +9,7 @@ const useLiveChat = (has_cookie_account = false) => { const [isReady, setIsReady] = useState(false); const [reload, setReload] = useState(false); const history = useHistory(); + const search_params = window.location.search; const liveChatDeletion = () => new Promise(resolve => { @@ -103,8 +104,7 @@ const useLiveChat = (has_cookie_account = false) => { useEffect(() => { onHistoryChange(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [window.location.search, onHistoryChange]); + }, [search_params, onHistoryChange]); useEffect(() => { history.listen(onHistoryChange); From 42de21bba4bef22ae34a1e5c782171a16897ccbc Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Thu, 23 Mar 2023 09:47:23 +0300 Subject: [PATCH 10/11] feat: change window.location.search to useParams --- .../App/Components/Elements/LiveChat/use-livechat.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts index a756758d325b..08155b3d3d51 100644 --- a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts +++ b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts @@ -1,15 +1,20 @@ import { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router'; +import { useHistory, useParams } from 'react-router'; import { liveChatInitialization } from './live-chat'; import Cookies from 'js-cookie'; import { deriv_urls } from '@deriv/shared'; +type TQueryParams = { + lang: string; + dark: string; +}; + // Todo: Should break this into smaller hooks or utility functions. const useLiveChat = (has_cookie_account = false) => { const [isReady, setIsReady] = useState(false); const [reload, setReload] = useState(false); const history = useHistory(); - const search_params = window.location.search; + const { lang, dark } = useParams(); const liveChatDeletion = () => new Promise(resolve => { @@ -104,7 +109,7 @@ const useLiveChat = (has_cookie_account = false) => { useEffect(() => { onHistoryChange(); - }, [search_params, onHistoryChange]); + }, [lang, dark, onHistoryChange]); useEffect(() => { history.listen(onHistoryChange); From 9f52a18c951f5c6f7d3d1e629d9c99113c25d408 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski Date: Fri, 7 Apr 2023 14:35:14 +0300 Subject: [PATCH 11/11] refactor: delete empty lines --- .../core/src/App/Components/Elements/LiveChat/use-livechat.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts index d63e623cbfe7..0f211ee8d22d 100644 --- a/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts +++ b/packages/core/src/App/Components/Elements/LiveChat/use-livechat.ts @@ -16,7 +16,7 @@ const useLiveChat = (has_cookie_account = false) => { const history = useHistory(); const { lang, dark } = useParams(); const widget = window.LiveChatWidget; - + const liveChatDeletion = () => new Promise(resolve => { if (window.LiveChatWidget) { @@ -111,7 +111,7 @@ const useLiveChat = (has_cookie_account = false) => { useEffect(() => { onHistoryChange(); }, [lang, dark, onHistoryChange]); - + useEffect(() => { if (isReady && !widget) { onHistoryChange();