jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-06 06:39:18 -05:00
Code Issues Projects Releases Wiki Activity

fix(ui): render certification on profile page in ul (#55576)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Gagan Bhullar
2024-08-07 14:41:08 -06:00
committed by GitHub
parent bd85192d91
commit 258d687bcc
2 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/profile/components/certifications.css Normal file
View File

@@ -0,0 +1,7 @@
.profile-certifications {
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
}

56
client/src/components/profile/components/certifications.tsx
View File

@@ -6,6 +6,7 @@ import { createSelector } from 'reselect';
import { certificatesByNameSelector } from '../../../redux/selectors';
import type { CurrentCert } from '../../../redux/prop-types';
import { FullWidthRow, Spacer, ButtonLink } from '../../helpers';
import './certifications.css';
const mapStateToProps = (
state: Record<string, unknown>,
@@ -45,7 +46,7 @@ interface CertButtonProps {
function CertButton({ username, cert }: CertButtonProps): JSX.Element {
const { t } = useTranslation();
return (
<>
<li>
<ButtonLink
block
size='large'
@@ -56,7 +57,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
})}
</ButtonLink>
<Spacer size='small' />
</>
</li>
);
}
@@ -69,36 +70,45 @@ function Certificates({
}: CertificationProps): JSX.Element {
const { t } = useTranslation();
return (
<FullWidthRow className='certifications'>
<h2>{t('profile.fcc-certs')}</h2>
<FullWidthRow className='profile-certifications'>
<h2 id='fcc-certifications'>{t('profile.fcc-certs')}</h2>
<br />
{hasModernCert && currentCerts ? (
currentCerts
.filter(({ show }) => show)
.map(cert => (
<CertButton key={cert.certSlug} cert={cert} username={username} />
))
<ul aria-labelledby='fcc-certifications'>
{currentCerts
.filter(({ show }) => show)
.map(cert => (
<CertButton key={cert.certSlug} cert={cert} username={username} />
))}
</ul>
) : (
<p className='text-center'>{t('profile.no-certs')}</p>
)}
{hasLegacyCert ? (
{hasLegacyCert && (
<div>
<Spacer size='medium' />
<h3>{t('settings.headings.legacy-certs')}</h3>
<Spacer size='medium' />
{legacyCerts &&
legacyCerts
.filter(({ show }) => show)
.map(cert => (
<CertButton
key={cert.certSlug}
cert={cert}
username={username}
/>
))}
<h3 id='legacy-certifications'>
{t('settings.headings.legacy-certs')}
</h3>
<Spacer size='medium' />
{legacyCerts && (
<>
<ul aria-labelledby='legacy-certifications'>
{legacyCerts
.filter(({ show }) => show)
.map(cert => (
<CertButton
key={cert.certSlug}
cert={cert}
username={username}
/>
))}
</ul>
<Spacer size='medium' />
</>
)}
</div>
) : null}
)}
<hr />
</FullWidthRow>
);