fix: challenges navigation (#4123)

* fix: challenges navigation

* fix: challenges navigation alternate solution

* fix: challenges navigation assert non null on find

* refactor: unnecessary default value

beta/src/components/MDX/Challenges/Challenges.tsx

@@ -97,10 +97,10 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
   };
 
   const currentChallenge = challenges.find(({id}) => id === activeChallenge);
-  const nextChallenge = challenges.find(({order}) => {
-    if (!currentChallenge) {
-      return false;
+  if (currentChallenge === undefined) {
+    throw new TypeError('currentChallenge should always exist');
   }
+  const nextChallenge = challenges.find(({order}) => {
     return order === currentChallenge.order + 1;
   });
 
@@ -121,7 +121,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
           </H2>
           {challenges.length > 1 && (
             <Navigation
-              activeChallenge={activeChallenge}
+              currentChallenge={currentChallenge}
               challenges={challenges}
               handleChange={handleChallengeChange}
               isRecipes={isRecipes}
@@ -132,16 +132,16 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
           <div key={activeChallenge}>
             <h3 className="text-xl text-primary dark:text-primary-dark mb-2">
               <div className="font-bold block md:inline">
-                {isRecipes ? 'Recipe' : 'Challenge'} {currentChallenge?.order}{' '}
-                of {challenges.length}
+                {isRecipes ? 'Recipe' : 'Challenge'} {currentChallenge.order} of{' '}
+                {challenges.length}
                 <span className="text-primary dark:text-primary-dark">: </span>
               </div>
-              {currentChallenge?.name}
+              {currentChallenge.name}
             </h3>
-            <>{currentChallenge?.content}</>
+            <>{currentChallenge.content}</>
           </div>
           <div className="flex justify-between items-center mt-4">
-            {currentChallenge?.hint ? (
+            {currentChallenge.hint ? (
               <div>
                 <Button className="mr-2" onClick={toggleHint} active={showHint}>
                   <IconHint className="mr-1.5" />{' '}
@@ -187,14 +187,14 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
               </Button>
             )}
           </div>
-          {showHint && currentChallenge?.hint}
+          {showHint && currentChallenge.hint}
 
           {showSolution && (
             <div className="mt-6">
               <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
                 Solution
               </h3>
-              {currentChallenge?.solution}
+              {currentChallenge.solution}
               <div className="flex justify-between items-center mt-4">
                 <Button onClick={() => setShowSolution(false)}>
                   Close solution

beta/src/components/MDX/Challenges/Navigation.tsx

@@ -11,19 +11,19 @@ const debounce = require('debounce');
 export function Navigation({
   challenges,
   handleChange,
-  activeChallenge,
+  currentChallenge,
   isRecipes,
 }: {
   challenges: ChallengeContents[];
   handleChange: (id: string) => void;
-  activeChallenge: string;
+  currentChallenge: ChallengeContents;
   isRecipes?: boolean;
 }) {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const challengesNavRef = React.useRef(
     challenges.map(() => createRef<HTMLButtonElement>())
   );
-  const [scrollPos, setScrollPos] = React.useState(0);
+  const scrollPos = currentChallenge.order - 1;
   const canScrollLeft = scrollPos > 0;
   const canScrollRight = scrollPos < challenges.length - 1;
 
@@ -37,7 +37,6 @@ export function Navigation({
         containerRef.current.scrollLeft = currentNavRef.offsetLeft;
       }
       handleChange(challenges[scrollPos + 1].id);
-      setScrollPos(scrollPos + 1);
     }
   };
 
@@ -51,7 +50,6 @@ export function Navigation({
         containerRef.current.scrollLeft = currentNavRef.offsetLeft;
       }
       handleChange(challenges[scrollPos - 1].id);
-      setScrollPos(scrollPos - 1);
     }
   };
 
@@ -64,7 +62,6 @@ export function Navigation({
       containerRef.current.scrollLeft = currentNavRef?.offsetLeft || 0;
     }
     handleChange(id);
-    setScrollPos(selectedChallenge);
   };
 
   const handleResize = React.useCallback(() => {
@@ -94,10 +91,10 @@ export function Navigation({
               className={cn(
                 'py-2 mr-4 text-base border-b-4 duration-100 ease-in transition whitespace-nowrap overflow-ellipsis',
                 isRecipes &&
-                  activeChallenge === id &&
+                  currentChallenge.id === id &&
                   'text-purple-50 border-purple-50 hover:text-purple-50 dark:text-purple-30 dark:border-purple-30 dark:hover:text-purple-30',
                 !isRecipes &&
-                  activeChallenge === id &&
+                  currentChallenge.id === id &&
                   'text-link border-link hover:text-link dark:text-link-dark dark:border-link-dark dark:hover:text-link-dark'
               )}
               onClick={() => handleSelectNav(id)}