kj
/
webtrigon-job-portal
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

soft coded interviewround and skill info data

develop
Ajay_S 3 years ago
parent
a59ed2686d
commit
a09ac91883
2 changed files with 213 additions and 83 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +82
    -67
      src/pages/interviewRounds/InterviewRounds.tsx
  2. +131
    -16
      src/pages/skillInformationStep/SkillInformationStep.tsx

+ 82
- 67
src/pages/interviewRounds/InterviewRounds.tsx View File

@@ -13,85 +13,100 @@ import closingDocs from '../../assets/icons/Closing_Docs.svg';
import joiningLetter from '../../assets/icons/Joining_Letter.svg';
import Celebrations from '../../assets/icons/Celebrations.svg';

interface stepDetail {
stepNumber: number;
stepName: string;
descriptionImage: string;
buttonText: string;
isUnlocked: boolean;
}

const InterviewRounds: React.FC = () => {

const [step, setStep] = useState(1);
let steps: stepDetail[] = [
{
stepNumber: 1,
stepName: "Skill Information",
descriptionImage: skillInfo,
buttonText: "Let's start now",
isUnlocked: true
},
{
stepNumber: 2,
stepName: "Preliminary Round",
descriptionImage: preliminaryRound,
buttonText: "Let's do this",
isUnlocked: false
},
{
stepNumber: 3,
stepName: "Technical Interview",
descriptionImage: technicalInterview,
buttonText: "Schedule meeting",
isUnlocked: false
},
{
stepNumber: 4,
stepName: "Assignment",
descriptionImage: assignment,
buttonText: "Show details",
isUnlocked: false
},
{
stepNumber: 5,
stepName: "Final Interview",
descriptionImage: finalInterview,
buttonText: "Schedule meeting",
isUnlocked: false
},
{
stepNumber: 6,
stepName: "Closing Docs",
descriptionImage: closingDocs,
buttonText: "Upload docs",
isUnlocked: false
},
{
stepNumber: 7,
stepName: "Joining Letter",
descriptionImage: joiningLetter,
buttonText: "Show details",
isUnlocked: false
},
{
stepNumber: 8,
stepName: "Celebrations",
descriptionImage: Celebrations,
buttonText: "Join Workex",
isUnlocked: false
},
];

const [stepNo, setStep] = useState(1);

const setDescription = (stepNumbera: number) => {
setStep(stepNumbera);
}

const stepsList = steps.map((step, key) => {
return (
<Steps
key={key}
stepNumber={step.stepNumber}
roundName={step.stepName}
isUnlocked={step.isUnlocked}
descriptionImage={step.descriptionImage}
buttonText={step.buttonText}
setDescription={setDescription}
showDescription={(stepNo === step.stepNumber) ? true : false} />
);
});

return (
<IonPage>
<Header />
<IonContent>
<Steps
// descriptionimage stepnumber round name and button text and isUnlocked store in an array of obj use map and render it
stepNumber={1}
roundName="Skill Information"
isUnlocked={true}
descriptionImage={skillInfo}
buttonText="Let's start now!"
setDescription={setDescription}
showDescription={(step === 1) ? true : false} />
<Steps
stepNumber={2}
roundName="Preliminary Round"
isUnlocked={false}
descriptionImage={preliminaryRound}
buttonText="Let's do this"
setDescription={setDescription}
showDescription={(step === 2) ? true : false} />
<Steps
stepNumber={3}
roundName="Technical Interview"
isUnlocked={false}
descriptionImage={technicalInterview}
buttonText="Schedule meeting"
setDescription={setDescription}
showDescription={(step === 3) ? true : false} />
<Steps
stepNumber={4}
roundName="Assignment"
isUnlocked={false}
descriptionImage={assignment}
buttonText="Show details"
setDescription={setDescription}
showDescription={(step === 4) ? true : false} />
<Steps
stepNumber={5}
roundName="Final Interview"
isUnlocked={false}
descriptionImage={finalInterview}
buttonText="Schedule meeting"
setDescription={setDescription}
showDescription={(step === 5) ? true : false} />
<Steps
stepNumber={6}
roundName="Closing Docs"
isUnlocked={false}
descriptionImage={closingDocs}
buttonText="Upload docs"
setDescription={setDescription}
showDescription={(step === 6) ? true : false} />
<Steps
stepNumber={7}
roundName="Joining Letter"
isUnlocked={false}
descriptionImage={joiningLetter}
buttonText="Show details"
setDescription={setDescription}
showDescription={(step === 7) ? true : false} />
<Steps
stepNumber={8}
roundName="Celebrations"
isUnlocked={false}
descriptionImage={Celebrations}
buttonText="Join workex"
setDescription={setDescription}
showDescription={(step === 8) ? true : false} />

{stepsList}
</IonContent>
</IonPage>
)


+ 131
- 16
src/pages/skillInformationStep/SkillInformationStep.tsx View File

@@ -6,7 +6,7 @@ import SkillsCard from './SkillsCard';
import reactIcon from '../../assets/images/React.png';
import angularIcon from '../../assets/images/Angular.png';
import ionicIcon from '../../assets/images/IonicFramework.png';
import reactNative from '../../assets/images/ReactNative.png';
import reactNativeIcon from '../../assets/images/ReactNative.png';
import vueIcon from '../../assets/images/VueJS.png';
import nodeJSIcon from '../../assets/images/NodeJS.png';
import ExpressJSICon from '../../assets/images/ExpressJS.png';
@@ -19,6 +19,10 @@ import DevOpsIcon from '../../assets/images/DevOps.png';
import { useState } from 'react';
import { Link } from 'react-router-dom';

interface skill {
name: string;
icon: string;
}

const SkillInformationStep: React.FC = () => {

@@ -34,9 +38,85 @@ const SkillInformationStep: React.FC = () => {
setSkills(newSkills);
}

const skillsArr = [
{
frontEnd: [
{
name: "React JS/TS",
icon: reactIcon,
},
{
name: "Angular8+",
icon: angularIcon,
}, {
name: "Ionic FrameWork",
icon: ionicIcon,
}, {
name: "React Native",
icon: reactNativeIcon,
}, {
name: "VueJS",
icon: vueIcon,
}
],

backEnd: [
{
name: "NodeJS",
icon: nodeJSIcon,
},
{
name: "ExpressJS",
icon: ExpressJSICon,
},
{
name: "Django FrameWork",
icon: DjangoIcon,
}
],

Database: [
{
name: "MySql",
icon: MySqlIcon,
},
{
name: "MongoDB",
icon: MongoDBIcon,
},
{
name: "PostgreSQL",
icon: postgreSqlIcon,
},
],
Beneficial: [
{
name: "Firebase",
icon: FirebaseIcon,
},
{
name: "DevOps (Docker / Kubernetes)",
icon: DevOpsIcon,
}
]
}
];
const frontEndSkills: skill[] = [];
const backendSkills: skill[] = [];
const database: skill[] = [];
const beneficial: skill[] = [];

skillsArr.forEach(skill => {
frontEndSkills.push(...skill.frontEnd);
backendSkills.push(...skill.backEnd);
database.push(...skill.Database);
beneficial.push(...skill.Beneficial);
});



return (
<IonPage>

<StepHeader
stepNumber={1}
roundName="Skill Information" />
@@ -55,11 +135,18 @@ const SkillInformationStep: React.FC = () => {
<h5 className={styles.heading}>Front-end:</h5>

<div className={styles.skills}>
<SkillsCard name='React JS/TS' icon={reactIcon} isHighlighted={skills.includes("React JS/TS")} toggleSkills={toggleSkill} />
<SkillsCard name='Angular8+' icon={angularIcon} isHighlighted={skills.includes("Angular8+")} toggleSkills={toggleSkill} />
<SkillsCard name='Ionic FrameWork' icon={ionicIcon} isHighlighted={skills.includes("Ionic FrameWork")} toggleSkills={toggleSkill} />
<SkillsCard name='React Native' icon={reactNative} isHighlighted={skills.includes("React Native")} toggleSkills={toggleSkill} />
<SkillsCard name='VueJS' icon={vueIcon} isHighlighted={skills.includes("VueJS")} toggleSkills={toggleSkill} />
{
frontEndSkills.map((skill, index) => {
return (
<SkillsCard
key={index}
name={skill.name}
icon={skill.icon}
isHighlighted={skills.includes(skill.name)}
toggleSkills={toggleSkill} />
);
})
}
</div>

</div>
@@ -69,9 +156,18 @@ const SkillInformationStep: React.FC = () => {
<h5 className={styles.heading}>Back-end:</h5>

<div className={styles.skills}>
<SkillsCard name='NodeJS' icon={nodeJSIcon} isHighlighted={skills.includes("NodeJS")} toggleSkills={toggleSkill} />
<SkillsCard name='ExpressJS' icon={ExpressJSICon} isHighlighted={skills.includes("ExpressJS")} toggleSkills={toggleSkill} />
<SkillsCard name='Django FrameWork' icon={DjangoIcon} isHighlighted={skills.includes("Django FrameWork")} toggleSkills={toggleSkill} />
{
backendSkills.map((skill, index) => {
return (
<SkillsCard
key={index}
name={skill.name}
icon={skill.icon}
isHighlighted={skills.includes(skill.name)}
toggleSkills={toggleSkill} />
);
})
}
</div>

</div>
@@ -79,13 +175,22 @@ const SkillInformationStep: React.FC = () => {
<div className={styles.skillsCard}>

<h5 className={styles.heading}>Database:</h5>

<div className={styles.skills}>
<SkillsCard name='MySql' icon={MySqlIcon} isHighlighted={skills.includes("MySql")} toggleSkills={toggleSkill} />
<SkillsCard name='MongoDB' icon={MongoDBIcon} isHighlighted={skills.includes("MongoDB")} toggleSkills={toggleSkill} />
<SkillsCard name='PostgreSQL' icon={postgreSqlIcon} isHighlighted={skills.includes("PostgreSQL")} toggleSkills={toggleSkill} />
{
database.map((skill, index) => {
return (
<SkillsCard
key={index}
name={skill.name}
icon={skill.icon}
isHighlighted={skills.includes(skill.name)}
toggleSkills={toggleSkill} />
);
})
}
</div>


</div>

<div className={styles.skillsCard}>
@@ -93,8 +198,18 @@ const SkillInformationStep: React.FC = () => {
<h5 className={styles.heading}>Beneficial:</h5>

<div className={styles.skills}>
<SkillsCard name='Firebase' isHighlighted={skills.includes("Firebase")} icon={FirebaseIcon} toggleSkills={toggleSkill} />
<SkillsCard name='DevOps (Docker / Kubernetes)' isHighlighted={skills.includes("DevOps (Docker / Kubernetes)")} icon={DevOpsIcon} toggleSkills={toggleSkill} />
{
beneficial.map((skill, index) => {
return (
<SkillsCard
key={index}
name={skill.name}
icon={skill.icon}
isHighlighted={skills.includes(skill.name)}
toggleSkills={toggleSkill} />
);
})
}
</div>

</div>


Write Preview
Loading…
Cancel
Save