Skip to content

Commit bb5db2c

Browse files
one-communityone-community
authored
Merge pull request #4257 from OneCommunityGlobal/shashank-madan-hgn-skills-page-not-loading
Shashank madan fix skills page not loading
2 parents 76d68af + 22c58ed commit bb5db2c

22 files changed

Lines changed: 3526 additions & 3016 deletions

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/AdditionalInfo.jsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import axios from 'axios';
22
import { useState, useEffect, useRef } from 'react';
3-
import '../styles/AdditionalInfo.css';
3+
import styles from '../styles/AdditionalInfo.module.css';
44
import { useSelector, useDispatch } from 'react-redux';
55
import { ENDPOINTS } from '../../../../utils/URL';
66
import { toast } from 'react-toastify';
@@ -33,6 +33,8 @@ function AdditionalInfo() {
3333

3434
const requestorId = useSelector(state => state.auth.user.userid);
3535

36+
const darkMode = useSelector(state => state.theme.darkMode);
37+
3638
// Fetch data from database
3739
useEffect(() => {
3840
const fetchQuestions = async () => {
@@ -115,8 +117,8 @@ function AdditionalInfo() {
115117

116118
if (loading) return <div>Loading...</div>;
117119
return (
118-
<div className="AdditionalInfoBox">
119-
<div className="workExpInfoBox">
120+
<div className={`${styles.AdditionalInfoBox} ${darkMode ? 'dark-mode' : ''}`}>
121+
<div className={styles.workExpInfoBox}>
120122
<h3> Work Experience and Additional Info: </h3>
121123
<button type="button" className="edit-button" onClick={handleEditSave}>
122124
{isEditing ? 'Save' : 'Edit'}
@@ -130,8 +132,8 @@ function AdditionalInfo() {
130132
.map((question, index) => {
131133
const field = fields[index];
132134
return (
133-
<div className="question-and-response-box" key={field.key}>
134-
<div className="question-box">
135+
<div className={styles['question-and-response-box']} key={field.key}>
136+
<div className={styles['question-box']}>
135137
<p>{question.text}</p>
136138
</div>
137139
{field.type === 'textarea' ? (

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/BackendSkills.jsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import { useSelector } from 'react-redux';
12
import styles from '../styles/SkillsSection.module.css';
3+
import { getColorClass } from '../utils/skillUtils';
24

35
function BackendSkills({ profileData }) {
6+
const darkMode = useSelector(state => state.theme.darkMode);
47
const safeProfileData = profileData || {};
58
const skillInfo = safeProfileData.skillInfo || {};
69
const backend = skillInfo.backend || {};
@@ -17,16 +20,8 @@ function BackendSkills({ profileData }) {
1720
{ value: frontend.UnitTest, label: 'Unit Testing' },
1821
];
1922

20-
// Function to determine color based on value
21-
const getColorClass = value => {
22-
const numValue = Number(value) || 0; // Convert to number, default to 0 if undefined
23-
if (numValue <= 4) return `${styles.skillValue} ${styles.red}`;
24-
if (numValue <= 7) return `${styles.skillValue} ${styles.orange}`;
25-
return `${styles.skillValue} ${styles.green}`; // 9-10
26-
};
27-
2823
return (
29-
<div className={`${styles.skillSection}`}>
24+
<div className={`${styles.skillSection} ${darkMode ? 'dark-mode' : ''}`}>
3025
<div className={`${styles.skillsRow}`}>
3126
{skills.map(skill => (
3227
<div key={skill.label} className={`${styles.skillItem}`}>

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/DeploymentSkills.jsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import { useSelector } from 'react-redux';
12
import styles from '../styles/SkillsSection.module.css';
3+
import { getColorClass } from '../utils/skillUtils';
24

35
function DeploymentSkills({ profileData }) {
6+
const darkMode = useSelector(state => state.theme.darkMode);
47
const safeProfileData = profileData || {};
58
const skillInfo = safeProfileData.skillInfo || {};
69
const backend = skillInfo.backend || {};
@@ -11,16 +14,8 @@ function DeploymentSkills({ profileData }) {
1114
{ value: backend.EnvironmentSetup, label: 'Environment Setup (Windows / Linux)' },
1215
];
1316

14-
// Function to determine color based on value
15-
const getColorClass = value => {
16-
const numValue = Number(value) || 0; // Convert to number, default to 0 if undefined
17-
if (numValue <= 4) return `${styles.skillValue} ${styles.red}`;
18-
if (numValue <= 7) return `${styles.skillValue} ${styles.orange}`;
19-
return `${styles.skillValue} ${styles.green}`; // 9-10
20-
};
21-
2217
return (
23-
<div className={`${styles.skillSection}`}>
18+
<div className={`${styles.skillSection} ${darkMode ? 'dark-mode' : ''}`}>
2419
<div className={`${styles.skillsRow}`}>
2520
{skills.map(skill => (
2621
<div key={skill.label} className={`${styles.skillItem}`}>

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/FrontendSkills.jsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import { useSelector } from 'react-redux';
12
import styles from '../styles/SkillsSection.module.css';
3+
import { getColorClass } from '../utils/skillUtils';
24

35
function FrontendSkills({ profileData }) {
6+
const darkMode = useSelector(state => state.theme.darkMode);
47
const safeProfileData = profileData || {};
58
const skillInfo = safeProfileData.skillInfo || {};
69
const frontend = skillInfo.frontend || {};
@@ -17,16 +20,8 @@ function FrontendSkills({ profileData }) {
1720
{ value: frontend.WebSocketCom, label: 'Web Sockets' },
1821
];
1922

20-
// Function to determine color based on value
21-
const getColorClass = value => {
22-
const numValue = Number(value) || 0; // Convert to number, default to 0 if undefined
23-
if (numValue <= 4) return `${styles.skillValue} ${styles.red}`;
24-
if (numValue <= 7) return `${styles.skillValue} ${styles.orange}`;
25-
return `${styles.skillValue} ${styles.green}`; // 9-10
26-
};
27-
2823
return (
29-
<div className={`${styles.skillSection}`}>
24+
<div className={`${styles.skillSection} ${darkMode ? 'dark-mode' : ''}`}>
3025
<div className={`${styles.skillsRow}`}>
3126
{skills.map(skill => (
3227
<div key={skill.label} className={`${styles.skillItem}`}>

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/LeftSection.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import profilePic from './profile.jpg';
55
/* function LeftSection({ profileData }) { */
66
function LeftSection() {
77
const profileData = useSelector(state => state.userSkills.profileData);
8+
const darkMode = useSelector(state => state.theme.darkMode);
9+
810
return (
9-
<div className={`${styles.leftSection}`}>
11+
<div className={`${styles.leftSection} ${darkMode ? 'dark-mode' : ''}`}>
1012
<img src={profilePic} alt="Profile" className={`${styles.profilePic}`} />
1113
<h1>{profileData.name.displayName || 'Unknown User'}</h1>
1214
<h3>{profileData.jobTitle?.[0] || 'Job Title - N/A'}</h3>

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/ProfileDetails.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import styles from '../styles/ProfileDetails.module.css';
44
// function ProfileDetails({ profileData }) {
55
function ProfileDetails() {
66
const profileData = useSelector(state => state.userSkills.profileData);
7+
const darkMode = useSelector(state => state.theme.darkMode);
8+
79
return (
8-
<div className={`${styles.profileDetails}`}>
10+
<div className={`${styles.profileDetails} ${darkMode ? 'dark-mode' : ''}`}>
911
<h3>User Profile</h3>
1012
<hr className={`${styles.horizontalSeparator}`} />
1113
<div className={`${styles.teamInfo}`}>
@@ -53,7 +55,8 @@ function ProfileDetails() {
5355
rel="noopener noreferrer"
5456
className={`${styles.githubLink}`}
5557
>
56-
{profileData.socialHandles.github.includes('http')
58+
{/* eslint-disable-next-line indent */
59+
profileData.socialHandles.github.includes('http')
5760
? profileData.socialHandles.github.split('/').pop()
5861
: profileData.socialHandles.github}
5962
</a>

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/RadarChart.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Radar } from 'react-chartjs-2';
2+
import { useSelector } from 'react-redux';
23
import {
34
Chart as ChartJS,
45
RadialLinearScale,
@@ -45,6 +46,7 @@ const SKILL_MAPPINGS = [
4546
];
4647

4748
function RadarChart({ profileData }) {
49+
const darkMode = useSelector(state => state.theme.darkMode);
4850
const safeProfileData = profileData || {};
4951
const skillInfo = safeProfileData.skillInfo || {};
5052
const general = skillInfo.general || {};
@@ -86,7 +88,7 @@ function RadarChart({ profileData }) {
8688
};
8789

8890
return (
89-
<div className={`${styles.radarChart}`}>
91+
<div className={`${styles.radarChart} ${darkMode ? 'dark-mode' : ''}`}>
9092
<Radar data={chartData} options={chartOptions} />
9193
</div>
9294
);

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/RightSection.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import styles from '../styles/RightSection.module.css';
1313
/* function RightSection({ profileData }) { */
1414
function RightSection() {
1515
const profileData = useSelector(state => state.userSkills.profileData);
16+
const darkMode = useSelector(state => state.theme.darkMode);
1617

1718
const [selectedSkill, setSelectedSkill] = useState('Dashboard');
1819

@@ -39,7 +40,7 @@ function RightSection() {
3940
};
4041

4142
return (
42-
<div className={`${styles.rightSection}`}>
43+
<div className={`${styles.rightSection} ${darkMode ? styles['dark-mode'] : ''}`}>
4344
<ProfileDetails profileData={profileData} />
4445
<div className={`${styles.skillsAndChart}`}>
4546
<Skills selectedSkill={selectedSkill} onSkillClick={handleSkillClick} />

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/Skills.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import { useSelector } from 'react-redux';
12
import styles from '../styles/Skills.module.css';
23

34
function Skills({ selectedSkill, onSkillClick }) {
45
const skills = ['Dashboard', 'Frontend', 'Backend', 'Deployment & DevOps', 'Software Practices'];
6+
const darkMode = useSelector(state => state.theme.darkMode);
57

68
return (
7-
<div className={`${styles.skills}`}>
9+
<div className={`${styles.skills} ${darkMode ? 'dark-mode' : ''}`}>
810
<h3>Skills</h3>
911
{skills.map(skill => (
1012
<button

‎src/components/HGNSkillsDashboard/SkillsProfilePage/components/SoftwarePractices.jsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import { useSelector } from 'react-redux';
12
import styles from '../styles/SkillsSection.module.css';
3+
import { getColorClass } from '../utils/skillUtils';
24

35
function SoftwarePractices({ profileData }) {
6+
const darkMode = useSelector(state => state.theme.darkMode);
47
const safeProfileData = profileData || {};
58
const skillInfo = safeProfileData.skillInfo || {};
69
const backend = skillInfo.backend || {};
@@ -16,16 +19,8 @@ function SoftwarePractices({ profileData }) {
1619
{ value: backend.AdvancedCoding, label: 'Advanced Coding Skills' },
1720
];
1821

19-
// Function to determine color based on value
20-
const getColorClass = value => {
21-
const numValue = Number(value) || 0; // Convert to number, default to 0 if undefined
22-
if (numValue <= 4) return `${styles.skillValue} ${styles.red}`;
23-
if (numValue <= 7) return `${styles.skillValue} ${styles.orange}`;
24-
return `${styles.skillValue} ${styles.green}`; // 9-10
25-
};
26-
2722
return (
28-
<div className={`${styles.skillSection}`}>
23+
<div className={`${styles.skillSection} ${darkMode ? 'dark-mode' : ''}`}>
2924
<div className={`${styles.skillsRow}`}>
3025
{skills.map(skill => (
3126
<div key={skill.label} className={`${styles.skillItem}`}>

0 commit comments

Comments
 (0)