From fe32f2a1b96bfad74195f8ac47fce444a666ab57 Mon Sep 17 00:00:00 2001
From: ScytheDraven47 <ben.rogers.mckee@gmail.com>
Date: Thu, 25 Nov 2021 20:41:20 +1300
Subject: [PATCH 1/4] fix: challenges navigation

---
 beta/src/components/MDX/Challenges/Navigation.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx
index b91b8e17464..91ef8c5144c 100644
--- a/beta/src/components/MDX/Challenges/Navigation.tsx
+++ b/beta/src/components/MDX/Challenges/Navigation.tsx
@@ -23,7 +23,9 @@ export function Navigation({
   const challengesNavRef = React.useRef(
     challenges.map(() => createRef<HTMLButtonElement>())
   );
-  const [scrollPos, setScrollPos] = React.useState(0);
+  const activeOrder =
+    challenges.find(({id}) => id === activeChallenge)?.order || 1;
+  const scrollPos = activeOrder - 1;
   const canScrollLeft = scrollPos > 0;
   const canScrollRight = scrollPos < challenges.length - 1;
 
@@ -37,7 +39,6 @@ export function Navigation({
         containerRef.current.scrollLeft = currentNavRef.offsetLeft;
       }
       handleChange(challenges[scrollPos + 1].id);
-      setScrollPos(scrollPos + 1);
     }
   };
 
@@ -51,7 +52,6 @@ export function Navigation({
         containerRef.current.scrollLeft = currentNavRef.offsetLeft;
       }
       handleChange(challenges[scrollPos - 1].id);
-      setScrollPos(scrollPos - 1);
     }
   };
 
@@ -64,7 +64,6 @@ export function Navigation({
       containerRef.current.scrollLeft = currentNavRef?.offsetLeft || 0;
     }
     handleChange(id);
-    setScrollPos(selectedChallenge);
   };
 
   const handleResize = React.useCallback(() => {

From a396c09664a367fdb8c67328413f724146cd3909 Mon Sep 17 00:00:00 2001
From: ScytheDraven47 <ben.rogers.mckee@gmail.com>
Date: Thu, 25 Nov 2021 22:59:44 +1300
Subject: [PATCH 2/4] fix: challenges navigation alternate solution

---
 beta/src/components/MDX/Challenges/Challenges.tsx |  2 +-
 beta/src/components/MDX/Challenges/Navigation.tsx | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx
index 9934de66a5a..1861a0c82e9 100644
--- a/beta/src/components/MDX/Challenges/Challenges.tsx
+++ b/beta/src/components/MDX/Challenges/Challenges.tsx
@@ -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}
diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx
index 91ef8c5144c..d490071801c 100644
--- a/beta/src/components/MDX/Challenges/Navigation.tsx
+++ b/beta/src/components/MDX/Challenges/Navigation.tsx
@@ -11,21 +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 activeOrder =
-    challenges.find(({id}) => id === activeChallenge)?.order || 1;
-  const scrollPos = activeOrder - 1;
+  const scrollPos = (currentChallenge?.order || 1) - 1;
   const canScrollLeft = scrollPos > 0;
   const canScrollRight = scrollPos < challenges.length - 1;
 
@@ -93,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)}

From 58593ed6dfe07fe5f76a268c90d4883b3edc99c3 Mon Sep 17 00:00:00 2001
From: ScytheDraven47 <ben.rogers.mckee@gmail.com>
Date: Tue, 30 Nov 2021 09:44:24 +1300
Subject: [PATCH 3/4] fix: challenges navigation assert non null on find

---
 .../components/MDX/Challenges/Challenges.tsx  | 20 +++++++++----------
 .../components/MDX/Challenges/Navigation.tsx  |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx
index 1861a0c82e9..a3a285516a6 100644
--- a/beta/src/components/MDX/Challenges/Challenges.tsx
+++ b/beta/src/components/MDX/Challenges/Challenges.tsx
@@ -97,10 +97,10 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
   };
 
   const currentChallenge = challenges.find(({id}) => id === activeChallenge);
+  if (currentChallenge === undefined) {
+    throw new TypeError('currentChallenge should always exist');
+  }
   const nextChallenge = challenges.find(({order}) => {
-    if (!currentChallenge) {
-      return false;
-    }
     return order === currentChallenge.order + 1;
   });
 
@@ -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
diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx
index d490071801c..3e6a3c5a106 100644
--- a/beta/src/components/MDX/Challenges/Navigation.tsx
+++ b/beta/src/components/MDX/Challenges/Navigation.tsx
@@ -16,14 +16,14 @@ export function Navigation({
 }: {
   challenges: ChallengeContents[];
   handleChange: (id: string) => void;
-  currentChallenge?: ChallengeContents;
+  currentChallenge: ChallengeContents;
   isRecipes?: boolean;
 }) {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const challengesNavRef = React.useRef(
     challenges.map(() => createRef<HTMLButtonElement>())
   );
-  const scrollPos = (currentChallenge?.order || 1) - 1;
+  const scrollPos = (currentChallenge.order || 1) - 1;
   const canScrollLeft = scrollPos > 0;
   const canScrollRight = scrollPos < challenges.length - 1;
 
@@ -91,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 &&
-                  currentChallenge?.id === 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 &&
-                  currentChallenge?.id === 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)}

From 58690c4f49b7d0400c58ebfb24fa48e348280ccb Mon Sep 17 00:00:00 2001
From: ScytheDraven47 <ben.rogers.mckee@gmail.com>
Date: Tue, 30 Nov 2021 13:10:16 +1300
Subject: [PATCH 4/4] refactor: unnecessary default value

---
 beta/src/components/MDX/Challenges/Navigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx
index 3e6a3c5a106..6f82b1bc809 100644
--- a/beta/src/components/MDX/Challenges/Navigation.tsx
+++ b/beta/src/components/MDX/Challenges/Navigation.tsx
@@ -23,7 +23,7 @@ export function Navigation({
   const challengesNavRef = React.useRef(
     challenges.map(() => createRef<HTMLButtonElement>())
   );
-  const scrollPos = (currentChallenge.order || 1) - 1;
+  const scrollPos = currentChallenge.order - 1;
   const canScrollLeft = scrollPos > 0;
   const canScrollRight = scrollPos < challenges.length - 1;