From 9779af4b483c429cff7eaeeb81aa4576035d961c Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Wed, 5 Jan 2022 16:56:22 +0330
Subject: [PATCH] convert dmt5-trading-signals to ts

---
 .../{_how-to.js => _how-to.tsx}               | 35 ++++++++++---------
 .../{_signal-steps.js => _signal-steps.tsx}   | 15 ++++++--
 .../{_signal.js => _signal.tsx}               | 20 +++++------
 .../{_style.js => _style.ts}                  |  0
 .../{_subscription.js => _subscription.tsx}   |  0
 .../{index.js => index.tsx}                   | 23 +++++++-----
 6 files changed, 55 insertions(+), 38 deletions(-)
 rename src/pages/dmt5-trading-signals/{_how-to.js => _how-to.tsx} (70%)
 rename src/pages/dmt5-trading-signals/{_signal-steps.js => _signal-steps.tsx} (97%)
 rename src/pages/dmt5-trading-signals/{_signal.js => _signal.tsx} (91%)
 rename src/pages/dmt5-trading-signals/{_style.js => _style.ts} (100%)
 rename src/pages/dmt5-trading-signals/{_subscription.js => _subscription.tsx} (100%)
 rename src/pages/dmt5-trading-signals/{index.js => index.tsx} (91%)

diff --git a/src/pages/dmt5-trading-signals/_how-to.js b/src/pages/dmt5-trading-signals/_how-to.tsx
similarity index 70%
rename from src/pages/dmt5-trading-signals/_how-to.js
rename to src/pages/dmt5-trading-signals/_how-to.tsx
index 408cbbf18fc..2faced68e24 100644
--- a/src/pages/dmt5-trading-signals/_how-to.js
+++ b/src/pages/dmt5-trading-signals/_how-to.tsx
@@ -1,11 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { localize, Localize } from 'components/localization'
 import { SectionContainer, Container } from 'components/containers'
 import { Header } from 'components/elements'
 import { LinkButton } from 'components/form'
 import device from 'themes/device.js'
