Merge branch 'styling' of https://github.com/InferenceKTH/Find-My-Next-Course into styling

Author: Dinoxh

my-app/src/presenters/ListViewPresenter.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
-import { observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
 import { useState } from 'react';
 import ListView from "../views/ListView.jsx";
 import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
 import PrerequisitePresenter from './PrerequisitePresenter.jsx';
 
 const ListViewPresenter = observer(({ model }) => {
-
+    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);
@@ -17,15 +22,16 @@ const ListViewPresenter = observer(({ model }) => {
 
     const [isPopupOpen, setIsPopupOpen] = useState(false);
     const [selectedCourse, setSelectedCourse] = useState(null);
-    const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse}/>
-    const popup = <CoursePagePopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} course={selectedCourse} handleFavouriteClick={handleFavouriteClick} prerequisiteTree={preP}/>
+    const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse} />
+
+    const popup = <CoursePagePopup
+        favouriteCourses={model.favourites}
+        addFavourite={addFavourite}
+        removeFavourite={removeFavourite}
+        isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)}
+        course={selectedCourse}
+        prerequisiteTree={preP} />
 
-    const addFavourite = (course) => {
-        model.addFavourite(course);
-    }
-    const removeFavourite = (course) => {
-        model.removeFavourite(course);
-    }
 
     return <ListView
         courses={model.courses}

my-app/src/views/ListView.jsx

@@ -12,11 +12,25 @@ function ListView(props) {
         ));
     };
 
+    const handleFavouriteClick = (course) => {
+        if (props.favouriteCourses.some(fav => fav.code === course.code)) {
+            props.removeFavourite(course);
+        } else {
+            props.addFavourite(course);
+        }
+    };
+  
+
     return (
         <div className="relative bg-white text-black p-2 flex flex-col gap-5 h-full overflow-auto">
             {coursesToDisplay.length > 0 ? (
                 coursesToDisplay.map((course) => (
                     <div
+                    onClick={() => {
+                        console.log('Clicked:', course); // check browser console
+                        props.setSelectedCourse(course);
+                        props.setIsPopupOpen(true);
+                    }}
                         key={course.code}
                         className="p-5 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
                     >
@@ -34,7 +48,10 @@ function ListView(props) {
                             {course.description.length > 150 && (
                                 <span
                                     className="text-blue-500 cursor-pointer"
-                                    onClick={() => toggleReadMore(course.code)}
+                                    onClick={(e) => {
+                                        e.stopPropagation();  // Prevent the event from bubbling up.
+                                        toggleReadMore(course.code);
+                                    }}
                                 >
                                     {readMoreState[course.code]
                                         ?
@@ -46,7 +63,10 @@ function ListView(props) {
                             <div>
                                 <button
                                     className="text-yellow-500 cursor-pointer"
-                                    onClick={() => props.handleFavouriteClick(course)}
+                                    onClick={(e) => {
+                                        e.stopPropagation();  // Prevent the event from bubbling up.
+                                        handleFavouriteClick(course);
+                                    }}
                                 >
                                     {props.favouriteCourses.some(fav => fav.code === course.code)
                                         ?
@@ -66,8 +86,9 @@ function ListView(props) {
                     color="#000061"
                 />
             )}
+             {props.popUp}
         </div>
     );
 }
 
-export default ListView;
+export default ListView;