diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts index fcdabb77c9c..fc6bb482401 100644 --- a/client/src/redux/prop-types.ts +++ b/client/src/redux/prop-types.ts @@ -157,6 +157,7 @@ export interface FullScene { export interface PrerequisiteChallenge { id: string; title: string; + slug?: string; } export type ChallengeWithCompletedNode = { diff --git a/client/src/templates/Challenges/exam/components/missing-prerequisites.tsx b/client/src/templates/Challenges/exam/components/missing-prerequisites.tsx index d73a5a1b5dc..76c70f7c8f6 100644 --- a/client/src/templates/Challenges/exam/components/missing-prerequisites.tsx +++ b/client/src/templates/Challenges/exam/components/missing-prerequisites.tsx @@ -1,9 +1,14 @@ +import { useStaticQuery, graphql } from 'gatsby'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { Alert } from '@freecodecamp/ui'; import Spacer from '../../../../components/helpers/spacer'; -import { PrerequisiteChallenge } from '../../../../redux/prop-types'; +import { + AllChallengeNode, + PrerequisiteChallenge +} from '../../../../redux/prop-types'; +import { Link } from '../../../../components/helpers'; interface MissingPrerequisitesProps { missingPrerequisites: PrerequisiteChallenge[]; @@ -13,15 +18,38 @@ function MissingPrerequisites({ missingPrerequisites }: MissingPrerequisitesProps): JSX.Element { const { t } = useTranslation(); + const { challengeEdges } = useAllPrerequisiteChallenges(); + + const allPrerequisiteChallenges: PrerequisiteChallenge[] = challengeEdges.map( + ({ node }) => ({ + id: node.challenge.id, + title: node.challenge.title, + slug: node.challenge.fields.slug + }) + ); + + const newMissingPrerequisites: PrerequisiteChallenge[] = + missingPrerequisites.map(missing => { + const matchingPrerequisite = allPrerequisiteChallenges.find( + matching => matching.id === missing.id + ); + return matchingPrerequisite || missing; + }); return (

{t('learn.exam.not-qualified')}

); @@ -30,3 +58,44 @@ function MissingPrerequisites({ MissingPrerequisites.displayName = 'MissingPrerequisites'; export default MissingPrerequisites; + +const useAllPrerequisiteChallenges = () => { + const { + allChallengeNode: { edges: challengeEdges } + }: { + allChallengeNode: AllChallengeNode; + } = useStaticQuery(graphql` + query getPrerequisiteChallenges { + allChallengeNode( + filter: { + challenge: { + id: { + in: [ + "647f85d407d29547b3bee1bb" + "647f87dc07d29547b3bee1bf" + "647f882207d29547b3bee1c0" + "647f867a07d29547b3bee1bc" + "647f877f07d29547b3bee1be" + "647f86ff07d29547b3bee1bd" + ] + } + } + } + ) { + edges { + node { + challenge { + title + id + fields { + slug + } + } + } + } + } + } + `); + + return { challengeEdges }; +};