react-helmet fix and SEO update to Profiles Pages

.circleci/config.yml

@@ -238,7 +238,7 @@ workflows:
           filters:
             branches:
               only:                
-                - apollo-site
+                - develop
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      

__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap

@@ -16,7 +16,7 @@ exports[`renders a full Profile correctly 1`] = `
       >
         <Sticky
           activeClass="active"
-          bottomBoundary={-250}
+          bottomBoundary={0}
           enableTransforms={true}
           enabled={true}
           onStateChange={null}
@@ -630,7 +630,7 @@ exports[`renders an empty Profile correctly 1`] = `
       >
         <Sticky
           activeClass="active"
-          bottomBoundary={-250}
+          bottomBoundary={0}
           enableTransforms={true}
           enabled={true}
           onStateChange={null}

src/shared/components/ProfilePage/Header/index.jsx

@@ -35,7 +35,10 @@ class ProfileHeader extends React.Component {
     const {
       info,
     } = this.props;
-    const { photoURL } = info;
+    let photoURL = '';
+    if (isomorphy.isClientSide()) {
+      ({ photoURL } = info);
+    }
     this.state = {
       imageUrl: photoURL,
     };

src/shared/components/ProfilePage/index.jsx

@@ -8,6 +8,7 @@ import React from 'react';
 import PT from 'prop-types';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
 import Sticky from 'react-stickynode';
+import { isomorphy } from 'topcoder-react-utils';
 
 import Robot from 'assets/images/robot-happy.svg';
 
@@ -55,11 +56,15 @@ class ProfilePage extends React.Component {
 
   componentDidMount() {
     this.handleResize();
-    window.addEventListener('resize', this.handleResize);
+    if (isomorphy.isClientSide()) {
+      window.addEventListener('resize', this.handleResize);
+    }
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
+    if (isomorphy.isClientSide()) {
+      window.removeEventListener('resize', this.handleResize);
+    }
   }
 
   getActiveTracks() {
@@ -181,7 +186,7 @@ class ProfilePage extends React.Component {
           <div styleName="about-container">
             <div styleName="profile-header-container">
               <Sticky
-                bottomBoundary={document.body.scrollHeight - 250}
+                bottomBoundary={isomorphy.isClientSide() ? document.body.scrollHeight - 250 : 0}
                 enabled={!isMobile}
                 top={10}
               >

src/shared/containers/Profile.jsx

@@ -7,6 +7,7 @@ import PT from 'prop-types';
 import { connect } from 'react-redux';
 
 import { actions } from 'topcoder-react-lib';
+import { MetaTags } from 'topcoder-react-utils';
 import Error404 from 'components/Error404';
 import LoadingIndicator from 'components/LoadingIndicator';
 import ProfilePage from 'components/ProfilePage';
@@ -39,6 +40,7 @@ class ProfileContainer extends React.Component {
     const {
       info,
       loadingError,
+      handleParam,
     } = this.props;
 
     if (loadingError) {
@@ -58,13 +60,24 @@ class ProfileContainer extends React.Component {
         return track2Ranking - track1Ranking;
       });
     }
+    const title = `${handleParam} | Community Profile | Topcoder`;
+    const description = `Meet Topcoder member ${handleParam} and view their skills and development and design activity. You can also see wins and tenure with Topcoder.`;
 
-    return info
-      ? (
-        <ProfilePage
-          {...this.props}
+    return (
+      <React.Fragment>
+        <MetaTags
+          description={description}
+          title={title}
         />
-      ) : <LoadingIndicator />;
+        {
+          info ? (
+            <ProfilePage
+              {...this.props}
+            />
+          ) : <LoadingIndicator />
+        }
+      </React.Fragment>
+    );
   }
 }
 

src/shared/containers/ProfileStats.jsx

@@ -9,6 +9,7 @@ import Error404 from 'components/Error404';
 import LoadingIndicator from 'components/LoadingIndicator';
 import ProfileStatsPage from 'components/ProfilePage/Stats';
 import { shouldShowGraph, isValidTrack } from 'utils/memberStats';
+import { MetaTags } from 'topcoder-react-utils';
 import _ from 'lodash';
 import qs from 'qs';
 
@@ -78,23 +79,35 @@ class ProfileStatsContainer extends React.Component {
       loadingError,
       location,
       isLoading,
+      handleParam,
     } = this.props;
 
     const { track, subTrack, tab } = getQueryParamsQuery(location);
     if (loadingError || !isValidTrack(track, subTrack)) {
       return <Error404 />;
     }
-
-    return isLoading
-      ? <LoadingIndicator />
-      : (
-        <ProfileStatsPage
-          {...this.props}
-          track={track}
-          subTrack={subTrack}
-          tab={tab}
+    const title = `${handleParam} | Community Profile | Topcoder`;
+    const description = `Meet Topcoder member ${handleParam} and view their skills and development and design activity. You can also see wins and tenure with Topcoder.`;
+
+    return (
+      <React.Fragment>
+        <MetaTags
+          description={description}
+          title={title}
         />
-      );
+        {
+          isLoading ? <LoadingIndicator />
+            : (
+              <ProfileStatsPage
+                {...this.props}
+                track={track}
+                subTrack={subTrack}
+                tab={tab}
+              />
+            )
+        }
+      </React.Fragment>
+    );
   }
 }
 

src/shared/routes/ChallengeDetails.jsx

@@ -7,9 +7,10 @@
 
 import _ from 'lodash';
 import LoadingPagePlaceholder from 'components/LoadingPagePlaceholder';
+import path from 'path';
 import React from 'react';
 import qs from 'qs';
-import { AppChunk } from 'topcoder-react-utils';
+import { AppChunk, webpack } from 'topcoder-react-utils';
 
 export default function ChallengeDetailsRoute(props) {
   return (
@@ -30,6 +31,11 @@ export default function ChallengeDetailsRoute(props) {
         })
       }
       renderPlaceholder={() => <LoadingPagePlaceholder />}
+      renderServer={() => {
+        const p = webpack.resolveWeak('containers/challenge-detail');
+        const ChallengeDetails = webpack.requireWeak(path.resolve(__dirname, p));
+        return <ChallengeDetails {...props} />;
+      }}
     />
   );
 }

src/shared/routes/ProfileStats.jsx

@@ -1,10 +1,11 @@
 /**
  * The loader of Profile webpack chunks.
  */
+import path from 'path';
 import React from 'react';
 
 import LoadingPagePlaceholder from 'components/LoadingPagePlaceholder';
-import { AppChunk } from 'topcoder-react-utils';
+import { AppChunk, webpack } from 'topcoder-react-utils';
 
 export default function ProfileStatsRoute(props) {
   return (
@@ -16,6 +17,11 @@ export default function ProfileStatsRoute(props) {
         ))
       }
       renderPlaceholder={() => <LoadingPagePlaceholder />}
+      renderServer={() => {
+        const p = webpack.resolveWeak('containers/ProfileStats');
+        const ProfileStatsContainer = webpack.requireWeak(path.resolve(__dirname, p));
+        return <ProfileStatsContainer {...props} />;
+      }}
     />
   );
 }