refactor: replace isChallenge (#50033)

* refactor: replace isChallenge

Determining if a path is a challenge by the number of path segments is
brittle and we ended up writing bizarre things like
isChallenge(nextChallengePath).

This should be a little more robust. i.e. if we need to know if a page
is a challenge, we can check the challengeMeta

* test: update tests with new logic

client/utils/gatsby/challenge-page-creator.js

@@ -58,12 +58,12 @@ function getIsFirstStep(_node, index, nodeArray) {
 
 function getNextChallengePath(_node, index, nodeArray) {
   const next = nodeArray[index + 1];
-  return next ? next.node.challenge.fields.slug : '/learn';
+  return next ? next.node.challenge.fields.slug : null;
 }
 
 function getPrevChallengePath(_node, index, nodeArray) {
   const prev = nodeArray[index - 1];
-  return prev ? prev.node.challenge.fields.slug : '/learn';
+  return prev ? prev.node.challenge.fields.slug : null;
 }
 
 function getTemplateComponent(challengeType) {

client/utils/gatsby/layout-selector.test.tsx

@@ -19,7 +19,8 @@ interface NameAndProps {
 }
 function getComponentNameAndProps(
   elementType: React.JSXElementConstructor<never>,
-  pathname: string
+  pathname: string,
+  pageContext?: { challengeMeta?: { block?: string; superBlock?: string } }
 ): NameAndProps {
   // eslint-disable-next-line testing-library/render-result-naming-convention
   const shallow = ShallowRenderer.createRenderer();
@@ -28,7 +29,8 @@ function getComponentNameAndProps(
     props: {
       location: {
         pathname
-      }
+      },
+      pageContext
     }
   });
   shallow.render(<Provider store={store}>{LayoutReactComponent}</Provider>);
@@ -44,10 +46,21 @@ function getComponentNameAndProps(
   };
 }
 
-test('Challenge path should have DefaultLayout and no footer', () => {
+const challengePageContext = {
+  challengeMeta: {
+    block: 'Basic HTML and HTML5',
+    superBlock: 'responsive-web-design'
+  }
+};
+
+test('Challenges should have DefaultLayout and no footer', () => {
   const challengePath =
     '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements';
-  const compnentObj = getComponentNameAndProps(Learn, challengePath);
+  const compnentObj = getComponentNameAndProps(
+    Learn,
+    challengePath,
+    challengePageContext
+  );
   expect(compnentObj.name).toEqual('DefaultLayout');
   expect(compnentObj.props.showFooter).toEqual(false);
 });
@@ -59,15 +72,19 @@ test('SuperBlock path should have DefaultLayout and footer', () => {
   expect(compnentObj.props.showFooter).toEqual(true);
 });
 
-test('i18l challenge path should have DefaultLayout and no footer', () => {
+test('i18n challenge path should have DefaultLayout and no footer', () => {
   const challengePath =
     'espanol/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements/';
-  const compnentObj = getComponentNameAndProps(Learn, challengePath);
+  const compnentObj = getComponentNameAndProps(
+    Learn,
+    challengePath,
+    challengePageContext
+  );
   expect(compnentObj.name).toEqual('DefaultLayout');
   expect(compnentObj.props.showFooter).toEqual(false);
 });
 
-test('i18l superBlock path should have DefaultLayout and footer', () => {
+test('i18n superBlock path should have DefaultLayout and footer', () => {
   const superBlockPath = '/learn/responsive-web-design/';
   const compnentObj = getComponentNameAndProps(Learn, superBlockPath);
   expect(compnentObj.name).toEqual('DefaultLayout');

client/utils/gatsby/layout-selector.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import CertificationLayout from '../../src/components/layouts/certification';
 import DefaultLayout from '../../src/components/layouts/default';
 import FourOhFourPage from '../../src/pages/404';
-import { isChallenge } from '../../src/utils/path-parsers';
 
 interface LayoutSelectorProps {
   element: JSX.Element;
@@ -20,6 +19,8 @@ export default function layoutSelector({
     location: { pathname }
   } = props;
 
+  const isChallenge = !!props.pageContext?.challengeMeta;
+
   if (element.type === FourOhFourPage) {
     return (
       <DefaultLayout pathname={pathname} showFooter={true}>
@@ -30,7 +31,7 @@ export default function layoutSelector({
     return (
       <CertificationLayout pathname={pathname}>{element}</CertificationLayout>
     );
-  } else if (isChallenge(pathname)) {
+  } else if (isChallenge) {
     return (
       <DefaultLayout
         pathname={pathname}