refactor(client): replace Map's static query with page queries (freeCodeCamp#55792)

Author: ojeytonwilliams

client/src/components/Map/index.tsx

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { graphql, useStaticQuery } from 'gatsby';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
@@ -27,11 +26,7 @@ import {
 
 import { RibbonIcon } from '../../assets/icons/completion-ribbon';
 
-import {
-  CurrentCert,
-  ClaimedCertifications,
-  AllChallengeNode
-} from '../../redux/prop-types';
+import { CurrentCert, ClaimedCertifications } from '../../redux/prop-types';
 import {
   certSlugTypeMap,
   superBlockCertTypeMap
@@ -44,6 +39,10 @@ interface MapProps {
   currentCerts: CurrentCert[];
   claimedCertifications?: ClaimedCertifications;
   completedChallengeIds: string[];
+  allChallenges: {
+    id: string;
+    superBlock: SuperBlocks;
+  }[];
 }
 
 const linkSpacingStyle = {
@@ -131,29 +130,9 @@ function Map({
   forLanding = false,
   isSignedIn,
   currentCerts,
-  completedChallengeIds
+  completedChallengeIds,
+  allChallenges
 }: MapProps): React.ReactElement {
-  const {
-    allChallengeNode: { edges }
-  }: {
-    allChallengeNode: AllChallengeNode;
-  } = useStaticQuery(graphql`
-    query allChallenges {
-      allChallengeNode {
-        edges {
-          node {
-            challenge {
-              id
-              superBlock
-            }
-          }
-        }
-      }
-    }
-  `);
-
-  const allChallenges = edges.map(edge => edge.node.challenge);
-
   const { t } = useTranslation();
 
   const allSuperblockChallengesCompleted = (superblock: SuperBlocks) => {

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

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

client/src/components/landing/index.tsx

@@ -1,11 +1,103 @@
 import React from 'react';
+import { graphql } from 'gatsby';
+import { useTranslation } from 'react-i18next';
+import { useGrowthBook } from '@growthbook/growthbook-react';
 
-import Landing from '../components/landing';
+import { SuperBlocks } from '../../../shared/config/curriculum';
+import SEO from '../components/seo';
+import { Loader } from '../components/helpers';
+import LandingTop from '../components/landing/components/landing-top';
+import LandingTopB from '../components/landing/components/landing-top-b';
+import AsSeenIn from '../components/landing/components/as-seen-in';
+import Testimonials from '../components/landing/components/testimonials';
+import Certifications from '../components/landing/components/certifications';
+import Faq from '../components/landing/components/faq';
+import '../components/landing/landing.css';
 
-function IndexPage(): JSX.Element {
-  return <Landing />;
+type Challenge = {
+  id: string;
+  superBlock: SuperBlocks;
+};
+
+type Props = {
+  data: {
+    allChallengeNode: {
+      nodes: {
+        challenge: Challenge;
+      }[];
+    };
+  };
+};
+
+type LandingProps = {
+  allChallenges: Challenge[];
+};
+
+const LandingA = ({ allChallenges }: LandingProps) => (
+  <main className='landing-page'>
+    <LandingTop />
+    <AsSeenIn />
+    <Testimonials />
+    <Certifications allChallenges={allChallenges} />
+    <Faq />
+  </main>
+);
+
+const LandingB = ({ allChallenges }: LandingProps) => (
+  <main className='landing-page landing-page-b'>
+    <LandingTopB />
+    <Testimonials />
+    <Certifications allChallenges={allChallenges} />
+    <Faq />
+  </main>
+);
+
+function IndexPage({
+  data: {
+    allChallengeNode: { nodes: challengeNodes }
+  }
+}: Props): 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',
+      false
+    );
+    return (
+      <>
+        <SEO title={t('metaTags:title')} />
+        {showLandingPageRedesign === true ? (
+          <LandingB allChallenges={allChallenges} />
+        ) : (
+          <LandingA allChallenges={allChallenges} />
+        )}
+      </>
+    );
+  } else {
+    return (
+      <>
+        <SEO title={t('metaTags:title')} />
+        <Loader fullScreen={true} />
+      </>
+    );
+  }
 }
 
 IndexPage.displayName = 'IndexPage';
 
 export default IndexPage;
+
+export const query = graphql`
+  query AllChallengeNode {
+    allChallengeNode {
+      nodes {
+        challenge {
+          id
+          superBlock
+        }
+      }
+    }
+  }
+`;

client/src/components/landing/landing.test.tsx

@@ -17,6 +17,7 @@ import {
 } from '../redux/selectors';
 
 import callGA from '../analytics/call-ga';
+import { SuperBlocks } from '../../../shared/config/curriculum';
 
 interface FetchState {
   pending: boolean;
@@ -57,6 +58,14 @@ interface LearnPageProps {
         fields: Slug;
       };
     };
+    allChallengeNode: {
+      nodes: {
+        challenge: {
+          id: string;
+          superBlock: SuperBlocks;
+        };
+      }[];
+    };
   };
 }
 
@@ -69,7 +78,8 @@ function LearnPage({
       challenge: {
         fields: { slug }
       }
-    }
+    },
+    allChallengeNode: { nodes: challengeNodes }
   }
 }: LearnPageProps) {
   const { t } = useTranslation();
@@ -96,7 +106,7 @@ function LearnPage({
               onLearnDonationAlertClick={onLearnDonationAlertClick}
               isDonating={isDonating}
             />
-            <Map />
+            <Map allChallenges={challengeNodes.map(node => node.challenge)} />
             <Spacer size='large' />
           </Col>
         </Row>
@@ -110,7 +120,7 @@ LearnPage.displayName = 'LearnPage';
 export default connect(mapStateToProps)(LearnPage);
 
 export const query = graphql`
-  query FirstChallenge {
+  query LearnPageQuery {
     challengeNode(
       challenge: {
         superOrder: { eq: 0 }
@@ -124,5 +134,13 @@ export const query = graphql`
         }
       }
     }
+    allChallengeNode {
+      nodes {
+        challenge {
+          id
+          superBlock
+        }
+      }
+    }
   }
 `;