diff --git a/__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap b/__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap index 95a1df2212..f54db93dc7 100644 --- a/__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap +++ b/__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap @@ -2,6 +2,6 @@ exports[`Matches shallow shapshot 1`] = `
`; diff --git a/src/shared/components/TopcoderFooter/index.jsx b/src/shared/components/TopcoderFooter/index.jsx index c163455ca5..e9fb5c20e6 100644 --- a/src/shared/components/TopcoderFooter/index.jsx +++ b/src/shared/components/TopcoderFooter/index.jsx @@ -1,35 +1,50 @@ /* global tcUniNav */ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useMemo, useRef } from 'react'; import { getSubPageConfiguration } from '../../utils/url'; -const footerElId = 'uninav-footerNav'; +let counter = 0; +const footerElIdTmpl = 'uninav-footerNav'; export default function TopcoderFooter() { const footerRef = useRef(); const footerInitialized = useRef(false); + const footerElId = useRef(`${footerElIdTmpl}-${counter}`); - useEffect(() => { - if (footerInitialized.current) { - return; + const navType = useMemo(() => { + if (typeof window === 'undefined') { + return ''; } - footerInitialized.current = true; + let { type } = getSubPageConfiguration(); - let { fullFooter } = getSubPageConfiguration(); + const sessionNavType = sessionStorage.getItem('uni-nav[navType]'); + if (sessionNavType && (sessionNavType === 'tool' || sessionNavType === 'marketing')) { + type = sessionNavType; + } // If url contains navTool url parameter. Overwrite settings with parameter. const url = new URL(window.location.href); const urlParams = new URLSearchParams(url.search); - const navToolParam = urlParams.get('navTool'); - if (navToolParam) { - fullFooter = navToolParam !== 'tool'; + if (urlParams.get('navTool')) { + type = urlParams.get('navTool'); + } + + return type; + }, []); + + useEffect(() => { + if (footerInitialized.current) { + return; } - tcUniNav('init', footerElId, { - fullFooter, + footerInitialized.current = true; + counter += 1; + + tcUniNav('init', footerElId.current, { + fullFooter: navType !== 'tool', type: 'footer', }); }, []); - return
; + return
; } diff --git a/src/shared/containers/TopcoderHeader.jsx b/src/shared/containers/TopcoderHeader.jsx index 7b59fa1e36..ba53f046b1 100644 --- a/src/shared/containers/TopcoderHeader.jsx +++ b/src/shared/containers/TopcoderHeader.jsx @@ -1,12 +1,13 @@ /* global tcUniNav */ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useMemo, useRef } from 'react'; import PT from 'prop-types'; import { connect } from 'react-redux'; import { config } from 'topcoder-react-utils'; import _ from 'lodash'; import { getInitials, getSubPageConfiguration } from '../utils/url'; -const headerElId = 'uninav-headerNav'; +let counter = 0; +const headerElIdTmpl = 'uninav-headerNav'; const TopcoderHeader = ({ auth }) => { const uniNavInitialized = useRef(false); @@ -15,6 +16,32 @@ const TopcoderHeader = ({ auth }) => { const isAuthenticated = !!authToken; const authURLs = config.HEADER_AUTH_URLS; const headerRef = useRef(); + const headerElId = useRef(`${headerElIdTmpl}-${counter}`); + + const navType = useMemo(() => { + if (typeof window === 'undefined') { + return ''; + } + + let { type } = getSubPageConfiguration(); + + // if there's a stored nav type in session storage, retrieve it and overwrite type + const sessionNavType = sessionStorage.getItem('uni-nav[navType]'); + if (sessionNavType && (sessionNavType === 'tool' || sessionNavType === 'marketing')) { + type = sessionNavType; + } + + // If url contains navTool url parameter. Overwrite settings with parameter. + const url = new URL(window.location.href); + const urlParams = new URLSearchParams(url.search); + if (urlParams.get('navTool')) { + type = urlParams.get('navTool'); + } + + // store nav type for current session + sessionStorage.setItem('uni-nav[navType]', type); + return type; + }, []); const navigationUserInfo = { ...user, @@ -27,21 +54,13 @@ const TopcoderHeader = ({ auth }) => { } uniNavInitialized.current = true; + counter += 1; const regSource = window.location.pathname.split('/')[1]; const retUrl = encodeURIComponent(window.location.href); - let { type } = getSubPageConfiguration(); - - // If url contains navTool url parameter. Overwrite settings with parameter. - const url = new URL(window.location.href); - const urlParams = new URLSearchParams(url.search); - if (urlParams.get('navTool')) { - type = urlParams.get('navTool'); - } - - tcUniNav('init', headerElId, { - type, + tcUniNav('init', headerElId.current, { + type: navType, toolName: getSubPageConfiguration().toolName, toolRoot: getSubPageConfiguration().toolRoot, signOut: () => { @@ -54,15 +73,15 @@ const TopcoderHeader = ({ auth }) => { window.location = `${authURLs.location.replace('%S', retUrl).replace('member?', '#!/member?')}&mode=signUp®Source=${regSource}`; }, }); - }, []); + }, [navType]); useEffect(() => { - tcUniNav('update', headerElId, { + tcUniNav('update', headerElId.current, { user: isAuthenticated ? navigationUserInfo : null, }); }, [isAuthenticated, navigationUserInfo]); - return
; + return
; }; TopcoderHeader.defaultProps = {