+import SignalSteps from './_signal-steps'
+
+type HowToProps = {
+    active_tab: 'signal-subscriber' | 'signal-provider'
+}
 
 const content = {
     subscriber: {
@@ -16,12 +20,12 @@ const content = {
     },
 }
 
-const StyledSectionContainer = styled(SectionContainer)`
+const StyledSectionContainer = styled(SectionContainer)<HowToProps>`
     padding: 9.1rem 0 8rem 0;
-    background-color: ${(props) =>
-        props.active_tab === 'signal-subscriber' ? 'var(--color-grey-25)' : 'var(--color-white)'};
-    box-shadow: ${(props) =>
-        props.active_tab === 'signal-subscriber' ? 'none' : 'inset 0 1px 0 0 var(--color-grey-2);'};
+    background-color: ${({ active_tab }) =>
+        active_tab === 'signal-subscriber' ? 'var(--color-grey-25)' : 'var(--color-white)'};
+    box-shadow: ${({ active_tab }) =>
+        active_tab === 'signal-subscriber' ? 'none' : 'inset 0 1px 0 0 var(--color-grey-2);'};
 
     @media ${device.tabletL} {
         padding: 29px 0 40px 0;
@@ -60,17 +64,20 @@ const DMT5Button = styled(LinkButton)`
     }
 `
 
-const HowTo = ({ Steps, active_tab }) => {
+const HowTo = ({ active_tab }: HowToProps) => {
+    const [signal_subscriber, signal_provider] = [
+        active_tab === 'signal-subscriber',
+        active_tab === 'signal-provider',
+    ]
+
     return (
         <StyledSectionContainer active_tab={active_tab}>
             <StyledContainer justify="center" direction="column">
                 <StyledHeader as="h2">
-                    {active_tab === 'signal-subscriber'
-                        ? content.subscriber.header
-                        : content.provider.header}
+                    {signal_subscriber ? content.subscriber.header : content.provider.header}
                 </StyledHeader>
-                <Steps active_tab={active_tab} />
-                {active_tab === 'signal-provider' && (
+                <SignalSteps active_tab={active_tab} />
+                {signal_provider && (
                     <DMT5Button
                         secondary="true"
                         external="true"
@@ -87,8 +94,4 @@ const HowTo = ({ Steps, active_tab }) => {
     )
 }
 
-HowTo.propTypes = {
-    active_tab: PropTypes.string,
-    Steps: PropTypes.func,
-}
 export default HowTo
diff --git a/src/pages/dmt5-trading-signals/_signal-steps.js b/src/pages/dmt5-trading-signals/_signal-steps.tsx
similarity index 97%
rename from src/pages/dmt5-trading-signals/_signal-steps.js
rename to src/pages/dmt5-trading-signals/_signal-steps.tsx
index 438a4bd10a2..39d1f23f406 100644
--- a/src/pages/dmt5-trading-signals/_signal-steps.js
+++ b/src/pages/dmt5-trading-signals/_signal-steps.tsx
@@ -211,12 +211,21 @@ const query = graphql`
     }
 `
 
-const SignalSteps = (active_tab) => {
+type SignalStepsProps = {
+    active_tab: 'signal-subscriber' | 'signal-provider'
+}
+
+const SignalSteps = ({ active_tab }: SignalStepsProps) => {
     const data = useStaticQuery(query)
     const [is_mounted] = usePageLoaded(false) // needed to fix tab highlighting not being rerendered during first load
+    const [signal_subscriber, signal_provider] = [
+        active_tab === 'signal-subscriber',
+        active_tab === 'signal-provider',
+    ]
+
     return (
         <>
-            {active_tab.active_tab === 'signal-subscriber' && (
+            {signal_subscriber && (
                 <Container>
                     {is_mounted && (
                         <>
@@ -282,7 +291,7 @@ const SignalSteps = (active_tab) => {
                     )}
                 </Container>
             )}
-            {active_tab.active_tab === 'signal-provider' && (
+            {signal_provider && (
                 <Container>
                     {is_mounted && (
                         <>
diff --git a/src/pages/dmt5-trading-signals/_signal.js b/src/pages/dmt5-trading-signals/_signal.tsx
similarity index 91%
rename from src/pages/dmt5-trading-signals/_signal.js
rename to src/pages/dmt5-trading-signals/_signal.tsx
index 227312e2ca9..162dfae026c 100644
--- a/src/pages/dmt5-trading-signals/_signal.js
+++ b/src/pages/dmt5-trading-signals/_signal.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { Text, Header } from 'components/elements'
 import { SectionContainer, Flex } from 'components/containers'
 import device from 'themes/device'
@@ -105,7 +104,15 @@ const StyledChecklist = styled(Checklist)`
     }
 `
 
-export const Signal = ({ content }) => {
+type SignalProps = {
+    content: {
+        header: React.ReactElement
+        text: React.ReactElement
+        list: React.ReactElement[]
+    }
+}
+
+export const Signal = ({ content }: SignalProps) => {
     return (
         <StyledSection background="var(--color-white)">
             <Flex direction="column" max_width="99.6rem" m="0 auto" jc="space-between" ai="center">
@@ -127,12 +134,3 @@ export const Signal = ({ content }) => {
         </StyledSection>
     )
 }
-Signal.propTypes = {
-    content: PropTypes.shape({
-        header: PropTypes.string,
-        list: PropTypes.shape({
-            map: PropTypes.func,
-        }),
-        text: PropTypes.string,
-    }),
-}
diff --git a/src/pages/dmt5-trading-signals/_style.js b/src/pages/dmt5-trading-signals/_style.ts
similarity index 100%
rename from src/pages/dmt5-trading-signals/_style.js
rename to src/pages/dmt5-trading-signals/_style.ts
diff --git a/src/pages/dmt5-trading-signals/_subscription.js b/src/pages/dmt5-trading-signals/_subscription.tsx
similarity index 100%
rename from src/pages/dmt5-trading-signals/_subscription.js
rename to src/pages/dmt5-trading-signals/_subscription.tsx
diff --git a/src/pages/dmt5-trading-signals/index.js b/src/pages/dmt5-trading-signals/index.tsx
similarity index 91%
rename from src/pages/dmt5-trading-signals/index.js
rename to src/pages/dmt5-trading-signals/index.tsx
index 7163dc0d862..d0ce06cdbf6 100644
--- a/src/pages/dmt5-trading-signals/index.js
+++ b/src/pages/dmt5-trading-signals/index.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components'
 import { Hero, SmallContainer } from './_style'
 import HowTo from './_how-to'
 import { Signal } from './_signal'
-import SignalSteps from './_signal-steps'
 import Subscription from './_subscription'
 import { SEO, Flex, Box } from 'components/containers'
 import Layout from 'components/layout/layout'
@@ -66,7 +65,12 @@ const TabsContainer = styled(Flex)`
     }
 `
 
-const Item = styled.div`
+type ItemProps = {
+    active_tab: 'signal-subscriber' | 'signal-provider'
+    name: 'signal-subscriber' | 'signal-provider'
+}
+
+const Item = styled.div<ItemProps>`
     margin-top: 4rem;
     padding: 1.2rem 1.6rem;
     border-bottom: ${(props) =>
@@ -109,6 +113,11 @@ const Separator = styled.div`
 const DMT5TradingSignals = () => {
     const [active_tab, setActiveTab] = useTabStateQuery(['signal-subscriber', 'signal-provider'])
     const [is_mounted, setMounted] = useState(false) //needs to fix bug with hightlight of the 1st loading
+    const [signal_subscriber, signal_provider] = [
+        active_tab === 'signal-subscriber',
+        active_tab === 'signal-provider',
+    ]
+
     useEffect(() => {
         setMounted(true)
     }, [])
@@ -151,13 +160,11 @@ const DMT5TradingSignals = () => {
             </TabsContainer>
             <Box position="relative">
                 <Separator />
-                {active_tab === 'signal-subscriber' && (
-                    <Signal content={signal_content_subscriber} />
-                )}
-                {active_tab === 'signal-provider' && <Signal content={signal_content_provider} />}
+                {signal_subscriber && <Signal content={signal_content_subscriber} />}
+                {signal_provider && <Signal content={signal_content_provider} />}
             </Box>
-            <HowTo Steps={SignalSteps} active_tab={active_tab} />
-            {active_tab === 'signal-subscriber' && <Subscription />}
+            <HowTo active_tab={active_tab} />
+            {signal_subscriber && <Subscription />}
         </Layout>
     )
 }