Merge pull request #6795 from topcoder-platform/PROD-3777_universal_nav-load

PROD-3777 universal nav load

Author: jmgasper

src/shared/components/TopcoderFooter/index.jsx

@@ -1,43 +1,35 @@
 /* global tcUniNav */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { getSubPageConfiguration } from '../../utils/url';
 
-let uniqueId = 0;
+const footerElId = 'uninav-footerNav';
 
 export default function TopcoderFooter() {
   const footerRef = useRef();
   const footerInitialized = useRef(false);
-  const [footerId, setFooterId] = useState(0);
 
   useEffect(() => {
-    uniqueId += 1;
-    setFooterId(uniqueId);
-  }, []);
-
-  useEffect(() => {
-    if (footerInitialized.current || !footerId) {
+    if (footerInitialized.current) {
       return;
     }
 
     footerInitialized.current = true;
 
+    let { fullFooter } = getSubPageConfiguration();
+
     // If url contains navTool url parameter. Overwrite settings with parameter.
-    let isFullFooter = false;
     const url = new URL(window.location.href);
     const urlParams = new URLSearchParams(url.search);
-    if (urlParams.get('navTool') === 'tool') {
-      isFullFooter = false;
-    } else if (urlParams.get('navTool') === 'marketing') {
-      isFullFooter = true;
-    } else {
-      isFullFooter = getSubPageConfiguration().fullFooter;
+    const navToolParam = urlParams.get('navTool');
+    if (navToolParam) {
+      fullFooter = navToolParam !== 'tool';
     }
 
-    tcUniNav('init', `footerNav-${footerId}`, {
+    tcUniNav('init', footerElId, {
+      fullFooter,
       type: 'footer',
-      fullFooter: isFullFooter,
     });
-  }, [footerId]);
+  }, []);
 
-  return <div id={`footerNav-${footerId}`} ref={footerRef} />;
+  return <div id={footerElId} ref={footerRef} />;
 }

src/shared/containers/TopcoderHeader.jsx

@@ -1,12 +1,12 @@
 /* global tcUniNav */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, 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';
 
-let uniqueId = 0;
+const headerElId = 'uninav-headerNav';
 
 const TopcoderHeader = ({ auth }) => {
   const uniNavInitialized = useRef(false);
@@ -15,20 +15,14 @@ const TopcoderHeader = ({ auth }) => {
   const isAuthenticated = !!authToken;
   const authURLs = config.HEADER_AUTH_URLS;
   const headerRef = useRef();
-  const [headerId, setHeaderId] = useState(0);
 
   const navigationUserInfo = {
     ...user,
     initials: getInitials(user.firstName, user.lastName),
   };
 
   useEffect(() => {
-    uniqueId += 1;
-    setHeaderId(uniqueId);
-  }, []);
-
-  useEffect(() => {
-    if (uniNavInitialized.current || !headerId) {
+    if (uniNavInitialized.current) {
       return;
     }
 
@@ -46,11 +40,10 @@ const TopcoderHeader = ({ auth }) => {
       type = urlParams.get('navTool');
     }
 
-    tcUniNav('init', `headerNav-${headerId}`, {
+    tcUniNav('init', headerElId, {
       type,
       toolName: getSubPageConfiguration().toolName,
       toolRoot: getSubPageConfiguration().toolRoot,
-      user: isAuthenticated ? navigationUserInfo : null,
       signOut: () => {
         window.location = `${config.URL.BASE}/logout?ref=nav`;
       },
@@ -61,9 +54,15 @@ const TopcoderHeader = ({ auth }) => {
         window.location = `${authURLs.location.replace('%S', retUrl).replace('member?', '#!/member?')}&mode=signUp&regSource=${regSource}`;
       },
     });
-  }, [headerId]);
+  }, []);
+
+  useEffect(() => {
+    tcUniNav('update', headerElId, {
+      user: isAuthenticated ? navigationUserInfo : null,
+    });
+  }, [isAuthenticated, navigationUserInfo]);
 
-  return <div id={`headerNav-${headerId}`} ref={headerRef} />;
+  return <div id={headerElId} ref={headerRef} />;
 };
 
 TopcoderHeader.defaultProps = {