diff --git a/src/App.tsx b/src/App.tsx index 85c4a15..49119d0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,7 +22,7 @@ import './App.scss'; import InterviewRounds from './pages/interviewRounds/InterviewRounds'; import SkillInformationStep from './pages/skillInformationStep/SkillInformationStep'; import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound'; -import Quiz from './pages/Quiz/Quiz'; +import Quiz from './pages/quiz/Quiz'; import PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults'; import TechnicalInterview from './pages/technicalInterview/TechnicalInterview'; import Assignment from './pages/assignment/Assignment'; @@ -30,8 +30,8 @@ import AssignmentDetails from './pages/assignment/AssignmentDetails'; import SubmitAssignment from './pages/assignment/SubmitAssignment'; import ReviewAssignment from './pages/assignment/ReviewAssignment'; import AssignmentCompleted from './pages/assignment/AssignmentCompleted'; -import FinalInterview from './pages/FinalInterview/FinalInterview'; -import FinalInterviewResult from './pages/FinalInterview/FinalInterviewResult'; +import FinalInterview from './pages/finalInterview/FinalInterview'; +import FinalInterviewResult from './pages/finalInterview/FinalInterviewResult'; import ClosingDocs from './pages/closingDocs/ClosingDocs'; import VerifiedDocs from './pages/closingDocs/VerifiedDocs'; import JoiningLetter from './pages/joiningLetter/JoiningLetter'; diff --git a/src/components/timeSlot/TimeSlot.tsx b/src/components/timeSlot/TimeSlot.tsx index b480da0..e58c4c3 100644 --- a/src/components/timeSlot/TimeSlot.tsx +++ b/src/components/timeSlot/TimeSlot.tsx @@ -5,7 +5,7 @@ import { Link } from "react-router-dom"; import { useState } from "react"; import { addDays } from "date-fns"; - +// singular interface dates { date: string; day: string; @@ -24,16 +24,18 @@ const TimeSlot: React.FC = (props) => { const [highlightedDate, setHighlightedDate] = useState(); const [highlightedTime, setHighlightedTime] = useState(""); + // use object insted of map const daysMap = new Map([[0, "Sun"], [1, "Mon"], [2, "Tue"], [3, "Wed"], [4, "Thu"], [5, "Fri"], [6, "Sat"]]); const dates = props.dates.map((date, key) => { const currentDate = new Date(); - let day = addDays(currentDate, key + 1) + let day = addDays(currentDate, key + 1); // if (daysMap.get(day) === "Thu") { // sat // day = addDays(currentDate, key + 3).getDay(); // } else if (daysMap.get(day) === "Fri") { // day = addDays(currentDate, key + 3).getDay(); // } + console.log(highlightedDate); return (
{ - let steps: stepDetail[] = [ - { - stepNumber: 1, - stepName: "Skill Information", - descriptionImage: skillInfo, - buttonText: "Let's start now", - isUnlocked: true, - link: "/skillInformationStep" - }, - { - stepNumber: 2, - stepName: "Preliminary Round", - descriptionImage: preliminaryRound, - buttonText: "Let's do this", - isUnlocked: false, - link: "/preliminaryRound" - }, - { - stepNumber: 3, - stepName: "Technical Interview", - descriptionImage: technicalInterview, - buttonText: "Schedule meeting", - isUnlocked: false, - link: "/technicalInterview" - }, - { - stepNumber: 4, - stepName: "Assignment", - descriptionImage: assignment, - buttonText: "Show details", - isUnlocked: false, - link: "/assignment" - }, - { - stepNumber: 5, - stepName: "Final Interview", - descriptionImage: finalInterview, - buttonText: "Schedule meeting", - isUnlocked: false, - link: "/finalInterview" - }, - { - stepNumber: 6, - stepName: "Closing Docs", - descriptionImage: closingDocs, - buttonText: "Upload docs", - isUnlocked: false, - link: "/closingDocs" - }, - { - stepNumber: 7, - stepName: "Joining Letter", - descriptionImage: joiningLetter, - buttonText: "Show details", - isUnlocked: false, - link: "/joiningLetter" - }, - { - stepNumber: 8, - stepName: "Celebrations", - descriptionImage: Celebrations, - buttonText: "Join Workex", - isUnlocked: false, - link: "/celebration" - }, - ]; +const InterviewRounds: React.FC = () => { const [stepNo, setStep] = useState(1); @@ -107,8 +26,9 @@ const InterviewRounds: React.FC = () => { descriptionImage={step.descriptionImage} buttonText={step.buttonText} setDescription={setDescription} - showDescription={(stepNo === step.stepNumber) ? true : false} + showDescription={(stepNo === step.stepNumber && step.isUnlocked === true) ? true : false} link={step.link} + isRoundCompleted={step.isRoundCompleted} /> ); }); diff --git a/src/pages/interviewRounds/StepDescreption.module.scss b/src/pages/interviewRounds/StepDescreption.module.scss index e3a91a8..1b982d9 100644 --- a/src/pages/interviewRounds/StepDescreption.module.scss +++ b/src/pages/interviewRounds/StepDescreption.module.scss @@ -17,6 +17,17 @@ animation-iteration-count: 1; animation-fill-mode: forwards; + ion-icon { + color: var(--primary-button-color); + width: 1.5rem; + height: 1.5rem; + } + + .checkIcon { + width: 2rem; + height: 2rem; + } + .stepName { display: flex; justify-content: center; @@ -72,14 +83,6 @@ } } -ion-icon { - color: var(--primary-button-color); - width: 1.5rem; - height: 1.5rem; - -} - - @keyframes fadeInAnimation { 0% { diff --git a/src/pages/interviewRounds/StepDescreption.tsx b/src/pages/interviewRounds/StepDescreption.tsx index 796e77e..6e0ef91 100644 --- a/src/pages/interviewRounds/StepDescreption.tsx +++ b/src/pages/interviewRounds/StepDescreption.tsx @@ -1,7 +1,7 @@ import styles from './StepDescreption.module.scss'; import { IonButton, IonIcon } from '@ionic/react'; -import { lockOpen, lockClosed } from 'ionicons/icons'; +import { lockOpen, lockClosed, checkmarkCircle } from 'ionicons/icons'; import { useEffect, useRef } from 'react'; import { Link } from 'react-router-dom'; @@ -12,6 +12,7 @@ interface Props { buttonText: string; descriptionImage: string; link: string; + isRoundCompleted: boolean; } const StepsDescription: React.FC = (props) => { @@ -29,7 +30,11 @@ const StepsDescription: React.FC = (props) => {
- {props.isUnlocked ? : } + { + props.isRoundCompleted ? + + : + }
step {props.stepNumber}
diff --git a/src/pages/interviewRounds/Steps.module.scss b/src/pages/interviewRounds/Steps.module.scss index 3ff3c34..f7b4a45 100644 --- a/src/pages/interviewRounds/Steps.module.scss +++ b/src/pages/interviewRounds/Steps.module.scss @@ -19,6 +19,12 @@ ion-item { width: 1.5rem; height: 1.5rem; } + + .checkIcon { + width: 1.8rem; + height: 1.8rem; + color: var(--primary-button-color); + } .stepName { display: flex; diff --git a/src/pages/interviewRounds/Steps.tsx b/src/pages/interviewRounds/Steps.tsx index 4460dd5..d04321d 100644 --- a/src/pages/interviewRounds/Steps.tsx +++ b/src/pages/interviewRounds/Steps.tsx @@ -1,9 +1,9 @@ import styles from './Steps.module.scss'; -import { lockOpen, lockClosed } from 'ionicons/icons'; +import { lockOpen, lockClosed, checkmarkCircle } from 'ionicons/icons'; import { IonIcon, IonItem } from '@ionic/react'; import StepDescription from './StepDescreption'; -interface Props { +interface OwnProps { stepNumber: number; roundName: string; isUnlocked: boolean; @@ -11,11 +11,12 @@ interface Props { buttonText: string; descriptionImage: string; link: string; + isRoundCompleted: boolean; setDescription: (stepNumber: number) => void; // rename to select step } -const Steps: React.FC = (props) => { +const Steps: React.FC = (props) => { return ( props.setDescription(props.stepNumber)}> @@ -27,9 +28,13 @@ const Steps: React.FC = (props) => { buttonText={props.buttonText} descriptionImage={props.descriptionImage} link={props.link} + isRoundCompleted={props.isRoundCompleted} /> :
- + {/* */} + {props.isUnlocked && !props.isRoundCompleted && } + {!props.isUnlocked && } + {props.isRoundCompleted && }
step {props.stepNumber}
diff --git a/src/pages/Quiz/Options.module.scss b/src/pages/quiz/Options.module.scss similarity index 100% rename from src/pages/Quiz/Options.module.scss rename to src/pages/quiz/Options.module.scss diff --git a/src/pages/Quiz/Options.tsx b/src/pages/quiz/Options.tsx similarity index 100% rename from src/pages/Quiz/Options.tsx rename to src/pages/quiz/Options.tsx diff --git a/src/pages/Quiz/Question.module.scss b/src/pages/quiz/Question.module.scss similarity index 100% rename from src/pages/Quiz/Question.module.scss rename to src/pages/quiz/Question.module.scss diff --git a/src/pages/Quiz/Question.tsx b/src/pages/quiz/Question.tsx similarity index 100% rename from src/pages/Quiz/Question.tsx rename to src/pages/quiz/Question.tsx diff --git a/src/pages/Quiz/Quiz.module.scss b/src/pages/quiz/Quiz.module.scss similarity index 100% rename from src/pages/Quiz/Quiz.module.scss rename to src/pages/quiz/Quiz.module.scss diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/quiz/Quiz.tsx similarity index 95% rename from src/pages/Quiz/Quiz.tsx rename to src/pages/quiz/Quiz.tsx index b2f36e7..49901a7 100644 --- a/src/pages/Quiz/Quiz.tsx +++ b/src/pages/quiz/Quiz.tsx @@ -7,7 +7,7 @@ import { Link } from 'react-router-dom'; import { useState } from 'react'; import Question from './Question'; - +// move to mock data const options: string[] = [ "System.out.println(“Hello, how are you?”);", "println('Hello, how are you?');", @@ -38,7 +38,7 @@ const Quiz: React.FC = () => { + timeLimit={2.5} />