From bcc7c7c7eb44b454f932830cfade44d47941a558 Mon Sep 17 00:00:00 2001
From: Sami Al Saati <sami.alsaati@hotmail.com>
Date: Thu, 10 Apr 2025 14:59:57 +0200
Subject: [PATCH] fixed dropdown

---
 .../src/views/Components/CoursePagePopup.jsx  | 210 +++++++++---------
 .../views/Components/FavouriteDropdown.jsx    |   9 +-
 2 files changed, 104 insertions(+), 115 deletions(-)

diff --git a/my-app/src/views/Components/CoursePagePopup.jsx b/my-app/src/views/Components/CoursePagePopup.jsx
index ce8b7e54..f64ee474 100644
--- a/my-app/src/views/Components/CoursePagePopup.jsx
+++ b/my-app/src/views/Components/CoursePagePopup.jsx
@@ -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;
\ No newline at end of file
diff --git a/my-app/src/views/Components/FavouriteDropdown.jsx b/my-app/src/views/Components/FavouriteDropdown.jsx
index 5bba1f55..3611620b 100644
--- a/my-app/src/views/Components/FavouriteDropdown.jsx
+++ b/my-app/src/views/Components/FavouriteDropdown.jsx
@@ -9,9 +9,9 @@ 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">
@@ -19,7 +19,7 @@ function FavouritesDropdown(props) {
                         <button
                             className="text-red-500 cursor-pointer"
                             onClick={(e) => {
-                                e.stopPropagation(); // Prevent parent click
+                                e.stopPropagation();
                                 props.removeFavourite(course);
                             }}>
                             X
@@ -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 && (