Skip to content

fixed main #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jkluge merged 1 commit into from
Apr 10, 2025
Merged

fixed main #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 100 additions & 110 deletions my-app/src/views/Components/CoursePagePopup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,120 +1,110 @@
import React, { useEffect, useRef } from 'react';

function CoursePagePopup({
favouriteCourses,
addFavourite,
removeFavourite,
handleFavouriteClick,
isOpen,
onClose,
course,
prerequisiteTree
}) {
const treeRef = useRef(null);
favouriteCourses,
handleFavouriteClick,
isOpen,
onClose,
course,
prerequisiteTree,
reviewPresenter,
}) {
const treeRef = useRef(null);

useEffect(() => {
const handleKeyDown = (event) => {
if (event.key === 'Escape') {
onClose();
}
};

if (isOpen) {
window.addEventListener("keydown", handleKeyDown);
}

return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, [isOpen, onClose]);

const handleTreeClick = () => {
if (treeRef.current) {
treeRef.current.focus(); // gives it focus
}
};
useEffect(() => {
const handleKeyDown = (event) => {
if (event.key === 'Escape') {
onClose();
}
};
if (isOpen) {
window.addEventListener('keydown', handleKeyDown);
}
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, onClose]);

if (!isOpen || !course) return null; // Don't render if not open or course not selected

return (
<div
className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
onClick={onClose}
>
<div
className="bg-indigo-300/75 backdrop-blur-lg h-full w-3/4 flex flex-col overflow-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="flex-1">
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
{/* Course Title Section */}
<div>
<h2 className="text-5xl font-extrabold text-[#2e2e4f] ">
<span className="text-violet-700">{course.code}</span> - {course.name}
<span className="ml-4 text-lg text-violet-700 whitespace-nowrap">({course.credits} Credits)</span>
</h2>
<div className="my-6 h-1.5 w-full bg-violet-500"></div>
</div>
<div>
<button
className="text-yellow-100 bg-yellow-400 cursor-pointer"
onClick={(e) => {
e.stopPropagation(); // prevent popup from opening
// Pass the full course object now instead of course.code:
handleFavouriteClick(course);
}}
>
{favouriteCourses.some(fav => fav.code === course.code)
? 'Remove from Favourites'
: 'Add to Favourites'}
</button>
</div>

{/* Description Section */}
<div>
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
<div className="mb-3 h-0.5 w-full bg-violet-500"></div>
<div
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
dangerouslySetInnerHTML={{ __html: course.description }}
/>
</div>

{/* Prerequisite Graph Tree Section */}
<div>
const handleTreeClick = () => {
if (treeRef.current) {
treeRef.current.focus();
}
};

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

{/* Reviews Section */}
<div>
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Reviews</h3>
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
<p className="text-lg text-slate-700 leading-7">
Here would be some reviews of the course...
</p>
return (
<div
className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
onClick={onClose}
>
<div
className="bg-indigo-300/75 backdrop-blur-lg h-full w-3/4 flex flex-col overflow-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="flex-1">
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
{/* Course Title Section */}
<div>
<h2 className="text-5xl font-extrabold text-[#2e2e4f]">
<span className="text-violet-700">{course.code}</span> - {course.name}
<span className="ml-4 text-lg text-violet-700 whitespace-nowrap">
({course.credits} Credits)
</span>
</h2>
<div className="my-6 h-1.5 w-full bg-violet-500"></div>
</div>
<div>
<button
className="text-yellow-100 bg-yellow-400 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
handleFavouriteClick(course);
}}
>
{favouriteCourses.some((fav) => fav.code === course.code)
? 'Remove from Favourites'
: 'Add to Favourites'}
</button>
</div>
{/* Description Section */}
<div>
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
<div className="mb-3 h-0.5 w-full bg-violet-500"></div>
<div
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
dangerouslySetInnerHTML={{ __html: course.description }}
/>
</div>
{/* Prerequisite Graph Tree Section */}
<div>
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Prerequisite Graph Tree</h3>
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
<div
className="bg-indigo-300/50 outline-none focus:outline-none focus:ring-2 focus:ring-violet-600 rounded-lg transition-shadow"
ref={treeRef}
onClick={handleTreeClick}
tabIndex={0}
>
{prerequisiteTree}
</div>
</div>
{/* Reviews Section (optional) */}
{reviewPresenter && (
<div>
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Reviews</h3>
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
{reviewPresenter}
</div>
)}
</div>
</div>
<button onClick={onClose} className="px-4 py-2 bg-violet-500 text-white">
Close
</button>
</div>
</div>
</div>
<button
onClick={onClose}
className="px-4 py-2 bg-violet-500 text-white"
>
Close
</button>
</div>
</div>
);
);
}

export default CoursePagePopup;
export default CoursePagePopup;
9 changes: 4 additions & 5 deletions my-app/src/views/Components/FavouriteDropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ function FavouritesDropdown(props) {
props.favouriteCourses.map(course => (
<div
onClick={() => {
console.log('Clicked:', course); // check browser console
console.log('Clicked:', course);
props.setSelectedCourse(course);
props.setIsPopupOpen(true); // Ensure popup state is updated
props.setIsPopupOpen(true);
}}
key={course.code}
className="p-2 flex justify-between items-center w-full border border-solid border-black">
<p className="text-black">{course.name}</p>
<button
className="text-red-500 cursor-pointer"
onClick={(e) => {
e.stopPropagation(); // Prevent parent click
e.stopPropagation();
props.removeFavourite(course);
}}>
X
Expand All @@ -31,8 +31,7 @@ function FavouritesDropdown(props) {
No favourites
</div>
)}
{/* Ensure popup is conditionally rendered */}
<div style={{ position: 'relative', zIndex: 1000 }}>
<div className="relative z-100">
{props.isPopupOpen && props.popup}
</div>
{props.favouriteCourses.length > 0 && (
Expand Down