Skip to content

Commit 987a16c

Browse files
author
fangedShadow
committed
fixing code quality
1 parent 129c274 commit 987a16c

1 file changed

Lines changed: 90 additions & 154 deletions

File tree

‎src/components/EductionPortal/BrowseLessonPlan/BrowseLP.jsx‎

Lines changed: 90 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,13 @@ export default function BrowseLessonPlan() {
9595
setExpandedSections(newExpanded);
9696
};
9797

98+
const handleKeyDown = (e, section) => {
99+
if (e.key === 'Enter' || e.key === ' ') {
100+
e.preventDefault();
101+
toggleSection(section);
102+
}
103+
};
104+
98105
function handleToggleSave(plan) {
99106
if (!userId) {
100107
return;
@@ -113,6 +120,86 @@ export default function BrowseLessonPlan() {
113120
// Navigate to lesson plan detail page
114121
}
115122

123+
const renderPlanCard = (plan, isSaved, showFooter = true) => {
124+
const planId = plan._id || plan.id;
125+
const cardClass = isSaved ? `${styles.atomCard} ${styles.savedCard}` : styles.atomCard;
126+
127+
return (
128+
<div key={planId} className={cardClass}>
129+
<div className={styles.cardHeader}>
130+
<h4 className={styles.cardTitle}>{plan.title}</h4>
131+
<div className={styles.cardActions}>
132+
{isSaved ? (
133+
<>
134+
<button className={styles.iconBtn} title="Star">
135+
⭐
136+
</button>
137+
<button
138+
className={styles.iconBtn}
139+
title="View"
140+
onClick={() => handleViewDetails(plan)}
141+
>
142+
👁️
143+
</button>
144+
<button
145+
className={styles.iconBtn}
146+
title="Remove"
147+
onClick={() => handleToggleSave(plan)}
148+
>
149+
×
150+
</button>
151+
</>
152+
) : (
153+
<>
154+
<button
155+
className={`${styles.iconBtn} ${styles.saveBtn}`}
156+
title="Save"
157+
onClick={() => handleToggleSave(plan)}
158+
>
159+
☆
160+
</button>
161+
<button
162+
className={styles.iconBtn}
163+
title="View"
164+
onClick={() => handleViewDetails(plan)}
165+
>
166+
👁️
167+
</button>
168+
</>
169+
)}
170+
</div>
171+
</div>
172+
<div className={styles.cardTags}>
173+
{plan.subjects?.map(subj => (
174+
<span key={subj} className={styles.subjectTag}>
175+
{subj}
176+
</span>
177+
))}
178+
<span className={`${styles.difficultyBadge} ${styles[plan.difficulty || 'beginner']}`}>
179+
{plan.difficulty || 'beginner'}
180+
</span>
181+
</div>
182+
<p className={styles.cardDescription}>
183+
{plan.description
184+
? plan.description.length > (showFooter ? 120 : 100)
185+
? `${plan.description.slice(0, showFooter ? 120 : 100)}...`
186+
: plan.description
187+
: showFooter
188+
? 'No description available.'
189+
: 'No description.'}
190+
</p>
191+
{showFooter && (
192+
<div className={styles.cardFooter}>
193+
<span className={styles.addedDate}>
194+
Added: {new Date(plan.createdAt || Date.now()).toLocaleDateString()}
195+
</span>
196+
{isSaved && <button className={styles.priorityBtn}>★ Priority</button>}
197+
</div>
198+
)}
199+
</div>
200+
);
201+
};
202+
116203
return (
117204
<div className={`${styles.container} ${darkMode ? styles.dark : ''}`}>
118205
<h1 className={styles.mainTitle}>My Saved Interests</h1>
@@ -151,7 +238,6 @@ export default function BrowseLessonPlan() {
151238
{loading && <div className={styles.loadingMsg}>Loading...</div>}
152239
{error && <div className={styles.errorMsg}>{error}</div>}
153240

154-
{/* Display all subjects with saved items at top */}
155241
<div className={styles.sectionsContainer}>
156242
{Object.entries(groupedAllPlans).map(([subject, allItems]) => {
157243
const savedInSubject = (groupedSaved[subject] || []).filter(plan =>
@@ -183,61 +269,12 @@ export default function BrowseLessonPlan() {
183269

184270
{expandedSections.has(sectionKey) && (
185271
<>
186-
{/* Top 3 Priority (if any saved) */}
187272
{savedInSubject.length > 0 && (
188273
<div className={styles.priorityBox}>
189274
<h3 className={styles.priorityTitle}>My Top 3 for {subject} (Next Focus)</h3>
190275
{savedInSubject.slice(0, 3).map(plan => (
191276
<div key={plan._id || plan.id} className={styles.priorityCard}>
192-
<div className={styles.cardHeader}>
193-
<h4 className={styles.cardTitle}>{plan.title}</h4>
194-
<div className={styles.cardActions}>
195-
<button className={styles.iconBtn} title="Star">
196-
⭐
197-
</button>
198-
<button
199-
className={styles.iconBtn}
200-
title="View"
201-
onClick={() => handleViewDetails(plan)}
202-
>
203-
👁️
204-
</button>
205-
<button
206-
className={styles.iconBtn}
207-
title="Remove"
208-
onClick={() => handleToggleSave(plan)}
209-
>
210-
×
211-
</button>
212-
</div>
213-
</div>
214-
<div className={styles.cardTags}>
215-
{plan.subjects?.map(subj => (
216-
<span key={subj} className={styles.subjectTag}>
217-
{subj}
218-
</span>
219-
))}
220-
<span
221-
className={`${styles.difficultyBadge} ${
222-
styles[plan.difficulty || 'beginner']
223-
}`}
224-
>
225-
{plan.difficulty || 'beginner'}
226-
</span>
227-
</div>
228-
<p className={styles.cardDescription}>
229-
{plan.description
230-
? plan.description.length > 120
231-
? `${plan.description.slice(0, 120)}...`
232-
: plan.description
233-
: 'No description available.'}
234-
</p>
235-
<div className={styles.cardFooter}>
236-
<span className={styles.addedDate}>
237-
Added: {new Date(plan.createdAt || Date.now()).toLocaleDateString()}
238-
</span>
239-
<button className={styles.priorityBtn}>★ Priority</button>
240-
</div>
277+
{renderPlanCard(plan, true, true)}
241278
</div>
242279
))}
243280
{savedInSubject.length > 3 && (
@@ -248,112 +285,11 @@ export default function BrowseLessonPlan() {
248285
</div>
249286
)}
250287

251-
{/* All Items in Subject (Saved + Available) */}
252288
<div className={styles.allAtomsSection}>
253289
<h3 className={styles.allAtomsTitle}>All {subject} Atoms</h3>
254290
<div className={styles.atomsList}>
255-
{/* Saved items first */}
256-
{savedInSubject.map(plan => (
257-
<div
258-
key={plan._id || plan.id}
259-
className={`${styles.atomCard} ${styles.savedCard}`}
260-
>
261-
<div className={styles.cardHeader}>
262-
<h4 className={styles.cardTitle}>{plan.title}</h4>
263-
<div className={styles.cardActions}>
264-
<button className={styles.iconBtn} title="Star">
265-
⭐
266-
</button>
267-
<button
268-
className={styles.iconBtn}
269-
title="View"
270-
onClick={() => handleViewDetails(plan)}
271-
>
272-
👁️
273-
</button>
274-
<button
275-
className={styles.iconBtn}
276-
title="Remove"
277-
onClick={() => handleToggleSave(plan)}
278-
>
279-
×
280-
</button>
281-
</div>
282-
</div>
283-
<div className={styles.cardTags}>
284-
{plan.subjects?.map(subj => (
285-
<span key={subj} className={styles.subjectTag}>
286-
{subj}
287-
</span>
288-
))}
289-
<span
290-
className={`${styles.difficultyBadge} ${
291-
styles[plan.difficulty || 'beginner']
292-
}`}
293-
>
294-
{plan.difficulty || 'beginner'}
295-
</span>
296-
</div>
297-
<p className={styles.cardDescription}>
298-
{plan.description
299-
? plan.description.length > 100
300-
? `${plan.description.slice(0, 100)}...`
301-
: plan.description
302-
: 'No description.'}
303-
</p>
304-
<div className={styles.cardFooter}>
305-
<span className={styles.addedDate}>
306-
Added: {new Date(plan.createdAt || Date.now()).toLocaleDateString()}
307-
</span>
308-
</div>
309-
</div>
310-
))}
311-
312-
{/* Available items */}
313-
{availableInSubject.map(plan => (
314-
<div key={plan._id || plan.id} className={styles.atomCard}>
315-
<div className={styles.cardHeader}>
316-
<h4 className={styles.cardTitle}>{plan.title}</h4>
317-
<div className={styles.cardActions}>
318-
<button
319-
className={`${styles.iconBtn} ${styles.saveBtn}`}
320-
title="Save"
321-
onClick={() => handleToggleSave(plan)}
322-
>
323-
☆
324-
</button>
325-
<button
326-
className={styles.iconBtn}
327-
title="View"
328-
onClick={() => handleViewDetails(plan)}
329-
>
330-
👁️
331-
</button>
332-
</div>
333-
</div>
334-
<div className={styles.cardTags}>
335-
{plan.subjects?.map(subj => (
336-
<span key={subj} className={styles.subjectTag}>
337-
{subj}
338-
</span>
339-
))}
340-
<span
341-
className={`${styles.difficultyBadge} ${
342-
styles[plan.difficulty || 'beginner']
343-
}`}
344-
>
345-
{plan.difficulty || 'beginner'}
346-
</span>
347-
</div>
348-
<p className={styles.cardDescription}>
349-
{plan.description
350-
? plan.description.length > 100
351-
? `${plan.description.slice(0, 100)}...`
352-
: plan.description
353-
: 'No description.'}
354-
</p>
355-
</div>
356-
))}
291+
{savedInSubject.map(plan => renderPlanCard(plan, true, false))}
292+
{availableInSubject.map(plan => renderPlanCard(plan, false, false))}
357293
</div>
358294
</div>
359295
</>

0 commit comments

Comments
 (0)