From 3e657336171cc89d19e055fa7234f29187950235 Mon Sep 17 00:00:00 2001
From: Ajay_S <sajayy01234@gmail.com>
Date: Wed, 4 May 2022 11:58:51 +0530
Subject: [PATCH] fixed quiz timer update issue

---
 src/mockData/QuizDetails.ts |  2 +-
 src/pages/quiz/Question.tsx | 25 +++++++++++++------------
 src/pages/quiz/Quiz.tsx     |  6 ++----
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/mockData/QuizDetails.ts b/src/mockData/QuizDetails.ts
index 328342d..3b0c156 100644
--- a/src/mockData/QuizDetails.ts
+++ b/src/mockData/QuizDetails.ts
@@ -23,7 +23,7 @@ const Quiz_Details: QuizDetails[] = [
         ],
         answer: ["alert('Hello World');"],
         result: false,
-        timeLimit: 25
+        timeLimit: 10
     },
     {
         question: "is javascript",
diff --git a/src/pages/quiz/Question.tsx b/src/pages/quiz/Question.tsx
index c516848..a5bcb46 100644
--- a/src/pages/quiz/Question.tsx
+++ b/src/pages/quiz/Question.tsx
@@ -14,23 +14,26 @@ interface OwnProp {
 let timeout: NodeJS.Timeout;
 
 const Question: React.FC<OwnProp> = (props) => {
+
     const [seconds, setSeconds] = useState<number>(props.timeLimit);
+    const [duration, setDuration] = useState<number>(props.timeLimit);
     const displaySeconds = seconds % 60;
 
+    useEffect(() => {
+        setSeconds(props.timeLimit);
+        setDuration(props.timeLimit);
+    }, [props.questionNumber]);
+
     useEffect(() => {
         setTimeout(() => {
-            if (seconds <= 0) {
-                props.updateQuestionNumber();
-                console.log(props.timeLimit);
-                setSeconds(5)
-            } else {
+            if (seconds > 0) {
                 setSeconds(seconds - 1);
+            } else {
+                props.updateQuestionNumber();
             }
-        }, 500);
+        }, 1000);
     }, [seconds]);
 
-
-
     const renderTime = () => {
         return (
             <div className={styles.time}>
@@ -56,13 +59,11 @@ const Question: React.FC<OwnProp> = (props) => {
 
                     <CountdownCircleTimer
                         isPlaying
-                        duration={props.timeLimit}
+                        duration={duration}
                         colors={'#6BD534'}
                         size={60}
                         onComplete={() => {
-                            // setSeconds(COUNTDOWN_AMOUNT_TOTAL);
-                            // props.updateQuestionNumber();
-                            return { shouldRepeat: true }
+                            return { shouldRepeat: true, delay: 1.5 }
                         }}
                         strokeWidth={5} >
 
diff --git a/src/pages/quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx
index 80750e4..d551864 100644
--- a/src/pages/quiz/Quiz.tsx
+++ b/src/pages/quiz/Quiz.tsx
@@ -11,15 +11,13 @@ import Quiz_Details from '../../mockData/QuizDetails';
 const Quiz: React.FC = () => {
 
     const [questionNumber, setQuestionNumber] = useState<number>(1);
+    const timeLimit = Quiz_Details[questionNumber - 1].timeLimit;
 
     const updateQuestionNumber = () => {
-        console.log("update")
         if (Quiz_Details.length > questionNumber) {
             setQuestionNumber((questionNumber) => questionNumber + 1);
         }
     }
-    console.log("no", questionNumber);
-    console.log(Quiz_Details[questionNumber - 1]);
 
     return (
         <div className={styles.quizContainer}>
@@ -33,7 +31,7 @@ const Quiz: React.FC = () => {
 
                 <Question question={Quiz_Details[questionNumber - 1].question}
                     questionNumber={questionNumber}
-                    timeLimit={Quiz_Details[questionNumber - 1].timeLimit}
+                    timeLimit={timeLimit}
                     updateQuestionNumber={updateQuestionNumber} />
 
             </div>