Skip to content

Commit ee2188c

Browse files
DinoxhDinoxh
authored
fixed dropdown (#48)
1 parent 37f8782 commit ee2188c

File tree

2 files changed

+104
-115
lines changed

2 files changed

+104
-115
lines changed

‎my-app/src/views/Components/CoursePagePopup.jsx‎

Lines changed: 100 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,110 @@
11
import React, { useEffect, useRef } from 'react';
22

33
function CoursePagePopup({
4-
favouriteCourses,
5-
addFavourite,
6-
removeFavourite,
7-
handleFavouriteClick,
8-
isOpen,
9-
onClose,
10-
course,
11-
prerequisiteTree
12-
}) {
13-
const treeRef = useRef(null);
4+
favouriteCourses,
5+
handleFavouriteClick,
6+
isOpen,
7+
onClose,
8+
course,
9+
prerequisiteTree,
10+
reviewPresenter,
11+
}) {
12+
const treeRef = useRef(null);
1413

15-
useEffect(() => {
16-
const handleKeyDown = (event) => {
17-
if (event.key === 'Escape') {
18-
onClose();
19-
}
20-
};
21-
22-
if (isOpen) {
23-
window.addEventListener("keydown", handleKeyDown);
24-
}
25-
26-
return () => {
27-
window.removeEventListener("keydown", handleKeyDown);
28-
};
29-
}, [isOpen, onClose]);
30-
31-
const handleTreeClick = () => {
32-
if (treeRef.current) {
33-
treeRef.current.focus(); // gives it focus
34-
}
35-
};
14+
useEffect(() => {
15+
const handleKeyDown = (event) => {
16+
if (event.key === 'Escape') {
17+
onClose();
18+
}
19+
};
20+
if (isOpen) {
21+
window.addEventListener('keydown', handleKeyDown);
22+
}
23+
return () => {
24+
window.removeEventListener('keydown', handleKeyDown);
25+
};
26+
}, [isOpen, onClose]);
3627

37-
if (!isOpen || !course) return null; // Don't render if not open or course not selected
38-
39-
return (
40-
<div
41-
className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
42-
onClick={onClose}
43-
>
44-
<div
45-
className="bg-indigo-300/75 backdrop-blur-lg h-full w-3/4 flex flex-col overflow-auto"
46-
onClick={(e) => e.stopPropagation()}
47-
>
48-
<div className="flex-1">
49-
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
50-
{/* Course Title Section */}
51-
<div>
52-
<h2 className="text-5xl font-extrabold text-[#2e2e4f] ">
53-
<span className="text-violet-700">{course.code}</span> - {course.name}
54-
<span className="ml-4 text-lg text-violet-700 whitespace-nowrap">({course.credits} Credits)</span>
55-
</h2>
56-
<div className="my-6 h-1.5 w-full bg-violet-500"></div>
57-
</div>
58-
<div>
59-
<button
60-
className="text-yellow-100 bg-yellow-400 cursor-pointer"
61-
onClick={(e) => {
62-
e.stopPropagation(); // prevent popup from opening
63-
// Pass the full course object now instead of course.code:
64-
handleFavouriteClick(course);
65-
}}
66-
>
67-
{favouriteCourses.some(fav => fav.code === course.code)
68-
? 'Remove from Favourites'
69-
: 'Add to Favourites'}
70-
</button>
71-
</div>
72-
73-
{/* Description Section */}
74-
<div>
75-
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
76-
<div className="mb-3 h-0.5 w-full bg-violet-500"></div>
77-
<div
78-
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
79-
dangerouslySetInnerHTML={{ __html: course.description }}
80-
/>
81-
</div>
82-
83-
{/* Prerequisite Graph Tree Section */}
84-
<div>
28+
const handleTreeClick = () => {
29+
if (treeRef.current) {
30+
treeRef.current.focus();
31+
}
32+
};
8533

86-
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">
87-
Prerequisite Graph Tree
88-
</h3>
89-
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
90-
<div
91-
className="bg-indigo-300/50 outline-none focus:outline-none focus:ring-2 focus:ring-violet-600 rounded-lg transition-shadow"
92-
ref={treeRef}
93-
onClick={handleTreeClick}
94-
tabIndex={0} // allows the div to receive focus
95-
>
96-
{prerequisiteTree}
97-
</div>
98-
</div>
34+
if (!isOpen || !course) return null;
9935

100-
{/* Reviews Section */}
101-
<div>
102-
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Reviews</h3>
103-
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
104-
<p className="text-lg text-slate-700 leading-7">
105-
Here would be some reviews of the course...
106-
</p>
36+
return (
37+
<div
38+
className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
39+
onClick={onClose}
40+
>
41+
<div
42+
className="bg-indigo-300/75 backdrop-blur-lg h-full w-3/4 flex flex-col overflow-auto"
43+
onClick={(e) => e.stopPropagation()}
44+
>
45+
<div className="flex-1">
46+
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
47+
{/* Course Title Section */}
48+
<div>
49+
<h2 className="text-5xl font-extrabold text-[#2e2e4f]">
50+
<span className="text-violet-700">{course.code}</span> - {course.name}
51+
<span className="ml-4 text-lg text-violet-700 whitespace-nowrap">
52+
({course.credits} Credits)
53+
</span>
54+
</h2>
55+
<div className="my-6 h-1.5 w-full bg-violet-500"></div>
56+
</div>
57+
<div>
58+
<button
59+
className="text-yellow-100 bg-yellow-400 cursor-pointer"
60+
onClick={(e) => {
61+
e.stopPropagation();
62+
handleFavouriteClick(course);
63+
}}
64+
>
65+
{favouriteCourses.some((fav) => fav.code === course.code)
66+
? 'Remove from Favourites'
67+
: 'Add to Favourites'}
68+
</button>
69+
</div>
70+
{/* Description Section */}
71+
<div>
72+
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
73+
<div className="mb-3 h-0.5 w-full bg-violet-500"></div>
74+
<div
75+
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
76+
dangerouslySetInnerHTML={{ __html: course.description }}
77+
/>
78+
</div>
79+
{/* Prerequisite Graph Tree Section */}
80+
<div>
81+
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Prerequisite Graph Tree</h3>
82+
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
83+
<div
84+
className="bg-indigo-300/50 outline-none focus:outline-none focus:ring-2 focus:ring-violet-600 rounded-lg transition-shadow"
85+
ref={treeRef}
86+
onClick={handleTreeClick}
87+
tabIndex={0}
88+
>
89+
{prerequisiteTree}
90+
</div>
91+
</div>
92+
{/* Reviews Section (optional) */}
93+
{reviewPresenter && (
94+
<div>
95+
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Reviews</h3>
96+
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
97+
{reviewPresenter}
98+
</div>
99+
)}
100+
</div>
101+
</div>
102+
<button onClick={onClose} className="px-4 py-2 bg-violet-500 text-white">
103+
Close
104+
</button>
107105
</div>
108-
</div>
109106
</div>
110-
<button
111-
onClick={onClose}
112-
className="px-4 py-2 bg-violet-500 text-white"
113-
>
114-
Close
115-
</button>
116-
</div>
117-
</div>
118-
);
107+
);
108+
}
119109

