refactor(client): get next/prev paths directly from redux (#57434)

client/src/templates/Challenges/classic/show.tsx

@@ -204,7 +204,7 @@ function ShowClassic({
   },
   pageContext: {
     challengeMeta,
-    challengeMeta: { isFirstStep, nextChallengePath, prevChallengePath },
+    challengeMeta: { isFirstStep, nextChallengePath },
     projectPreview: { challengeData }
   },
   createFiles,
@@ -445,8 +445,6 @@ function ShowClassic({
       executeChallenge={executeChallenge}
       containerRef={containerRef}
       instructionsPanelRef={instructionsPanelRef}
-      nextChallengePath={nextChallengePath}
-      prevChallengePath={prevChallengePath}
       usesMultifileEditor={usesMultifileEditor}
       editorRef={editorRef}
     >

client/src/templates/Challenges/codeally/show.tsx

@@ -130,9 +130,6 @@ function ShowCodeAlly(props: ShowCodeAllyProps) {
     },
     isChallengeCompleted,
     isSignedIn,
-    pageContext: {
-      challengeMeta: { nextChallengePath, prevChallengePath }
-    },
     partiallyCompletedChallenges,
     t,
     updateSolutionFormValues
@@ -260,11 +257,7 @@ function ShowCodeAlly(props: ShowCodeAllyProps) {
   };
 
   return (
-    <Hotkeys
-      containerRef={container}
-      nextChallengePath={nextChallengePath}
-      prevChallengePath={prevChallengePath}
-    >
+    <Hotkeys containerRef={container}>
       <LearnLayout>
         <Helmet title={windowTitle} />
         <Container>

client/src/templates/Challenges/components/hotkeys.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 import { HotKeys, GlobalHotKeys } from 'react-hotkeys';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+
 import type {
   ChallengeFiles,
   Test,
   User,
   ChallengeMeta
 } from '../../../redux/prop-types';
-
 import { userSelector } from '../../../redux/selectors';
 import {
   setEditorFocusability,
@@ -20,6 +20,7 @@ import {
 import {
   canFocusEditorSelector,
   challengeFilesSelector,
+  challengeMetaSelector,
   challengeTestsSelector,
   isHelpModalOpenSelector,
   isProjectPreviewModalOpenSelector,
@@ -39,6 +40,7 @@ const mapStateToProps = createSelector(
   challengeFilesSelector,
   challengeTestsSelector,
   userSelector,
+  challengeMetaSelector,
   (
     isHelpModalOpen: boolean,
     isResetModalOpen: boolean,
@@ -47,7 +49,8 @@ const mapStateToProps = createSelector(
     canFocusEditor: boolean,
     challengeFiles: ChallengeFiles,
     tests: Test[],
-    user: User
+    user: User,
+    { nextChallengePath, prevChallengePath }: ChallengeMeta
   ) => ({
     isHelpModalOpen,
     isResetModalOpen,
@@ -56,7 +59,9 @@ const mapStateToProps = createSelector(
     canFocusEditor,
     challengeFiles,
     tests,
-    user
+    user,
+    nextChallengePath,
+    prevChallengePath
   })
 );
 

client/src/templates/Challenges/exam/show.tsx

@@ -164,9 +164,6 @@ function ShowExam(props: ShowExamProps) {
     isChallengeCompleted,
     openExitExamModal,
     openFinishExamModal,
-    pageContext: {
-      challengeMeta: { nextChallengePath, prevChallengePath }
-    },
     t
   } = props;
 
@@ -485,11 +482,7 @@ function ShowExam(props: ShowExamProps) {
       </Row>
     </Container>
   ) : (
-    <Hotkeys
-      containerRef={container}
-      nextChallengePath={nextChallengePath}
-      prevChallengePath={prevChallengePath}
-    >
+    <Hotkeys containerRef={container}>
       <LearnLayout>
         <Helmet title={windowTitle} />
         <Container>

client/src/templates/Challenges/fill-in-the-blank/show.tsx

@@ -178,8 +178,6 @@ const ShowFillInTheBlank = ({
     <Hotkeys
       executeChallenge={() => handleSubmit()}
       containerRef={container}
-      nextChallengePath={challengeMeta.nextChallengePath}
-      prevChallengePath={challengeMeta.prevChallengePath}
       playScene={() => handlePlayScene(true)}
     >
       <LearnLayout>

client/src/templates/Challenges/generic/show.tsx

@@ -96,7 +96,6 @@ const ShowGeneric = ({
   isChallengeCompleted
 }: ShowQuizProps) => {
   const { t } = useTranslation();
-  const { nextChallengePath, prevChallengePath } = challengeMeta;
   const container = useRef<HTMLElement | null>(null);
 
   const blockNameTitle = `${t(
@@ -176,8 +175,6 @@ const ShowGeneric = ({
     <Hotkeys
       executeChallenge={handleSubmit}
       containerRef={container}
-      nextChallengePath={nextChallengePath}
-      prevChallengePath={prevChallengePath}
       playScene={scene ? () => setIsScenePlaying(true) : undefined}
     >
       <LearnLayout>

client/src/templates/Challenges/ms-trophy/show.tsx

@@ -145,9 +145,6 @@ function MsTrophy(props: MsTrophyProps) {
     isProcessing,
     msUsername,
     openHelpModal,
-    pageContext: {
-      challengeMeta: { nextChallengePath, prevChallengePath }
-    },
     t
   } = props;
 
@@ -156,11 +153,7 @@ function MsTrophy(props: MsTrophyProps) {
   )} - ${title}`;
 
   return (
-    <Hotkeys
-      containerRef={container}
-      nextChallengePath={nextChallengePath}
-      prevChallengePath={prevChallengePath}
-    >
+    <Hotkeys containerRef={container}>
       <LearnLayout>
         <Helmet
           title={`${blockNameTitle} | ${t('learn.learn')} | freeCodeCamp.org`}

client/src/templates/Challenges/projects/backend/show.tsx

@@ -151,9 +151,6 @@ const ShowBackEnd = (props: BackEndProps) => {
     },
     isChallengeCompleted,
     output,
-    pageContext: {
-      challengeMeta: { nextChallengePath, prevChallengePath }
-    },
     t,
     tests,
     updateSolutionFormValues
@@ -164,11 +161,7 @@ const ShowBackEnd = (props: BackEndProps) => {
   )} - ${title}`;
 
   return (
-    <Hotkeys
-      containerRef={container}
-      nextChallengePath={nextChallengePath}
-      prevChallengePath={prevChallengePath}
-    >
+    <Hotkeys containerRef={container}>
       <LearnLayout>
         <Helmet
           title={`${blockNameTitle} | ${t('learn.learn')} | freeCodeCamp.org`}

client/src/templates/Challenges/projects/frontend/show.tsx

@@ -122,9 +122,6 @@ const ShowFrontEndProject = (props: ProjectProps) => {
       }
     },
     isChallengeCompleted,
-    pageContext: {
-      challengeMeta: { nextChallengePath, prevChallengePath }
-    },
     t,
     updateSolutionFormValues
   } = props;
@@ -134,11 +131,7 @@ const ShowFrontEndProject = (props: ProjectProps) => {
   )} - ${title}`;
 
   return (
-    <Hotkeys
-      containerRef={container}
-      nextChallengePath={nextChallengePath}
-      prevChallengePath={prevChallengePath}
-    >
+    <Hotkeys containerRef={container}>
       <LearnLayout>
         <Helmet
           title={`${blockNameTitle} | ${t('learn.learn')} | freeCodeCamp.org`}

client/src/templates/Challenges/quiz/show.tsx

@@ -114,7 +114,6 @@ const ShowQuiz = ({
   const { t } = useTranslation();
   const curLocation = useLocation();
 
-  const { nextChallengePath, prevChallengePath } = challengeMeta;
   const container = useRef<HTMLElement | null>(null);
 
   // Campers are not allowed to change their answers once the quiz is submitted.
@@ -282,8 +281,6 @@ const ShowQuiz = ({
     <Hotkeys
       executeChallenge={!isPassed ? handleFinishQuiz : handleSubmitAndGo}
       containerRef={container}
-      nextChallengePath={nextChallengePath}
-      prevChallengePath={prevChallengePath}
     >
       <LearnLayout>
         <Helmet