fixed timeslot dates and created mock data for timeslot

src/components/timeSlot/TimeSlot.tsx

@@ -1,33 +1,22 @@
 import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import styles from "./TimeSlot.module.scss";
-import { chevronBack, key } from 'ionicons/icons'
+import { chevronBack } from 'ionicons/icons'
 import { Link } from "react-router-dom";
 import { useState } from "react";
-import { addDays, format } from "date-fns";
-
-// singular
-interface dates {
-    date: string;
-    day: string;
-}
-
+import { format } from "date-fns";
+import { Dates, TimeSlots } from "../../mockData/TimeSlotDetails";
 
 interface OwnProps {
     month: string;
-    dates: dates[];
-    timeSlots: string[];
     getDate: (date: string) => void;
 }
 
 const TimeSlot: React.FC<OwnProps> = (props) => {
 
-    const [highlightedDate, setHighlightedDate] = useState<dates>();
+    const [highlightedDate, setHighlightedDate] = useState<Date>();
     const [highlightedTime, setHighlightedTime] = useState<string>("");
 
-    const dates = props.dates.map((date, key) => {
-        const currentDate = new Date();
-        let day = addDays(currentDate, key + 1);
-
+    const dates = Dates.map((date, key) => {
         return (
             <div
                 className={styles.date + " " + (date === highlightedDate ? styles.active : "")}
@@ -35,17 +24,18 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
                 onClick={() => setHighlightedDate(date)}>
 
                 <div className={styles.day}>
-                    {format(day, 'eee')}
+                    {format(date, 'eee')}
                 </div>
                 <div>
-                    {format(day, 'e')}
+                    {format(date, 'e')}
                 </div>
 
             </div>
         );
     });
 
-    const timeSlots = props.timeSlots.map((timeSlot, key) => {
+    const timeSlots = TimeSlots.map((timeSlot, key) => {
+
         return (
             <div
                 className={styles.time + " " + (timeSlot === highlightedTime ? styles.activeTime : "")}

src/mockData/QuizDetails.tsx

@@ -17,7 +17,7 @@ let quizDetails: QuizDetails[] = [
         ],
         answer: ["System.out.println('Hello, how are you?');"],
         result: false,
-        timeLimit: 0.1
+        timeLimit: 10
     },
     {
         question: "How do you write 'Hello World' in an alert box?",
@@ -29,7 +29,7 @@ let quizDetails: QuizDetails[] = [
         ],
         answer: ["alert('Hello World');"],
         result: false,
-        timeLimit: 0.2
+        timeLimit: 25
     },
     {
         question: "is javascript",
@@ -41,14 +41,14 @@ let quizDetails: QuizDetails[] = [
         ],
         answer: ["B", "C"],
         result: false,
-        timeLimit: 1
+        timeLimit: 35
     },
     {
         question: "Is javascript single threaded or multi threaded? enter the answer in the below box ",
         options: [],
         answer: ["single threaded"],
         result: false,
-        timeLimit: 1
+        timeLimit: 40
     }
 ];
 

src/mockData/TimeSlotDetails.ts

@@ -0,0 +1,7 @@
+import { addBusinessDays, format } from "date-fns";
+
+const currentDate = new Date();
+
+export const Dates = [addBusinessDays(currentDate, 1), addBusinessDays(currentDate, 2), addBusinessDays(currentDate, 3), addBusinessDays(currentDate, 4)];
+
+export const TimeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"];

src/pages/finalInterview/FinalInterview.tsx

@@ -10,11 +10,6 @@ import TimeSlot from "../../components/timeSlot/TimeSlot";
 import { useCountdown } from "../../components/CountDownTimer/useCountdown";
 import { addDays } from "date-fns";
 
-interface dates {
-    date: string;
-    day: string;
-}
-
 const FinalInterview: React.FC = () => {
 
     const [isDateSet, setDate] = useState<boolean>(false);
@@ -22,27 +17,6 @@ const FinalInterview: React.FC = () => {
 
     const [days, hours, minutes, seconds] = useCountdown(addDays(new Date(), 3));
 
-    const timeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"];
-
-    const dates: dates[] = [
-        {
-            date: "27",
-            day: "Tue"
-        },
-        {
-            date: "29",
-            day: "Sat"
-        },
-        {
-            date: "01",
-            day: "Mon"
-        },
-        {
-            date: "03",
-            day: "Wed"
-        },
-    ];
-
     const getDate = (date: string) => {
         console.log(date);
         setTimeSlot(false);
@@ -103,8 +77,6 @@ const FinalInterview: React.FC = () => {
                     isTimeSlot &&
                     <TimeSlot
                         month="April-May"
-                        dates={dates}
-                        timeSlots={timeSlots}
                         getDate={getDate} />
                 }
 

src/pages/interviewRounds/StepDescreption.tsx

@@ -49,9 +49,15 @@ const StepsDescription: React.FC<Props> = (props) => {
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </p>
 
-            <Link to={props.link} className={styles.button}>
-                <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
-            </Link>
+            {props.isRoundCompleted ?
+                <Link to="/interviewRounds" className={styles.button}>
+                    <IonButton shape="round" expand='block'>Completed</IonButton>
+                </Link>
+                :
+                <Link to={props.link} className={styles.button}>
+                    <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
+                </Link>
+            }
 
         </div>
     );

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -47,7 +47,7 @@ const PreliminaryRound: React.FC = () => {
                 </div>
             </IonContent>
         </IonPage>
-    )
+    );
 }
 
 export default PreliminaryRound;

src/pages/quiz/Question.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import styles from "./Question.module.scss";
 import { CountdownCircleTimer } from 'react-countdown-circle-timer';
-
+import { secondsToMinutes } from "date-fns";
 
 interface OwnProp {
     questionNumber: number;
@@ -14,38 +14,30 @@ interface OwnProp {
 let timeout: NodeJS.Timeout;
 
 const Question: React.FC<OwnProp> = (props) => {
-
-    const COUNTDOWN_AMOUNT_TOTAL = props.timeLimit * 60;
-
-    const [seconds, setSeconds] = useState<number>(COUNTDOWN_AMOUNT_TOTAL);
-
+    const [seconds, setSeconds] = useState<number>(props.timeLimit);
     const displaySeconds = seconds % 60;
-    const displayMinutes = Math.floor(seconds / 60);
 
     useEffect(() => {
-
-        if (seconds > 0) {
-            timeout = setTimeout(() => {
-                setSeconds((state) => state - 1);
-            }, 1000);
-        } else {
-            clearTimeout(timeout);
-        }
-
-        console.log(seconds);
-
-        if (seconds === 0) {
-            props.updateQuestionNumber();
-        }
-
-        return () => clearTimeout(timeout);
+        setTimeout(() => {
+            if (seconds <= 0) {
+                props.updateQuestionNumber();
+                console.log(props.timeLimit);
+                setSeconds(5)
+            } else {
+                setSeconds(seconds - 1);
+            }
+        }, 500);
     }, [seconds]);
 
 
+
     const renderTime = () => {
         return (
             <div className={styles.time}>
-                {`${displayMinutes < 10 ? "0" : ""}${displayMinutes}:${displaySeconds < 10 ? "0" : ""}${displaySeconds}`}
+                {
+                    `${secondsToMinutes(seconds).toString().padStart(2, '0')}:
+                    ${displaySeconds.toString().padStart(2, '0')}`
+                }
             </div>
         );
     }
@@ -64,9 +56,14 @@ const Question: React.FC<OwnProp> = (props) => {
 
                     <CountdownCircleTimer
                         isPlaying
-                        duration={COUNTDOWN_AMOUNT_TOTAL}
+                        duration={props.timeLimit}
                         colors={'#6BD534'}
                         size={60}
+                        onComplete={() => {
+                            // setSeconds(COUNTDOWN_AMOUNT_TOTAL);
+                            // props.updateQuestionNumber();
+                            return { shouldRepeat: true }
+                        }}
                         strokeWidth={5} >
 
                         {renderTime}

src/pages/quiz/Quiz.tsx

@@ -18,8 +18,8 @@ const Quiz: React.FC = () => {
             setQuestionNumber((questionNumber) => questionNumber + 1);
         }
     }
-
     console.log("no", questionNumber);
+    console.log(quizDetails[questionNumber - 1]);
 
     return (
         <div className={styles.quizContainer}>

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -24,33 +24,6 @@ const TechnicalInterview: React.FC = () => {
 
     const [days, hours, minutes, seconds] = useCountdown(addDays(new Date(), 3));
 
-    console.log(days, hours, minutes, seconds);
-
-    // useEffect(() => {
-    //     console.log("render");
-    // }, [seconds]);
-
-    const timeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"];
-
-    const dates: dates[] = [
-        {
-            date: "27",
-            day: "Tue"
-        },
-        {
-            date: "29",
-            day: "Sat"
-        },
-        {
-            date: "01",
-            day: "Mon"
-        },
-        {
-            date: "03",
-            day: "Wed"
-        },
-    ];
-
     const getDate = (date: string) => {
         setTimeSlot(false);
         setDate(true);
@@ -115,8 +88,6 @@ const TechnicalInterview: React.FC = () => {
                     isTimeSlot &&
                     <TimeSlot
                         month="April-May"
-                        dates={dates}
-                        timeSlots={timeSlots}
                         getDate={getDate} />
                 }