soft coded interviewround and skill info data

src/pages/interviewRounds/InterviewRounds.tsx

@@ -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>
     )

src/pages/skillInformationStep/SkillInformationStep.tsx

@@ -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>