feat(client): pull percentage challenge data from redux (#49308)

* feat(client): pull percentage challenge data from redux

* Apply suggestions from code review

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* feat: update updateAllChallengesInfo name

---------

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

client/src/components/layouts/default.tsx

@@ -4,6 +4,7 @@ import { TFunction, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { useStaticQuery, graphql } from 'gatsby';
 
 import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff';
 import latoLightURL from '../../../static/fonts/lato/Lato-Light.woff';
@@ -16,7 +17,8 @@ import { isBrowser } from '../../../utils';
 import {
   fetchUser,
   onlineStatusChange,
-  serverStatusChange
+  serverStatusChange,
+  updateAllChallengesInfo
 } from '../../redux/actions';
 import {
   isSignedInSelector,
@@ -26,7 +28,12 @@ import {
   userFetchStateSelector
 } from '../../redux/selectors';
 
-import { UserFetchState, User } from '../../redux/prop-types';
+import {
+  UserFetchState,
+  User,
+  AllChallengeNode,
+  CertificateNode
+} from '../../redux/prop-types';
 import BreadCrumb from '../../templates/Challenges/components/bread-crumb';
 import Flash from '../Flash';
 import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
@@ -77,7 +84,8 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
       fetchUser,
       removeFlashMessage,
       onlineStatusChange,
-      serverStatusChange
+      serverStatusChange,
+      updateAllChallengesInfo
     },
     dispatch
   );
@@ -117,10 +125,13 @@ function DefaultLayout({
   t,
   theme = Themes.Default,
   user,
-  fetchUser
+  fetchUser,
+  updateAllChallengesInfo
 }: DefaultLayoutProps): JSX.Element {
+  const { challengeEdges, certificateNodes } = useGetAllBlockIds();
   useEffect(() => {
     // componentDidMount
+    updateAllChallengesInfo({ challengeEdges, certificateNodes });
     if (!isSignedIn) {
       fetchUser();
     }
@@ -237,6 +248,50 @@ function DefaultLayout({
   }
 }
 
+// TODO: get challenge nodes directly rather than wrapped in edges
+const useGetAllBlockIds = () => {
+  const {
+    allChallengeNode: { edges: challengeEdges },
+    allCertificateNode: { nodes: certificateNodes }
+  }: {
+    allChallengeNode: AllChallengeNode;
+    allCertificateNode: { nodes: CertificateNode[] };
+  } = useStaticQuery(graphql`
+    query getBlockNode {
+      allChallengeNode(
+        sort: {
+          fields: [
+            challenge___superOrder
+            challenge___order
+            challenge___challengeOrder
+          ]
+        }
+      ) {
+        edges {
+          node {
+            challenge {
+              block
+              id
+            }
+          }
+        }
+      }
+      allCertificateNode {
+        nodes {
+          challenge {
+            certification
+            tests {
+              id
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return { challengeEdges, certificateNodes };
+};
+
 DefaultLayout.displayName = 'DefaultLayout';
 
 export default connect(