refactor: use cert-slugs where possible (freeCodeCamp#57505)

1420663 · Dec 13, 2024 · 1690afe · 1690afe
1 parent cf18718
commit 1690afe
Show file tree

Hide file tree

Showing 10 changed files with 163 additions and 268 deletions.
diff --git a/client/config/cert-and-project-map.test.ts b/client/config/cert-and-project-map.test.ts
diff --git a/client/config/cert-and-project-map.ts b/client/config/cert-and-project-map.ts
@@ -881,29 +881,19 @@ const liveCerts = showUpcomingChanges
   : [...currentCerts, ...legacyCerts, fullstackCert];
 
 type CertsToProjects = Record<
-  (typeof allStandardCerts)[number]['title'],
+  (typeof allStandardCerts)[number]['certSlug'],
   (typeof allStandardCerts)[number]['projects']
 >;
 
 const certsToProjects = allStandardCerts.reduce((acc, curr) => {
   return {
     ...acc,
-    [curr.title]: curr.projects
+    [curr.certSlug]: curr.projects
   };
 }, {} as CertsToProjects);
 
-const currentCertTitles = currentCerts.map(({ title }) => title);
-const legacyCertTitles = legacyCerts.map(({ title }) => title);
-const upcomingCertTitles = upcomingCerts.map(({ title }) => title);
-
 export type CertTitle =
   | (typeof liveCerts)[number]['title']
   | 'Legacy Full Stack';
 
-export {
-  currentCertTitles,
-  legacyCertTitles,
-  upcomingCertTitles,
-  liveCerts,
-  certsToProjects
-};
+export { liveCerts, certsToProjects };
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
@@ -1047,50 +1047,50 @@
       }
     },
     "title": {
-      "Responsive Web Design": "Responsive Web Design",
-      "responsive-web-design": "Responsive Web Design Certification",
-      "JavaScript Algorithms and Data Structures": "Legacy JavaScript Algorithms and Data Structures",
-      "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures Certification",
-      "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures (Beta) Certification",
-      "Front End Development Libraries": "Front End Development Libraries",
-      "front-end-development-libraries": "Front End Development Libraries Certification",
-      "Data Visualization": "Data Visualization",
-      "data-visualization": "Data Visualization Certification",
-      "Relational Database": "Relational Database",
-      "relational-database-v8": "Relational Database Certification",
-      "Back End Development and APIs": "Back End Development and APIs",
-      "back-end-development-and-apis": "Back End Development and APIs Certification",
-      "Quality Assurance": "Quality Assurance",
-      "quality-assurance-v7": "Quality Assurance Certification",
-      "Scientific Computing with Python": "Scientific Computing with Python",
-      "scientific-computing-with-python-v7": "Scientific Computing with Python Certification",
-      "Data Analysis with Python": "Data Analysis with Python",
-      "data-analysis-with-python-v7": "Data Analysis with Python Certification",
-      "Information Security": "Information Security",
-      "information-security-v7": "Information Security Certification",
-      "Machine Learning with Python": "Machine Learning with Python",
-      "machine-learning-with-python-v7": "Machine Learning with Python Certification",
-      "College Algebra with Python": "College Algebra with Python",
-      "college-algebra-with-python-v8": "College Algebra with Python Certification",
-      "Foundational C# with Microsoft": "Foundational C# with Microsoft",
-      "foundational-c-sharp-with-microsoft": "Foundational C# with Microsoft Certification",
-      "A2 English for Developers": "A2 English for Developers",
-      "a2-english-for-developers": "A2 English for Developers Certification",
-      "B1 English for Developers": "B1 English for Developers",
-      "b1-english-for-developers": "B1 English for Developers Certification",
-      "Full Stack Developer": "Full Stack Developer",
-      "full-stack-developer-v9": "Certified Full Stack Developer",
-      "Legacy Front End": "Legacy Front End",
-      "legacy-front-end": "Legacy Front End Certification",
-      "Legacy Back End": "Legacy Back End",
-      "legacy-back-end": "Legacy Back End Certification",
-      "Legacy Data Visualization": "Legacy Data Visualization",
-      "legacy-data-visualization": "Legacy Data Visualization Certification",
-      "Legacy Information Security and Quality Assurance": "Legacy Information Security and Quality Assurance",
-      "information-security-and-quality-assurance": "Legacy Information Security and Quality Assurance Certification",
-      "Legacy Full Stack Certification": "Legacy Full Stack Certification",
-      "Legacy Full Stack": "Legacy Full Stack",
-      "full-stack": "Legacy Full Stack Certification"
+      "responsive-web-design": "Responsive Web Design",
+      "responsive-web-design-cert": "Responsive Web Design Certification",
+      "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures",
+      "javascript-algorithms-and-data-structures-cert": "Legacy JavaScript Algorithms and Data Structures Certification",
+      "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures (Beta)",
+      "javascript-algorithms-and-data-structures-v8-cert": "JavaScript Algorithms and Data Structures (Beta) Certification",
+      "front-end-development-libraries": "Front End Development Libraries",
+      "front-end-development-libraries-cert": "Front End Development Libraries Certification",
+      "data-visualization": "Data Visualization",
+      "data-visualization-cert": "Data Visualization Certification",
+      "relational-database-v8": "Relational Database",
+      "relational-database-v8-cert": "Relational Database Certification",
+      "back-end-development-and-apis": "Back End Development and APIs",
+      "back-end-development-and-apis-cert": "Back End Development and APIs Certification",
+      "quality-assurance-v7": "Quality Assurance",
+      "quality-assurance-v7-cert": "Quality Assurance Certification",
+      "scientific-computing-with-python-v7": "Scientific Computing with Python",
+      "scientific-computing-with-python-v7-cert": "Scientific Computing with Python Certification",
+      "data-analysis-with-python-v7": "Data Analysis with Python",
+      "data-analysis-with-python-v7-cert": "Data Analysis with Python Certification",
+      "information-security-v7": "Information Security",
+      "information-security-v7-cert": "Information Security Certification",
+      "machine-learning-with-python-v7": "Machine Learning with Python",
+      "machine-learning-with-python-v7-cert": "Machine Learning with Python Certification",
+      "college-algebra-with-python-v8": "College Algebra with Python",
+      "college-algebra-with-python-v8-cert": "College Algebra with Python Certification",
+      "foundational-c-sharp-with-microsoft": "Foundational C# with Microsoft",
+      "foundational-c-sharp-with-microsoft-cert": "Foundational C# with Microsoft Certification",
+      "a2-english-for-developers": "A2 English for Developers",
+      "a2-english-for-developers-cert": "A2 English for Developers Certification",
+      "b1-english-for-developers": "B1 English for Developers",
+      "b1-english-for-developers-cert": "B1 English for Developers Certification",
+      "full-stack-developer-v9": "Full Stack Developer",
+      "full-stack-developer-v9-cert": "Full Stack Developer Certification",
+      "legacy-front-end": "Legacy Front End",
+      "legacy-front-end-cert": "Legacy Front End Certification",
+      "legacy-back-end": "Legacy Back End",
+      "legacy-back-end-cert": "Legacy Back End Certification",
+      "legacy-data-visualization": "Legacy Data Visualization",
+      "legacy-data-visualization-cert": "Legacy Data Visualization Certification",
+      "information-security-and-quality-assurance": "Legacy Information Security and Quality Assurance",
+      "information-security-and-quality-assurance-cert": "Legacy Information Security and Quality Assurance Certification",
+      "full-stack": "Legacy Full Stack",
+      "full-stack-cert": "Legacy Full Stack Certification"
     }
   },
   "certification-card": {

diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
@@ -35,9 +35,8 @@ import {
 import { PaymentContext } from '../../../shared/config/donation-settings';
 import ribbon from '../assets/images/ribbon.svg';
 import {
+  Certification,
   CertSlug,
-  certTypes,
-  certTypeTitleMap,
   linkedInCredentialIds
 } from '../../../shared/config/certification-settings';
 import MultiTierDonationForm from '../components/Donation/multi-tier-donation-form';
@@ -327,8 +326,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
     </Row>
   );
 
-  const isMicrosoftCert =
-    certTitle === certTypeTitleMap[certTypes.foundationalCSharpV8];
+  const isMicrosoftCert = certSlug === Certification.FoundationalCSharp;
 
   return (
     <Container className='certificate-outer-wrapper'>
@@ -376,7 +374,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
                     ? 'certification.fulltextNoHours'
                     : 'certification.fulltext'
                 }
-                title={certTitle}
+                title={t(`certification.title.${certSlug}`, certTitle)}
               >
                 <h3>placeholder</h3>
                 <h1>
@@ -388,7 +386,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
                 <h1 data-playwright-test-label='certification-title'>
                   <strong>
                     {{
-                      title: t(`certification.title.${certTitle}`, certTitle)
+                      title: t(`certification.title.${certSlug}`, certTitle)
                     }}
                   </strong>
                 </h1>
@@ -487,7 +485,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
         <Spacer size='l' />
         {signedInUserName === username ? shareCertBtns : ''}
         <Spacer size='l' />
-        <ShowProjectLinks certName={certTitle} name={displayName} user={user} />
+        <ShowProjectLinks certSlug={certSlug} name={displayName} user={user} />
         <Spacer size='l' />
       </div>
     </Container>

diff --git a/client/src/client-only-routes/show-project-links.tsx b/client/src/client-only-routes/show-project-links.tsx
@@ -7,10 +7,7 @@ import { Table, Spacer } from '@freecodecamp/ui';
 import { Link } from '../components/helpers';
 import ProjectModal from '../components/SolutionViewer/project-modal';
 import type { CompletedChallenge, User } from '../redux/prop-types';
-import {
-  certsToProjects,
-  type CertTitle
-} from '../../config/cert-and-project-map';
+import { certsToProjects } from '../../config/cert-and-project-map';
 
 import { SolutionDisplayWidget } from '../components/solution-display-widget';
 import ProjectPreviewModal from '../templates/Challenges/components/project-preview-modal';
@@ -20,8 +17,9 @@ import { openModal } from '../templates/Challenges/redux/actions';
 
 import { regeneratePathAndHistory } from '../../../shared/utils/polyvinyl';
 import '../components/layouts/project-links.css';
+import { Certification } from '../../../shared/config/certification-settings';
 interface ShowProjectLinksProps {
-  certName: string;
+  certSlug: Certification;
   name: string;
   user: User;
   openModal: (arg: string) => void;
@@ -101,28 +99,27 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
     );
   };
 
