fix: uninav on sub pages, persist type in session storage

Author: vas3a

__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap

@@ -2,6 +2,6 @@
 
 exports[`Matches shallow shapshot 1`] = `
 <div
-  id="uninav-footerNav"
+  id="uninav-footerNav-0"
 />
 `;

src/shared/components/TopcoderFooter/index.jsx

@@ -1,35 +1,46 @@
 /* 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}`);
+
+  const navType = useMemo(() => {
+    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');
+    }
+
+    const sessionNavType = sessionStorage.getItem('uni-nav[navType]');
+    if (sessionNavType && (sessionNavType === 'tool' || sessionNavType === 'marketing')) {
+      type = sessionNavType;
+    }
+
+    return type;
+  }, []);
 
   useEffect(() => {
     if (footerInitialized.current) {
       return;
     }
 
     footerInitialized.current = true;
+    counter += 1;
 
-    let { fullFooter } = getSubPageConfiguration();
-
-    // 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';
-    }
-
-    tcUniNav('init', footerElId, {
-      fullFooter,
+    tcUniNav('init', footerElId.current, {
+      fullFooter: navType !== 'tool',
       type: 'footer',
     });
   }, []);
 
-  return <div id={footerElId} ref={footerRef} />;
+  return <div id={footerElId.current} ref={footerRef} />;
 }

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,28 @@ const TopcoderHeader = ({ auth }) => {
   const isAuthenticated = !!authToken;
   const authURLs = config.HEADER_AUTH_URLS;
   const headerRef = useRef();
+  const headerElId = useRef(`${headerElIdTmpl}-${counter}`);
+
+  const navType = useMemo(() => {
+    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');
+    }
+
+    // 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;
+    }
+
+    // store nav type for current session
+    sessionStorage.setItem('uni-nav[navType]', type);
+    return type;
+  }, []);
 
   const navigationUserInfo = {
     ...user,
@@ -27,21 +50,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 +69,15 @@ const TopcoderHeader = ({ auth }) => {
         window.location = `${authURLs.location.replace('%S', retUrl).replace('member?', '#!/member?')}&mode=signUp&regSource=${regSource}`;
       },
     });
-  }, []);
+  }, [navType]);
 
   useEffect(() => {
-    tcUniNav('update', headerElId, {
+    tcUniNav('update', headerElId.current, {
       user: isAuthenticated ? navigationUserInfo : null,
     });
   }, [isAuthenticated, navigationUserInfo]);
 
-  return <div id={headerElId} ref={headerRef} />;
+  return <div id={headerElId.current} ref={headerRef} />;
 };
 
 TopcoderHeader.defaultProps = {