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,21 +50,23 @@ const propTypes = {
   })
 };
 
-function TakeMeToTheChallenges() {
-  return <CurrentChallengeLink>Take me to the Challenges</CurrentChallengeLink>;
-}
-
-function renderIsLocked(username, isSessionUser) {
-  return (
+function renderMessage(isSessionUser, username) {
+  return isSessionUser ? (
+    <Fragment>
+      <FullWidthRow>
+        <h2 className='text-center'>You have not made your profile public.</h2>
+      </FullWidthRow>
+      <FullWidthRow>
+        <p className='alert alert-info'>
+          You need to change your privacy setting in order for your profile to
+          be seen by others. This is a preview of how your profile will look
+          when made public.
+        </p>
+      </FullWidthRow>
+      <Spacer />
+    </Fragment>
+  ) : (
     <Fragment>
-      <Helmet>
-        <title>Profile | freeCodeCamp.org</title>
-      </Helmet>
-      <Spacer size={2} />
-      <Grid>
-        {isSessionUser
-          ? renderSettingsButton()
-          : renderReportUserButton(username)}
       <FullWidthRow>
         <h2 className='text-center'>
           {username} has not made their profile public.
@@ -73,55 +75,21 @@ function renderIsLocked(username, isSessionUser) {
       <FullWidthRow>
         <p className='alert alert-info'>
           {username} needs to change their privacy setting in order for you to
-            view their profile
+          view their profile.
         </p>
       </FullWidthRow>
-        <FullWidthRow>
-          <TakeMeToTheChallenges />
       <Spacer />
+      <FullWidthRow>
+        <CurrentChallengeLink>Take me to the Challenges</CurrentChallengeLink>
       </FullWidthRow>
-      </Grid>
+      <Spacer />
     </Fragment>
   );
 }
 
-function renderSettingsButton() {
-  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 }) {
+function renderProfile(user) {
   const {
     profileUI: {
-      isLocked = true,
       showAbout = false,
       showCerts = false,
       showHeatMap = false,
@@ -152,19 +120,8 @@ function Profile({ user, isSessionUser }) {
     yearsTopContributor
   } = user;
 
-  if (isLocked) {
-    return renderIsLocked(username, isSessionUser);
-  }
   return (
     <Fragment>
-      <Helmet>
-        <title>Profile | freeCodeCamp.org</title>
-      </Helmet>
-      <Spacer size={2} />
-      <Grid>
-        {isSessionUser
-          ? renderSettingsButton()
-          : renderReportUserButton(username)}
       <Camper
         about={showAbout ? about : null}
         githubProfile={githubProfile}
@@ -188,6 +145,42 @@ function Profile({ user, isSessionUser }) {
       {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 />
+      <Grid>
+        {isSessionUser ? (
+          <Row>
+            <Col sm={4} smOffset={4}>
+              <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
+                Update my settings
+              </Link>
+            </Col>
+          </Row>
+        ) : 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>,
 ]
 `;