CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refactor(client): make legacy full stack element a JSX component (#50898)

Browse Source
This commit is contained in:
Muhammed Mustafa 2023-07-11 14:28:15 +03:00 committed by GitHub
parent cdcf9b0099
commit 065269172c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 108 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
client/src/components/settings/certification.tsx
View File

@ -138,6 +138,113 @@ type CertificationSettingsProps = {
} & ClaimedCertifications &
Pick<User, 'completedChallenges' | 'isHonest' | 'username'>;
const LegacyFullStack = (props: CertificationSettingsProps) => {
const {
isFullStackCert,
username,
isHonest,
createFlashMessage,
verifyCert,
is2018DataVisCert,
isApisMicroservicesCert,
isFrontEndLibsCert,
isInfosecQaCert,
isJsAlgoDataStructCert,
isRespWebDesignCert,
t
} = props;
const fullStackClaimable =
is2018DataVisCert &&
isApisMicroservicesCert &&
isFrontEndLibsCert &&
isInfosecQaCert &&
isJsAlgoDataStructCert &&
isRespWebDesignCert;
// Keep the settings page certSlug as full-stack rather than
// legacy-full-stack so we don't break existing links
const certSlug = 'full-stack';
const certLocation = `/certification/${username}/${certSlug}`;
const buttonStyle = {
marginBottom: '30px',
padding: '6px 12px',
fontSize: '18px'
};
const createClickHandler =
(certSlug: keyof typeof certSlugTypeMap) =>
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
if (isFullStackCert) {
return navigate(certLocation);
}
return isHonest
? verifyCert(certSlug)
: createFlashMessage(honestyInfoMessage);
};
return (
<FullWidthRow key={certSlug}>
<Spacer size='medium' />
<h3 className='text-center'>
{t('certification.title.Legacy Full Stack Certification')}
</h3>
<div>
<p>
{t('settings.claim-legacy', {
cert: t('certification.title.Legacy Full Stack Certification')
})}
</p>
<ul>
<li>{t('certification.title.Responsive Web Design')}</li>
<li>
{t('certification.title.JavaScript Algorithms and Data Structures')}
</li>
<li>{t('certification.title.Front End Development Libraries')}</li>
<li>{t('certification.title.Data Visualization')}</li>
<li>{t('certification.title.Back End Development and APIs')}</li>
<li>
{t(
'certification.title.Legacy Information Security and Quality Assurance'
)}
</li>
</ul>
</div>
<div className={'col-xs-12'}>
{fullStackClaimable ? (
<Button
bsSize='sm'
bsStyle='primary'
className={'col-xs-12'}
href={certLocation}
id={'button-' + certSlug}
onClick={createClickHandler(certSlug)}
style={buttonStyle}
target='_blank'
>
{isFullStackCert ? t('buttons.show-cert') : t('buttons.claim-cert')}
</Button>
) : (
<Button
bsSize='sm'
bsStyle='primary'
className={'col-xs-12'}
disabled={true}
id={'button-' + certSlug}
style={buttonStyle}
target='_blank'
>
{t('buttons.claim-cert')}
</Button>
)}
</div>
<Spacer size='medium' />
</FullWidthRow>
);
};
function CertificationSettings(props: CertificationSettingsProps) {
const [projectTitle, setProjectTitle] = useState('');
const [challengeFiles, setChallengeFiles] = useState<
@ -288,117 +395,6 @@ function CertificationSettings(props: CertificationSettingsProps) {
]);
}
const renderLegacyFullStack = () => {
const {
isFullStackCert,
username,
isHonest,
createFlashMessage,
verifyCert,
is2018DataVisCert,
isApisMicroservicesCert,
isFrontEndLibsCert,
isInfosecQaCert,
isJsAlgoDataStructCert,
isRespWebDesignCert,
t
} = props;
const fullStackClaimable =
is2018DataVisCert &&
isApisMicroservicesCert &&
isFrontEndLibsCert &&
isInfosecQaCert &&
isJsAlgoDataStructCert &&
isRespWebDesignCert;
// Keep the settings page certSlug as full-stack rather than
// legacy-full-stack so we don't break existing links
const certSlug = 'full-stack';
const certLocation = `/certification/${username}/${certSlug}`;
const buttonStyle = {
marginBottom: '30px',
padding: '6px 12px',
fontSize: '18px'
};
const createClickHandler =
(certSlug: keyof typeof certSlugTypeMap) =>
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
if (isFullStackCert) {
return navigate(certLocation);
}
return isHonest
? verifyCert(certSlug)
: createFlashMessage(honestyInfoMessage);
};
return (
<FullWidthRow key={certSlug}>
<Spacer size='medium' />
<h3 className='text-center'>
{t('certification.title.Legacy Full Stack Certification')}
</h3>
<div>
<p>
{t('settings.claim-legacy', {
cert: t('certification.title.Legacy Full Stack Certification')
})}
</p>
<ul>
<li>{t('certification.title.Responsive Web Design')}</li>
<li>
{t(
'certification.title.JavaScript Algorithms and Data Structures'
)}
</li>
<li>{t('certification.title.Front End Development Libraries')}</li>
<li>{t('certification.title.Data Visualization')}</li>
<li>{t('certification.title.Back End Development and APIs')}</li>
<li>
{t(
'certification.title.Legacy Information Security and Quality Assurance'
)}
</li>
</ul>
</div>
<div className={'col-xs-12'}>
{fullStackClaimable ? (
<Button
bsSize='sm'
bsStyle='primary'
className={'col-xs-12'}
href={certLocation}
id={'button-' + certSlug}
onClick={createClickHandler(certSlug)}
style={buttonStyle}
target='_blank'
>
{isFullStackCert
? t('buttons.show-cert')
: t('buttons.claim-cert')}
</Button>
) : (
<Button
bsSize='sm'
bsStyle='primary'
className={'col-xs-12'}
disabled={true}
id={'button-' + certSlug}
style={buttonStyle}
target='_blank'
>
{t('buttons.claim-cert')}
</Button>
)}
</div>
<Spacer size='medium' />
</FullWidthRow>
);
};
const { t } = props;
return (
@ -409,7 +405,7 @@ function CertificationSettings(props: CertificationSettingsProps) {
<Certification key={certName} certName={certName} t={t} />
))}
<SectionHeader>{t('settings.headings.legacy-certs')}</SectionHeader>
{renderLegacyFullStack()}
<LegacyFullStack {...props} />
{legacyCertifications.map(certName => (
<Certification key={certName} certName={certName} t={t} />
))}