feat: clickable level selector (#82)

* Clickable Level Selector

When the user clicks on a specific level, it navigates to the desire level, updating the both the level and lesson sides.

* Changed cursor to show level selector is clickable & fixed yarn (#78)

---------

Co-authored-by: Jonah Paten <[email protected]>

src/components/App.tsx

@@ -6,6 +6,12 @@ import '../assets/WestwoodSans-Regular.ttf';
 
 function App(): JSX.Element {
   const [exerciseCount, setExerciseCount] = useState(0);
+  // const [completeExercises, setCompleteExercises] = useState(0);
+
+  const updateLevel = (newLevel: number): void => {
+    setExerciseCount(newLevel - 1);
+  };
+
   if (exerciseCount == 5) {
     return (
       <main>
@@ -16,8 +22,9 @@ function App(): JSX.Element {
   return (
     <div>
       <main>
-        <LessonSide levelNum={exerciseCount + 1} />
+        <LessonSide levelNum={exerciseCount + 1} updateLevel={updateLevel} />
         <ExerciseSide
+          ExercisesNum={exerciseCount}
           incrementExercise={() => setExerciseCount(exerciseCount + 1)}
         />
       </main>

src/components/shared/ExerciseSide.tsx

@@ -13,10 +13,14 @@ import UnitCircleInput from './Exercises/UnitCircleInput';
 ('./Exercises/AxisExercise');
 
 interface ExerciseSideProps {
+  ExercisesNum: number;
   incrementExercise: () => void;
 }
 
-function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
+function ExerciseSide({
+  incrementExercise,
+  ExercisesNum,
+}: ExerciseSideProps): JSX.Element {
   const [completeExercises, setCompleteExercises] = useState(0);
   type availableExercises = 'axis' | 'congrats' | 'graph' | 'unitcircle';
 
@@ -28,6 +32,10 @@ function ExerciseSide({ incrementExercise }: ExerciseSideProps): JSX.Element {
   ];
   let curExercise;
 
+  if (completeExercises != ExercisesNum) {
+    setCompleteExercises(ExercisesNum);
+  }
+
   if (exercises[completeExercises] == 'graph') {
     curExercise = (
       <div>

src/components/shared/LessonSide/LessonSide.tsx

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

src/components/shared/LessonSide/LevelSelector.tsx

@@ -4,13 +4,20 @@ interface LevelSelectorProps {
   numLevels: number;
   currentLevel: number;
   maxLevelReached: number;
+  updateLevel: (newCount: number) => void;
 }
 
 function LevelSelector({
   numLevels,
   currentLevel,
   maxLevelReached,
+  updateLevel,
 }: LevelSelectorProps): JSX.Element {
+  const handleLevelClick = (level: number): void => {
+    if (level <= maxLevelReached) {
+      updateLevel(level);
+    }
+  };
   return (
     <div className="selector-box">
       <div className="level-selector">
@@ -23,6 +30,8 @@ function LevelSelector({
               // If index is even, add a level button. Else, add a level connector.
               return i % 2 == 0 ? (
                 <div
+                  // key={i}
+                  onClick={() => handleLevelClick(level)}
                   className={
                     'level-button' +
                     (level === currentLevel ? ' current-level' : '')

src/styles/LessonSide.scss

@@ -132,6 +132,7 @@
 .level-button:hover {
   background-color: colors.$bg-white;
   color: colors.$primary-green;
+  cursor: pointer;
 }
 
 .level-connector {