From e570609e05d8bfe4ff8b60f72d9ff6ba79f16ea6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98ystein=20Holvik=20Johnsen?= <ohj@scanreach.com>
Date: Fri, 6 Oct 2023 23:52:37 +0200
Subject: [PATCH] Added quiz timer + restart button

---
 package-lock.json                 | 16 +++++++
 package.json                      |  1 +
 src/pages/TerminologyQuizPage.jsx | 77 ++++++++++++++++++++++++-------
 3 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 74b6415..1847605 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "date-fns": "^2.30.0",
         "framer-motion": "^10.16.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -8128,6 +8129,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 86ccf5b..86a896c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "date-fns": "^2.30.0",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/pages/TerminologyQuizPage.jsx b/src/pages/TerminologyQuizPage.jsx
index 3f415c0..7f0ca67 100644
--- a/src/pages/TerminologyQuizPage.jsx
+++ b/src/pages/TerminologyQuizPage.jsx
@@ -1,8 +1,10 @@
-import React, { useState } from "react";
-import { Box, Stack, Button, Icon, IconButton, Grid } from "@chakra-ui/react";
-import { MdRefresh, MdCheckCircle } from 'react-icons/md';
+import React, { useState, useEffect } from "react";
+import { Box, Stack, Button, Icon, IconButton, Grid, Center } from "@chakra-ui/react";
+import { MdCheckCircle } from "react-icons/md";
+import { VscDebugRestart, VscArrowRight } from "react-icons/vsc";
 import { Page } from "../components";
 import { terminologies } from "../assets/terminologies";
+import { differenceInMilliseconds, format } from "date-fns";
 
 const getKoreanQuestionAndNorwegianChoices = () => {
   console.log("Generating guesses");
@@ -57,6 +59,23 @@ const TerminologyQuizPage = () => {
   const [answers, setAnswers] = useState([]);
   const [selectedAnswer, setSelectedAnswer] = useState(undefined);
 
+  const [isTimerActive, setIsTimerActive] = useState(false);
+  const [startTimestamp, setStartTimestamp] = useState(Date.now);
+  const [elapsedTime, setElapsedTime] = useState(0);
+
+  useEffect(() => {
+    let timer = null;
+    if(isTimerActive){
+      timer = setInterval(() => {
+        const newElapsedTime = differenceInMilliseconds(new Date(), startTimestamp);
+        setElapsedTime(newElapsedTime);
+      }, 10);
+    }
+    return () => {
+      clearInterval(timer);
+    };
+  });
+
   return (
     <Page>
       <Box
@@ -83,13 +102,16 @@ const TerminologyQuizPage = () => {
                 selectedAnswer === guessingData.question.index ? 'green' : 'red' }
               onClick={() => {
                 if (selectedAnswer === undefined) {
-                  console.log(choice.index);
                   setSelectedAnswer(choice.index);
                   setAnswers([
                     ...answers,
                     choice.index === guessingData.question.index
                   ]);
                 }
+                if (!isTimerActive) {
+                  setIsTimerActive(true);
+                  setStartTimestamp(new Date());
+                }
               }}
             >
               <Grid height='100%' width='100%' alignItems='center'>
@@ -111,19 +133,42 @@ const TerminologyQuizPage = () => {
             { calculateCorrectAnswerPercentage(answers) } %
           </Box>
         }
-        { selectedAnswer !== undefined &&
-          <IconButton
-            visibility={selectedAnswer === undefined}
-            icon={<MdRefresh />}
-            isRound={true}
-            onClick={() => {
-              guessingData = getKoreanQuestionAndNorwegianChoices();
-              const nextQuestion = currentQuestion + 1;
-              setCurrentQuestion(nextQuestion);
-              setSelectedAnswer(undefined);
-            }}
-          />
+        { (selectedAnswer !== undefined || currentQuestion > 1) &&
+          <Box width="100%" textAlign="center">
+            <IconButton
+              icon={<VscDebugRestart />}
+              isRound={true}
+              marginRight="1rem"
+              width="5rem"
+              height="5rem"
+              fontSize="3rem"
+              onClick={() => {
+                setCurrentQuestion(1);
+                setSelectedAnswer(undefined);
+                setAnswers([]);
+                setIsTimerActive(false);
+                setElapsedTime(0);
+                guessingData = getKoreanQuestionAndNorwegianChoices();
+              }}
+            />
+            <IconButton
+              visibility={selectedAnswer === undefined}
+              icon={<VscArrowRight />}
+              isRound={true}
+              width="5rem"
+              height="5rem"
+              fontSize="4rem"
+              isDisabled={selectedAnswer === undefined ? true : false}
+              onClick={() => {
+                guessingData = getKoreanQuestionAndNorwegianChoices();
+                const nextQuestion = currentQuestion + 1;
+                setCurrentQuestion(nextQuestion);
+                setSelectedAnswer(undefined);
+              }}
+            />
+          </Box>
         }
+        Seconds: { format(elapsedTime, "mm:ss,SS") }
       </Box>
     </Page>
   );