diff --git a/src/components/elements/default-tab.js b/src/components/elements/default-tab.js index 1a7043acdf3..06e04869037 100644 --- a/src/components/elements/default-tab.js +++ b/src/components/elements/default-tab.js @@ -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, diff --git a/src/components/elements/side-tab.js b/src/components/elements/side-tab.js index 63007c33521..a6f52095f4d 100644 --- a/src/components/elements/side-tab.js +++ b/src/components/elements/side-tab.js @@ -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) => { diff --git a/src/components/hooks/use-tab-state-query.js b/src/components/hooks/use-tab-state-query.js new file mode 100644 index 00000000000..51c6c072323 --- /dev/null +++ b/src/components/hooks/use-tab-state-query.js @@ -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] +} diff --git a/src/components/hooks/use-tab-state.js b/src/components/hooks/use-tab-state.js index 8ae646dc443..e417f1b99ae 100644 --- a/src/components/hooks/use-tab-state.js +++ b/src/components/hooks/use-tab-state.js @@ -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] } diff --git a/src/pages/academy/_recent-featured-posts.js b/src/pages/academy/_recent-featured-posts.js index c5faa6f9be2..aa427c3264c 100644 --- a/src/pages/academy/_recent-featured-posts.js +++ b/src/pages/academy/_recent-featured-posts.js @@ -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 > - + {headline_recent.tags.map((article) => { return ( - + {article.tags_id.tag_name} @@ -121,7 +122,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { { - 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)