chore(client): add and apply naming convention (#44110)

* refactor: remove unused types * chore: add naming-convention lint rule * refactor: rename redux proptypes * chore: remove Type suffix from prop-types * chore: apply conventions to ajax * chore: apply convention to create-types * chore: apply convention to show-project-links * chore: search-bar * chore: Hotkeys * chore: privacy * chore: portfolio * chore: search-page-hits * chore: search-suggestion * chore: search-hits * chore: no-hits-suggestion * chore: timeline-pagination * chore: various profile files * chore: heat-map * chore: portfolio * chore: certifications * chore: landing-top * chore: certifications * chore: campers-image * chore: big-call-to-action * chore: paypal related files * chore: show-user * chore: show-settings * chore: show-certification * test: rename profile snap * fix: ignore snake case for stripe card form * refactor: remove duplicate type declarations Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: handle null solutions in Timeline * test: add remaining Profile props * refactor: revert accidental rename Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
2021-11-11 19:09:50 +01:00
parent 85359ed00a
commit 89c94e54e7
41 changed files with 246 additions and 314 deletions
--- a/client/src/components/profile/profile.tsx
+++ b/client/src/components/profile/profile.tsx
@@ -0,0 +1,155 @@
+import { Grid, Row } from '@freecodecamp/react-bootstrap';
+import React from 'react';
+import Helmet from 'react-helmet';
+import { TFunction, useTranslation } from 'react-i18next';
+
+import { CurrentChallengeLink, FullWidthRow, Link, Spacer } from '../helpers';
+import { User } from './../../redux/prop-types';
+import Timeline from './components/TimeLine';
+import Camper from './components/camper';
+import Certifications from './components/certifications';
+import HeatMap from './components/heat-map';
+import Portfolio from './components/portfolio';
+
+interface ProfileProps {
+  isSessionUser: boolean;
+  user: User;
+}
+
+function renderMessage(
+  isSessionUser: boolean,
+  username: string,
+  t: TFunction
+): JSX.Element {
+  return isSessionUser ? (
+    <>
+      <FullWidthRow>
+        <h2 className='text-center'>{t('profile.you-not-public')}</h2>
+      </FullWidthRow>
+      <FullWidthRow>
+        <p className='alert alert-info'>{t('profile.you-change-privacy')}</p>
+      </FullWidthRow>
+      <Spacer />
+    </>
+  ) : (
+    <>
+      <FullWidthRow>
+        <h2 className='text-center' style={{ overflowWrap: 'break-word' }}>
+          {t('profile.username-not-public', { username: username })}
+        </h2>
+      </FullWidthRow>
+      <FullWidthRow>
+        <p className='alert alert-info'>
+          {t('profile.username-change-privacy', { username: username })}
+        </p>
+      </FullWidthRow>
+      <Spacer />
+      <FullWidthRow>
+        <CurrentChallengeLink>{t('buttons.take-me')}</CurrentChallengeLink>
+      </FullWidthRow>
+      <Spacer />
+    </>
+  );
+}
+
+function renderProfile(user: ProfileProps['user']): JSX.Element {
+  const {
+    profileUI: {
+      showAbout = false,
+      showCerts = false,
+      showDonation = false,
+      showHeatMap = false,
+      showLocation = false,
+      showName = false,
+      showPoints = false,
+      showPortfolio = false,
+      showTimeLine = false
+    },
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    calendar,
+    completedChallenges,
+    githubProfile,
+    isLinkedIn,
+    isGithub,
+    isTwitter,
+    isWebsite,
+    linkedin,
+    twitter,
+    website,
+    name,
+    username,
+    joinDate,
+    location,
+    points,
+    picture,
+    portfolio,
+    about,
+    yearsTopContributor,
+    isDonating
+  } = user;
+  return (
+    <>
+      <Camper
+        about={showAbout ? about : ''}
+        githubProfile={githubProfile}
+        isDonating={showDonation ? isDonating : false}
+        isGithub={isGithub}
+        isLinkedIn={isLinkedIn}
+        isTwitter={isTwitter}
+        isWebsite={isWebsite}
+        joinDate={showAbout ? joinDate : ''}
+        linkedin={linkedin}
+        location={showLocation ? location : ''}
+        name={showName ? name : ''}
+        picture={picture}
+        points={showPoints ? points : null}
+        twitter={twitter}
+        username={username}
+        website={website}
+        yearsTopContributor={yearsTopContributor}
+      />
+      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
+      {showHeatMap ? <HeatMap calendar={calendar} /> : null}
+      {showCerts ? <Certifications username={username} /> : null}
+      {showPortfolio ? <Portfolio portfolio={portfolio} /> : null}
+      {showTimeLine ? (
+        <Timeline completedMap={completedChallenges} username={username} />
+      ) : null}
+      <Spacer />
+    </>
+  );
+}
+
+function Profile({ user, isSessionUser }: ProfileProps): JSX.Element {
+  const { t } = useTranslation();
+  const {
+    profileUI: { isLocked = true },
+    username
+  } = user;
+
+  return (
+    <>
+      <Helmet>
+        <title>{t('buttons.profile')} | freeCodeCamp.org</title>
+      </Helmet>
+      <Spacer />
+      <Grid>
+        <Spacer />
+        {isLocked ? renderMessage(isSessionUser, username, t) : null}
+        {!isLocked || isSessionUser ? renderProfile(user) : null}
+        {isSessionUser ? null : (
+          <Row className='text-center'>
+            <Link to={`/user/${username}/report-user`}>
+              {t('buttons.flag-user')}
+            </Link>
+          </Row>
+        )}
+        <Spacer />
+      </Grid>
+    </>
+  );
+}
+
+Profile.displayName = 'Profile';
+
+export default Profile;