fix(client): handle final project submission (#50818)

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

client/gatsby-node.js

@@ -80,6 +80,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) {
                   dashedName
                   fields {
                     slug
+                    blockHashSlug
                   }
                   hasEditableBoundaries
                   id

client/plugins/fcc-source-challenges/create-challenge-nodes.js

@@ -40,11 +40,13 @@ function createChallengeNode(
   if (internal.type === 'ChallengeNode') {
     const { tests = [], block, dashedName, superBlock } = challenge;
     const slug = `/learn/${superBlock}/${block}/${dashedName}`;
+    const blockHashSlug = `/learn/${superBlock}/#${block}`;
 
     challenge.fields = {
       slug,
       blockName: block,
-      tests
+      tests,
+      blockHashSlug
     };
   }
 

client/src/templates/Challenges/redux/completion-epic.js

@@ -189,7 +189,7 @@ export default function completionEpic(action$, state$) {
       const state = state$.value;
 
       const {
-        nextChallengeMeta: { block: nextBlock },
+        nextBlock,
         nextChallengePath,
         challengeType,
         superBlock,

client/src/templates/Challenges/redux/index.js

@@ -22,11 +22,7 @@ const initialState = {
     block: '',
     blockHashSlug: '/',
     id: '',
-    nextChallengeMeta: {
-      superBlock: '',
-      block: '',
-      blockHashSlug: '/'
-    },
+    nextBlock: '',
     nextChallengePath: '/',
     prevChallengePath: '/',
     challengeType: -1

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

@@ -53,21 +53,21 @@ const views = {
   // quiz: Quiz
 };
 
-function getIsFirstStep(_node, index, nodeArray) {
-  const current = nodeArray[index];
-  const previous = nodeArray[index - 1];
+function getIsFirstStepInBlock(id, edges) {
+  const current = edges[id];
+  const previous = edges[id - 1];
 
   if (!previous) return true;
   return previous.node.challenge.block !== current.node.challenge.block;
 }
 
-function getNextChallengePath(_node, index, nodeArray) {
-  const next = nodeArray[index + 1];
+function getNextChallengePath(id, edges) {
+  const next = edges[id + 1];
   return next ? next.node.challenge.fields.slug : null;
 }
 
-function getPrevChallengePath(_node, index, nodeArray) {
-  const prev = nodeArray[index - 1];
+function getPrevChallengePath(id, edges) {
+  const prev = edges[id - 1];
   return prev ? prev.node.challenge.fields.slug : null;
 }
 
@@ -75,29 +75,9 @@ function getTemplateComponent(challengeType) {
   return views[viewTypes[challengeType]];
 }
 
-function getNextChallengeMeta(_node, index, nodeArray) {
-  const next = nodeArray[index + 1];
-  if (next) {
-    const { superBlock, block } = next.node.challenge;
-    return {
-      superBlock,
-      block,
-      blockHashSlug: createBlockHashSlug(_node)
-    };
-  }
-  return null;
-}
-
-function createBlockHashSlug(_node) {
-  if (_node) {
-    const {
-      block,
-      fields: { slug }
-    } = _node;
-    const re = new RegExp(`${block}.*`);
-    return slug.replace(re, `#${block}`);
-  }
-  return null;
+function getNextBlock(id, edges) {
+  const next = edges[id + 1];
+  return next ? next.node.challenge.block : null;
 }
 
 exports.createChallengePages = function (createPage) {
@@ -107,7 +87,7 @@ exports.createChallengePages = function (createPage) {
       certification,
       superBlock,
       block,
-      fields: { slug },
+      fields: { slug, blockHashSlug },
       required = [],
       template,
       challengeType,
@@ -121,29 +101,17 @@ exports.createChallengePages = function (createPage) {
       component: getTemplateComponent(challengeType),
       context: {
         challengeMeta: {
-          blockHashSlug: createBlockHashSlug(challenge),
+          blockHashSlug,
           dashedName,
           certification,
           superBlock,
           block,
-          isFirstStep: getIsFirstStep(challenge, index, allChallengeEdges),
+          isFirstStep: getIsFirstStepInBlock(index, allChallengeEdges),
           template,
           required,
-          nextChallengeMeta: getNextChallengeMeta(
-            challenge,
-            index,
-            allChallengeEdges
-          ),
-          nextChallengePath: getNextChallengePath(
-            challenge,
-            index,
-            allChallengeEdges
-          ),
-          prevChallengePath: getPrevChallengePath(
-            challenge,
-            index,
-            allChallengeEdges
-          ),
+          nextBlock: getNextBlock(index, allChallengeEdges),
+          nextChallengePath: getNextChallengePath(index, allChallengeEdges),
+          prevChallengePath: getPrevChallengePath(index, allChallengeEdges),
           id
         },
         projectPreview: getProjectPreviewConfig(challenge, allChallengeEdges),

cypress/e2e/default/learn/challenges/navigation.ts

@@ -12,6 +12,36 @@ const challenge2 = {
     '/learn/college-algebra-with-python/#build-a-data-graph-explorer-project'
 };
 
+const rwdChallenge = {
+  url: '/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage',
+  nextUrl:
+    'http://localhost:8000/learn/2022/responsive-web-design/#build-a-personal-portfolio-webpage-project'
+};
+
+const rwdChallengeSolution = `<head>
+<style>
+@media (max-width: 500px){
+nav{
+display: none;
+}
+}
+</style>
+</head>
+<body>
+<nav id="navbar">
+<a href="#projects">text</a> |
+</nav>
+<main>
+<section id="welcome-section">
+<h1>text</h1>
+</section><hr>
+<section id="projects">
+<h1>Projects</h1>
+<h2 class="project-tile"><a id="profile-link" target="_blank" href="https://freecodecamp.org">text</a></h2>
+</section><hr>
+</body>
+</html>`;
+
 describe('submitting a challenge', () => {
   before(() => {
     cy.task('seed');
@@ -35,4 +65,14 @@ describe('submitting a challenge', () => {
     cy.contains('Submit and go to next challenge').click();
     cy.url().should('include', challenge2.nextUrl);
   });
+
+  it('should take you to the superblock page with the current hash after completing a multifile cert project', () => {
+    cy.visit(rwdChallenge.url);
+    cy.get('[data-cy=editor-container-indexhtml]')
+      .click()
+      .type(rwdChallengeSolution)
+      .type('{ctrl}{enter}', { release: false, delay: 100 });
+    cy.contains('Submit and go to next challenge').click();
+    cy.url().should('include', rwdChallenge.nextUrl);
+  });
 });