From 1c8b29b8f49c49ef11ae22c57d4bff1181c9c6e1 Mon Sep 17 00:00:00 2001 From: alamin-deriv Date: Wed, 29 Dec 2021 06:04:19 +0100 Subject: [PATCH 1/6] working on converting Dtrader page to TS --- src/pages/dtrader/{_dtrader-video.js => _dtrader-video.tsx} | 0 src/pages/dtrader/{index.js => index.tsx} | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/pages/dtrader/{_dtrader-video.js => _dtrader-video.tsx} (100%) rename src/pages/dtrader/{index.js => index.tsx} (98%) diff --git a/src/pages/dtrader/_dtrader-video.js b/src/pages/dtrader/_dtrader-video.tsx similarity index 100% rename from src/pages/dtrader/_dtrader-video.js rename to src/pages/dtrader/_dtrader-video.tsx diff --git a/src/pages/dtrader/index.js b/src/pages/dtrader/index.tsx similarity index 98% rename from src/pages/dtrader/index.js rename to src/pages/dtrader/index.tsx index 7dbc521bef0..20b2901751e 100644 --- a/src/pages/dtrader/index.js +++ b/src/pages/dtrader/index.tsx @@ -14,7 +14,7 @@ import DTraderBG from 'images/svg/dtrader/dtrader-bg.svg' import BackgroundPatternTrader from 'images/common/bg_banner_trader.png' import DHero from 'components/custom/_dhero.js' import DNumber from 'components/custom/_dnumbers.js' -const DtraderVideo = Loadable(() => import('./_dtrader-video.js')) +const DtraderVideo = Loadable(() => import('./_dtrader-video')) const DTrading = Loadable(() => import('components/custom/_dtrading.js')) const DBanner = Loadable(() => import('components/custom/_dbanner.js')) const DHowItWorks = Loadable(() => import('components/custom/_dhow-it-works.js')) From e60e5b24945637ae51eba8a81295f782c25e5987 Mon Sep 17 00:00:00 2001 From: alamin-deriv Date: Wed, 29 Dec 2021 21:14:27 +0100 Subject: [PATCH 2/6] convert DTrader page to TS --- src/pages/dtrader/_dtrader-video.tsx | 16 +++++++++++----- src/pages/dtrader/index.tsx | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/pages/dtrader/_dtrader-video.tsx b/src/pages/dtrader/_dtrader-video.tsx index e7c44ebd670..a9571abaee1 100644 --- a/src/pages/dtrader/_dtrader-video.tsx +++ b/src/pages/dtrader/_dtrader-video.tsx @@ -7,6 +7,10 @@ import device from 'themes/device.js' import { isBrowser } from 'common/utility' import { LinkButton } from 'components/form' +type StepCommonType = { + no_margin: boolean +} + const Container = styled.section` width: 100%; display: flex; @@ -41,7 +45,8 @@ const TabsWrapper = styled.div` margin-top: 0; } ` -const StepCommon = css` + +const StepCommon = css` font-weight: 500; cursor: pointer; padding-left: 1.8rem; @@ -104,8 +109,9 @@ const GotoLiveWrapper = styled.div` margin: 4rem auto; } ` + class DtraderTabs extends React.Component { - my_ref = React.createRef() + my_ref = React.createRef() interval_ref = undefined state = { current_time: 0, @@ -143,7 +149,7 @@ class DtraderTabs extends React.Component { this.updatePlay() this.observer.observe(node) - const is_ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream + const is_ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'] this.setState({ is_ios }) } @@ -153,7 +159,7 @@ class DtraderTabs extends React.Component { } updatePlay = async () => { - if (!this.my_ref.current.is_playing) { + if (!this.my_ref.current['is_playing']) { try { await this.my_ref.current.play() } catch (err) { @@ -262,7 +268,7 @@ class DtraderTabs extends React.Component { controls={this.state.is_ios} preload="metadata" muted - playsinline + playsInline > diff --git a/src/pages/dtrader/index.tsx b/src/pages/dtrader/index.tsx index 20b2901751e..c0ab1028289 100644 --- a/src/pages/dtrader/index.tsx +++ b/src/pages/dtrader/index.tsx @@ -72,7 +72,7 @@ const PlatformContainer = styled.div` padding: 8rem 0; ` const Dtrader = () => { - const [is_mobile, setMobile] = useState('') + const [is_mobile, setMobile] = useState('') const handleResizeWindow = () => { setMobile(isBrowser() ? window.screen.width <= size.mobileL : false) From 388b2c4d89e4b9e64dc4e7d048a0538d88c5d83a Mon Sep 17 00:00:00 2001 From: alamin-deriv Date: Wed, 29 Dec 2021 22:31:15 +0100 Subject: [PATCH 3/6] fixed code smell --- src/pages/academy/blog/index.js | 2 +- src/pages/academy/videos/index.js | 2 +- src/pages/dtrader/{_dtrader-video.tsx => DtraderTabs.tsx} | 0 src/pages/dtrader/index.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename src/pages/dtrader/{_dtrader-video.tsx => DtraderTabs.tsx} (100%) diff --git a/src/pages/academy/blog/index.js b/src/pages/academy/blog/index.js index b98831fe73a..46a8c42c203 100644 --- a/src/pages/academy/blog/index.js +++ b/src/pages/academy/blog/index.js @@ -54,7 +54,7 @@ const StyledHeader = styled(Header)` const ArticlesPage = ({ data }) => { const { is_eu_country } = React.useContext(DerivStore) const article_data = is_eu_country - ? data.directus.blog.filter((item) => item.hide_for_eu == false) + ? data.directus.blog.filter((item) => !item.hide_for_eu) : data.directus.blog const meta_attributes = { diff --git a/src/pages/academy/videos/index.js b/src/pages/academy/videos/index.js index d087fc664d0..5fabb98ffce 100644 --- a/src/pages/academy/videos/index.js +++ b/src/pages/academy/videos/index.js @@ -54,7 +54,7 @@ const StyledHeader = styled(Header)` const VideosPage = ({ data }) => { const { is_eu_country } = React.useContext(DerivStore) const video_data = is_eu_country - ? data.directus.videos.filter((item) => item.hide_for_eu == false) + ? data.directus.videos.filter((item) => !item.hide_for_eu) : data.directus.videos const meta_attributes = { og_title: 'Platform tours, webinars, and more.', diff --git a/src/pages/dtrader/_dtrader-video.tsx b/src/pages/dtrader/DtraderTabs.tsx similarity index 100% rename from src/pages/dtrader/_dtrader-video.tsx rename to src/pages/dtrader/DtraderTabs.tsx diff --git a/src/pages/dtrader/index.tsx b/src/pages/dtrader/index.tsx index c0ab1028289..3c5888fdbe9 100644 --- a/src/pages/dtrader/index.tsx +++ b/src/pages/dtrader/index.tsx @@ -14,7 +14,7 @@ import DTraderBG from 'images/svg/dtrader/dtrader-bg.svg' import BackgroundPatternTrader from 'images/common/bg_banner_trader.png' import DHero from 'components/custom/_dhero.js' import DNumber from 'components/custom/_dnumbers.js' -const DtraderVideo = Loadable(() => import('./_dtrader-video')) +const DtraderVideo = Loadable(() => import('./DtraderTabs')) const DTrading = Loadable(() => import('components/custom/_dtrading.js')) const DBanner = Loadable(() => import('components/custom/_dbanner.js')) const DHowItWorks = Loadable(() => import('components/custom/_dhow-it-works.js')) From cb4259f4554e1c840f870be387ea7e59219b325d Mon Sep 17 00:00:00 2001 From: alamin-deriv Date: Thu, 30 Dec 2021 14:54:42 +0100 Subject: [PATCH 4/6] address PR comment --- src/pages/dtrader/{DtraderTabs.tsx => _dtrader-video.tsx} | 0 src/pages/dtrader/index.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/pages/dtrader/{DtraderTabs.tsx => _dtrader-video.tsx} (100%) diff --git a/src/pages/dtrader/DtraderTabs.tsx b/src/pages/dtrader/_dtrader-video.tsx similarity index 100% rename from src/pages/dtrader/DtraderTabs.tsx rename to src/pages/dtrader/_dtrader-video.tsx diff --git a/src/pages/dtrader/index.tsx b/src/pages/dtrader/index.tsx index 3c5888fdbe9..c0ab1028289 100644 --- a/src/pages/dtrader/index.tsx +++ b/src/pages/dtrader/index.tsx @@ -14,7 +14,7 @@ import DTraderBG from 'images/svg/dtrader/dtrader-bg.svg' import BackgroundPatternTrader from 'images/common/bg_banner_trader.png' import DHero from 'components/custom/_dhero.js' import DNumber from 'components/custom/_dnumbers.js' -const DtraderVideo = Loadable(() => import('./DtraderTabs')) +const DtraderVideo = Loadable(() => import('./_dtrader-video')) const DTrading = Loadable(() => import('components/custom/_dtrading.js')) const DBanner = Loadable(() => import('components/custom/_dbanner.js')) const DHowItWorks = Loadable(() => import('components/custom/_dhow-it-works.js')) From 8deb6dc781866174e22fd4750143177e53c67a04 Mon Sep 17 00:00:00 2001 From: alamin-deriv Date: Fri, 31 Dec 2021 09:37:25 +0100 Subject: [PATCH 5/6] address PR comment --- src/pages/dtrader/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dtrader/index.tsx b/src/pages/dtrader/index.tsx index c0ab1028289..1c2cfb6a102 100644 --- a/src/pages/dtrader/index.tsx +++ b/src/pages/dtrader/index.tsx @@ -72,7 +72,7 @@ const PlatformContainer = styled.div` padding: 8rem 0; ` const Dtrader = () => { - const [is_mobile, setMobile] = useState('') + const [is_mobile, setMobile] = useState(false) const handleResizeWindow = () => { setMobile(isBrowser() ? window.screen.width <= size.mobileL : false) From 361c63ca9c30514619f2daf3dd7f5aabe5be31b5 Mon Sep 17 00:00:00 2001 From: alamin-deriv Date: Mon, 3 Jan 2022 06:16:38 +0100 Subject: [PATCH 6/6] Address Pr comments --- src/pages/dtrader/{_dtrader-video.tsx => _dtrader-tabs.tsx} | 0 src/pages/dtrader/index.tsx | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/pages/dtrader/{_dtrader-video.tsx => _dtrader-tabs.tsx} (100%) diff --git a/src/pages/dtrader/_dtrader-video.tsx b/src/pages/dtrader/_dtrader-tabs.tsx similarity index 100% rename from src/pages/dtrader/_dtrader-video.tsx rename to src/pages/dtrader/_dtrader-tabs.tsx diff --git a/src/pages/dtrader/index.tsx b/src/pages/dtrader/index.tsx index 1c2cfb6a102..798ca9e51a2 100644 --- a/src/pages/dtrader/index.tsx +++ b/src/pages/dtrader/index.tsx @@ -14,7 +14,7 @@ import DTraderBG from 'images/svg/dtrader/dtrader-bg.svg' import BackgroundPatternTrader from 'images/common/bg_banner_trader.png' import DHero from 'components/custom/_dhero.js' import DNumber from 'components/custom/_dnumbers.js' -const DtraderVideo = Loadable(() => import('./_dtrader-video')) +const DtraderVideo = Loadable(() => import('./_dtrader-tabs')) const DTrading = Loadable(() => import('components/custom/_dtrading.js')) const DBanner = Loadable(() => import('components/custom/_dbanner.js')) const DHowItWorks = Loadable(() => import('components/custom/_dhow-it-works.js')) @@ -72,7 +72,7 @@ const PlatformContainer = styled.div` padding: 8rem 0; ` const Dtrader = () => { - const [is_mobile, setMobile] = useState(false) + const [is_mobile, setMobile] = useState(false) const handleResizeWindow = () => { setMobile(isBrowser() ? window.screen.width <= size.mobileL : false)