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
This commit is contained in:
moT01
2019-10-07 12:38:27 -05:00
committed by mrugesh
parent 20ca046a2a
commit 5b2ade9cee
2 changed files with 114 additions and 126 deletions

View File

@ -50,21 +50,23 @@ const propTypes = {
}) })
}; };
function TakeMeToTheChallenges() { function renderMessage(isSessionUser, username) {
return <CurrentChallengeLink>Take me to the Challenges</CurrentChallengeLink>; return isSessionUser ? (
} <Fragment>
<FullWidthRow>
function renderIsLocked(username, isSessionUser) { <h2 className='text-center'>You have not made your profile public.</h2>
return ( </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> <Fragment>
<Helmet>
<title>Profile | freeCodeCamp.org</title>
</Helmet>
<Spacer size={2} />
<Grid>
{isSessionUser
? renderSettingsButton()
: renderReportUserButton(username)}
<FullWidthRow> <FullWidthRow>
<h2 className='text-center'> <h2 className='text-center'>
{username} has not made their profile public. {username} has not made their profile public.
@ -73,55 +75,21 @@ function renderIsLocked(username, isSessionUser) {
<FullWidthRow> <FullWidthRow>
<p className='alert alert-info'> <p className='alert alert-info'>
{username} needs to change their privacy setting in order for you to {username} needs to change their privacy setting in order for you to
view their profile view their profile.
</p> </p>
</FullWidthRow> </FullWidthRow>
<FullWidthRow>
<TakeMeToTheChallenges />
<Spacer /> <Spacer />
<FullWidthRow>
<CurrentChallengeLink>Take me to the Challenges</CurrentChallengeLink>
</FullWidthRow> </FullWidthRow>
</Grid> <Spacer />
</Fragment> </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 { const {
profileUI: { profileUI: {
isLocked = true,
showAbout = false, showAbout = false,
showCerts = false, showCerts = false,
showHeatMap = false, showHeatMap = false,
@ -152,19 +120,8 @@ function Profile({ user, isSessionUser }) {
yearsTopContributor yearsTopContributor
} = user; } = user;
if (isLocked) {
return renderIsLocked(username, isSessionUser);
}
return ( return (
<Fragment> <Fragment>
<Helmet>
<title>Profile | freeCodeCamp.org</title>
</Helmet>
<Spacer size={2} />
<Grid>
{isSessionUser
? renderSettingsButton()
: renderReportUserButton(username)}
<Camper <Camper
about={showAbout ? about : null} about={showAbout ? about : null}
githubProfile={githubProfile} githubProfile={githubProfile}
@ -188,6 +145,42 @@ function Profile({ user, isSessionUser }) {
{showTimeLine ? ( {showTimeLine ? (
<Timeline completedMap={completedChallenges} username={username} /> <Timeline completedMap={completedChallenges} username={username} />
) : null} ) : 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> </Grid>
</Fragment> </Fragment>
); );

View File

@ -2,15 +2,6 @@
exports[`<Profile/> renders correctly 1`] = ` exports[`<Profile/> renders correctly 1`] = `
Array [ Array [
<div
className="spacer"
style={
Object {
"height": "1px",
"padding": "15px 0",
}
}
/>,
<div <div
className="spacer" className="spacer"
style={ style={
@ -23,29 +14,6 @@ Array [
<div <div
className="container" 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 <div
className="spacer" className="spacer"
style={ style={
@ -182,6 +150,33 @@ Array [
</h2> </h2>
<br /> <br />
</div> </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>, </div>,
] ]
`; `;