feat: user can only click up to the max level reached in the level se…

…lector (#86)

* limit the clickability of level selector based on the max level reached

* lint fix + getting rid of console logs

src/components/App.tsx

@@ -1,17 +1,29 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import CongratsPage from './shared/Congratulations';
 import ExerciseSide from './shared/ExerciseSide';
 import LessonSide from './shared/LessonSide/LessonSide';
 import '../assets/WestwoodSans-Regular.ttf';
 
 function App(): JSX.Element {
   const [exerciseCount, setExerciseCount] = useState(0);
-  // const [completeExercises, setCompleteExercises] = useState(0);
+  const [completeExercises, setCompleteExercises] = useState(1);
+
+  //update complete if exercise changes
+  useEffect(() => {
+    updateComplete();
+  }, [exerciseCount]);
 
   const updateLevel = (newLevel: number): void => {
     setExerciseCount(newLevel - 1);
   };
 
+  const updateComplete = (): void => {
+    // console.log(exerciseCount);
+    if (exerciseCount >= completeExercises) {
+      setCompleteExercises(completeExercises + 1);
+    }
+  };
+
   if (exerciseCount == 5) {
     return (
       <main>
@@ -22,7 +34,11 @@ function App(): JSX.Element {
   return (
     <div>
       <main>
-        <LessonSide levelNum={exerciseCount + 1} updateLevel={updateLevel} />
+        <LessonSide
+          levelNum={exerciseCount + 1}
+          updateLevel={updateLevel}
+          maxLevel={completeExercises}
+        />
         <ExerciseSide
           ExercisesNum={exerciseCount}
           incrementExercise={() => setExerciseCount(exerciseCount + 1)}

src/components/shared/ExerciseSide.tsx

@@ -15,13 +15,16 @@ import UnitCircleInput from './Exercises/UnitCircleInput';
 interface ExerciseSideProps {
   ExercisesNum: number;
   incrementExercise: () => void;
+  // maxLevel: number
 }
 
 function ExerciseSide({
   incrementExercise,
   ExercisesNum,
-}: ExerciseSideProps): JSX.Element {
-  const [completeExercises, setCompleteExercises] = useState(0);
+}: // maxLevel,
+ExerciseSideProps): JSX.Element {
+  const [displayExercise, setDisplayExercise] = useState(0);
+
   type availableExercises = 'axis' | 'congrats' | 'graph' | 'unitcircle';
 
   const exercises: availableExercises[] = [
@@ -32,11 +35,11 @@ function ExerciseSide({
   ];
   let curExercise;
 
-  if (completeExercises != ExercisesNum) {
-    setCompleteExercises(ExercisesNum);
+  if (displayExercise != ExercisesNum) {
+    setDisplayExercise(ExercisesNum);
   }
 
-  if (exercises[completeExercises] == 'graph') {
+  if (exercises[displayExercise] == 'graph') {
     curExercise = (
       <div>
         <div>
@@ -118,7 +121,7 @@ function ExerciseSide({
           />
         </div>
     );*/
-  } else if (exercises[completeExercises] == 'axis') {
+  } else if (exercises[displayExercise] == 'axis') {
     curExercise = (
       <div className="exercise-box">
         <AxisParent
@@ -131,14 +134,14 @@ function ExerciseSide({
             ['A', '', '', 'B'],
           ]}
           toNextExercise={() => {
-            setCompleteExercises(completeExercises + 1);
+            setDisplayExercise(displayExercise + 1);
             incrementExercise();
             return;
           }}
         />
       </div>
     );
-  } else if (exercises[completeExercises] === 'unitcircle') {
+  } else if (exercises[displayExercise] === 'unitcircle') {
     curExercise = (
       <div>
         <div>
@@ -149,7 +152,8 @@ function ExerciseSide({
           />
           <UnitCircleInput
             nextExercise={() => {
-              setCompleteExercises(completeExercises + 1);
+              // console.log('unit');
+              setDisplayExercise(displayExercise + 1);
               incrementExercise();
               return;
             }}

src/components/shared/Exercises/AxisParent.tsx

@@ -55,7 +55,7 @@ function AxisParent({
     if (exerciseNum == axisMarkers.length) {
       toNextExercise(); // update parent exercise side that axis input exercise is complete
     }
-  });
+  }, [exerciseNum]);
 
   return (
     <div>

src/components/shared/LessonSide/LessonSide.tsx

@@ -9,10 +9,16 @@ import Turtle from './Turtle';
 interface lessonSideProps {
   levelNum: number;
   updateLevel: (newCount: number) => void;
+  maxLevel: number;
 }
 
-function LessonSide({ levelNum, updateLevel }: lessonSideProps): JSX.Element {
+function LessonSide({
+  levelNum,
+  updateLevel,
+  maxLevel,
+}: lessonSideProps): JSX.Element {
   const lesson_info = LessonSideContent[levelNum] || [];
+  // console.log("max:" + maxLevel);
   return (
     <section id="lesson-side-container">
       <div>
@@ -33,7 +39,7 @@ function LessonSide({ levelNum, updateLevel }: lessonSideProps): JSX.Element {
         <LevelSelector
           numLevels={6}
           currentLevel={levelNum}
-          maxLevelReached={6}
+          maxLevelReached={maxLevel}
           updateLevel={updateLevel}
         />
       </div>

src/components/shared/LessonSide/LevelSelector.tsx

@@ -30,7 +30,7 @@ function LevelSelector({
               // If index is even, add a level button. Else, add a level connector.
               return i % 2 == 0 ? (
                 <div
-                  // key={i}
+                  key={i}
                   onClick={() => handleLevelClick(level)}
                   className={
                     'level-button' +
@@ -43,7 +43,7 @@ function LevelSelector({
                 <div
                   className="level-connector"
                   style={{
-                    visibility: level < maxLevelReached ? 'visible' : 'hidden',
+                    visibility: level < 6 ? 'visible' : 'hidden',
                   }}
                 ></div>
               );