binary-com · Sep 21, 2021 · Sep 20, 2021
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 import { Text } from './typography'
 import { Flex } from 'components/containers'
+import { useTabStateQuery } from 'components/hooks/use-tab-state-query'
 import { useTabState } from 'components/hooks/use-tab-state'
 import device from 'themes/device'
 const TabContent = styled.div`
@@ -108,9 +109,10 @@ const Tabs = ({
     jc_laptopM,
     line_divider_length,
     mobile_tab_button_underline_length,
+    has_no_query,
 }) => {
     const [selected_tab, setSelectedTab] = useState(0)
-    const [active_tab, setActiveTab] = useTabState(tab_list)
+    const [active_tab, setActiveTab] = has_no_query ? useTabState(tab_list) : useTabStateQuery(tab_list)
 
     useEffect(() => {
         setSelectedTab(tab_list.indexOf(active_tab))
@@ -154,6 +156,7 @@ Tabs.Panel = TabPanel
 
 Tabs.propTypes = {
     children: PropTypes.node,
+    has_no_query: PropTypes.bool,
     jc: PropTypes.string,
     jc_laptopM: PropTypes.string,
     jc_mobileL: PropTypes.string,

@@ -6,7 +6,7 @@ import device, { size } from 'themes/device'
 import { getWindowWidth } from 'common/utility'
 import { Box } from 'components/containers'
 import { Desktop } from 'components/containers/show'
-import { useTabState } from 'components/hooks/use-tab-state'
+import { useTabStateQuery } from 'components/hooks/use-tab-state-query'
 
 const StyledSideTab = styled(Box)`
     padding: 0;
@@ -114,7 +114,7 @@ const Tab = ({ active_tab, font_size, label, line_height, mobile, onClick, opaci
 const getTabs = (children) => children.map((child) => child.props.label)
 
 const SideTab = ({ children, font_size, is_sticky, line_height, opacity, tab_header }) => {
-    const [active_tab, setActiveTab] = useTabState(getTabs(children))
+    const [active_tab, setActiveTab] = useTabStateQuery(getTabs(children))
     const [is_menu, setMenu] = useState(false)
 
     const Tabs = (props) => {

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react'
+import {
+    checkElemInArray,
+    getLocationHash,
+    isBrowser,
+    routeBack,
+    scrollTop,
+    setLocationHash,
+} from 'common/utility'
+
+export const useTabStateQuery = (tab_list) => {
+    const [active_tab, setActiveTab] = useState(
+        getLocationHash() && checkElemInArray(tab_list, getLocationHash())
+            ? getLocationHash()
+            : tab_list[0],
+    )
+
+    useEffect(() => {
+        if (!getLocationHash() || !checkElemInArray(tab_list, getLocationHash())) {
+            setLocationHash(active_tab)
+        } else {
+            setActiveTab(getLocationHash())
+            scrollTop()
+        }
+    }, [])
+
+    useEffect(() => {
+        if (getLocationHash() !== active_tab && isBrowser()) {
+            setLocationHash(active_tab)
+        }
+    }, [active_tab])
+
+    useEffect(() => {
+        if (getLocationHash() !== active_tab && checkElemInArray(tab_list, getLocationHash())) {
+            setActiveTab(getLocationHash())
+            scrollTop()
+        } else if (!checkElemInArray(tab_list, getLocationHash())) {
+            routeBack()
+        }
+    }, [getLocationHash()])
+
+    return [active_tab, setActiveTab]
+}
@@ -1,43 +1,7 @@
-import { useState, useEffect } from 'react'
-import {
-    checkElemInArray,
-    getLocationHash,
-    isBrowser,
-    routeBack,
-    scrollTop,
-    setLocationHash,
-} from 'common/utility'
+import { useState } from 'react'
 
 export const useTabState = (tab_list) => {
-    const [active_tab, setActiveTab] = useState(
-        getLocationHash() && checkElemInArray(tab_list, getLocationHash())
-            ? getLocationHash()
-            : tab_list[0],
-    )
-
-    useEffect(() => {
-        if (!getLocationHash() || !checkElemInArray(tab_list, getLocationHash())) {
-            setLocationHash(active_tab)
-        } else {
-            setActiveTab(getLocationHash())
-            scrollTop()
-        }
-    }, [])
-
-    useEffect(() => {
-        if (getLocationHash() !== active_tab && isBrowser()) {
-            setLocationHash(active_tab)
-        }
-    }, [active_tab])
-
-    useEffect(() => {
-        if (getLocationHash() !== active_tab && checkElemInArray(tab_list, getLocationHash())) {
-            setActiveTab(getLocationHash())
-            scrollTop()
-        } else if (!checkElemInArray(tab_list, getLocationHash())) {
-            routeBack()
-        }
-    }, [getLocationHash()])
+    const [active_tab, setActiveTab] = useState(tab_list[0])
 
     return [active_tab, setActiveTab]
 }
@@ -68,17 +68,18 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                 jc_tabletM="center"
                 line_divider_length="unset"
                 mobile_tab_button_underline_length="100%"
+                has_no_query
             >
                 <Tabs.Panel label={localize('Recent posts')}>
                     <ArticleContentWrapper>
                         <LeftContent>
                             <RedirectLink to={`/academy/blog/posts/${headline_recent.slug}`}>
-                                <MainArticle image={getAssetUrl(headline_recent.main_image.id)}>
+                                <MainArticle image={getAssetUrl(headline_recent?.main_image?.id)}>
                                     <Description>
                                         <TagParentWrapper>
                                             {headline_recent.tags.map((article) => {
                                                 return (
-                                                    <TagWrapper key={article.id}>
+                                                    <TagWrapper key={article?.id}>
                                                         <StyledCategories>
                                                             {article.tags_id.tag_name}
                                                         </StyledCategories>
@@ -121,7 +122,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => {
                                                     <SmallArticleImageWrapper>
                                                         <QueryImage
                                                             className="small-article-bg"
-                                                            data={article.main_image.imageFile}
+                                                            data={article?.main_image?.imageFile}
                                                             alt={
                                                                 article?.main_image?.description ||
                                                                 ''

@@ -9,7 +9,7 @@ import { SEO, Flex, Box } from 'components/containers'
 import Layout from 'components/layout/layout'
 import { localize, Localize, WithIntl } from 'components/localization'
 import { Header } from 'components/elements'
-import { useTabState } from 'components/hooks/use-tab-state'
+import { useTabStateQuery } from 'components/hooks/use-tab-state-query'
 import device from 'themes/device'
 
 const meta_attributes = {
@@ -107,7 +107,7 @@ const Separator = styled.div`
 `
 
 const DMT5TradingSignals = () => {
-    const [active_tab, setActiveTab] = useTabState(['signal-subscriber', 'signal-provider'])
+    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
     useEffect(() => {
         setMounted(true)