SSR fixes

Author: jmgasper

package-lock.json

@@ -168,6 +168,7 @@
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",
+    "uninav-react": "git+https://github.com/topcoder-platform/uninav-react.git#0.0.1",
     "url-parse": "^1.4.1",
     "uuid": "^3.3.2",
     "valid-url": "^1.0.9",

package.json

@@ -1,77 +1,51 @@
-/* global tcUniNav */
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useMemo } from 'react';
 import PT from 'prop-types';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { config } from 'topcoder-react-utils';
 import LoadingIndicator from 'components/LoadingIndicator';
 import _ from 'lodash';
-import { getInitials, getSubPageConfiguration } from '../../utils/url';
-import { SSRPlaceholder } from '../../utils/SSR';
+import { MarketingNavigation, ToolNavigation } from 'uninav-react';
+import { getSubPageConfiguration } from '../../utils/url';
 import './styles.scss';
 
-let counter = 0;
-const headerElIdTmpl = 'uninav-headerNav';
-
-const TopcoderHeader = ({ auth }) => {
-  const uniNavInitialized = useRef(false);
+const TopcoderHeader = ({ auth, location }) => {
   const user = _.get(auth, 'profile') || {};
   const authToken = _.get(auth, 'tokenV3');
   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]');
-    const url = new URL(window.location.href);
-
-    // Only use the set sessionStorage value for navType on the /thrive paths, for now.
-    // Probably will change in the future...
-    if (window.location.href.indexOf('/thrive') > -1 && sessionNavType && (sessionNavType === 'tool' || sessionNavType === 'marketing')) {
-      type = sessionNavType;
+  const pageCfg = useMemo(() => getSubPageConfiguration(location, user.handle), [location, user]);
+  const isSSR = typeof window === 'undefined';
+
+  const NavComponent = useMemo(() => {
+    let { type } = pageCfg;
+
+    if (!isSSR) {
+      // if there's a stored nav type in session storage, retrieve it and overwrite type
+      const sessionNavType = sessionStorage.getItem('uni-nav[navType]');
+      if (location.pathname.includes() && sessionNavType && (sessionNavType === 'tool' || sessionNavType === 'marketing')) {
+        type = sessionNavType;
+      }
     }
 
     // If url contains navTool url parameter. Overwrite settings with parameter.
-    const urlParams = new URLSearchParams(url.search);
-    if (urlParams.get('navTool')) {
-      type = urlParams.get('navTool');
+    const navTool = (location.search.match(/navTool=(tool|marketing)/) || [])[1];
+    if (navTool) {
+      type = navTool;
     }
 
-    // store nav type for current session
-    sessionStorage.setItem('uni-nav[navType]', type);
-    return type;
-  }, []);
-
-  const navigationUserInfo = {
-    ...user,
-    initials: getInitials(user.firstName, user.lastName),
-  };
-
-  useEffect(() => {
-    if (uniNavInitialized.current) {
-      return;
+    if (!isSSR) {
+      // store nav type for current session
+      sessionStorage.setItem('uni-nav[navType]', type);
     }
-    headerRef.current.id = headerElId.current;
-
-    uniNavInitialized.current = true;
-
-    counter += 1;
+    return type === 'marketing' ? MarketingNavigation : ToolNavigation;
+  }, [pageCfg, location]);
 
-    const regSource = window.location.pathname.split('/')[1];
-    const retUrl = encodeURIComponent(window.location.href);
+  const { signOut, signIn, signUp } = useMemo(() => {
+    const regSource = (location.pathname || '').split('/')[1];
+    const retUrl = encodeURIComponent(isSSR ? location.href : window.location.href);
 
-    tcUniNav('init', headerElId.current, {
-      type: navType,
-      toolName: getSubPageConfiguration(user.handle).toolName,
-      toolRoot: getSubPageConfiguration(user.handle).toolRoot,
-      user: 'auto',
+    return {
       signOut: () => {
         window.location = `${config.URL.BASE}/logout?ref=nav`;
       },
@@ -81,41 +55,39 @@ const TopcoderHeader = ({ auth }) => {
       signUp: () => {
         window.location = `${authURLs.location.replace('%S', retUrl).replace('member?', '#!/member?')}&mode=signUp&regSource=${regSource}`;
       },
-    });
-  }, [navType]);
-
-  useEffect(() => {
-    tcUniNav('update', headerElId.current, {
-      toolName: getSubPageConfiguration(user.handle).toolName,
-      user: isAuthenticated ? navigationUserInfo : null,
-    });
-  }, [isAuthenticated, navigationUserInfo]);
+    };
+  }, [location]);
 
   return (
-    <div styleName="header-container" id={headerElId.current} ref={headerRef} />
+    <div styleName="header-container">
+      <NavComponent
+        toolName={pageCfg.toolName}
+        toolRoot={pageCfg.toolRoot}
+        user={isAuthenticated ? user : undefined}
+        signIn={signIn}
+        signOut={signOut}
+        signUp={signUp}
+        currentLocation={location.pathname}
+      >
+        <div styleName="loader">
+          <LoadingIndicator />
+        </div>
+      </NavComponent>
+    </div>
   );
 };
 TopcoderHeader.defaultProps = {
   auth: {},
+  location: typeof window === 'undefined' ? {} : window.location,
 };
 
 TopcoderHeader.propTypes = {
   auth: PT.shape(),
+  location: PT.shape(), // sent from withRouter
 };
 
 const mapStateToProps = state => ({
   auth: state.auth,
 });
 
-const TopcoderHeaderConnect = connect(mapStateToProps, null)(TopcoderHeader);
-
-const TopcoderHeaderPlaceholder = () => (
-  <div styleName="header-container header-container-placeholder">
-    <LoadingIndicator />
-  </div>
-);
-
-export default SSRPlaceholder()(
-  TopcoderHeaderConnect,
-  TopcoderHeaderPlaceholder,
-);
+export default connect(mapStateToProps, null)(withRouter(TopcoderHeader));

src/shared/containers/TopcoderHeader/index.jsx

@@ -1,10 +1,14 @@
-@import '~styles/mixins';
-
 .header-container {
-  min-height: 60px;
-  background-color: #0c0c0c;
+  position: relative;
 }
 
-.header-container-placeholder {
-  height: 60px;
+.loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

src/shared/containers/TopcoderHeader/styles.scss

@@ -164,14 +164,14 @@ export function getInitials(firstName = '', lastName = '') {
 
 export const DEFAULT_AVATAR_URL = 'https://images.ctfassets.net/b5f1djy59z3a/4PTwZVSf3W7qgs9WssqbVa/4c51312671a4b9acbdfd7f5e22320b62/default_avatar.svg';
 
-export const getSubPageConfiguration = (loginUserHandle) => {
+export const getSubPageConfiguration = (location, loginUserHandle) => {
   let toolName = 'Community';
   let toolRoot = '/';
   let loginRedirect = '/';
   let type = 'marketing';
   let fullFooter = true;
 
-  const url = window.location.pathname;
+  const url = (location || window.location).pathname;
 
   if (url.includes('/gigs')) {
     toolName = 'Gigs';