Merge branch 'staging' into 'main'

Staging

See merge request !55

next.config.js

 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
 }
 
 module.exports = nextConfig

src/pages/quiz/[id]/pembahasan.tsx

@@ -24,7 +24,7 @@ function Pembahasan() {
   const [userAnswers, setUserAnswers] = useState<UserAnswer[]>([]);
 
   useEffect(() => {
-    if (!router.query.id || !router.query.userAnswers) {
+    if (!router.isReady) {
       return;
     }
     setUserAnswers(JSON.parse(router.query.userAnswers as string));
@@ -41,7 +41,7 @@ function Pembahasan() {
       .catch((err) => {
         console.log(err.response.data);
       });
-  }, [router.query.id, router.query.userAnswers]);
+  }, [router.isReady, router.query.id, router.query.userAnswers]);
 
   return (
     <Layout>

src/pages/quiz/[id]/result.tsx

@@ -14,39 +14,36 @@ function Result() {
   const [isDoneLoading, setIsDoneLoading] = useState(false);
 
   useEffect(() => {
-    if (!router.query.id || !router.query.userAnswers) {
-      return;
-    }
-    // if score is already calculated, return
-    if (score !== -1) {
-      return;
-    }
+    if (!router.isReady) return;
     // parse user answer as UserAnswer[] from router.query.userAnswers
-    setUserAnswers(JSON.parse(router.query.userAnswers as string));
-    // POST
-    http
-      .post(
-        `/quiz/${router.query.id}/finish`,
-        {
-          data: userAnswers,
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${getAvailableUserData()}`,
-          },
-        }
-      )
-      .then((res) => {
-        console.log(res.data.data);
-        setScore(res.data.data.score);
-      })
-      .catch((err) => {
-        console.log(err.response.data);
-      })
-      .finally(() => {
-        setIsDoneLoading(true);
-      });
-  }, [router.query.id, router.query.userAnswers, userAnswers]);
+    if (score == -1) {
+      setUserAnswers(JSON.parse(router.query.userAnswers as string));
+      if (userAnswers.length != 0) {
+        http
+          .post(
+            `/quiz/${router.query.id}/finish`,
+            {
+              data: userAnswers,
+            },
+            {
+              headers: {
+                Authorization: `Bearer ${getAvailableUserData()}`,
+              },
+            }
+          )
+          .then((res) => {
+            console.log(res.data.data);
+            setScore(res.data.data.score);
+          })
+          .catch((err) => {
+            console.log(err.response.data);
+          })
+          .finally(() => {
+            setIsDoneLoading(true);
+          });
+      }
+    }
+  }, [router.isReady, router.query.id, router.query.userAnswers, userAnswers]);
 
   return (
     <Layout>

src/pages/quiz/[id]/start.tsx

@@ -59,22 +59,24 @@ function Quiz() {
   const hours = Math.floor(minutes / 60);
 
   useEffect(() => {
-    if (!router.query.id) {
+    if (!router.isReady) {
       return;
     }
-    http
-      .post(`/quiz/${router.query.id}/take`, {
-        Authorization: `Bearer ${getAvailableUserData()}`,
-      })
-      .then((res) => {
-        setQuizName(res.data.data.name);
-        setProblems(res.data.data.problems);
-      })
-      .catch((err) => {
-        console.log(err.response.data);
-      })
-      .finally(() => setIsDoneLoading(true));
-  }, [router.query.id]);
+    if (problems.length == 0) {
+      http
+        .post(`/quiz/${router.query.id}/take`, {
+          Authorization: `Bearer ${getAvailableUserData()}`,
+        })
+        .then((res) => {
+          setQuizName(res.data.data.name);
+          setProblems(res.data.data.problems);
+        })
+        .catch((err) => {
+          console.log(err.response.data);
+        })
+        .finally(() => setIsDoneLoading(true));
+    }
+  }, [problems.length, router.isReady, router.query.id]);
 
   const handleChangeAnswer = (problemId: string, answerId: string) => {
     // if same problemId already exists, then replace it