setted countdown based on the timeslot input

src/components/CountDownTimer/useCountdown.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 const useCountdown = (targetDate: Date) => {
-
+    console.log(targetDate);
     const countDownDate = new Date(targetDate).getTime();
 
     const [countDown, setCountDown] = useState(
@@ -14,13 +14,14 @@ const useCountdown = (targetDate: Date) => {
         }, 1000);
 
         return () => clearInterval(interval);
-    }, []);
+    }, [targetDate]);
 
     const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
     const hours = Math.floor((countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
     const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
     const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
 
+
     return [days, hours, minutes, seconds];
 };
 

src/components/timeSlot/TimeSlot.tsx

@@ -9,6 +9,7 @@ interface OwnProps {
     month: string;
     getDate: () => void;
     HideTimeSlot: () => void;
+    getTimeSlot: (date: any, time: string) => void;
 }
 
 const TimeSlot: React.FC<OwnProps> = (props) => {
@@ -16,6 +17,14 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
     const [highlightedDate, setHighlightedDate] = useState<Date>();
     const [highlightedTime, setHighlightedTime] = useState<string>("");
 
+    const setTimeSlot = () => {
+        if (highlightedDate && highlightedTime !== "") {
+            props.getDate();
+            props.getTimeSlot(highlightedDate, highlightedTime);
+        } else {
+            return undefined;
+        }
+    }
     const dates = Dates.map((date, key) => {
         return (
             <div
@@ -27,7 +36,7 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
                     {format(date, 'eee')}
                 </div>
                 <div>
-                    {format(date, 'e')}
+                    {format(date, 'd')}
                 </div>
 
             </div>
@@ -68,7 +77,7 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
                     </div>
                 </div>
 
-                <div onClick={(highlightedDate && highlightedTime !== "") ? () => props.getDate() : undefined}
+                <div onClick={setTimeSlot}
                     className={styles.timeSlotButton + " " + (highlightedDate && highlightedTime !== "" ? styles.buttonActive : "")}>
                     <IonButton shape="round" expand='block' >Confirm slot</IonButton>
                 </div>

src/pages/finalInterview/FinalInterview.tsx

@@ -8,23 +8,28 @@ import { Link } from "react-router-dom";
 import { useState } from "react";
 import TimeSlot from "../../components/timeSlot/TimeSlot";
 import { useCountdown } from "../../components/CountDownTimer/useCountdown";
-import { addDays } from "date-fns";
 import CountdownTimer from "../../components/CountDownTimer/CountdownTimer";
+import { format } from "date-fns";
 
 const FinalInterview: React.FC = () => {
 
-    const [isDateSet, setDate] = useState<boolean>(false);
-    const [isTimeSlot, setTimeSlot] = useState<boolean>(false);
+    const [isDateSet, setIsDate] = useState<boolean>(false);
+    const [isTimeSlot, setIsTimeSlot] = useState<boolean>(false);
+    const [date, setDate] = useState<Date>(new Date());
 
-    const [days, hours, minutes, seconds] = useCountdown(new Date('may 6, 2022 07:00:00'));
+    const [days, hours, minutes, seconds] = useCountdown(date);
 
     const getDate = () => {
-        setTimeSlot(false);
-        setDate(true);
+        setIsTimeSlot(false);
+        setIsDate(true);
     }
 
     const HideTimeSlot = () => {
-        setTimeSlot(false);
+        setIsTimeSlot(false);
+    }
+
+    const getTimeSlot = (date: any, time: string) => {
+        setDate(new Date(`${format(date, "LLL")} ${format(date, "d")} ${format(date, "y")} ${time.substring(0, 8)}`));
     }
 
     return (
@@ -46,13 +51,6 @@ const FinalInterview: React.FC = () => {
 
                                 <h4>Let's Meet in:</h4>
                                 <div className={styles.timeLeft}>
-                                    {/* <h4 className={styles.time}>02 : 04 : 25 : 53</h4>
-                                    <div className={styles.days}>
-                                        <div>Days</div>
-                                        <div>Hrs</div>
-                                        <div>Mins</div>
-                                        <div>Secs</div>
-                                    </div> */}
                                     <CountdownTimer
                                         days={days}
                                         hours={hours}
@@ -68,7 +66,7 @@ const FinalInterview: React.FC = () => {
                 </div>
                 {
                     !isDateSet ?
-                        <div className={styles.techinicalInterviewBtn} onClick={() => setTimeSlot(true)}>
+                        <div className={styles.techinicalInterviewBtn} onClick={() => setIsTimeSlot(true)}>
                             <IonButton shape="round" expand='block'>Find a slot</IonButton>
                         </div>
                         :
@@ -87,7 +85,8 @@ const FinalInterview: React.FC = () => {
                     <TimeSlot
                         month="April-May"
                         getDate={getDate}
-                        HideTimeSlot={HideTimeSlot} />
+                        HideTimeSlot={HideTimeSlot}
+                        getTimeSlot={getTimeSlot} />
                 }
 
             </IonContent>

src/pages/quiz/Options.tsx

@@ -58,11 +58,12 @@ const Options: React.FC<OwnProps> = (props) => {
         setTextInput(inputRef.current?.value!)
     }
 
-    if (props.lastQuestion) {
+    const setAnswer = () => {
         localStorage.setItem("answer", answers.toString());
     }
 
 
+
     const options = props.options!.map((option, key) => {
         return (
             <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
@@ -122,7 +123,7 @@ const Options: React.FC<OwnProps> = (props) => {
             }
 
             {props.lastQuestion &&
-                < Link to="/preliminaryRoundResults" className={styles.button + " " + ((selected || selectedOptions.length > 0 || textInput) ? styles.active : "")}>
+                < Link to="/preliminaryRoundResults" onClick={setAnswer} className={styles.button + " " + ((selected || selectedOptions.length > 0 || textInput) ? styles.active : "")}>
                     <IonButton shape="round" expand='block'>Next Step</IonButton>
                 </Link>
             }

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -5,27 +5,34 @@ import StepHeader from "../../components/stepsHeader/StepHeader";
 import techinicalInterview from "../../assets/icons/Technical_Interview.svg";
 import linkIcon from "../../assets/icons/link.svg";
 import { Link } from "react-router-dom";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import TimeSlot from "../../components/timeSlot/TimeSlot";
 import { useCountdown } from "../../components/CountDownTimer/useCountdown";
 import CountdownTimer from "../../components/CountDownTimer/CountdownTimer";
+import { format } from "date-fns";
 
 const TechnicalInterview: React.FC = () => {
 
-    const [isDateSet, setDate] = useState<boolean>(false);
-    const [isTimeSlot, setTimeSlot] = useState<boolean>(false);
+    const [isDateSet, setIsDate] = useState<boolean>(false);
+    const [isTimeSlot, setIsTimeSlot] = useState<boolean>(false);
+    const [date, setDate] = useState<Date>(new Date());
 
-    const [days, hours, minutes, seconds] = useCountdown(new Date('may 7, 2022 07:00:00'));
+    const [days, hours, minutes, seconds] = useCountdown(date);
 
     const getDate = () => {
-        setTimeSlot(false);
-        setDate(true);
+        setIsTimeSlot(false);
+        setIsDate(true);
     }
 
     const HideTimeSlot = () => {
-        setTimeSlot(false);
+        setIsTimeSlot(false);
     }
 
+    const getTimeSlot = (date: any, time: string) => {
+        setDate(new Date(`${format(date, "LLL")} ${format(date, "d")} ${format(date, "y")} ${time.substring(0, 8)}`));
+    }
+
+
     return (
         <IonPage>
             <StepHeader stepNumber={3} roundName="Technical Interview" />
@@ -60,7 +67,7 @@ const TechnicalInterview: React.FC = () => {
                 </div>
                 {
                     !isDateSet ?
-                        <div className={styles.techinicalInterviewBtn} onClick={() => setTimeSlot(true)}>
+                        <div className={styles.techinicalInterviewBtn} onClick={() => setIsTimeSlot(true)}>
                             <IonButton shape="round" expand='block'>Find a slot</IonButton>
                         </div>
                         :
@@ -79,7 +86,8 @@ const TechnicalInterview: React.FC = () => {
                     <TimeSlot
                         month="April-May"
                         getDate={getDate}
-                        HideTimeSlot={HideTimeSlot} />
+                        HideTimeSlot={HideTimeSlot}
+                        getTimeSlot={getTimeSlot} />
                 }
 
             </IonContent>