Skip to content

Commit 83df44b

Browse files
chore:fix sonarqube analysis
1 parent 44484ba commit 83df44b

9 files changed

Lines changed: 343 additions & 626 deletions

File tree

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
1-
// src/components/EductionPortal/StudentTasks/RubricModal.jsx
2-
import React from 'react';
1+
import React, { useEffect, useRef } from 'react';
2+
import PropTypes from 'prop-types';
33
import styles from './StudentTasks.module.css';
44

55
export default function RubricModal({ task, onClose }) {
6+
const dialogRef = useRef(null);
7+
8+
useEffect(() => {
9+
dialogRef.current?.focus();
10+
const onKey = e => {
11+
if (e.key === 'Escape') onClose();
12+
};
13+
window.addEventListener('keydown', onKey);
14+
return () => window.removeEventListener('keydown', onKey);
15+
}, [onClose]);
16+
617
const handleOverlayClick = e => {
718
if (e.target.classList.contains(styles.modalOverlay)) onClose();
819
};
920

10-
const handleOverlayKeyDown = e => {
11-
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
12-
onClose();
13-
}
14-
};
15-
1621
return (
17-
<div
18-
className={styles.modalOverlay}
19-
role="button"
20-
onClick={handleOverlayClick}
21-
onKeyDown={handleOverlayKeyDown}
22-
tabIndex={0}
23-
aria-label="Close modal"
24-
>
25-
<div className={styles.modal}>
22+
<div className={styles.modalOverlay} onClick={handleOverlayClick} role="presentation">
23+
<div
24+
className={styles.modal}
25+
ref={dialogRef}
26+
role="dialog"
27+
aria-modal="true"
28+
aria-labelledby="rubric-modal-title"
29+
tabIndex={-1}
30+
>
2631
<button
2732
className={styles.closeBtn}
2833
type="button"
@@ -32,17 +37,27 @@ export default function RubricModal({ task, onClose }) {
3237
3338
</button>
3439

35-
<h2 className={styles.rubricTitle}>{task.title}</h2>
40+
<h2 id="rubric-modal-title" className={styles.rubricTitle}>
41+
{task.title}
42+
</h2>
3643
<h3 className={styles.rubricSubtitle}>Grading Rubric</h3>
3744

3845
<ul className={styles.rubricList}>
39-
{task.rubric.map((criteria, idx) => (
40-
<li key={idx} className={styles.rubricItem}>
41-
{criteria}
46+
{task.rubric.map(crit => (
47+
<li key={crit} className={styles.rubricItem}>
48+
{crit}
4249
</li>
4350
))}
4451
</ul>
4552
</div>
4653
</div>
4754
);
4855
}
56+
57+
RubricModal.propTypes = {
58+
task: PropTypes.shape({
59+
title: PropTypes.string.isRequired,
60+
rubric: PropTypes.arrayOf(PropTypes.string).isRequired,
61+
}).isRequired,
62+
onClose: PropTypes.func.isRequired,
63+
};

src/components/EductionPortal/StudentTasks/StudentDashboard.jsx

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
// src/components/EductionPortal/StudentTasks/StudentDashboard.jsx
21
import React from 'react';
32
import { useHistory } from 'react-router-dom';
43
import { useSelector } from 'react-redux';
54
import Sidebar from './StudentSidebar';
65
import styles from './StudentDashboard.module.css';
76

7+
const LIFE_CARD_IDS = ['lc-a', 'lc-b', 'lc-c', 'lc-d', 'lc-e', 'lc-f'];
8+
89
export default function StudentDashboard() {
910
const history = useHistory();
10-
// 👇 use global dark mode from Redux
1111
const darkMode = useSelector(state => state.theme?.darkMode);
1212

13-
// Mock preview tasks (swap for real data later)
1413
const tasks = [
1514
{
1615
id: 1,
@@ -47,16 +46,15 @@ export default function StudentDashboard() {
4746
<div className={`${styles.pageLayout} ${darkMode ? styles.pageLayoutDark : ''}`}>
4847
<Sidebar active="home" />
4948
<div className={`${styles.content} ${darkMode ? styles.contentDark : ''}`}>
50-
{/* Header */}
5149
<div className={styles.headerRow}>
5250
<h1 className={styles.title}>Dashboard</h1>
5351
<div className={styles.welcomeArea}>
5452
<span className={styles.welcomeLabel}>Welcome, Student Name</span>
5553
<div className={styles.icons}>
56-
<span className={styles.icon} aria-hidden>
54+
<span className={styles.icon} aria-hidden="true">
5755
👤
5856
</span>
59-
<span className={styles.icon} aria-hidden>
57+
<span className={styles.icon} aria-hidden="true">
6058
🔔
6159
</span>
6260
</div>
@@ -65,12 +63,10 @@ export default function StudentDashboard() {
6563
<hr className={styles.divider} />
6664

6765
<div className={styles.mainGrid}>
68-
{/* Left: Visual placeholder */}
6966
<section className={styles.visualArea} aria-label="Knowledge map">
7067
<div className={styles.visualPlaceholder} />
7168
</section>
7269

73-
{/* Right: To Do preview */}
7470
<aside className={styles.todoPanel} aria-label="To Do">
7571
<div className={styles.todoHeaderRow}>
7672
<h2 className={styles.todoTitle}>To Do</h2>
@@ -98,10 +94,10 @@ export default function StudentDashboard() {
9894
<div className={styles.todoSub}>{t.subtitle}</div>
9995
</div>
10096
<div className={styles.todoRight}>
101-
<div className={styles.progressTrack}>
97+
<div className={styles.progressTrack} aria-hidden="true">
10298
<div className={styles.progressFill} style={{ width: `${t.progress}%` }} />
10399
</div>
104-
<span className={styles.chev} aria-hidden>
100+
<span className={styles.chev} aria-hidden="true">
105101
106102
</span>
107103
</div>
@@ -110,7 +106,6 @@ export default function StudentDashboard() {
110106
))}
111107
</ul>
112108

113-
{/* Teaching Strategies */}
114109
<div className={styles.block}>
115110
<h3 className={styles.blockTitle}>Teaching Strategies</h3>
116111
<hr className={styles.blockDivider} />
@@ -121,31 +116,29 @@ export default function StudentDashboard() {
121116
'Curious Copycat',
122117
'Existential Smart Exploration',
123118
'Freedom Learning',
124-
].map((s, i) => (
125-
<li key={i} className={styles.strategyItem}>
119+
].map(s => (
120+
<li key={s} className={styles.strategyItem}>
126121
{s}
127122
</li>
128123
))}
129124
</ul>
130125
</div>
131126

132-
{/* Life Strategies */}
133127
<div className={styles.block}>
134128
<h3 className={styles.blockTitle}>Life Strategies</h3>
135129
<hr className={styles.blockDivider} />
136130
<div className={styles.lifeGrid}>
137-
{[...Array(6)].map((_, i) => (
138-
<div key={i} className={styles.lifeCard} />
131+
{LIFE_CARD_IDS.map(id => (
132+
<div key={id} className={styles.lifeCard} />
139133
))}
140134
</div>
141135
</div>
142136
</aside>
143137
</div>
144138

145-
{/* Subject chips row */}
146139
<div className={styles.subjectChips}>
147-
{subjects.map((s, i) => (
148-
<span key={i} className={styles.chip}>
140+
{subjects.map(s => (
141+
<span key={s} className={styles.chip}>
149142
{s}
150143
</span>
151144
))}

src/components/EductionPortal/StudentTasks/StudentDashboard.module.css

Lines changed: 20 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -60,72 +60,24 @@
6060

6161
/* Responsive */
6262
@media (max-width:1100px){ .mainGrid{ grid-template-columns:1fr; } .todoPanel{ order:2; } .visualArea{ order:1; min-height:280px; } }
63-
/* ===========================
64-
DARK MODE (class-based)
65-
Usage: add styles.contentDark to the same element that has styles.content
66-
=========================== */
6763

68-
.contentDark {
69-
background-color: #0b1220;
70-
color: #ffffff;
71-
}
72-
73-
/* Header text + divider */
74-
.contentDark .title,
75-
.contentDark .welcomeArea { color: #e57eeb; }
76-
.contentDark .divider { border-top-color: #1f2937; }
77-
78-
/* Panels + placeholder */
79-
.contentDark .todoPanel,
80-
.contentDark .visualArea {
81-
background-color: #0f172a;
82-
border-color: #1f2937;
83-
color: #e5e7eb;
84-
}
85-
86-
/* To-Do preview items */
87-
.contentDark .todoBtn {
88-
background-color: #0b1220;
89-
border-color: #1f2937;
90-
color: #e5e7eb;
91-
}
92-
.contentDark .todoBtn:hover { background-color: #0f172a; }
93-
.contentDark .todoTitle { color: #e5e7eb; }
94-
.contentDark .todoName { color: #e5e7eb; }
95-
.contentDark .todoSub { color: #94a3b8; }
96-
97-
/* Progress track */
98-
.contentDark .progressTrack { background-color: #1f2937; }
99-
.contentDark .progressFill { background-color: #9ca3af; }
100-
101-
/* Teaching/Life blocks */
102-
.contentDark .blockTitle { color: #e5e7eb; }
103-
.contentDark .blockDivider { border-top-color: #1f2937; }
104-
contentDark .strategyItem { color: #e5e7eb; } /* (typo guard) */
105-
.contentDark .strategyItem { color: #e5e7eb; }
106-
.contentDark .lifeCard {
107-
background-color: #0b1220;
108-
border-color: #1f2937;
109-
}
110-
111-
/* Subject chips */
112-
.contentDark .chip {
113-
background-color: #111827;
114-
border-color: #1f2937;
115-
color: #cbd5e1;
116-
}
117-
/* Dark mode: "View all tasks" button */
118-
.contentDark .viewAllBtn {
119-
color: #e5e7eb;
120-
background: #0f172a;
121-
border: 1px solid #334155;
122-
}
123-
124-
.contentDark .viewAllBtn:hover {
125-
background: #111827;
126-
border-color: #475569;
127-
}
128-
/* Dark mode background for the whole dashboard page wrapper */
129-
.pageLayoutDark {
130-
background: #0b1220; /* same tone used on StudentTasks/TaskDetails */
131-
}
64+
/* Dark mode */
65+
.contentDark { background-color:#0b1220; color:#ffffff; }
66+
.contentDark .title, .contentDark .welcomeArea { color:#e57eeb; }
67+
.contentDark .divider { border-top-color:#1f2937; }
68+
.contentDark .todoPanel, .contentDark .visualArea { background-color:#0f172a; border-color:#1f2937; color:#e5e7eb; }
69+
.contentDark .todoBtn { background-color:#0b1220; border-color:#1f2937; color:#e5e7eb; }
70+
.contentDark .todoBtn:hover { background-color:#0f172a; }
71+
.contentDark .todoTitle { color:#e5e7eb; }
72+
.contentDark .todoName { color:#e5e7eb; }
73+
.contentDark .todoSub { color:#94a3b8; }
74+
.contentDark .progressTrack { background-color:#1f2937; }
75+
.contentDark .progressFill { background-color:#9ca3af; }
76+
.contentDark .blockTitle { color:#e5e7eb; }
77+
.contentDark .blockDivider { border-top-color:#1f2937; }
78+
.contentDark .strategyItem { color:#e5e7eb; }
79+
.contentDark .lifeCard { background-color:#0b1220; border-color:#1f2937; }
80+
.contentDark .chip { background-color:#111827; border-color:#1f2937; color:#cbd5e1; }
81+
.contentDark .viewAllBtn { color:#e5e7eb; background:#0f172a; border:1px solid #334155; }
82+
.contentDark .viewAllBtn:hover { background:#111827; border-color:#475569; }
83+
.pageLayoutDark { background:#0b1220; }

0 commit comments

Comments
 (0)