fix: show profile properly (#54704)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

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

@@ -179,59 +179,17 @@ exports[`<Profile/> renders correctly 1`] = `
             @
             string
           </h1>
-          <h2>
-            string
-          </h2>
+          
           <div
             class="spacer"
             style="padding: 5px 0px;"
           />
-          <p>
-            string
-          </p>
+          
           <div
             class="profile-meta-container"
           >
-            <div>
-              <svg
-                aria-hidden="true"
-                class="svg-inline--fa fa-calendar "
-                data-icon="calendar"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                viewBox="0 0 448 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z"
-                  fill="currentColor"
-                />
-              </svg>
-              <span>
-                profile.joined
-              </span>
-            </div>
-            <div>
-              <svg
-                aria-hidden="true"
-                class="svg-inline--fa fa-location-dot "
-                data-icon="location-dot"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"
-                  fill="currentColor"
-                />
-              </svg>
-              <span>
-                profile.from
-              </span>
-            </div>
+            
+            
           </div>
           <div
             class="mx-[-15px] "

client/src/components/profile/components/bio.tsx

@@ -2,36 +2,36 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendar, faLocationDot } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
-import { userSelector } from '../../../redux/selectors';
-import { User } from '../../../redux/prop-types';
 import { AvatarRenderer, FullWidthRow, Spacer } from '../../helpers';
 import { parseDate } from './utils';
 import SocialIcons from './social-icons';
+import { type CamperProps } from './camper';
 
-const Bio = () => {
+const Bio = ({
+  joinDate,
+  location,
+  username,
+  name,
+  about,
+  githubProfile,
+  linkedin,
+  twitter,
+  website,
+  isDonating,
+  yearsTopContributor,
+  picture
+}: CamperProps) => {
   const { t } = useTranslation();
-  const {
-    joinDate,
-    location,
-    username,
-    name,
-    about,
-    githubProfile,
-    linkedin,
-    twitter,
-    website,
-    isDonating,
-    yearsTopContributor,
-    picture
-  } = useSelector(userSelector) as User;
+
+  const isTopContributor =
+    yearsTopContributor && yearsTopContributor.length > 0;
 
   return (
     <FullWidthRow>
       <div className='avatar-camper'>
         <AvatarRenderer
           isDonating={isDonating}
-          isTopContributor={yearsTopContributor.length > 0}
+          isTopContributor={isTopContributor}
           picture={picture}
         />
       </div>

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

@@ -24,12 +24,38 @@ export type CamperProps = Pick<
   | 'joinDate'
 >;
 
-function Camper({ yearsTopContributor }: CamperProps): JSX.Element {
+function Camper({
+  name,
+  username,
+  location,
+  picture,
+  about,
+  yearsTopContributor,
+  githubProfile,
+  isDonating,
+  joinDate,
+  linkedin,
+  twitter,
+  website
+}: CamperProps): JSX.Element {
   const { t } = useTranslation();
 
   return (
     <div className='bio-container'>
-      <Bio />
+      <Bio
+        joinDate={joinDate}
+        location={location}
+        username={username}
+        name={name}
+        about={about}
+        githubProfile={githubProfile}
+        linkedin={linkedin}
+        twitter={twitter}
+        website={website}
+        isDonating={isDonating}
+        yearsTopContributor={yearsTopContributor}
+        picture={picture}
+      />
       {yearsTopContributor.filter(Boolean).length > 0 && (
         <div>
           <br />