feat: render profile preview on own private profile

- change verbiage on my own private profile
- render a preview of my own private profile
- move report user link to bottom of the profile

client/src/components/profile/Profile.js

@@ -50,78 +50,46 @@ const propTypes = {
   })
 };
 
-function TakeMeToTheChallenges() {
+function renderMessage(isSessionUser, username) {
-  return <CurrentChallengeLink>Take me to the Challenges</CurrentChallengeLink>;
+  return isSessionUser ? (
-}
-
-function renderIsLocked(username, isSessionUser) {
-  return (
     <Fragment>
-      <Helmet>
+      <FullWidthRow>
-        <title>Profile | freeCodeCamp.org</title>
+        <h2 className='text-center'>You have not made your profile public.</h2>
-      </Helmet>
+      </FullWidthRow>
-      <Spacer size={2} />
+      <FullWidthRow>
-      <Grid>
+        <p className='alert alert-info'>
-        {isSessionUser
+          You need to change your privacy setting in order for your profile to
-          ? renderSettingsButton()
+          be seen by others. This is a preview of how your profile will look
-          : renderReportUserButton(username)}
+          when made public.
-        <FullWidthRow>
+        </p>
-          <h2 className='text-center'>
+      </FullWidthRow>
-            {username} has not made their profile public.
+      <Spacer />
-          </h2>
+    </Fragment>
-        </FullWidthRow>
+  ) : (
-        <FullWidthRow>
+    <Fragment>
-          <p className='alert alert-info'>
+      <FullWidthRow>
-            {username} needs to change their privacy setting in order for you to
+        <h2 className='text-center'>
-            view their profile
+          {username} has not made their profile public.
-          </p>
+        </h2>
-        </FullWidthRow>
+      </FullWidthRow>
-        <FullWidthRow>
+      <FullWidthRow>
-          <TakeMeToTheChallenges />
+        <p className='alert alert-info'>
-          <Spacer />
+          {username} needs to change their privacy setting in order for you to
-        </FullWidthRow>
+          view their profile.
-      </Grid>
+        </p>
+      </FullWidthRow>
+      <Spacer />
+      <FullWidthRow>
+        <CurrentChallengeLink>Take me to the Challenges</CurrentChallengeLink>
+      </FullWidthRow>
+      <Spacer />
     </Fragment>
   );
 }
 
-function renderSettingsButton() {
+function renderProfile(user) {
-  return (
-    <Fragment>
-      <Row>
-        <Col sm={4} smOffset={4}>
-          <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
-            Update my settings
-          </Link>
-        </Col>
-      </Row>
-      <Spacer size={2} />
-    </Fragment>
-  );
-}
-
-function renderReportUserButton(username) {
-  return (
-    <Fragment>
-      <Row>
-        <Col sm={4} smOffset={4}>
-          <Link
-            className='btn btn-lg btn-primary btn-block'
-            to={`/user/${username}/report-user`}
-          >
-            Report This User
-          </Link>
-        </Col>
-      </Row>
-      <Spacer size={2} />
-    </Fragment>
-  );
-}
-
-function Profile({ user, isSessionUser }) {
   const {
     profileUI: {
-      isLocked = true,
       showAbout = false,
       showCerts = false,
       showHeatMap = false,
@@ -152,42 +120,67 @@ function Profile({ user, isSessionUser }) {
     yearsTopContributor
   } = user;
 
-  if (isLocked) {
+  return (
-    return renderIsLocked(username, isSessionUser);
+    <Fragment>
-  }
+      <Camper
+        about={showAbout ? about : null}
+        githubProfile={githubProfile}
+        isGithub={isGithub}
+        isLinkedIn={isLinkedIn}
+        isTwitter={isTwitter}
+        isWebsite={isWebsite}
+        linkedin={linkedin}
+        location={showLocation ? location : null}
+        name={showName ? name : null}
+        picture={picture}
+        points={showPoints ? points : null}
+        twitter={twitter}
+        username={username}
+        website={website}
+        yearsTopContributor={yearsTopContributor}
+      />
+      {showHeatMap ? <HeatMap calendar={calendar} streak={streak} /> : null}
+      {showCerts ? <Certifications username={username} /> : null}
+      {showPortfolio ? <Portfolio portfolio={portfolio} /> : null}
+      {showTimeLine ? (
+        <Timeline completedMap={completedChallenges} username={username} />
+      ) : null}
+      <Spacer />
+    </Fragment>
+  );
+}
+
+function Profile({ user, isSessionUser }) {
+  const {
+    profileUI: { isLocked = true },
+    username
+  } = user;
+
   return (
     <Fragment>
       <Helmet>
         <title>Profile | freeCodeCamp.org</title>
       </Helmet>
-      <Spacer size={2} />
+      <Spacer />
       <Grid>
-        {isSessionUser
+        {isSessionUser ? (
-          ? renderSettingsButton()
+          <Row>
-          : renderReportUserButton(username)}
+            <Col sm={4} smOffset={4}>
-        <Camper
+              <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
-          about={showAbout ? about : null}
+                Update my settings
-          githubProfile={githubProfile}
+              </Link>
-          isGithub={isGithub}
+            </Col>
-          isLinkedIn={isLinkedIn}
+          </Row>
-          isTwitter={isTwitter}
-          isWebsite={isWebsite}
-          linkedin={linkedin}
-          location={showLocation ? location : null}
-          name={showName ? name : null}
-          picture={picture}
-          points={showPoints ? points : null}
-          twitter={twitter}
-          username={username}
-          website={website}
-          yearsTopContributor={yearsTopContributor}
-        />
-        {showHeatMap ? <HeatMap calendar={calendar} streak={streak} /> : null}
-        {showCerts ? <Certifications username={username} /> : null}
-        {showPortfolio ? <Portfolio portfolio={portfolio} /> : null}
-        {showTimeLine ? (
-          <Timeline completedMap={completedChallenges} username={username} />
         ) : null}
+        <Spacer />
+        {isLocked ? renderMessage(isSessionUser, username) : null}
+        {!isLocked || isSessionUser ? renderProfile(user) : null}
+        {isSessionUser ? null : (
+          <Row className='text-center'>
+            <Link to={`/user/${username}/report-user`}>Report This User</Link>
+          </Row>
+        )}
+        <Spacer />
       </Grid>
     </Fragment>
   );

client/src/components/profile/__snapshots__/Profile.test.js.snap

@@ -2,15 +2,6 @@
 
 exports[`<Profile/> renders correctly 1`] = `
 Array [
-  <div
-    className="spacer"
-    style={
-      Object {
-        "height": "1px",
-        "padding": "15px 0",
-      }
-    }
-  />,
   <div
     className="spacer"
     style={
@@ -23,29 +14,6 @@ Array [
   <div
     className="container"
   >
-    <div
-      className="row"
-    >
-      <div
-        className="col-sm-4 col-sm-offset-4"
-      >
-        <a
-          className="btn btn-lg btn-primary btn-block"
-          href="/user/string/report-user"
-        >
-          Report This User
-        </a>
-      </div>
-    </div>
-    <div
-      className="spacer"
-      style={
-        Object {
-          "height": "1px",
-          "padding": "15px 0",
-        }
-      }
-    />
     <div
       className="spacer"
       style={
@@ -182,6 +150,33 @@ Array [
       </h2>
       <br />
     </div>
+    <div
+      className="spacer"
+      style={
+        Object {
+          "height": "1px",
+          "padding": "15px 0",
+        }
+      }
+    />
+    <div
+      className="text-center row"
+    >
+      <a
+        href="/user/string/report-user"
+      >
+        Report This User
+      </a>
+    </div>
+    <div
+      className="spacer"
+      style={
+        Object {
+          "height": "1px",
+          "padding": "15px 0",
+        }
+      }
+    />
   </div>,
 ]
 `;