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 b5b51b6

Browse files
mustofa-binarycakasuma
mustofa-binary
and
cakasuma
authored
fix: default tab query (#2120)
Co-authored-by: mustofa-binary <[email protected]>
1 parent 2c35df8 commit b5b51b6

File tree

6 files changed

+57
-46
lines changed

6 files changed

+57
-46
lines changed

‎src/components/elements/default-tab.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
33
import styled, { css } from 'styled-components'
44
import { Text } from './typography'
55
import { Flex } from 'components/containers'
6+
import { useTabStateQuery } from 'components/hooks/use-tab-state-query'
67
import { useTabState } from 'components/hooks/use-tab-state'
78
import device from 'themes/device'
89
const TabContent = styled.div`
@@ -108,9 +109,10 @@ const Tabs = ({
108109
jc_laptopM,
109110
line_divider_length,
110111
mobile_tab_button_underline_length,
112+
has_no_query,
111113
}) => {
112114
const [selected_tab, setSelectedTab] = useState(0)
113-
const [active_tab, setActiveTab] = useTabState(tab_list)
115+
const [active_tab, setActiveTab] = has_no_query ? useTabState(tab_list) : useTabStateQuery(tab_list)
114116

115117
useEffect(() => {
116118
setSelectedTab(tab_list.indexOf(active_tab))
@@ -154,6 +156,7 @@ Tabs.Panel = TabPanel
154156

155157
Tabs.propTypes = {
156158
children: PropTypes.node,
159+
has_no_query: PropTypes.bool,
157160
jc: PropTypes.string,
158161
jc_laptopM: PropTypes.string,
159162
jc_mobileL: PropTypes.string,

‎src/components/elements/side-tab.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import device, { size } from 'themes/device'
66
import { getWindowWidth } from 'common/utility'
77
import { Box } from 'components/containers'
88
import { Desktop } from 'components/containers/show'
9-
import { useTabState } from 'components/hooks/use-tab-state'
9+
import { useTabStateQuery } from 'components/hooks/use-tab-state-query'
1010

1111
const StyledSideTab = styled(Box)`
1212
padding: 0;
@@ -114,7 +114,7 @@ const Tab = ({ active_tab, font_size, label, line_height, mobile, onClick, opaci
114114
const getTabs = (children) => children.map((child) => child.props.label)
115115

116116
const SideTab = ({ children, font_size, is_sticky, line_height, opacity, tab_header }) => {
117-
const [active_tab, setActiveTab] = useTabState(getTabs(children))
117+
const [active_tab, setActiveTab] = useTabStateQuery(getTabs(children))
118118
const [is_menu, setMenu] = useState(false)
119119

120120
const Tabs = (props) => {

‎src/components/hooks/use-tab-state-query.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { useState, useEffect } from 'react'
2+
import {
3+
checkElemInArray,
4+
getLocationHash,
5+
isBrowser,
6+
routeBack,
7+
scrollTop,
8+
setLocationHash,
9+
} from 'common/utility'
10+
11+
export const useTabStateQuery = (tab_list) => {
12+
const [active_tab, setActiveTab] = useState(
13+
getLocationHash() && checkElemInArray(tab_list, getLocationHash())
14+
? getLocationHash()
15+
: tab_list[0],
16+
)
17+
18+
useEffect(() => {
19+
if (!getLocationHash() || !checkElemInArray(tab_list, getLocationHash())) {
20+
setLocationHash(active_tab)
21+
} else {
22+
setActiveTab(getLocationHash())
23+
scrollTop()
24+
}
25+
}, [])
26+
27+
useEffect(() => {
28+
if (getLocationHash() !== active_tab && isBrowser()) {
29+
setLocationHash(active_tab)
30+
}
31+
}, [active_tab])
32+
33+
useEffect(() => {
34+
if (getLocationHash() !== active_tab && checkElemInArray(tab_list, getLocationHash())) {
35+
setActiveTab(getLocationHash())
36+
scrollTop()
37+
} else if (!checkElemInArray(tab_list, getLocationHash())) {
38+
routeBack()
39+
}
40+
}, [getLocationHash()])
41+
42+
return [active_tab, setActiveTab]
43+
}

‎src/components/hooks/use-tab-state.js

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,7 @@
1-
import { useState, useEffect } from 'react'
2-
import {
3-
checkElemInArray,
4-
getLocationHash,
5-
isBrowser,
6-
routeBack,
7-
scrollTop,
8-
setLocationHash,
9-
} from 'common/utility'
1+
import { useState } from 'react'
102

113
export const useTabState = (tab_list) => {
12-
const [active_tab, setActiveTab] = useState(
13-
getLocationHash() && checkElemInArray(tab_list, getLocationHash())
14-
? getLocationHash()
15-
: tab_list[0],
16-
)
17-
18-
useEffect(() => {
19-
if (!getLocationHash() || !checkElemInArray(tab_list, getLocationHash())) {
20-
setLocationHash(active_tab)
21-
} else {
22-
setActiveTab(getLocationHash())
23-
scrollTop()
24-
}
25-
}, [])
26-
27-
useEffect(() => {
28-
if (getLocationHash() !== active_tab && isBrowser()) {
29-
setLocationHash(active_tab)
30-
}
31-
}, [active_tab])
32-
33-
useEffect(() => {
34-
if (getLocationHash() !== active_tab && checkElemInArray(tab_list, getLocationHash())) {
35-
setActiveTab(getLocationHash())
36-
scrollTop()
37-
} else if (!checkElemInArray(tab_list, getLocationHash())) {
38-
routeBack()
39-
}
40-
}, [getLocationHash()])
4+
const [active_tab, setActiveTab] = useState(tab_list[0])
415

426
return [active_tab, setActiveTab]
437
}

‎src/pages/academy/_recent-featured-posts.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,17 +68,18 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
6868
jc_tabletM="center"
6969
line_divider_length="unset"
7070
mobile_tab_button_underline_length="100%"
71+
has_no_query
7172
>
7273
<Tabs.Panel label={localize('Recent posts')}>
7374
<ArticleContentWrapper>
7475
<LeftContent>
7576
<RedirectLink to={`/academy/blog/posts/${headline_recent.slug}`}>
76-
<MainArticle image={getAssetUrl(headline_recent.main_image.id)}>
77+
<MainArticle image={getAssetUrl(headline_recent?.main_image?.id)}>
7778
<Description>
7879
<TagParentWrapper>
7980
{headline_recent.tags.map((article) => {
8081
return (
81-
<TagWrapper key={article.id}>
82+
<TagWrapper key={article?.id}>
8283
<StyledCategories>
8384
{article.tags_id.tag_name}
8485
</StyledCategories>
@@ -121,7 +122,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
121122
<SmallArticleImageWrapper>
122123
<QueryImage
123124
className="small-article-bg"
124-
data={article.main_image.imageFile}
125+
data={article?.main_image?.imageFile}
125126
alt={
126127
article?.main_image?.description ||
127128
''

‎src/pages/dmt5-trading-signals/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { SEO, Flex, Box } from 'components/containers'
99
import Layout from 'components/layout/layout'
1010
import { localize, Localize, WithIntl } from 'components/localization'
1111
import { Header } from 'components/elements'
12-
import { useTabState } from 'components/hooks/use-tab-state'
12+
import { useTabStateQuery } from 'components/hooks/use-tab-state-query'
1313
import device from 'themes/device'
1414

1515
const meta_attributes = {
@@ -107,7 +107,7 @@ const Separator = styled.div`
107107
`
108108

109109
const DMT5TradingSignals = () => {
110-
const [active_tab, setActiveTab] = useTabState(['signal-subscriber', 'signal-provider'])
110+
const [active_tab, setActiveTab] = useTabStateQuery(['signal-subscriber', 'signal-provider'])
111111
const [is_mounted, setMounted] = useState(false) //needs to fix bug with hightlight of the 1st loading
112112
useEffect(() => {
113113
setMounted(true)

0 commit comments

Comments
 (0)