fixed questions timer timelimit

src/mockData/QuizDetails.ts

@@ -1,6 +1,6 @@
 import { QuizDetails } from "../models/QuizDetails";
 
-const Quiz_Details: QuizDetails[] = [
+const QUIZ_DETAILS: QuizDetails[] = [
     {
         question: "How would you correctly display, “Hello, how are you?”?",
         options: [
@@ -24,7 +24,7 @@ const Quiz_Details: QuizDetails[] = [
         ],
         answer: ["alert('Hello World');"],
         result: false,
-        timeLimit: 10,
+        timeLimit: 20,
         type: "singleSelect"
 
     },
@@ -73,4 +73,4 @@ export let test = [
     },
 ]
 
-export default Quiz_Details;
+export default QUIZ_DETAILS;

src/pages/interviewRounds/StepDescreption.tsx

@@ -51,7 +51,7 @@ const StepsDescription: React.FC<Props> = (props) => {
 
             {props.isRoundCompleted ?
                 <Link to="/interviewRounds" className={styles.button}>
-                    <IonButton shape="round" expand='block'>Completed</IonButton>
+                    <IonButton shape="round" expand='block' disabled={true}>Completed</IonButton>
                 </Link>
                 :
                 <Link to={props.link} className={styles.button}>

src/pages/quiz/Options.tsx

@@ -1,7 +1,6 @@
 import { IonButton, IonCheckbox, IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
 import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
-import Input from '../../components/formInput/Input';
 import styles from './Options.module.scss';
 
 interface OwnProps {
@@ -59,12 +58,7 @@ const Options: React.FC<OwnProps> = (props) => {
         setTextInput(inputRef.current?.value!)
     }
 
-    if ((selected || textInput)) {
-        console.log("decision");
-    }
-
     if (props.lastQuestion) {
-        console.log("last");
         localStorage.setItem("answer", answers.toString());
     }
 
@@ -122,7 +116,7 @@ const Options: React.FC<OwnProps> = (props) => {
             }
 
             {props.lastQuestion &&
-                < Link to="/preliminaryRoundResults" className={styles.button + " " + (selected ? styles.active : "")}>
+                < Link to="/preliminaryRoundResults" className={styles.button + " " + ((selected || selectedOptions.length > 0 || textInput) ? styles.active : "")}>
                     <IonButton shape="round" expand='block'>Next Step</IonButton>
                 </Link>
             }

src/pages/quiz/Question.tsx

@@ -16,22 +16,27 @@ const Question: React.FC<OwnProp> = (props) => {
     const [duration, setDuration] = useState<number>(props.timeLimit);
     const displaySeconds = seconds % 60;
 
-    // useEffect(() => {
-    //     setSeconds(props.timeLimit);
-    //     setDuration(props.timeLimit);
-    // }, [props.questionNumber]);
-
-    // useEffect(() => {
-    //     console.log(seconds);
-    //     setTimeout(() => {
-    //         if (seconds > 0) {
-    //             setSeconds(seconds - 1);
-    //         } else {
-    //             props.updateQuestionNumber();
-    //         }
-    //     }, 1000);
-
-    // }, [seconds]);
+    useEffect(() => {
+        setSeconds(props.timeLimit);
+        setDuration(props.timeLimit);
+    }, [props.questionNumber]);
+
+    useEffect(() => {
+
+        const timeOut = setTimeout(() => {
+            if (seconds > 0) {
+                setSeconds(seconds - 1);
+            } else {
+                props.updateQuestionNumber();
+            }
+        }, 1000);
+
+        return () => clearInterval(timeOut);
+
+    }, [seconds]);
+
+    console.log("seconds", seconds);
+
 
     const renderTime = () => {
         return (
@@ -58,12 +63,12 @@ const Question: React.FC<OwnProp> = (props) => {
 
                     <CountdownCircleTimer
                         isPlaying
-                        duration={0}
+                        duration={duration}
                         colors={'#6BD534'}
                         size={60}
-                        // onComplete={() => {
-                        //     return { shouldRepeat: true, delay: 1.5 }
-                        // }}
+                        onComplete={() => {
+                            return { shouldRepeat: true, delay: 1.5 }
+                        }}
                         strokeWidth={5} >
 
                         {renderTime}

src/pages/quiz/Quiz.tsx

@@ -4,17 +4,17 @@ import { IonButton, IonIcon } from '@ionic/react';
 import Options from './Options';
 import { closeOutline } from 'ionicons/icons'
 import { Link } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import Question from './Question';
-import Quiz_Details from '../../mockData/QuizDetails';
+import QUIZ_DETAILS from '../../mockData/QuizDetails';
 
 const Quiz: React.FC = () => {
 
     const [questionNumber, setQuestionNumber] = useState<number>(1);
-    const timeLimit = Quiz_Details[questionNumber - 1].timeLimit;
+    const timeLimit = QUIZ_DETAILS[questionNumber - 1].timeLimit;
 
     const updateQuestionNumber = () => {
-        if (Quiz_Details.length > questionNumber) {
+        if (QUIZ_DETAILS.length > questionNumber) {
             setQuestionNumber((questionNumber) => questionNumber + 1);
         }
     }
@@ -29,7 +29,8 @@ const Quiz: React.FC = () => {
                     </Link>
                 </header>
 
-                <Question question={Quiz_Details[questionNumber - 1].question}
+                <Question
+                    question={QUIZ_DETAILS[questionNumber - 1].question}
                     questionNumber={questionNumber}
                     timeLimit={timeLimit}
                     updateQuestionNumber={updateQuestionNumber} />
@@ -39,18 +40,14 @@ const Quiz: React.FC = () => {
             <div className={styles.quizOptions}>
                 <div className={styles.options}>
                     <Options
-                        options={Quiz_Details[questionNumber - 1].options}
+                        options={QUIZ_DETAILS[questionNumber - 1].options}
                         updateQuestionNumber={updateQuestionNumber}
-                        type={Quiz_Details[questionNumber - 1].type}
-                        answer={Quiz_Details[questionNumber - 1].answer}
-                        lastQuestion={Quiz_Details.length === questionNumber}
+                        type={QUIZ_DETAILS[questionNumber - 1].type}
+                        answer={QUIZ_DETAILS[questionNumber - 1].answer}
+                        lastQuestion={QUIZ_DETAILS.length === questionNumber}
                         questionNumber={questionNumber} />
                 </div>
 
-                {/* <Link to="/" className={styles.button + " " + (selected ? styles.active : "")}>
-                    <IonButton shape="round" expand='block'>Next</IonButton>
-                </Link> */}
-
             </div>
 
         </div>

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -15,7 +15,7 @@ const TechnicalInterview: React.FC = () => {
     const [isDateSet, setDate] = useState<boolean>(false);
     const [isTimeSlot, setTimeSlot] = useState<boolean>(false);
 
-    const [days, hours, minutes, seconds] = useCountdown(new Date('may 6, 2022 07:00:00'));
+    const [days, hours, minutes, seconds] = useCountdown(new Date('may 7, 2022 07:00:00'));
 
     const getDate = () => {
         setTimeSlot(false);