refactor(client): move queries for map to map component (#59074)

client/src/components/Map/index.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Spacer } from '@freecodecamp/ui';
+import { graphql, useStaticQuery } from 'gatsby';
 
 import {
   type SuperBlocks,
@@ -38,10 +39,17 @@ interface MapProps {
   currentCerts: CurrentCert[];
   claimedCertifications?: ClaimedCertifications;
   completedChallengeIds: string[];
-  allChallenges: {
-    id: string;
-    superBlock: SuperBlocks;
-  }[];
+}
+
+interface Data {
+  allChallengeNode: {
+    nodes: {
+      challenge: {
+        id: string;
+        superBlock: SuperBlocks;
+      };
+    }[];
+  };
 }
 
 const linkSpacingStyle = {
@@ -128,11 +136,25 @@ function Map({
   forLanding = false,
   isSignedIn,
   currentCerts,
-  completedChallengeIds,
-  allChallenges
+  completedChallengeIds
 }: MapProps): React.ReactElement {
   const { t } = useTranslation();
+  const {
+    allChallengeNode: { nodes: challengeNodes }
+  }: Data = useStaticQuery(graphql`
+    query {
+      allChallengeNode {
+        nodes {
+          challenge {
+            id
+            superBlock
+          }
+        }
+      }
+    }
+  `);
 
+  const allChallenges = challengeNodes.map(node => node.challenge);
   const allSuperblockChallengesCompleted = (superblock: SuperBlocks) => {
     // array of all challenge ID's in the superblock
     const allSuperblockChallenges = allChallenges

client/src/components/landing/components/certifications.tsx

@@ -2,17 +2,9 @@ import React from 'react';
 import { Col, Spacer } from '@freecodecamp/ui';
 
 import Map from '../../Map/index';
-import { type SuperBlocks } from '../../../../../shared/config/curriculum';
 import BigCallToAction from './big-call-to-action';
 
-const Certifications = ({
-  allChallenges
-}: {
-  allChallenges: {
-    id: string;
-    superBlock: SuperBlocks;
-  }[];
-}): JSX.Element => {
+const Certifications = (): JSX.Element => {
   return (
     <Col
       className='certification-section'
@@ -22,7 +14,7 @@ const Certifications = ({
       smOffset={1}
       xs={12}
     >
-      <Map allChallenges={allChallenges} forLanding={true} />
+      <Map forLanding={true} />
       <Spacer size='m' />
       <BigCallToAction />
       <Spacer size='m' />

client/src/pages/index.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { graphql } from 'gatsby';
 import { useTranslation } from 'react-i18next';
 import { useGrowthBook } from '@growthbook/growthbook-react';
-import { SuperBlocks } from '../../../shared/config/curriculum';
 import SEO from '../components/seo';
 import { Loader } from '../components/helpers';
 import LandingTop from '../components/landing/components/landing-top';
@@ -14,29 +12,12 @@ import Faq from '../components/landing/components/faq';
 import Benefits from '../components/landing/components/benefits';
 import '../components/landing/landing.css';
 
-type Challenge = {
-  id: string;
-  superBlock: SuperBlocks;
-};
-
-type Props = {
-  data: {
-    allChallengeNode: {
-      nodes: {
-        challenge: Challenge;
-      }[];
-    };
-  };
-};
-
 type LandingProps = {
-  allChallenges: Challenge[];
   showLandingPageRedesign: boolean;
   showBenefitsSection: boolean;
 };
 
 const Landing = ({
-  allChallenges,
   showLandingPageRedesign,
   showBenefitsSection
 }: LandingProps) => (
@@ -47,19 +28,14 @@ const Landing = ({
     {showBenefitsSection ? <Benefits /> : <AsSeenIn />}
 
     <Testimonials />
-    <Certifications allChallenges={allChallenges} />
+    <Certifications />
     <Faq />
   </main>
 );
 
-function IndexPage({
-  data: {
-    allChallengeNode: { nodes: challengeNodes }
-  }
-}: Props): JSX.Element {
+function IndexPage(): JSX.Element {
   const { t } = useTranslation();
   const growthbook = useGrowthBook();
-  const allChallenges = challengeNodes.map(node => node.challenge);
   if (growthbook && growthbook.ready) {
     const showLandingPageRedesign = growthbook.getFeatureValue(
       'landing-page-redesign',
@@ -74,7 +50,6 @@ function IndexPage({
       <>
         <SEO title={t('metaTags:title')} />
         <Landing
-          allChallenges={allChallenges}
           showLandingPageRedesign={showLandingPageRedesign}
           showBenefitsSection={showBenefitsSection}
         />
@@ -93,16 +68,3 @@ function IndexPage({
 IndexPage.displayName = 'IndexPage';
 
 export default IndexPage;
-
-export const query = graphql`
-  query AllChallengeNode {
-    allChallengeNode {
-      nodes {
-        challenge {
-          id
-          superBlock
-        }
-      }
-    }
-  }
-`;

client/src/pages/learn.tsx

@@ -16,7 +16,6 @@ import {
 } from '../redux/selectors';
 
 import callGA from '../analytics/call-ga';
-import { SuperBlocks } from '../../../shared/config/curriculum';
 
 interface FetchState {
   pending: boolean;
@@ -57,14 +56,6 @@ interface LearnPageProps {
         fields: Slug;
       };
     };
-    allChallengeNode: {
-      nodes: {
-        challenge: {
-          id: string;
-          superBlock: SuperBlocks;
-        };
-      }[];
-    };
   };
 }
 
@@ -77,8 +68,7 @@ function LearnPage({
       challenge: {
         fields: { slug }
       }
-    },
-    allChallengeNode: { nodes: challengeNodes }
+    }
   }
 }: LearnPageProps) {
   const { t } = useTranslation();
@@ -105,7 +95,7 @@ function LearnPage({
               onLearnDonationAlertClick={onLearnDonationAlertClick}
               isDonating={isDonating}
             />
-            <Map allChallenges={challengeNodes.map(node => node.challenge)} />
+            <Map />
             <Spacer size='l' />
           </Col>
         </Row>
@@ -133,13 +123,5 @@ export const query = graphql`
         }
       }
     }
-    allChallengeNode {
-      nodes {
-        challenge {
-          id
-          superBlock
-        }
-      }
-    }
   }
 `;

client/src/templates/Introduction/super-block-intro.tsx

@@ -307,7 +307,7 @@ const SuperBlockIntroductionPage = (props: SuperBlockProps) => {
                 {t(`intro:misc-text.browse-other`)}
               </h3>
               <Spacer size='m' />
-              <Map allChallenges={allChallenges} />
+              <Map />
               <Spacer size='l' />
             </Col>
           </Row>