feat(client): use showPoints to hide points instead of mutating the points (#50106)

* feat(client): move points out of the camper component

* use the redesigned text

client/i18n/locales/english/translations.json

@@ -221,8 +221,7 @@
     "tweet": "I just earned the {{certTitle}} certification @freeCodeCamp! Check it out here: {{certURL}}",
     "avatar": "{{username}}'s avatar",
     "joined": "Joined {{date}}",
-    "total-points": "{{count}} total point",
-    "total-points_plural": "{{count}} total points",
+    "total-points": "Number of points: {{count}}",
     "points": "{{count}} point on {{date}}",
     "points_plural": "{{count}} points on {{date}}",
     "page-number": "{{pageNumber}} of {{totalPages}}"

client/src/components/profile/__snapshots__/profile.test.tsx.snap

@@ -273,11 +273,6 @@ exports[`<Profile/> renders correctly 1`] = `
       
       
       <br />
-      <p
-        class="text-center points"
-      >
-        profile.total-points
-      </p>
     </div>
     <div
       class="spacer"

client/src/components/profile/components/camper.tsx

@@ -28,7 +28,6 @@ export type CamperProps = Pick<
   | 'githubProfile'
   | 'isDonating'
   | 'linkedin'
-  | 'points'
   | 'username'
   | 'twitter'
   | 'yearsTopContributor'
@@ -67,7 +66,6 @@ function Camper({
   name,
   username,
   location,
-  points,
   picture,
   about,
   yearsTopContributor,
@@ -127,9 +125,6 @@ function Camper({
         </div>
       )}
       <br />
-      <p className='text-center points'>
-        {t('profile.total-points', { count: points })}
-      </p>
     </div>
   );
 }

client/src/components/profile/profile.tsx

@@ -56,7 +56,13 @@ const Message = ({ isSessionUser, t, username }: MessageProps) => {
   return <VisitorMessage t={t} username={username} />;
 };
 
-function UserProfile({ user }: { user: ProfileProps['user'] }): JSX.Element {
+function UserProfile({
+  user,
+  t
+}: {
+  user: ProfileProps['user'];
+  t: TFunction;
+}): JSX.Element {
   const {
     profileUI: {
       showAbout,
@@ -97,12 +103,16 @@ function UserProfile({ user }: { user: ProfileProps['user'] }): JSX.Element {
         location={showLocation ? location : ''}
         name={showName ? name : ''}
         picture={picture}
-        points={showPoints ? points : null}
         twitter={twitter}
         username={username}
         website={website}
         yearsTopContributor={yearsTopContributor}
       />
+      {showPoints && (
+        <p className='text-center points'>
+          {t('profile.total-points', { count: points })}
+        </p>
+      )}
       {showHeatMap ? <HeatMap calendar={calendar} /> : null}
       {showCerts ? <Certifications username={username} /> : null}
       {showPortfolio ? (
@@ -136,7 +146,7 @@ function Profile({ user, isSessionUser }: ProfileProps): JSX.Element {
         {isLocked && (
           <Message username={username} isSessionUser={isSessionUser} t={t} />
         )}
-        {showUserProfile && <UserProfile user={user} />}
+        {showUserProfile && <UserProfile user={user} t={t} />}
         {!isSessionUser && (
           <Row className='text-center'>
             <Link to={`/user/${username}/report-user`}>