-  const ProjectsFor = ({ certName }: { certName: CertTitle }) => {
-    if (certName === 'Legacy Full Stack') {
+  const ProjectsFor = ({ certSlug }: { certSlug: Certification }) => {
+    if (certSlug === Certification.LegacyFullStack) {
       const certs = [
-        { title: 'Responsive Web Design' },
-        { title: 'Legacy JavaScript Algorithms and Data Structures' },
-        { title: 'Front End Development Libraries' },
-        { title: 'Data Visualization' },
-        { title: 'Back End Development and APIs' },
-        { title: 'Legacy Information Security and Quality Assurance' }
+        { name: Certification.RespWebDesign },
+        { name: Certification.JsAlgoDataStruct },
+        { name: Certification.LegacyFrontEnd },
+        { name: Certification.LegacyDataVis },
+        { name: Certification.LegacyBackEnd },
+        { name: Certification.LegacyInfoSecQa }
       ] as const;
 
       return (
         <>
           {certs.map((cert, ind) => {
-            const projects = certsToProjects[cert.title];
-            const { certSlug } = projects[0];
-            const certLocation = `/certification/${username}/${certSlug}`;
+            const certLocation = `/certification/${username}/${cert.name}`;
+
             return (
               <tr key={ind}>
                 <td>
                   <Link className='project-link' to={certLocation} external>
-                    {t(`certification.title.${cert.title}`, cert.title)}
+                    {t(`certification.title.${cert.name}`)}
                   </Link>
                 </td>
               </tr>
@@ -132,7 +129,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
       );
     }
 
-    const projects = certsToProjects[certName];
+    const projects = certsToProjects[certSlug];
     return (
       <>
         {projects.map(({ link, title, id }) => (
@@ -150,17 +147,17 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
   };
 
   const {
-    certName,
+    certSlug,
     name,
     user: { username }
   } = props;
   const { completedChallenge, showCode, projectTitle } = solutionState;
   const examResults = completedChallenge?.examResults;
 
-  const getCertHeading = (certName: string) => {
-    if (certName == 'Legacy Full Stack') {
+  const getCertHeading = (cert: Certification) => {
+    if (cert === Certification.LegacyFullStack) {
       return 'certification.project.heading-legacy-full-stack';
-    } else if (certName == 'Foundational C# with Microsoft') {
+    } else if (cert === Certification.FoundationalCSharp) {
       return 'certification.project.heading-exam';
     } else {
       return 'certification.project.heading';
@@ -177,15 +174,9 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
       }
     : null;
 
-  const isCertName = (maybeCertName: string): maybeCertName is CertTitle => {
-    if (maybeCertName === 'Legacy Full Stack') return true;
-    return maybeCertName in certsToProjects;
-  };
-  if (!isCertName(certName)) return <div> Unknown Certification</div>;
-
   return (
     <div data-playwright-test-label='project-links'>
-      {t(getCertHeading(certName), { user: name })}
+      {t(getCertHeading(certSlug), { user: name })}
       <Spacer size='m' />
       <Table striped>
         <thead>
@@ -196,7 +187,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
           </tr>
         </thead>
         <tbody>
-          <ProjectsFor certName={certName} />
+          <ProjectsFor certSlug={certSlug} />
         </tbody>
       </Table>
       <Spacer size='m' />
@@ -216,7 +207,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
       />
       <ExamResultsModal projectTitle={projectTitle} examResults={examResults} />
 
-      {certName != 'Foundational C# with Microsoft' && (
+      {certSlug !== Certification.FoundationalCSharp && (
         <Trans i18nKey='certification.project.footnote'>
           If you suspect that any of these projects violate the{' '}
           <a

diff --git a/client/src/components/profile/components/certifications.tsx b/client/src/components/profile/components/certifications.tsx
@@ -54,7 +54,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
         href={`/certification/${username}/${cert.certSlug}`}
       >
         {t('buttons.view-cert-title', {
-          certTitle: t(`certification.title.${cert.certSlug}`)
+          certTitle: t(`certification.title.${cert.certSlug}-cert`)
         })}
       </ButtonLink>
       <Spacer size='xs' />

diff --git a/client/src/components/profile/components/time-line.tsx b/client/src/components/profile/components/time-line.tsx
@@ -267,7 +267,7 @@ function useIdToNameMap(t: TFunction): Map<string, NameMap> {
   const idToNameMap = new Map();
   for (const id of getCertIds()) {
     const certPath = getPathFromID(id);
-    const certName = t(`certification.title.${certPath}`);
+    const certName = t(`certification.title.${certPath}-cert`);
     idToNameMap.set(id, {
       challengeTitle: certName,
       certPath: certPath