refactor(client): simplify page creation (freeCodeCamp#55720)

gagan-bhullar-tech · Aug 13, 2024 · 041a841 · 041a841
1 parent 90b2cfb
commit 041a841
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 58 deletions.
diff --git a/client/gatsby-node.js b/client/gatsby-node.js
@@ -23,11 +23,7 @@ exports.onCreateNode = function onCreateNode({ node, actions, getNode }) {
   if (node.internal.type === 'MarkdownRemark') {
     const slug = createFilePath({ node, getNode });
     if (!slug.includes('LICENSE')) {
-      const {
-        frontmatter: { component = '' }
-      } = node;
       createNodeField({ node, name: 'slug', value: slug });
-      createNodeField({ node, name: 'component', value: component });
     }
   }
 };
@@ -74,6 +70,7 @@ exports.createPages = async function createPages({
       ) {
         edges {
           node {
+            id
             challenge {
               block
               blockType
@@ -122,17 +119,14 @@ exports.createPages = async function createPages({
             fields {
               slug
               nodeIdentity
-              component
             }
             frontmatter {
               certification
               block
               superBlock
               title
             }
-            htmlAst
             id
-            excerpt
           }
         }
       }

diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts
@@ -19,32 +19,15 @@ export type CurrentCert = {
 };
 
 export type MarkdownRemark = {
-  fields: [{ component: string; nodeIdentity: string; slug: string }];
-  fileAbsolutePath: string;
   frontmatter: {
     block: string;
     superBlock: SuperBlocks;
     // TODO: make enum like superBlock
     certification: string;
     title: CertTitle;
   };
-  headings: [
-    {
-      depth: number;
-      value: string;
-      id: string;
-    }
-  ];
   html: string;
-  htmlAst: Record<string, unknown>;
   id: string;
-  rawMarkdownBody: string;
-  timeToRead: number;
-  wordCount: {
-    paragraphs: number;
-    sentences: number;
-    words: number;
-  };
 };
 
 export type MultipleChoiceAnswer = {

diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx
@@ -532,8 +532,8 @@ ShowClassic.displayName = 'ShowClassic';
 export default connect(mapStateToProps, mapDispatchToProps)(ShowClassic);
 
 export const query = graphql`
-  query ClassicChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query ClassicChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         block
         demoType

diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
@@ -426,8 +426,8 @@ export default connect(
 
 // GraphQL
 export const query = graphql`
-  query CodeAllyChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query CodeAllyChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         block
         fields {

diff --git a/client/src/templates/Challenges/dialogue/show.tsx b/client/src/templates/Challenges/dialogue/show.tsx
@@ -329,8 +329,8 @@ export default connect(
 )(withTranslation()(ShowDialogue));
 
 export const query = graphql`
-  query Dialogue($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query Dialogue($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         videoId
         title

diff --git a/client/src/templates/Challenges/exam/show.tsx b/client/src/templates/Challenges/exam/show.tsx
@@ -596,8 +596,8 @@ export default connect(
 
 // GraphQL
 export const query = graphql`
-  query ExamChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query ExamChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         block
         challengeType

diff --git a/client/src/templates/Challenges/fill-in-the-blank/show.tsx b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
@@ -429,8 +429,8 @@ export default connect(
 )(withTranslation()(ShowFillInTheBlank));
 
 export const query = graphql`
-  query FillInTheBlankChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query FillInTheBlankChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         title
         description

diff --git a/client/src/templates/Challenges/ms-trophy/show.tsx b/client/src/templates/Challenges/ms-trophy/show.tsx
@@ -250,8 +250,8 @@ export default connect(
 )(withTranslation()(MsTrophy));
 
 export const query = graphql`
-  query MsTrophyChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query MsTrophyChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         title
         description

diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
@@ -452,8 +452,8 @@ export default connect(
 )(withTranslation()(ShowOdin));
 
 export const query = graphql`
-  query TheOdinProject($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query TheOdinProject($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         videoId
         videoLocaleIds {

diff --git a/client/src/templates/Challenges/projects/backend/show.tsx b/client/src/templates/Challenges/projects/backend/show.tsx
@@ -282,8 +282,8 @@ export default connect(
 )(withTranslation()(BackEnd));
 
 export const query = graphql`
-  query BackendChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query BackendChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         forumTopicId
         title

diff --git a/client/src/templates/Challenges/projects/frontend/show.tsx b/client/src/templates/Challenges/projects/frontend/show.tsx
@@ -228,8 +228,8 @@ export default connect(
 )(withTranslation()(Project));
 
 export const query = graphql`
-  query ProjectChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query ProjectChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         forumTopicId
         title

diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx
@@ -359,8 +359,8 @@ export default connect(
 )(withTranslation()(ShowVideo));
 
 export const query = graphql`
-  query VideoChallenge($slug: String!) {
-    challengeNode(challenge: { fields: { slug: { eq: $slug } } }) {
+  query VideoChallenge($id: String!) {
+    challengeNode(id: { eq: $id }) {
       challenge {
         videoId
         videoLocaleIds {

diff --git a/client/src/templates/Introduction/intro.tsx b/client/src/templates/Introduction/intro.tsx
@@ -64,8 +64,8 @@ IntroductionPage.displayName = 'IntroductionPage';
 export default IntroductionPage;
 
 export const query = graphql`
-  query IntroPageBySlug($slug: String!, $block: String!) {
-    markdownRemark(fields: { slug: { eq: $slug } }) {
+  query IntroPageBySlug($id: String!, $block: String!) {
+    markdownRemark(id: { eq: $id }) {
       frontmatter {
         block
         superBlock

diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx
@@ -276,8 +276,8 @@ export default connect(
 )(withTranslation()(memo(SuperBlockIntroductionPage)));
 
 export const query = graphql`
-  query SuperBlockIntroPageBySlug($slug: String!, $superBlock: String!) {
-    markdownRemark(fields: { slug: { eq: $slug } }) {
+  query SuperBlockIntroPageBySlug($id: String!, $superBlock: String!) {
+    markdownRemark(id: { eq: $id }) {
       frontmatter {
         certification
         superBlock

diff --git a/client/utils/gatsby/challenge-page-creator.js b/client/utils/gatsby/challenge-page-creator.js
@@ -99,7 +99,7 @@ function getNextBlock(id, edges) {
 }
 
 exports.createChallengePages = function (createPage) {
-  return function ({ node: { challenge } }, index, allChallengeEdges) {
+  return function ({ node }, index, allChallengeEdges) {
     const {
       dashedName,
       disableLoopProtectTests,
@@ -112,7 +112,7 @@ exports.createChallengePages = function (createPage) {
       template,
       challengeType,
       id
-    } = challenge;
+    } = node.challenge;
     // TODO: challengeType === 7 and isPrivate are the same, right? If so, we
     // should remove one of them.
 
@@ -136,8 +136,11 @@ exports.createChallengePages = function (createPage) {
           prevChallengePath: getPrevChallengePath(index, allChallengeEdges),
           id
         },
-        projectPreview: getProjectPreviewConfig(challenge, allChallengeEdges),
-        slug
+        projectPreview: getProjectPreviewConfig(
+          node.challenge,
+          allChallengeEdges
+        ),
+        id: node.id
       }
     });
   };
@@ -176,15 +179,16 @@ exports.createBlockIntroPages = function (createPage) {
   return function (edge) {
     const {
       fields: { slug },
-      frontmatter: { block }
+      frontmatter: { block },
+      id
     } = edge.node;
 
     createPage({
       path: slug,
       component: intro,
       context: {
         block,
-        slug
+        id
       }
     });
   };
@@ -194,7 +198,8 @@ exports.createSuperBlockIntroPages = function (createPage) {
   return function (edge) {
     const {
       fields: { slug },
-      frontmatter: { superBlock, certification }
+      frontmatter: { superBlock, certification },
+      id
     } = edge.node;
 
     if (!certification) {
@@ -210,9 +215,8 @@ exports.createSuperBlockIntroPages = function (createPage) {
       path: slug,
       component: superBlockIntro,
       context: {
-        certification,
-        superBlock,
-        slug
+        id,
+        superBlock
       }
     });
   };