Skip to content

Commit 5b71b71

Browse files
shashank-madanshashank-madan
committed
Refactored code to improve code quality and fixed linter errors
1 parent cbefa7b commit 5b71b71

4 files changed

Lines changed: 169 additions & 225 deletions

File tree

‎src/components/EductionPortal/StudentDashboard/IntermediateTasksList.jsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import { canMarkIntermediateTaskAsDone, getMarkIntermediateAsDoneTooltip } from './taskUtils';
3+
4+
const IntermediateTasksList = ({ intermediateTasks, styles, onMarkIntermediateAsDone }) => {
5+
if (intermediateTasks.length === 0) {
6+
return <p className={styles.noIntermediateTasks}>No sub-tasks available</p>;
7+
}
8+
9+
return intermediateTasks.map(subTask => {
10+
const subTaskProgress = subTask.status === 'completed' ? 100 : 0;
11+
const canMarkIntermediateDone = canMarkIntermediateTaskAsDone(subTask);
12+
const intermediateTooltip = getMarkIntermediateAsDoneTooltip(subTask);
13+
14+
return (
15+
<div key={subTask._id || subTask.id} className={styles.intermediateTaskItem}>
16+
<div className={styles.intermediateTaskContent}>
17+
<h4 className={styles.intermediateTaskTitle}>{subTask.title}</h4>
18+
{subTask.description && (
19+
<p className={styles.intermediateTaskDescription}>{subTask.description}</p>
20+
)}
21+
{/* Progress Bar for Sub-task */}
22+
<div className={styles.subTaskProgressSection}>
23+
<div className={styles.subTaskProgressBar}>
24+
<div
25+
className={styles.subTaskProgressFill}
26+
style={{ width: `${subTaskProgress}%` }}
27+
/>
28+
</div>
29+
<span className={styles.subTaskProgressText}>{subTaskProgress}%</span>
30+
</div>
31+
<div className={styles.intermediateTaskMeta}>
32+
<span className={styles.intermediateTaskHours}>
33+
{subTask.logged_hours || 0} / {subTask.expected_hours || 0}h
34+
</span>
35+
{subTask.due_date && (
36+
<span className={styles.intermediateTaskDueDate}>
37+
Due: {new Date(subTask.due_date).toLocaleDateString()}
38+
</span>
39+
)}
40+
<span
41+
className={`${styles.intermediateTaskStatus} ${styles[`status${subTask.status}`]}`}
42+
>
43+
{subTask.status || 'pending'}
44+
</span>
45+
</div>
46+
</div>
47+
{subTask.status !== 'completed' && (
48+
<button
49+
className={`${styles.markIntermediateDoneButton} ${
50+
!canMarkIntermediateDone ? styles.disabled : ''
51+
}`}
52+
onClick={() => onMarkIntermediateAsDone(subTask._id || subTask.id)}
53+
disabled={!canMarkIntermediateDone}
54+
title={intermediateTooltip}
55+
>
56+
<svg
57+
width="16"
58+
height="16"
59+
viewBox="0 0 24 24"
60+
fill="none"
61+
stroke="currentColor"
62+
strokeWidth="2"
63+
>
64+
<polyline points="20,6 9,17 4,12" />
65+
</svg>
66+
</button>
67+
)}
68+
</div>
69+
);
70+
});
71+
};
72+
73+
export default IntermediateTasksList;

‎src/components/EductionPortal/StudentDashboard/MarkAsDoneButton.jsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
3+
const MarkAsDoneButton = ({
4+
task,
5+
intermediateTasks,
6+
canMarkDone,
7+
markAsDoneTooltip,
8+
onMarkAsDone,
9+
styles,
10+
iconSize = '16',
11+
}) => {
12+
const handleMarkAsDone = () => {
13+
if (canMarkDone) {
14+
onMarkAsDone(task.id);
15+
}
16+
};
17+
18+
// Show completed only if task is completed AND (no subtasks OR all subtasks are completed)
19+
if (
20+
task.is_completed &&
21+
(intermediateTasks.length === 0 || intermediateTasks.every(t => t.status === 'completed'))
22+
) {
23+
return (
24+
<button className={styles.completedButton} disabled>
25+
<svg
26+
width={iconSize}
27+
height={iconSize}
28+
viewBox="0 0 24 24"
29+
fill="none"
30+
stroke="currentColor"
31+
strokeWidth="2"
32+
>
33+
<polyline points="20,6 9,17 4,12" />
34+
</svg>
35+
{iconSize === '16' && 'Completed'}
36+
</button>
37+
);
38+
}
39+
40+
return (
41+
<button
42+
className={`${styles.markDoneButton} ${!canMarkDone ? styles.disabled : ''}`}
43+
onClick={handleMarkAsDone}
44+
disabled={!canMarkDone}
45+
title={markAsDoneTooltip}
46+
>
47+
<svg
48+
width={iconSize}
49+
height={iconSize}
50+
viewBox="0 0 24 24"
51+
fill="none"
52+
stroke="currentColor"
53+
strokeWidth="2"
54+
>
55+
<polyline points="20,6 9,17 4,12" />
56+
</svg>
57+
{iconSize === '16' && 'Mark as Done'}
58+
</button>
59+
);
60+
};
61+
62+
export default MarkAsDoneButton;

‎src/components/EductionPortal/StudentDashboard/TaskCard.jsx‎

Lines changed: 16 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import styles from './TaskCard.module.css';
33
import { useTaskLogic } from './useTaskLogic';
4-
import { canMarkIntermediateTaskAsDone, getMarkIntermediateAsDoneTooltip } from './taskUtils';
4+
import MarkAsDoneButton from './MarkAsDoneButton';
5+
import IntermediateTasksList from './IntermediateTasksList';
56

