feat: add bio component to profile page

client/i18n/locales/english/translations.json

@@ -314,6 +314,7 @@
     "tweet": "I just earned the {{certTitle}} certification @freeCodeCamp! Check it out here: {{certURL}}",
     "avatar": "{{username}}'s avatar",
     "joined": "Joined {{date}}",
+    "from": "From {{location}}",
     "total-points": "Total Points:",
     "points": "{{count}} point on {{date}}",
     "points_plural": "{{count}} points on {{date}}",

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

@@ -0,0 +1,67 @@
+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';
+
+const Bio = () => {
+  const { t } = useTranslation();
+  const {
+    joinDate,
+    location,
+    username,
+    name,
+    about,
+    githubProfile,
+    linkedin,
+    twitter,
+    website,
+    isDonating,
+    yearsTopContributor,
+    picture
+  } = useSelector(userSelector) as User;
+
+  return (
+    <FullWidthRow>
+      <div className='avatar-camper'>
+        <AvatarRenderer
+          isDonating={isDonating}
+          isTopContributor={yearsTopContributor.length > 0}
+          picture={picture}
+        />
+      </div>
+      <h1>@{username}</h1>
+      {name && <h2>{name}</h2>}
+      <Spacer size={'small'} />
+      {about && <p>{about}</p>}
+      <div className='profile-meta-container'>
+        {joinDate && (
+          <div>
+            <FontAwesomeIcon icon={faCalendar} />
+            <span>{parseDate(joinDate, t)}</span>
+          </div>
+        )}
+        {location && (
+          <div>
+            <FontAwesomeIcon icon={faLocationDot} />
+            <span>{t('profile.from', { location })}</span>
+          </div>
+        )}
+      </div>
+      <SocialIcons
+        githubProfile={githubProfile}
+        linkedin={linkedin}
+        twitter={twitter}
+        username={username}
+        website={website}
+      />
+      <hr />
+    </FullWidthRow>
+  );
+};
+export default Bio;

client/src/components/profile/components/camper.css

@@ -7,7 +7,6 @@
 
 .avatar-camper {
   display: flex;
-  justify-content: center;
 }
 
 .avatar-camper .avatar {
@@ -29,3 +28,28 @@
   width: auto;
   margin: 0 0.2em -0.3em 0.2em;
 }
+
+.profile-meta-container {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 2rem;
+  color: var(--quaternary-color);
+}
+
+.profile-meta-container div {
+  margin-inline-end: 12px;
+}
+
+.profile-meta-container svg {
+  margin-inline-end: 4px;
+}
+
+.social-icons-row a {
+  display: inline-block;
+  margin-inline-end: 12px;
+  color: var(--quaternary-color);
+}
+
+.bio-container h2 {
+  color: var(--quaternary-color);
+}

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

@@ -1,15 +1,12 @@
-import { faAward, faCalendar } from '@fortawesome/free-solid-svg-icons';
+import { faAward } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Row } from '@freecodecamp/ui';
 import type { User } from '../../../redux/prop-types';
-import { AvatarRenderer } from '../../helpers';
 import Link from '../../helpers/link';
-import SupporterBadge from '../../../assets/icons/supporter-badge';
-import SocialIcons from './social-icons';
-import { formatYears, parseDate } from './utils';
+import { formatYears } from './utils';
 import './camper.css';
+import Bio from './bio';
 
 export type CamperProps = Pick<
   User,
@@ -27,56 +24,12 @@ export type CamperProps = Pick<
   | 'joinDate'
 >;
 
-function Camper({
-  name,
-  username,
-  location,
-  picture,
-  about,
-  yearsTopContributor,
-  githubProfile,
-  isDonating,
-  joinDate,
-  linkedin,
-  twitter,
-  website
-}: CamperProps): JSX.Element {
+function Camper({ yearsTopContributor }: CamperProps): JSX.Element {
   const { t } = useTranslation();
 
   return (
-    <div>
-      <Row>
-        <Col className='avatar-camper' xs={12}>
-          <AvatarRenderer
-            isDonating={isDonating}
-            isTopContributor={yearsTopContributor.length > 0}
-            picture={picture}
-          />
-        </Col>
-      </Row>
-      <SocialIcons
-        githubProfile={githubProfile}
-        linkedin={linkedin}
-        twitter={twitter}
-        username={username}
-        website={website}
-      />
-      <br />
-      <h2 className='text-center username'>@{username}</h2>
-      {name && <p className='text-center name'>{name}</p>}
-      {location && <p className='text-center location'>{location}</p>}
-      {isDonating && (
-        <p className='text-center supporter'>
-          <SupporterBadge />
-          {t('profile.supporter')}
-        </p>
-      )}
-      {about && <p className='bio text-center'>{about}</p>}
-      {joinDate && (
-        <p className='bio text-center'>
-          <FontAwesomeIcon icon={faCalendar} /> {parseDate(joinDate, t)}
-        </p>
-      )}
+    <div className='bio-container'>
+      <Bio />
       {yearsTopContributor.filter(Boolean).length > 0 && (
         <div>
           <br />

client/src/components/profile/components/social-icons.tsx

@@ -86,7 +86,7 @@ function SocialIcons(props: SocialIconsProps): JSX.Element | null {
 
   return (
     <Row>
-      <Col className='text-center social-media-icons' sm={6} smOffset={3}>
+      <Col className='social-icons-row'>
         {linkedin ? LinkedInIcon(linkedin, username) : null}
         {githubProfile ? GitHubIcon(githubProfile, username) : null}
         {website ? WebsiteIcon(website, username) : null}

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

@@ -1,10 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
 import { Themes } from '../settings/theme';
-
 import Profile from './profile';
 
 jest.mock('../../analytics');
+//workaround to avoid some strange gatsby error:
+window.___loader = { enqueue: () => {}, hovering: () => {} };
 
 const userProps = {
   user: {
@@ -77,17 +80,24 @@ const notMyProfileProps = {
   isSessionUser: false,
   ...userProps
 };
-
+function reducer() {
+  return {
+    app: { appUsername: 'vasili', user: { vasili: userProps.user } }
+  };
+}
+function renderWithRedux(ui: JSX.Element) {
+  return render(<Provider store={createStore(reducer)}>{ui}</Provider>);
+}
 describe('<Profile/>', () => {
   it('renders the report button on another persons profile', () => {
-    render(<Profile {...notMyProfileProps} />);
+    renderWithRedux(<Profile {...notMyProfileProps} />);
 
     const reportButton: HTMLElement = screen.getByText('buttons.flag-user');
     expect(reportButton).toHaveAttribute('href', '/user/string/report-user');
   });
 
   it('renders correctly', () => {
-    const { container } = render(<Profile {...notMyProfileProps} />);
+    const { container } = renderWithRedux(<Profile {...notMyProfileProps} />);
 
     expect(container).toMatchSnapshot();
   });