diff --git a/client/gatsby-node.js b/client/gatsby-node.js index c1c91a486ec..1ff2ba48ee6 100644 --- a/client/gatsby-node.js +++ b/client/gatsby-node.js @@ -80,6 +80,7 @@ exports.createPages = function createPages({ graphql, actions, reporter }) { dashedName fields { slug + blockHashSlug } hasEditableBoundaries id diff --git a/client/plugins/fcc-source-challenges/create-challenge-nodes.js b/client/plugins/fcc-source-challenges/create-challenge-nodes.js index cfff10d2323..9c30d5be05a 100644 --- a/client/plugins/fcc-source-challenges/create-challenge-nodes.js +++ b/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 }; } diff --git a/client/src/templates/Challenges/redux/completion-epic.js b/client/src/templates/Challenges/redux/completion-epic.js index 03be35efe6a..ea5fa9060a0 100644 --- a/client/src/templates/Challenges/redux/completion-epic.js +++ b/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, diff --git a/client/src/templates/Challenges/redux/index.js b/client/src/templates/Challenges/redux/index.js index 0700ff75250..713e32e5a9b 100644 --- a/client/src/templates/Challenges/redux/index.js +++ b/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 diff --git a/client/utils/gatsby/challenge-page-creator.js b/client/utils/gatsby/challenge-page-creator.js index 5b4ccff6487..ec0ce84c0c1 100644 --- a/client/utils/gatsby/challenge-page-creator.js +++ b/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), diff --git a/cypress/e2e/default/learn/challenges/navigation.ts b/cypress/e2e/default/learn/challenges/navigation.ts index 778e3f13911..ea72a88cb40 100644 --- a/cypress/e2e/default/learn/challenges/navigation.ts +++ b/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 = ` + + + + +
+
+

text

+

+
+

Projects

+

text

+

+ +`; + 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); + }); });