From 1a930306b91a093bb9a67f783f8e93fa11aacf40 Mon Sep 17 00:00:00 2001
From: roger <dengjun@huobi.com>
Date: Mon, 26 Oct 2020 22:49:02 +0800
Subject: [PATCH] f2f-30146374

---
 .../ProfilePage/__snapshots__/index.jsx.snap  |  4 +--
 .../components/ProfilePage/Header/index.jsx   |  5 ++-
 src/shared/components/ProfilePage/index.jsx   | 11 +++++--
 src/shared/containers/Profile.jsx             | 23 ++++++++++---
 src/shared/containers/ProfileStats.jsx        | 33 +++++++++++++------
 src/shared/routes/ProfileStats.jsx            |  8 ++++-
 6 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap b/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
index 3f8045b9fa..3617e4c86f 100644
--- a/__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap
+++ b/__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}
diff --git a/src/shared/components/ProfilePage/Header/index.jsx b/src/shared/components/ProfilePage/Header/index.jsx
index e9732bc969..d837b61e25 100644
--- a/src/shared/components/ProfilePage/Header/index.jsx
+++ b/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,
     };
diff --git a/src/shared/components/ProfilePage/index.jsx b/src/shared/components/ProfilePage/index.jsx
index 74181a61ca..602dd57c3d 100644
--- a/src/shared/components/ProfilePage/index.jsx
+++ b/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}
               >
diff --git a/src/shared/containers/Profile.jsx b/src/shared/containers/Profile.jsx
index a58beee2ae..90a95b91f6 100644
--- a/src/shared/containers/Profile.jsx
+++ b/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>
+    );
   }
 }
 
diff --git a/src/shared/containers/ProfileStats.jsx b/src/shared/containers/ProfileStats.jsx
index 307127c638..561ab79d9c 100644
--- a/src/shared/containers/ProfileStats.jsx
+++ b/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>
+    );
   }
 }
 
diff --git a/src/shared/routes/ProfileStats.jsx b/src/shared/routes/ProfileStats.jsx
index 1ccf676458..227ba6ac79 100644
--- a/src/shared/routes/ProfileStats.jsx
+++ b/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} />;
+      }}
     />
   );
 }