From 44a1a05ab04a8e8b7f8b09cc3ca81d2cbdebc994 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Mon, 17 Apr 2023 20:16:28 +0200
Subject: [PATCH] refactor(client): align campers type with stored User (#49982

* refactor(client): align campers type with stored User

* update snapshot
---
 .../__snapshots__/profile.test.tsx.snap       |  5 +++
 .../components/profile/components/camper.tsx  | 41 ++++++++++---------
 client/src/components/settings/about.tsx      | 18 ++++----
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/client/src/components/profile/__snapshots__/profile.test.tsx.snap b/client/src/components/profile/__snapshots__/profile.test.tsx.snap
index bcb90fcb3d5..eb5d61f3585 100644
--- a/client/src/components/profile/__snapshots__/profile.test.tsx.snap
+++ b/client/src/components/profile/__snapshots__/profile.test.tsx.snap
@@ -273,6 +273,11 @@ exports[`<Profile/> renders correctly 1`] = `
       
       
       <br />
+      <p
+        class="text-center points"
+      >
+        profile.total-points
+      </p>
     </div>
     <div
       class="spacer"
diff --git a/client/src/components/profile/components/camper.tsx b/client/src/components/profile/components/camper.tsx
index fee63038cc3..d6291358e33 100644
--- a/client/src/components/profile/components/camper.tsx
+++ b/client/src/components/profile/components/camper.tsx
@@ -8,6 +8,7 @@ import { Col, Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
+import type { User } from '../../../redux/prop-types';
 
 import envData from '../../../../../config/env.json';
 import { getLangCode } from '../../../../../config/i18n';
@@ -21,21 +22,23 @@ const { clientLocale } = envData;
 
 const localeCode = getLangCode(clientLocale);
 
-interface CamperProps {
-  about: string;
-  githubProfile: string;
-  isDonating: boolean;
-  joinDate: string;
-  linkedin: string;
-  location: string;
-  name: string;
-  picture: string;
-  points: number | null;
-  twitter: string;
-  username: string;
-  website: string;
-  yearsTopContributor: string[];
-}
+export type CamperProps = Pick<
+  User,
+  | 'about'
+  | 'githubProfile'
+  | 'isDonating'
+  | 'linkedin'
+  | 'points'
+  | 'username'
+  | 'twitter'
+  | 'yearsTopContributor'
+  | 'location'
+  | 'website'
+  | 'picture'
+  | 'name'
+  | 'joinDate'
+  | 'twitter'
+>;
 
 function joinArray(array: string[], t: TFunction): string {
   return array.reduce((string, item, index, array) => {
@@ -124,11 +127,9 @@ function Camper({
         </div>
       )}
       <br />
-      {typeof points === 'number' ? (
-        <p className='text-center points'>
-          {t('profile.total-points', { count: points })}
-        </p>
-      ) : null}
+      <p className='text-center points'>
+        {t('profile.total-points', { count: points })}
+      </p>
     </div>
   );
 }
diff --git a/client/src/components/settings/about.tsx b/client/src/components/settings/about.tsx
index 9a8a03c9675..d35c096b18f 100644
--- a/client/src/components/settings/about.tsx
+++ b/client/src/components/settings/about.tsx
@@ -12,6 +12,7 @@ import { withTranslation } from 'react-i18next';
 import isURL from 'validator/lib/isURL';
 import { FullWidthRow, Spacer } from '../helpers';
 import BlockSaveButton from '../helpers/form/block-save-button';
+import type { CamperProps } from '../profile/components/camper';
 import SoundSettings from './sound';
 import ThemeSettings, { Themes } from './theme';
 import UsernameSettings from './username';
@@ -25,13 +26,17 @@ type FormValues = {
   about: string;
 };
 
-type AboutProps = {
-  about: string;
+type AboutProps = Omit<
+  CamperProps,
+  | 'linkedin'
+  | 'joinDate'
+  | 'isDonating'
+  | 'githubProfile'
+  | 'twitter'
+  | 'website'
+  | 'yearsTopContributor'
+> & {
   currentTheme: Themes;
-  location: string;
-  name: string;
-  picture: string;
-  points: number;
   sound: boolean;
   keyboardShortcuts: boolean;
   submitNewAbout: (formValues: FormValues) => void;
@@ -39,7 +44,6 @@ type AboutProps = {
   toggleNightMode: (theme: Themes) => void;
   toggleSoundMode: (sound: boolean) => void;
   toggleKeyboardShortcuts: (keyboardShortcuts: boolean) => void;
-  username: string;
 };
 
 type AboutState = {