Fixed the website and Styling (#44)

* Course page merged with main

* some styling changes

* more styling

* more styling

* added fav button on the popup almost works

* small fixes

---------

Co-authored-by: Kacper Lisik <lisik@kth.se>

Author: LSKpr

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/Components/CoursePagePopup.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 
-function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
-
+function CoursePagePopup({ favouriteCourses, addFavourite,
+  removeFavourite, isOpen, onClose, course, prerequisiteTree }) {
   const treeRef = useRef(null);
   useEffect(() => {
     const handleKeyDown = (event) => {
@@ -19,6 +19,15 @@ function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
     };
   }, [isOpen, onClose]);
 
+  
+  const handleFavouriteClick = (course) => {
+    if (favouriteCourses.some(fav => fav.code === course.code)) {
+        removeFavourite(course);
+    } else {
+        addFavourite(course);
+    }
+};
+
   const handleTreeClick = () => {
     if (treeRef.current) {
       treeRef.current.focus(); // gives it focus
@@ -41,21 +50,23 @@ function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
             <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">({course.credits} Credits)</span>
+                <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-500 cursor-pointer"
+                className="text-yellow-500 bg-yellow-400 cursor-pointer"
                 onClick={(e) => {
                   e.stopPropagation(); // prevent popup from opening
-                  PaymentResponse.handleFavouriteClick(course.code);
+                  handleFavouriteClick(course.code);
                 }}
               >
-                {/* {model.favouriteCourses.includes(course.code)
+                {favouriteCourses.includes(course.code)
                         ? 'Remove from Favourites'
-                        : 'Add to Favourites'} */}
+                        : 'Add to Favourites'}
               </button>
             </div>
 
@@ -72,7 +83,6 @@ function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
 
             {/* Prerequisite Graph Tree Section */}
             <div>
-
               <h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">
                 Prerequisite Graph Tree
               </h3>
@@ -86,7 +96,6 @@ function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
                 {prerequisiteTree}
               </div>
 
-
             </div>
             {/* Reviews Section */}
             <div>

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;