Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Niloofar / convert dmt5-trading-signals to ts #2464

Merged
1 commit merged into from
Jan 25, 2022
Merged

Niloofar / convert dmt5-trading-signals to ts #2464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions src/pages/dmt5-trading-signals/_how-to.js → src/pages/dmt5-trading-signals/_how-to.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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;
Expand Down Expand Up @@ -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"
Expand All @@ -87,8 +94,4 @@ const HowTo = ({ Steps, active_tab }) => {
)
}

HowTo.propTypes = {
active_tab: PropTypes.string,
Steps: PropTypes.func,
}
export default HowTo
15 changes: 12 additions & 3 deletions ...ges/dmt5-trading-signals/_signal-steps.js → ...es/dmt5-trading-signals/_signal-steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
<>
Expand Down Expand Up @@ -282,7 +291,7 @@ const SignalSteps = (active_tab) => {
)}
</Container>
)}
{active_tab.active_tab === 'signal-provider' && (
{signal_provider && (
<Container>
{is_mounted && (
<>
Expand Down
20 changes: 9 additions & 11 deletions src/pages/dmt5-trading-signals/_signal.js → src/pages/dmt5-trading-signals/_signal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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">
Expand All @@ -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,
}),
}
0 src/pages/dmt5-trading-signals/_style.js → src/pages/dmt5-trading-signals/_style.ts
View file
Open in desktop
File renamed without changes.
0 ...ges/dmt5-trading-signals/_subscription.js → ...es/dmt5-trading-signals/_subscription.tsx
View file
Open in desktop
File renamed without changes.
23 changes: 15 additions & 8 deletions src/pages/dmt5-trading-signals/index.js → src/pages/dmt5-trading-signals/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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) =>
Expand Down Expand Up @@ -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)
}, [])
Expand Down Expand Up @@ -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>
)
}
Expand Down