refactor(client,curriculum): update certification type to use Certification enum (#65727)

client/src/redux/prop-types.ts

@@ -3,7 +3,10 @@ import type {
   ChallengeLang,
   SuperBlocks
 } from '@freecodecamp/shared/config/curriculum';
-import type { CertificationFlags } from '@freecodecamp/shared/config/certification-settings';
+import type {
+  Certification,
+  CertificationFlags
+} from '@freecodecamp/shared/config/certification-settings';
 import type { Chapter } from '@freecodecamp/shared/config/chapters';
 import { BlockLayouts, BlockLabel } from '@freecodecamp/shared/config/blocks';
 import type { ChallengeFile, Ext } from '@freecodecamp/shared/utils/polyvinyl';
@@ -30,8 +33,7 @@ export type MarkdownRemark = {
   frontmatter: {
     block: string;
     superBlock: SuperBlocks;
-    // TODO: make enum like superBlock
-    certification: string;
+    certification: Certification;
     title: CertTitle;
   };
   html: string;
@@ -209,7 +211,7 @@ export type ChallengeNode = {
     block: string;
     blockLabel?: BlockLabel;
     blockLayout: BlockLayouts;
-    certification: string;
+    certification: Certification;
     challengeOrder: number;
     challengeType: number;
     dashedName: string;
@@ -372,8 +374,7 @@ type QuizQuestion = {
 
 export type CertificateNode = {
   challenge: {
-    // TODO: use enum
-    certification: string;
+    certification: Certification;
     tests: { id: string }[];
   };
 };

client/src/templates/Introduction/components/cert-challenge.tsx

@@ -22,8 +22,7 @@ import {
 import { getCertifications } from '../../../components/profile/components/utils/certification';
 
 interface CertChallengeProps {
-  // TODO: create enum/reuse SuperBlocks enum somehow
-  certification: string;
+  certification: Certification;
   fetchState: {
     pending: boolean;
     complete: boolean;

client/src/templates/Introduction/components/super-block-map.tsx

@@ -19,6 +19,7 @@ import type {
 import { SuperBlockIcon } from '../../../assets/superblock-icon';
 import { Link } from '../../../components/helpers';
 import {
+  type Certification,
   certSlugTypeMap,
   certificationRequirements,
   superBlockToCertMap
@@ -45,7 +46,7 @@ type Challenge = {
 };
 
 type SuperBlockMapProps = {
-  certification: string;
+  certification: Certification;
   completedChallengeIds: string[];
   disabledBlocks: string[];
   initialExpandedBlock: string;
@@ -66,7 +67,7 @@ const BlockList = ({
   title,
   user
 }: {
-  certification: string;
+  certification: Certification;
   disabledBlocks: string[];
   showCertification: boolean;
   superBlock: SuperBlocks;

client/src/templates/Introduction/super-block-intro.tsx

@@ -34,7 +34,10 @@ import type {
   ChapterBasedSuperBlockStructure
 } from '../../redux/prop-types';
 import { CertTitle, liveCerts } from '../../../config/cert-and-project-map';
-import { superBlockToCertMap } from '@freecodecamp/shared/config/certification-settings';
+import {
+  type Certification,
+  superBlockToCertMap
+} from '@freecodecamp/shared/config/certification-settings';
 import { BlockLayouts, BlockLabel } from '@freecodecamp/shared/config/blocks';
 import LegacyLinks from './components/legacy-links';
 import HelpTranslate from './components/help-translate';
@@ -83,7 +86,7 @@ type SuperBlockProps = {
   pageContext: {
     superBlock: SuperBlocks;
     title: CertTitle;
-    certification: string;
+    certification: Certification;
   };
   resetExpansion: () => void;
   toggleBlock: (arg0: string) => void;

client/src/utils/get-completion-percentage.test.ts

@@ -6,6 +6,7 @@ import {
   getCompletedChallengesInBlock,
   getCurrentBlockIds
 } from './get-completion-percentage';
+import { Certification } from '@freecodecamp/shared/config/certification-settings';
 
 describe('get-completion-percentage', () => {
   describe('getCompletedPercentage', () => {
@@ -156,21 +157,21 @@ describe('get-completion-percentage', () => {
             challenge: {
               id: 'block-challenge-1',
               block: 'basic-html',
-              certification: 'responsive-web-design'
+              certification: Certification.RespWebDesignV9
             }
           } as Partial<ChallengeNode> as ChallengeNode,
           {
             challenge: {
               id: 'block-challenge-2',
               block: 'basic-html',
-              certification: 'responsive-web-design'
+              certification: Certification.RespWebDesignV9
             }
           } as Partial<ChallengeNode> as ChallengeNode,
           {
             challenge: {
               id: 'other-block-challenge',
               block: 'basic-css',
-              certification: 'responsive-web-design'
+              certification: Certification.RespWebDesignV9
             }
           } as Partial<ChallengeNode> as ChallengeNode
         ],
@@ -180,7 +181,7 @@ describe('get-completion-percentage', () => {
       const result = getCurrentBlockIds(
         allChallengesInfo,
         'basic-html',
-        'responsive-web-design',
+        Certification.RespWebDesignV9,
         challengeTypes.step
       );
 
@@ -193,7 +194,7 @@ describe('get-completion-percentage', () => {
         certificateNodes: [
           {
             challenge: {
-              certification: 'responsive-web-design',
+              certification: Certification.RespWebDesignV9,
               tests: [
                 { id: 'cert-project-1' },
                 { id: 'cert-project-2' },
@@ -207,7 +208,7 @@ describe('get-completion-percentage', () => {
       const result = getCurrentBlockIds(
         allChallengesInfo,
         'responsive-web-design-projects',
-        'responsive-web-design',
+        Certification.RespWebDesignV9,
         challengeTypes.frontEndProject
       );
 
@@ -226,14 +227,14 @@ describe('get-completion-percentage', () => {
             challenge: {
               id: 'project-1',
               block: 'back-end-projects',
-              certification: 'back-end-development'
+              certification: Certification.BackEndDevApisV9
             }
           } as Partial<ChallengeNode> as ChallengeNode,
           {
             challenge: {
               id: 'project-2',
               block: 'back-end-projects',
-              certification: 'back-end-development'
+              certification: Certification.BackEndDevApisV9
             }
           } as Partial<ChallengeNode> as ChallengeNode
         ],
@@ -243,7 +244,7 @@ describe('get-completion-percentage', () => {
       const result = getCurrentBlockIds(
         allChallengesInfo,
         'back-end-projects',
-        'back-end-development',
+        Certification.BackEndDevApisV9,
         challengeTypes.backEndProject
       );
 
@@ -267,7 +268,7 @@ describe('get-completion-percentage', () => {
       const result = getCurrentBlockIds(
         allChallengesInfo,
         'non-existent-block',
-        'responsive-web-design',
+        Certification.RespWebDesignV9,
         challengeTypes.step
       );
 

client/src/utils/get-completion-percentage.ts

@@ -1,3 +1,4 @@
+import { type Certification } from '@freecodecamp/shared/config/certification-settings';
 import { AllChallengesInfo } from '../redux/prop-types';
 import { isProjectBased } from './curriculum-layout';
 
@@ -36,7 +37,7 @@ export function getCompletedChallengesInBlock(
 export const getCurrentBlockIds = (
   allChallengesInfo: AllChallengesInfo,
   block: string,
-  certification: string,
+  certification: Certification,
   challengeType: number
 ): string[] => {
   const { challengeNodes, certificateNodes } = allChallengesInfo;

curriculum/src/build-certification.ts

@@ -1,10 +1,11 @@
 import { readFileSync } from 'fs';
 import { load } from 'js-yaml';
+import { type Certification } from '@freecodecamp/shared/config/certification-settings';
 
 interface CertificationChallenge {
   id: string;
   title: string;
-  certification: string;
+  certification: Certification;
   challengeType: number;
   tests: { id: string; title: string }[];
 }