clicking fav item opens a popup

Author: LSKpr

my-app/src/presenters/ListViewPresenter.jsx

@@ -43,7 +43,7 @@ const ListViewPresenter = observer(({ model }) => {
         isPopupOpen={isPopupOpen}
         setIsPopupOpen={setIsPopupOpen}
         setSelectedCourse={setSelectedCourse}
-        popUp={popup}
+        popup={popup}
         handleFavouriteClick={handleFavouriteClick}
 
     />;

my-app/src/presenters/SearchbarPresenter.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import { observer } from "mobx-react-lite";
+import { useState } from 'react';
+import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
+import PrerequisitePresenter from './PrerequisitePresenter.jsx';
 import SearchbarView from "../views/SearchbarView.jsx";
 
 const SearchbarPresenter = observer(({ model }) => {
@@ -12,21 +15,54 @@ const SearchbarPresenter = observer(({ model }) => {
         model.setCurrentSearch(searchResults);
     }
 
+    const addFavourite = (course) => {
+        model.addFavourite(course);
+    }
     const removeFavourite = (course) => {
         model.removeFavourite(course);
     }
+    const handleFavouriteClick = (course) => {
+        if (model.favourites.some(fav => fav.code === course.code)) {
+            model.removeFavourite(course);
+        } else {
+            model.addFavourite(course);
+        }
+    };
+
 
-    function removeAllFavourites(){
+    function removeAllFavourites() {
         model.setFavourite([]);
     }
 
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    const [selectedCourse, setSelectedCourse] = useState(null);
+    const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse} />
+
+    const popup = <CoursePagePopup
+        favouriteCourses={model.favourites}
+        addFavourite={addFavourite}
+        removeFavourite={removeFavourite}
+        handleFavouriteClick={handleFavouriteClick}
+        isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)}
+        course={selectedCourse}
+        prerequisiteTree={preP} />
+
+
+
+
     return (
         <SearchbarView
             model={model}
             searchCourses={searchCourses}
-            favouriteCourses = {model.favourites}
-            removeFavourite={removeFavourite}
+            favouriteCourses={model.favourites}
             removeAllFavourites={removeAllFavourites}
+            addFavourite={addFavourite}
+            removeFavourite={removeFavourite}
+            isPopupOpen={isPopupOpen}
+            setIsPopupOpen={setIsPopupOpen}
+            setSelectedCourse={setSelectedCourse}
+            popup={popup}
+            handleFavouriteClick={handleFavouriteClick}
         />
     );
 });

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

@@ -80,7 +80,7 @@ function CoursePagePopup({
                 className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
                 dangerouslySetInnerHTML={{ __html: course.description }}
               />
-            </div>
+            </div>  
 
             {/* Prerequisite Graph Tree Section */}
             <div>

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

@@ -1,33 +1,47 @@
 import React from 'react';
 
 function FavouritesDropdown(props) {
+    console.log('Popup:', props.popup);
+    console.log('isPopupOpen:', props.isPopupOpen);
     return (
         <div className="absolute mt-2 w-48 bg-white border border-solid border-black rounded-lg z-50 overflow-y-auto">
             {props.favouriteCourses.length > 0 ? (
-            
-                    props.favouriteCourses.map(course => (
-                        <div
-                            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={() => props.removeFavourite(course)}>
-                                X
-                            </button>
-                        </div>
-                    ))
-                    
-               
-            )  : (
+                props.favouriteCourses.map(course => (
+                    <div
+                        onClick={() => {
+                            console.log('Clicked:', course); // check browser console
+                            props.setSelectedCourse(course);
+                            props.setIsPopupOpen(true); // Ensure popup state is updated
+                        }}
+                        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
+                                props.removeFavourite(course);
+                            }}>
+                            X
+                        </button>
+                    </div>
+                ))
+            ) : (
                 <div className="p-2 text-[#000061]">
                     No favourites
                 </div>
             )}
-            {props.favouriteCourses.length > 0 ? <button onClick={props.removeAllFavourites}>Clear Favourites</button> : ""}
+            {/* Ensure popup is conditionally rendered */}
+            <div style={{ position: 'relative', zIndex: 1000 }}>
+                {props.isPopupOpen && props.popup}
+            </div>
+            {props.favouriteCourses.length > 0 && (
+                <button
+                    onClick={props.removeAllFavourites}
+                    className="mt-2 text-red-500">
+                    Clear Favourites
+                </button>
+            )}
         </div>
     );
 }

my-app/src/views/ListView.jsx

@@ -86,7 +86,7 @@ function ListView(props) {
                     color="#000061"
                 />
             )}
-             {props.popUp}
+            {props.popup}
         </div>
     );
 }

my-app/src/views/SearchbarView.jsx

@@ -72,6 +72,13 @@ function SearchbarView(props) {
                             favouriteCourses={props.favouriteCourses}
                             removeFavourite={props.removeFavourite}
                             removeAllFavourites={props.removeAllFavourites}
+                            popup={props.popup}
+                            addFavourite={props.addFavourite}
+                            isPopupOpen={props.isPopupOpen}
+                            setIsPopupOpen={props.setIsPopupOpen}
+                            setSelectedCourse={props.setSelectedCourse}
+                           
+                            handleFavouriteClick={props.handleFavouriteClick}
                         />
                     )}
                 </div>