Fixed lessons access

lines-of-codes · lines-of-codes · commit 30cd1bf215a2 · 2022-01-10T23:15:37.000+07:00
diff --git a/src/lesson.jsx b/src/lesson.jsx
@@ -1,9 +1,10 @@
 import './css/index.css';
 import { useState, lazy, Suspense, useEffect } from 'react';
+import { useParams } from "react-router-dom";
 import { FaArrowLeft, FaArrowRight, FaHome, FaBars } from "react-icons/fa";
 import "./css/lessonMenu.css";
-import hljs from "highlight.js";
-import "highlight.js/styles/monokai.css";
+import hljs from "highlight.js";
+import "highlight.js/styles/monokai.css";
 
 const theme = localStorage.getItem("theme");
 switch(theme) {
@@ -53,10 +54,10 @@ const lessons = [
 		{id: 0, title: "Data types", content: () => {
 			const Comp = lazy(() => import("./lessons/Lesson5.jsx"));
 			return <Comp/>;
-		}},
-        {id: 1, title: "Variables", content: () => {
-            const Comp = lazy(() => import("./lessons/Lesson6.jsx"));
-            return <Comp/>;
+		}},
+        {id: 1, title: "Variables", content: () => {
+            const Comp = lazy(() => import("./lessons/Lesson6.jsx"));
+            return <Comp/>;
         }}
 	] // Unit 1
 ]
@@ -90,7 +91,7 @@ function NavBar(props) {
 		if (props.unit - 1 < 0) {
 			console.log("This is the first lesson. Cannot go to the previous lesson.");
 			return "";
-		}
+		}
         let unitId = props.unit;
 		if (lessons[--unitId]) {
 			previousInfo = {unit: unitId, lesson: lessons[unitId].length - 1};
@@ -169,19 +170,20 @@ function SideBar(props) {
 	)
 }
 
-function LessonMenu({ match: { params }}) {
+function LessonMenu(props) {
+	let params = useParams();
 	let [unit, setUnit] = useState(params.unit);
 	let [id, setId] = useState(params.id);
-	let [sideBarShouldAppear, setSideBarShouldAppear] = useState(false);
-
-    function LoadingText() {
-        useEffect(() => {
-            return () => {
-                hljs.highlightAll();
-            }
-        }, []);
-
-        return <main><h1>Loading lesson...</h1></main>;
+	let [sideBarShouldAppear, setSideBarShouldAppear] = useState(false);
+
+    function LoadingText() {
+        useEffect(() => {
+            return () => {
+                hljs.highlightAll();
+            }
+        }, []);
+
+        return <main><h1>Loading lesson...</h1></main>;
     }
 
 	function getLessonContent() {
