feat: curriculum progress local storage

Author: JulienDemarque

data/javascript/minus-operator-coercion/index.json

@@ -1,7 +1,7 @@
 {
   "title": "Minus Operator Coercion",
+  "key": "minus-operator-coercion",
   "description": "Understand the - operator implicit type coercion",
-  "questionFile": "question.js",
   "difficulty": 3,
   "explanation": "The - here is the arithmetic substraction operator. If the operands (the left and right of the -) are booleans or numbers or strings, it will coerce to numbers (true becomes 1, false becomes 0). If the operands are not valid numbers or cannot be coerce to numbers, it will result in NaN",
   "correctAnswer": "1 NaN 2",

data/javascript/plus-operator-coercion/index.json

@@ -1,7 +1,7 @@
 {
   "title": "Plus Operator Coercion",
+  "key": "plus-operator-coercion",
   "description": "Understand the + operator implicit type coercion",
-  "questionFile": "question.js",
   "difficulty": 3,
   "explanation": "Since JavaScript is a weakly-typed language, values can also be converted between different types automatically, and it is called implicit type coercion. The + here is the arithmetic addition operator. If the operands (the left and right of the +) are booleans or numbers, it will coerce to numbers (true becomes 1, false becomes 0). If any of the operands is a string, it will do string concatenation.",
   "correctAnswer": "1 'truefoo' 'bar5'",

data/javascript/simple-add/index.json

@@ -1,7 +1,7 @@
 {
   "title": "Simple Add",
+  "key": "simple-add",
   "description": "Solve a simple addition",
-  "questionFile": "question.js",
   "difficulty": 1,
   "correctAnswer": "5",
   "explanation": "Arrow function is an other way to write a function, simpleAdd(2,3) returns the sum of 2 and 3",

package.json

@@ -14,6 +14,9 @@
     "precommit": "yarn run lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.5",
     "bootstrap": "^4.3.1",
     "css-loader": "^3.2.0",
     "express": "^4.17.1",

src/js/views/Javascript.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Container } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+
+import data from '../../../../data/javascript/index.json';
+import './javascript.css';
+
+const Javascript = () => {
+  const curriculumProgress = JSON.parse(
+    localStorage.getItem('curriculumProgress'),
+  );
+  const showCurriculumProgress = key => {
+    if (curriculumProgress[key] === 'success') {
+      return <FontAwesomeIcon icon={faCheck} color="green" />;
+    }
+    if (curriculumProgress[key] === 'fail') {
+      return <FontAwesomeIcon icon={faTimes} color="red" />;
+    }
+    return '';
+  };
+  return (
+    <Container className="mt-5 mb-3">
+      <h2>This is Javascript</h2>
+      <div>
+        {data.quizzes.map(quizz => (
+          <div key={quizz.key}>
+            <Link to={`javascript/${quizz.key}`} className="link-question">
+              {quizz.title}
+            </Link>
+            {showCurriculumProgress(quizz.key)}
+          </div>
+        ))}
+      </div>
+    </Container>
+  );
+};
+
+export default Javascript;

src/js/views/Javascript/index.jsx

@@ -0,0 +1,4 @@
+.link-question {
+  color: #333;
+  margin-right: 5px;
+}

src/js/views/Javascript/javascript.css

@@ -9,20 +9,27 @@ import JsList from '../../../data/javascript/index.json';
 const JsExercise = ({ match }) => {
   const [data, setData] = useState({});
   const [userAnswer, setUserAnswer] = useState('');
-  const [question, setQuestion] = useState('const a = "loading";');
+  const [question, setQuestion] = useState('');
   const [result, setResult] = useState('');
   const [nextQuestion, setNextQuestion] = useState({});
 
-  console.log('match', match);
-
   const onSubmit = e => {
     e.preventDefault();
-
+    let curriculumProgress = JSON.parse(
+      localStorage.getItem('curriculumProgress'),
+    );
     if (userAnswer === data.correctAnswer) {
       setResult('success');
+      curriculumProgress = { ...curriculumProgress, [data.key]: 'success' };
     } else {
       setResult('fail');
+      curriculumProgress = { ...curriculumProgress, [data.key]: 'fail' };
     }
+    localStorage.setItem(
+      'curriculumProgress',
+      JSON.stringify(curriculumProgress),
+    );
+    console.log(curriculumProgress);
   };
 
   const handleOnChange = e => {
@@ -33,37 +40,34 @@ const JsExercise = ({ match }) => {
     /* if we have move to a new exercise, match object from react router will be different,
        so we can trigger a clean up of the state */
     setResult('');
+    setUserAnswer('');
   }, [match]);
 
   useEffect(() => {
     // Find the index of the current question in the list
     const indexCurrent = JsList.quizzes.findIndex(q => {
       return q.title === data.title;
     });
-    console.log('JsList', JsList);
     // check if there is a next question, and update state
     if (indexCurrent >= 0 && JsList.quizzes.length > indexCurrent + 1) {
       setNextQuestion(JsList.quizzes[indexCurrent + 1]);
     } else if (indexCurrent >= 0 && JsList.quizzes.length <= indexCurrent + 1) {
       setNextQuestion({});
     }
-    console.log('nextQuestion', nextQuestion);
   }, [data, match]);
 
   Prism.highlightAll();
   useEffect(() => {
     import(`../../../data/javascript/${match.params.exercise}/index.json`).then(
       json => {
         setData(json);
-        console.log(json);
       },
     );
     import(
       `!raw-loader! ../../../data/javascript/${match.params.exercise}/question.js`
     ).then(js => {
       setQuestion(js.default);
       Prism.highlightAll();
-      console.log('line 20', js.default, typeof js.default);
     });
   }, [match]);
 
@@ -86,6 +90,7 @@ const JsExercise = ({ match }) => {
                       type="radio"
                       name="answer"
                       value={a.answer}
+                      checked={a.answer === userAnswer}
                       disabled={result !== ''}
                     />
                     <br />

src/js/views/JsExercise.jsx

@@ -11,6 +11,7 @@ module.exports = {
   devServer: {
     contentBase: './',
     port: 8080,
+    historyApiFallback: true,
   },
   resolve: {
     extensions: ['.js', '.jsx', '.json'],

webpack.config.js

@@ -702,6 +702,32 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.2.25":
+  version "0.2.25"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz#6df015905081f2762e5cfddeb7a20d2e9b16c786"
+  integrity sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==
+
+"@fortawesome/fontawesome-svg-core@^1.2.25":
+  version "1.2.25"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz#24b03391d14f0c6171e8cad7057c687b74049790"
+  integrity sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.25"
+
+"@fortawesome/free-solid-svg-icons@^5.11.2":
+  version "5.11.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz#2f2f1459743a27902b76655a0d0bc5ec4d945631"
+  integrity sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.25"
+
+"@fortawesome/react-fontawesome@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.5.tgz#8bc3cd5c617749534787a35e29caa7a6cff705c9"
+  integrity sha512-WYDKTgyAWOncujWhhzhW7k8sgO5Eo2pZTUL51yNzSQNBUwwr6rNKg/JUSE3iebaU1XShHw74aKc1kJ+jvtRNew==
+  dependencies:
+    prop-types "^15.5.10"
+
 "@restart/context@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"