From 06e9b77d99fb9bf316cb012b84403585cd5619e2 Mon Sep 17 00:00:00 2001
From: julien demarque <julien_demarque@hotmail.fr>
Date: Mon, 4 Nov 2019 02:54:13 +0200
Subject: [PATCH] feat: preload questions data on js menu

---
 src/js/views/Javascript/index.jsx | 21 ++++++++++++++++++++-
 src/js/views/JsExercise.jsx       | 12 +++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/js/views/Javascript/index.jsx b/src/js/views/Javascript/index.jsx
index 86a9007..188ce68 100644
--- a/src/js/views/Javascript/index.jsx
+++ b/src/js/views/Javascript/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Col, Container, ProgressBar, Row } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -8,7 +8,26 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import data from '../../../../data/javascript/index.json';
 import './javascript.css';
 
+const DELAY_LOAD = 2000;
+
 const Javascript = () => {
+  const [delayFinish, setDelay] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setDelay(true);
+    }, DELAY_LOAD);
+  });
+
+  useEffect(() => {
+    if (delayFinish) {
+      data.quizzes.forEach(quiz => {
+        // Note:  we preload all questions for now
+        import(`../../../../data/javascript/${quiz.key}/index.json`);
+        import(`!raw-loader! ../../../data/javascript/${quiz.key}/question.js`);
+      });
+    }
+  }, [delayFinish]);
+
   const curriculumProgress = JSON.parse(
     localStorage.getItem('curriculumProgress'),
   );
diff --git a/src/js/views/JsExercise.jsx b/src/js/views/JsExercise.jsx
index dc4c8f2..a32995a 100644
--- a/src/js/views/JsExercise.jsx
+++ b/src/js/views/JsExercise.jsx
@@ -74,11 +74,13 @@ const JsExercise = ({ match }) => {
 
   useEffect(() => {
     // preload next question
-    import(
-      `!raw-loader! ../../../data/javascript/${nextQuestion.key}/question.js`
-    );
-    import(`../../../data/javascript/${nextQuestion.key}/index.json`);
-  }, [match, nextQuestion]);
+    if (nextQuestion.key) {
+      import(
+        `!raw-loader! ../../../data/javascript/${nextQuestion.key}/question.js`
+      );
+      import(`../../../data/javascript/${nextQuestion.key}/index.json`);
+    }
+  }, [nextQuestion]);
 
   return (
     <Container className="mt-3 mb-3">