From 6848954a151c1686e7085154714c06a00f99e873 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Mon, 9 May 2022 13:12:31 +0530 Subject: [PATCH] setted countdown based on the timeslot input --- .../CountDownTimer/useCountdown.tsx | 5 +-- src/components/timeSlot/TimeSlot.tsx | 13 ++++++-- src/pages/finalInterview/FinalInterview.tsx | 31 +++++++++---------- src/pages/quiz/Options.tsx | 5 +-- .../technicalInterview/TechnicalInterview.tsx | 26 ++++++++++------ 5 files changed, 49 insertions(+), 31 deletions(-) diff --git a/src/components/CountDownTimer/useCountdown.tsx b/src/components/CountDownTimer/useCountdown.tsx index df20f22..6dff168 100644 --- a/src/components/CountDownTimer/useCountdown.tsx +++ b/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]; }; diff --git a/src/components/timeSlot/TimeSlot.tsx b/src/components/timeSlot/TimeSlot.tsx index 94cdb91..094fee4 100644 --- a/src/components/timeSlot/TimeSlot.tsx +++ b/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 = (props) => { @@ -16,6 +17,14 @@ const TimeSlot: React.FC = (props) => { const [highlightedDate, setHighlightedDate] = useState(); const [highlightedTime, setHighlightedTime] = useState(""); + const setTimeSlot = () => { + if (highlightedDate && highlightedTime !== "") { + props.getDate(); + props.getTimeSlot(highlightedDate, highlightedTime); + } else { + return undefined; + } + } const dates = Dates.map((date, key) => { return (
= (props) => { {format(date, 'eee')}
- {format(date, 'e')} + {format(date, 'd')}
@@ -68,7 +77,7 @@ const TimeSlot: React.FC = (props) => { -
props.getDate() : undefined} +
Confirm slot
diff --git a/src/pages/finalInterview/FinalInterview.tsx b/src/pages/finalInterview/FinalInterview.tsx index ac4a1da..861964f 100644 --- a/src/pages/finalInterview/FinalInterview.tsx +++ b/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(false); - const [isTimeSlot, setTimeSlot] = useState(false); + const [isDateSet, setIsDate] = useState(false); + const [isTimeSlot, setIsTimeSlot] = useState(false); + const [date, setDate] = useState(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 = () => {

Let's Meet in:

- {/*

02 : 04 : 25 : 53

-
-
Days
-
Hrs
-
Mins
-
Secs
-
*/} {
{ !isDateSet ? -
setTimeSlot(true)}> +
setIsTimeSlot(true)}> Find a slot
: @@ -87,7 +85,8 @@ const FinalInterview: React.FC = () => { + HideTimeSlot={HideTimeSlot} + getTimeSlot={getTimeSlot} /> } diff --git a/src/pages/quiz/Options.tsx b/src/pages/quiz/Options.tsx index ef1adb0..ca190be 100644 --- a/src/pages/quiz/Options.tsx +++ b/src/pages/quiz/Options.tsx @@ -58,11 +58,12 @@ const Options: React.FC = (props) => { setTextInput(inputRef.current?.value!) } - if (props.lastQuestion) { + const setAnswer = () => { localStorage.setItem("answer", answers.toString()); } + const options = props.options!.map((option, key) => { return ( @@ -122,7 +123,7 @@ const Options: React.FC = (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 : "")}> Next Step } diff --git a/src/pages/technicalInterview/TechnicalInterview.tsx b/src/pages/technicalInterview/TechnicalInterview.tsx index 60fbc29..b9ceebb 100644 --- a/src/pages/technicalInterview/TechnicalInterview.tsx +++ b/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(false); - const [isTimeSlot, setTimeSlot] = useState(false); + const [isDateSet, setIsDate] = useState(false); + const [isTimeSlot, setIsTimeSlot] = useState(false); + const [date, setDate] = useState(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 ( @@ -60,7 +67,7 @@ const TechnicalInterview: React.FC = () => {
{ !isDateSet ? -
setTimeSlot(true)}> +
setIsTimeSlot(true)}> Find a slot
: @@ -79,7 +86,8 @@ const TechnicalInterview: React.FC = () => { + HideTimeSlot={HideTimeSlot} + getTimeSlot={getTimeSlot} /> }