67
const TaskCard = ({
78
task,
@@ -20,12 +21,6 @@ const TaskCard = ({
2021
progressText,
2122
} = useTaskLogic(task, styles, intermediateTasks);
2223

23-
const handleMarkAsDone = () => {
24-
if (canMarkDone) {
25-
onMarkAsDone(task.id);
26-
}
27-
};
28-
2924
const handleToggleIntermediateTasks = () => {
3025
if (onToggleIntermediateTasks) {
3126
onToggleIntermediateTasks(task.id);
@@ -95,43 +90,15 @@ const TaskCard = ({
9590
</svg>
9691
</button>
9792

98-
{/* Show completed only if task is completed AND (no subtasks OR all subtasks are completed) */}
99-
{task.is_completed &&
100-
(intermediateTasks.length === 0 ||
101-
intermediateTasks.every(t => t.status === 'completed')) ? (
102-
<button className={styles.completedButton} disabled>
103-
<svg
104-
width="16"
105-
height="16"
106-
viewBox="0 0 24 24"
107-
fill="none"
108-
stroke="currentColor"
109-
strokeWidth="2"
110-
>
111-
<polyline points="20,6 9,17 4,12" />
112-
</svg>
113-
Completed
114-
</button>
115-
) : (
116-
<button
117-
className={`${styles.markDoneButton} ${!canMarkDone ? styles.disabled : ''}`}
118-
onClick={handleMarkAsDone}
119-
disabled={!canMarkDone}
120-
title={markAsDoneTooltip}
121-
>
122-
<svg
123-
width="16"
124-
height="16"
125-
viewBox="0 0 24 24"
126-
fill="none"
127-
stroke="currentColor"
128-
strokeWidth="2"
129-
>
130-
<polyline points="20,6 9,17 4,12" />
131-
</svg>
132-
Mark as Done
133-
</button>
134-
)}
93+
<MarkAsDoneButton
94+
task={task}
95+
intermediateTasks={intermediateTasks}
96+
canMarkDone={canMarkDone}
97+
markAsDoneTooltip={markAsDoneTooltip}
98+
onMarkAsDone={onMarkAsDone}
99+
styles={styles}
100+
iconSize="16"
101+
/>
135102
</div>
136103

137104
{/* Intermediate Tasks Section */}
@@ -160,76 +127,11 @@ const TaskCard = ({
160127

161128
{isExpanded && (
162129
<div className={styles.intermediateTasksList}>
163-
{intermediateTasks.length === 0 ? (
164-
<p className={styles.noIntermediateTasks}>No sub-tasks available</p>
165-
) : (
166-
intermediateTasks.map(subTask => {
167-
const subTaskProgress = subTask.status === 'completed' ? 100 : 0;
168-
const canMarkIntermediateDone = canMarkIntermediateTaskAsDone(subTask);
169-
const intermediateTooltip = getMarkIntermediateAsDoneTooltip(subTask);
170-
171-
return (
172-
<div key={subTask._id || subTask.id} className={styles.intermediateTaskItem}>
173-
<div className={styles.intermediateTaskContent}>
174-
<h4 className={styles.intermediateTaskTitle}>{subTask.title}</h4>
175-
{subTask.description && (
176-
<p className={styles.intermediateTaskDescription}>
177-
{subTask.description}
178-
</p>
179-
)}
180-
{/* Progress Bar for Sub-task */}
181-
<div className={styles.subTaskProgressSection}>
182-
<div className={styles.subTaskProgressBar}>
183-
<div
184-
className={styles.subTaskProgressFill}
185-
style={{ width: `${subTaskProgress}%` }}
186-
/>
187-
</div>
188-
<span className={styles.subTaskProgressText}>{subTaskProgress}%</span>
189-
</div>
190-
<div className={styles.intermediateTaskMeta}>
191-
<span className={styles.intermediateTaskHours}>
192-
{subTask.logged_hours || 0} / {subTask.expected_hours || 0}h
193-
</span>
194-
{subTask.due_date && (
195-
<span className={styles.intermediateTaskDueDate}>
196-
Due: {new Date(subTask.due_date).toLocaleDateString()}
197-
</span>
198-
)}
199-
<span
200-
className={`${styles.intermediateTaskStatus} ${
201-
styles[`status${subTask.status}`]
202-
}`}
203-
>
204-
{subTask.status || 'pending'}
205-
</span>
206-
</div>
207-
</div>
208-
{subTask.status !== 'completed' && (
209-
<button
210-
className={`${styles.markIntermediateDoneButton} ${
211-
!canMarkIntermediateDone ? styles.disabled : ''
212-
}`}
213-
onClick={() => handleMarkIntermediateAsDone(subTask._id || subTask.id)}
214-
disabled={!canMarkIntermediateDone}
215-
title={intermediateTooltip}
216-
>
217-
<svg
218-
width="16"
219-
height="16"
220-
viewBox="0 0 24 24"
221-
fill="none"
222-
stroke="currentColor"
223-
strokeWidth="2"
224-
>
225-
<polyline points="20,6 9,17 4,12" />
226-
</svg>
227-
</button>
228-
)}
229-
</div>
230-
);
231-
})
232-
)}
130+
<IntermediateTasksList
131+
intermediateTasks={intermediateTasks}
132+
styles={styles}
133+
onMarkIntermediateAsDone={handleMarkIntermediateAsDone}
134+
/>
233135
</div>
234136
)}
235137
</div>

0 commit comments

Comments
 (0)