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.

Commit 6afeaa9

Browse files
author
NikitaK-deriv
authored
NikitaK/ Convert help centre to ts 52484 (#2404)
* refactoring help-centre page in typescript * in a way to end * need check all_categories * some changes cant run app * some changes cant run app * some changes cant run app * some changes cant run app * refactoring help-centre in typescript without answering components * made types more cleaner. deleted custom file because this realized in latest master * replaced interface on type * fix code smell. return utility to non-type file * return utility back to .js * resolved some mistakes * fix that app didnt run * try to fix cognitive complexity * try to fix cognitive complexity issue * refactoring code with new component. try to solve cognitive complexity * resolving issue about hard reading types * refactoring class component to function * refactoring class component to function * continue refactoring * refactoring from class component to functional. move from js to tsx * delete useless file * change naming by comments * fix that derivx didnt show. type utility
1 parent 7b320ef commit 6afeaa9

File tree

10 files changed

+581
-542
lines changed

10 files changed

+581
-542
lines changed

‎src/pages/help-centre/_article-component.tsx

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
import React from 'react'
2+
import styled, { css } from 'styled-components'
3+
import { convertToHash } from './_utility'
4+
import { Header, Text } from 'components/elements'
5+
import { LocalizedLink, Localize } from 'components/localization'
6+
import device from 'themes/device'
7+
8+
type StyledProps = {
9+
should_show_item?: boolean
10+
}
11+
12+
type TranslateTextType = {
13+
translate_text: string
14+
}
15+
16+
type CategoryType = {
17+
props: TranslateTextType
18+
translate_text: string
19+
is_expanded: boolean
20+
is_eu_country?: boolean
21+
}
22+
23+
type ArticleType = {
24+
category: string
25+
label: string
26+
title: CategoryType
27+
title_eu: boolean
28+
label_eu: boolean
29+
}
30+
31+
type ItemType = {
32+
category: CategoryType
33+
articles: ArticleType[]
34+
}
35+
36+
type ArticleComponentProps = {
37+
idx: number
38+
id: number
39+
item: ItemType
40+
all_categories: CategoryType
41+
toggleArticle: (arg: string) => void
42+
is_eu_country: boolean
43+
}
44+
45+
const ArticleDiv = styled.div`
46+
width: 100%;
47+
display: flex;
48+
flex-direction: column;
49+
`
50+
const Platforms = styled(Text)`
51+
font-size: var(--text-size-s);
52+
color: var(--color-grey-5);
53+
margin: 4rem 0 -3.2rem;
54+
55+
@media ${device.tablet} {
56+
color: var(--color-black-3);
57+
font-size: 24px;
58+
font-weight: bold;
59+
margin: 32px auto -32px;
60+
}
61+
`
62+
const ListWrapper = styled.div`
63+
margin-right: 2.4rem;
64+
max-width: 38.4rem;
65+
width: 38.4rem;
66+
line-height: 1.5;
67+
68+
@media ${device.laptopL} {
69+
max-width: auto;
70+
width: auto;
71+
}
72+
@media ${device.tabletL} {
73+
padding-top: 3.55rem;
74+
}
75+
`
76+
const margin = ({ row, col }) => {
77+
let margin_top = '4rem'
78+
switch (row) {
79+
case 0:
80+
margin_top = '8rem'
81+
break
82+
case 1:
83+
margin_top = col ? '7.2rem' : margin_top
84+
break
85+
}
86+
return css`
87+
margin-top: ${margin_top};
88+
`
89+
}
90+
91+
const StyledHeader = styled(Header)`
92+
font-size: 2.4rem;
93+
margin-bottom: 1.6rem;
94+
${margin};
95+
96+
@media ${device.mobileL} {
97+
margin-top: 40px;
98+
}
99+
`
100+
const ListNoBullets = styled.ul`
101+
margin-bottom: 1.6rem;
102+
list-style: none;
103+
104+
li {
105+
max-width: 38.4rem;
106+
}
107+
> *:not(:last-child) {
108+
padding-bottom: 1.6rem;
109+
}
110+
`
111+
112+
const ShowItem = styled.li<StyledProps>`
113+
display: ${(props) => (props.should_show_item ? 'block' : 'none')};
114+
`
115+
116+
const StyledLink = styled(LocalizedLink)`
117+
text-decoration: none;
118+
color: var(--color-black-3);
119+
font-size: 16px;
120+
121+
:hover {
122+
color: red;
123+
text-decoration: underline;
124+
}
125+
`
126+
const StyledView = styled.div`
127+
text-decoration: none;
128+
color: var(--color-red);
129+
font-size: 16px;
130+
font-weight: normal;
131+
132+
:hover {
133+
cursor: pointer;
134+
}
135+
`
136+
137+
const HeaderPlatforms = styled.div`
138+
margin: 6.2rem 0 -3.2rem;
139+
140+
@media ${device.tablet} {
141+
margin: 32px auto -32px;
142+
}
143+
`
144+
145+
const ArticleComponent = ({
146+
idx,
147+
id,
148+
item,
149+
all_categories,
150+
toggleArticle,
151+
is_eu_country,
152+
}: ArticleComponentProps) => {
153+
return (
154+
<ArticleDiv key={idx}>
155+
{id === 1 && idx == 0 && <Platforms>Platforms</Platforms>}
156+
{id === 1 && idx !== 0 && <HeaderPlatforms />}
157+
158+
<ListWrapper>
159+
<StyledHeader type="section-title">{item.category}</StyledHeader>
160+
{item.articles.map((ar, idxb) => {
161+
const category_is_expanded =
162+
ar.category in all_categories && all_categories[ar.category].is_expanded
163+
const should_show_item = idxb < 3 || category_is_expanded
164+
const can_expand = item.articles.length > 3
165+
const should_show_expand = !category_is_expanded && can_expand && idxb === 3
166+
const should_show_collapse =
167+
category_is_expanded && can_expand && idxb === item.articles.length - 1
168+
const title_type = is_eu_country && ar.title_eu ? ar.title_eu : ar.title
169+
170+
const label_type = is_eu_country && ar.label_eu ? ar.label_eu : ar.label
171+
172+
return (
173+
<ListNoBullets key={idxb}>
174+
<ShowItem should_show_item={should_show_item}>
175+
<StyledLink
176+
to={convertToHash(
177+
item.category.props.translate_text,
178+
label_type,
179+
)}
180+
>
181+
{title_type}
182+
</StyledLink>
183+
</ShowItem>
184+
185+
{(should_show_expand || should_show_collapse) && (
186+
<li>
187+
<StyledView onClick={() => toggleArticle(ar.category)}>
188+
{should_show_expand ? (
189+
<Localize
190+
translate_text="<0>View all questions</0>"
191+
components={[<p key={0} />]}
192+
/>
193+
) : (
194+
<Localize
195+
translate_text="<0>View fewer questions</0>"
196+
components={[<p key={0} />]}
197+
/>
198+
)}
199+
</StyledView>
200+
</li>
201+
)}
202+
</ListNoBullets>
203+
)
204+
})}
205+
</ListWrapper>
206+
</ArticleDiv>
207+
)
208+
}
209+
210+
export default ArticleComponent

‎src/pages/help-centre/_community.js renamed to ‎src/pages/help-centre/_community.tsx

File renamed without changes.

‎src/pages/help-centre/_didnt-find-answer.js renamed to ‎src/pages/help-centre/_didnt-find-answer.tsx

File renamed without changes.

‎src/pages/help-centre/_faq-schema.js renamed to ‎src/pages/help-centre/_faq-schema.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
11
import { localize } from 'components/localization'
22

3-
export const faq_schema = {
3+
type AcceptedAnswerType = {
4+
'@type': string
5+
text: string
6+
}
7+
8+
type MainEntityType = {
9+
'@type': string
10+
name: string
11+
acceptedAnswer: AcceptedAnswerType
12+
acceptedAnswerEU?: AcceptedAnswerType
13+
}
14+
15+
type FaqSchemaType = {
16+
'@context': string
17+
'@type': string
18+
mainEntity: MainEntityType[]
19+
}
20+
21+
export const faq_schema: FaqSchemaType = {
422
'@context': 'https://schema.org',
523
'@type': 'FAQPage',
624
mainEntity: [

‎src/pages/help-centre/_help-articles.js renamed to ‎src/pages/help-centre/_help-articles.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
import React from 'react'
22
import { Localize } from 'components/localization'
3-
export const articles = [
3+
4+
type ArticlesByCategoryType = {
5+
title?: React.ReactElement
6+
category?: string
7+
sub_category?: React.ReactElement
8+
label?: string
9+
title_eu?: React.ReactElement
10+
label_eu?: string
11+
}[]
12+
13+
export type ArcticlesType = {
14+
category: React.ReactElement
15+
articles: ArticlesByCategoryType
16+
}
17+
18+
export const articles: ArcticlesType[] = [
419
{
520
category: <Localize translate_text="Account" />,
621
articles: [
@@ -180,7 +195,6 @@ export const articles = [
180195
},
181196
],
182197
},
183-
184198
{
185199
category: <Localize translate_text="DMT5" />,
186200
articles: [
@@ -321,7 +335,6 @@ export const articles = [
321335
sub_category: <Localize translate_text="Platforms" />,
322336
label: 'deriv-x-account-information',
323337
},
324-
// TODO: uncomment this once deriv x real is ready
325338
{
326339
title: (
327340
<Localize translate_text="How can I deposit funds into my Deriv X real money account?" />

‎src/pages/help-centre/_help-centre-style.js renamed to ‎src/pages/help-centre/_help-centre-style.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ import { Text, Header } from 'components/elements'
33
import { LocalizedLink } from 'components/localization'
44
import device from 'themes/device'
55

6-
export const ArticleWrapper = styled.div`
6+
type ArticleWrapperProps = {
7+
margin_left?: string
8+
}
9+
10+
export const ArticleWrapper = styled.div<ArticleWrapperProps>`
711
max-width: 71.2rem;
812
display: flex;
913
flex-direction: column;

‎src/pages/help-centre/_search-results.js renamed to ‎src/pages/help-centre/_search-results.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
11
import React from 'react'
2-
import PropTypes from 'prop-types'
32
import styled from 'styled-components'
43
import { convertToHash } from './_utility'
54
import { Text, Header, LocalizedLinkText } from 'components/elements'
65
import { localize } from 'components/localization'
76
import device from 'themes/device'
87

8+
type TopicsType = {
9+
category: string
10+
label: string
11+
title: string | React.ReactElement
12+
}
13+
14+
type SearchSuccessProps = {
15+
suggested_topics: TopicsType[] | string[]
16+
max_length: number
17+
}
18+
19+
type SearchErrorProps = {
20+
search: string
21+
}
22+
923
export const Li = styled(Text).attrs({
1024
as: 'li',
1125
})``
@@ -73,7 +87,7 @@ const StyledLink = styled(LocalizedLinkText)`
7387
text-decoration: underline;
7488
}
7589
`
76-
export const SearchSuccess = ({ suggested_topics, max_length }) => (
90+
export const SearchSuccess = ({ suggested_topics, max_length }: SearchSuccessProps) => (
7791
<>
7892
<Header as="h3" type="section-title" color="black">
7993
{localize('Topic suggestions')}
@@ -90,13 +104,8 @@ export const SearchSuccess = ({ suggested_topics, max_length }) => (
90104
))}
91105
</>
92106
)
93-
SearchSuccess.propTypes = {
94-
max_length: PropTypes.number,
95-
onClick: PropTypes.func,
96-
suggested_topics: PropTypes.array,
97-
}
98107

99-
export const SearchError = ({ search }) => (
108+
export const SearchError = ({ search }: SearchErrorProps) => (
100109
<>
101110
<ErrorHeader
102111
as="h5"
@@ -119,6 +128,3 @@ export const SearchError = ({ search }) => (
119128
</Ul>
120129
</>
121130
)
122-
SearchError.propTypes = {
123-
search: PropTypes.string,
124-
}

‎src/pages/help-centre/_utility.js renamed to ‎src/pages/help-centre/_utility.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1-
export const convertToHash = (category, label) => {
1+
import { ArcticlesType } from './_help-articles'
2+
3+
export const convertToHash = (category: string, label: string): string => {
24
return '/help-centre/' + category.replace(/\s/g, '-').toLowerCase() + '/#' + label
35
}
46

5-
export const getAllArticles = (articles) =>
7+
export const getAllArticles = (articles: ArcticlesType[]) =>
68
articles
79
.map((category) => category.articles)
810
// flatten the array, gatsby build does not support .flat() yet
911
.reduce((arr, article_arr) => arr.concat(article_arr), [])
1012

11-
export const splitArticles = (array, length) =>
13+
export const splitArticles = (array: ArcticlesType[], length: number): string[] =>
1214
array.reduce((result, item, index) => {
1315
if (index % length === 0) result.push([])
1416
result[Math.floor(index / length)].push(item)
1517
return result
1618
}, [])
1719

18-
export const euArticles = (array) => {
20+
export const euArticles = (array: string[]): [string, string[], string[], string[]] => {
1921
const second_array = [...array[1], array[2][0]]
2022
return [array[0], second_array, [array[2][1]], [array[2][2]]]
2123
}

0 commit comments

Comments
 (0)