From 897d31a77f2d171f14cd7bfe054afb6ca560e398 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Tue, 3 May 2022 19:34:07 +0530 Subject: [PATCH] fixed timeslot dates and created mock data for timeslot --- src/components/timeSlot/TimeSlot.tsx | 28 ++++------- src/mockData/QuizDetails.tsx | 8 ++-- src/mockData/TimeSlotDetails.ts | 7 +++ src/pages/finalInterview/FinalInterview.tsx | 28 ----------- src/pages/interviewRounds/StepDescreption.tsx | 12 +++-- .../preliminaryRound/PreliminaryRound.tsx | 2 +- src/pages/quiz/Question.tsx | 47 +++++++++---------- src/pages/quiz/Quiz.tsx | 2 +- .../technicalInterview/TechnicalInterview.tsx | 29 ------------ 9 files changed, 53 insertions(+), 110 deletions(-) create mode 100644 src/mockData/TimeSlotDetails.ts diff --git a/src/components/timeSlot/TimeSlot.tsx b/src/components/timeSlot/TimeSlot.tsx index 7148ad6..610b6b9 100644 --- a/src/components/timeSlot/TimeSlot.tsx +++ b/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 = (props) => { - const [highlightedDate, setHighlightedDate] = useState(); + const [highlightedDate, setHighlightedDate] = useState(); const [highlightedTime, setHighlightedTime] = useState(""); - const dates = props.dates.map((date, key) => { - const currentDate = new Date(); - let day = addDays(currentDate, key + 1); - + const dates = Dates.map((date, key) => { return (
= (props) => { onClick={() => setHighlightedDate(date)}>
- {format(day, 'eee')} + {format(date, 'eee')}
- {format(day, 'e')} + {format(date, 'e')}
); }); - const timeSlots = props.timeSlots.map((timeSlot, key) => { + const timeSlots = TimeSlots.map((timeSlot, key) => { + return (
{ const [isDateSet, setDate] = useState(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 && } diff --git a/src/pages/interviewRounds/StepDescreption.tsx b/src/pages/interviewRounds/StepDescreption.tsx index 6e0ef91..c02dc05 100644 --- a/src/pages/interviewRounds/StepDescreption.tsx +++ b/src/pages/interviewRounds/StepDescreption.tsx @@ -49,9 +49,15 @@ const StepsDescription: React.FC = (props) => { Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- - {props.buttonText} - + {props.isRoundCompleted ? + + Completed + + : + + {props.buttonText} + + }
); diff --git a/src/pages/preliminaryRound/PreliminaryRound.tsx b/src/pages/preliminaryRound/PreliminaryRound.tsx index 13d6371..b5ac02c 100644 --- a/src/pages/preliminaryRound/PreliminaryRound.tsx +++ b/src/pages/preliminaryRound/PreliminaryRound.tsx @@ -47,7 +47,7 @@ const PreliminaryRound: React.FC = () => { - ) + ); } export default PreliminaryRound; \ No newline at end of file diff --git a/src/pages/quiz/Question.tsx b/src/pages/quiz/Question.tsx index a02a208..c516848 100644 --- a/src/pages/quiz/Question.tsx +++ b/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 = (props) => { - - const COUNTDOWN_AMOUNT_TOTAL = props.timeLimit * 60; - - const [seconds, setSeconds] = useState(COUNTDOWN_AMOUNT_TOTAL); - + const [seconds, setSeconds] = useState(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 (
- {`${displayMinutes < 10 ? "0" : ""}${displayMinutes}:${displaySeconds < 10 ? "0" : ""}${displaySeconds}`} + { + `${secondsToMinutes(seconds).toString().padStart(2, '0')}: + ${displaySeconds.toString().padStart(2, '0')}` + }
); } @@ -64,9 +56,14 @@ const Question: React.FC = (props) => { { + // setSeconds(COUNTDOWN_AMOUNT_TOTAL); + // props.updateQuestionNumber(); + return { shouldRepeat: true } + }} strokeWidth={5} > {renderTime} diff --git a/src/pages/quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx index 373a2da..caf86cd 100644 --- a/src/pages/quiz/Quiz.tsx +++ b/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 (
diff --git a/src/pages/technicalInterview/TechnicalInterview.tsx b/src/pages/technicalInterview/TechnicalInterview.tsx index 4d7233f..3e2464a 100644 --- a/src/pages/technicalInterview/TechnicalInterview.tsx +++ b/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 && }