feat: switch from md file data to meta.js files

Planet-NULLCAST · May 18, 2021 · 6a192b3 · 6a192b3
1 parent 61ef8dd
commit 6a192b3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 33 deletions.
diff --git a/component/editor/Editor.js b/component/editor/Editor.js
@@ -7,16 +7,22 @@ import { javascript } from "@codemirror/lang-javascript";
 import { oneDark } from "@codemirror/theme-one-dark";
 import Runbutton from "./RunButton";
 
-const Codemirror = ({ initialValue }) => {
+const Codemirror = ({ courseName, chapterName }) => {
   useEffect(() => {
     if (editor.current)
       editor.current.setState(
         EditorState.create({
           doc: "",
-          extensions: [basicSetup, javascript(), oneDark, onUpdate(), baseTheme]
+          extensions: [
+            basicSetup,
+            javascript(),
+            oneDark,
+            onUpdate(),
+            baseTheme,
+          ],
         })
       );
-  }, [initialValue]);
+  }, [chapterName]);
   // Local state
   const [editorValue, setEditorValue] = useState("");
   const [editorTreeValue, setEditorTreeValue] = useState([]);
@@ -40,14 +46,14 @@ const Codemirror = ({ initialValue }) => {
 
   let baseTheme = EditorView.baseTheme({
     ".cm-scroller": {
-      height: "85vh"
+      height: "85vh",
     },
     "&light .cm-o-replacement": {
-      backgroundColor: "#04c"
+      backgroundColor: "#04c",
     },
     "&dark .cm-o-replacement": {
-      backgroundColor: "#5bf"
-    }
+      backgroundColor: "#5bf",
+    },
   });
 
   // Initialize view
@@ -56,10 +62,10 @@ const Codemirror = ({ initialValue }) => {
     editor.current = new EditorView({
       state: EditorState.create({
         doc: "",
-        extensions: [basicSetup, javascript(), oneDark, onUpdate(), baseTheme]
+        extensions: [basicSetup, javascript(), oneDark, onUpdate(), baseTheme],
       }),
       parent: el,
-      baseTheme
+      baseTheme,
     });
   }, []);
 
@@ -68,8 +74,8 @@ const Codemirror = ({ initialValue }) => {
       <div id="codemirror-editor-wrapper" />
       <Runbutton
         editorVal={editorTreeValue}
-        courseName={initialValue.courseName}
-        chapterName={initialValue.chapterName}
+        courseName={courseName}
+        chapterName={chapterName}
       />
     </div>
   );

diff --git a/context/user/UserState.js b/context/user/UserState.js
@@ -7,14 +7,7 @@ const UserState = ({ children }) => {
   const initialState = {
     user: {},
     run: false,
-    test: [
-      {
-        id: 1,
-        case: ["", ""],
-        hint: "Go forward",
-        isCorrect: true
-      }
-    ]
+    test: [],
   };
 
   const [state, dispatch] = useReducer(UserReducer, initialState);
@@ -23,15 +16,15 @@ const UserState = ({ children }) => {
   const setTest = (testCase) => {
     dispatch({
       type: SET_TESTS,
-      payload: testCase
+      payload: testCase,
     });
   };
 
   //set run
   const setRun = (value) => {
     dispatch({
       type: SET_RUN,
-      payload: value
+      payload: value,
     });
   };
 
@@ -44,7 +37,7 @@ const UserState = ({ children }) => {
         run: state.run,
         test: state.test,
         setTest,
-        setRun
+        setRun,
       }}
     >
       {children}

diff --git a/courses/javascript/introduction.md b/courses/javascript/introduction.md
@@ -8,10 +8,10 @@ testCase:
     {
       id: 1,
       chapterName: "introduction",
-      case: ["", ""],
+      case: [],
       hint: "Go forward",
-      isCorrect: true
-    }
+      isCorrect: true,
+    },
   ]
 ---
 

diff --git a/pages/curriculum/[courseName]/[chapterName].js b/pages/curriculum/[courseName]/[chapterName].js
@@ -79,7 +79,6 @@ export default function Chapter({ chapterData, chapterName, courseName }) {
   }, [testCase]);
   useEffect(() => {
     let progressTem = JSON.parse(window.localStorage.getItem("progress"));
-    console.log(progressTem);
     if (progressTem) {
       let progressData = progressTem.find((post, index) => {
         if (post.courseName === courseName) {
@@ -118,9 +117,10 @@ export default function Chapter({ chapterData, chapterName, courseName }) {
   }, [progress]);
 
   let currentCourse = getCourse(courseName);
-  const routerClick = (courseName, chapterName, e) => {
+  const routerClick = (courseName, chapterEntry, e) => {
     e.preventDefault();
-    if (chapterName) {
+    if (chapterEntry !== undefined) {
+      let chapterName = chapterEntry.chapterUrl;
       router.push(`/curriculum/${courseName}/${chapterName}`);
     }
     return;
@@ -163,7 +163,7 @@ export default function Chapter({ chapterData, chapterName, courseName }) {
           />
         </div>
         <div>
-          <Editor initialValue={chapterData} />
+          <Editor courseName={courseName} chapterName={chapterName} />
         </div>
         <div>
           <Output />
@@ -185,10 +185,16 @@ export default function Chapter({ chapterData, chapterName, courseName }) {
               chapterData.prev ? `cursor-pointer` : `cursor-not-allowed`
             }`}
             onClick={(e) =>
-              routerClick(chapterData.courseName, chapterData.prev, e)
+              routerClick(
+                courseName,
+                currentCourse.chapters[
+                  findCourseIndex(courses, chapterName, courseName, false) - 1
+                ],
+                e
+              )
             }
           >
-            {chapterData.prev ? (
+            {findCourseIndex(courses, chapterName, courseName, false) > 0 ? (
               <img
                 src="/images/svgs/leftarrawo.svg"
                 className="h-12 inline-block"
@@ -215,9 +221,18 @@ export default function Chapter({ chapterData, chapterName, courseName }) {
             className={`text-white ${
               chapterData.next ? `cursor-pointer` : `cursor-not-allowed`
             }`}
-            onClick={(e) => routerClick(courseName, chapterData.next, e)}
+            onClick={(e) =>
+              routerClick(
+                courseName,
+                currentCourse.chapters[
+                  findCourseIndex(courses, chapterName, courseName, false) + 1
+                ],
+                e
+              )
+            }
           >
-            {chapterData.next ? (
+            {findCourseIndex(courses, chapterName, courseName, false) + 1 <
+            currentCourse.chapters.length ? (
               <img
                 src="/images/svgs/rightarrow.svg"
                 className="h-12 inline-block"