120-
export default CoursePagePopup;
110+
export default CoursePagePopup;

‎my-app/src/views/Components/FavouriteDropdown.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ function FavouritesDropdown(props) {
99
props.favouriteCourses.map(course => (
1010
<div
1111
onClick={() => {
12-
console.log('Clicked:', course); // check browser console
12+
console.log('Clicked:', course);
1313
props.setSelectedCourse(course);
14-
props.setIsPopupOpen(true); // Ensure popup state is updated
14+
props.setIsPopupOpen(true);
1515
}}
1616
key={course.code}
1717
className="p-2 flex justify-between items-center w-full border border-solid border-black">
1818
<p className="text-black">{course.name}</p>
1919
<button
2020
className="text-red-500 cursor-pointer"
2121
onClick={(e) => {
22-
e.stopPropagation(); // Prevent parent click
22+
e.stopPropagation();
2323
props.removeFavourite(course);
2424
}}>
2525
X
@@ -31,8 +31,7 @@ function FavouritesDropdown(props) {
3131
No favourites
3232
</div>
3333
)}
34-
{/* Ensure popup is conditionally rendered */}
35-
<div style={{ position: 'relative', zIndex: 1000 }}>
34+
<div className="relative z-100">
3635
{props.isPopupOpen && props.popup}
3736
</div>
3837
{props.favouriteCourses.length > 0 && (

0 commit comments

Comments
 (0)