improved courseView

my-app/src/pages/App.jsx

@@ -22,33 +22,6 @@ function App() {
 				<div className="flex-auto border overflow-auto bg-[#121212]">
 					<ListViewPresenter model={model} />
 				</div>
-				<button
-					onClick={() => setIsPopupOpen(true)}
-					className="px-4 py-2 bg-blue-500 text-white"
-				>
-					open
-				</button>
-				{isPopupOpen && (
-					<div
-						className="backdrop-blur-sm fixed inset-0 bg-transparent flex justify-end z-100"
-						onClick={() => setIsPopupOpen(false)}
-					>
-						<div
-							className="bg-indigo-400/70 backdrop-blur-sm h-full w-3/4 flex flex-col overflow-auto"
-							onClick={(e) => e.stopPropagation()}
-						>
-							<div className="flex-1">
-								<CourseView />
-							</div>
-							<button
-								onClick={() => setIsPopupOpen(false)}
-								className="px-4 py-2 bg-blue-500 text-white"
-							>
-								Close
-							</button>
-						</div>
-					</div>
-				)}
 			</div>
 		</div>
 	);

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import CourseView from '../CourseView'; 
+
+function CoursePagePopup({ isOpen, onClose, course }) {
+  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-400/70 backdrop-blur-sm h-full w-3/4 flex flex-col overflow-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex-1">
+          <CourseView course={course} />
+        </div>
+        <button
+          onClick={onClose}
+          className="px-4 py-2 bg-violet-500 text-white"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default CoursePagePopup;

my-app/src/views/CourseView.jsx

@@ -1,61 +1,53 @@
 import React from 'react';
+// import {model} from '/src/model.js';
 
-export default function CourseView(props) {
+export default function CourseView({ course }) {
+    if (!course) return null;
+
+
     return (
-        <div style={{ margin: '20px' }}>
+        <div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
             {/* Course Title Section */}
-            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
-                <h2 style={{ fontSize: '36px', fontWeight: 'bold' }}>ID1203 - Best course in the Universe</h2>
+            <div>
+                <h2 className="text-5xl font-extrabold text-[#2e2e4f]">
+                    {course.code} - {course.name}
+                    <span className="ml-4 text-lg text-violet-900">({course.credits} Credits)</span> {/* Display Credits */}
+                </h2>
+            </div>
+            <div>
+                <button
+                    className="text-yellow-500 cursor-pointer"
+                    onClick={(e) => {
+                        e.stopPropagation(); // prevent popup from opening
+                        handleFavouriteClick(course.code);
+                    }}
+                >
+                    {/* {model.favouriteCourses.includes(course.code)
+                        ? 'Remove from Favourites'
+                        : 'Add to Favourites'} */}
+                </button>
             </div>
 
             {/* Description Section */}
-            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px', color: 'white' }}>
-                <h3 style={{ fontSize: '24px', fontWeight: 'bold' }}>
-                    The course is an introduction to networking, protocols and communication.
-
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-                    We study how large international networks are constructed from the individual computers, via local area, city and national networks. We use the Internet as or working example of such a network. The aim of the course is to give insights into both the theory and practice of the area.
-
-                    The focus of the course is on the protocols and algorithms used, and we will follow how they are used and implemented into the TCP/IP-stack - the basis of the Internet.               </h3>
+            <div>
+                <h3 className="text-2xl font-bold text-[#3d3d68] mb-4">Course Description</h3>
+                <div
+                    className="text-lg leading-8 text-[#2c2c2c] 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]">Prerequisite Graph Tree</h3>
+                <p className="text-lg text-slate-700 leading-7">Graph tree or prerequisite info will go here...</p>
+            </div>
             {/* Reviews Section */}
-            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
-                <h3 style={{ fontFamily: 'Georgia, serif', fontSize: '24px' }}>Reviews</h3>
-                {/* Placeholder for reviews */}
-                <p style={{ fontSize: '16px' }}>Here would be some reviews of the course...</p>
+            <div>
+                <h3 className="text-2xl font-semibold text-[#2e2e4f]">Reviews</h3>
+                <p className="text-lg text-slate-700 leading-7">Here would be some reviews of the course...</p>
             </div>
 
-            {/* Prerequisite Graph Tree Section */}
-            <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
-                <h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
-                {/* Placeholder for graph tree */}
-                <p style={{ fontSize: '16px' }}>Graph tree or prerequisite info will go here...</p>
-            </div>
         </div>
     );
 }

my-app/src/views/ListView.jsx

@@ -1,10 +1,15 @@
 import React, { useState } from 'react';
 import { Quantum } from 'ldrs/react';
 import 'ldrs/react/Quantum.css';
+import CoursePagePopupComponent from '../views/Components/CoursePagePopup.jsx';
+
 
 function ListView(props) {
     const coursesToDisplay = props.searchResults.length > 0 ? props.searchResults : props.courses;
     const [readMoreState, setReadMoreState] = useState({});
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    const [selectedCourse, setSelectedCourse] = useState(null);
+
 
     const toggleReadMore = (courseCode) => {
         setReadMoreState(prevState => (
@@ -19,12 +24,18 @@ function ListView(props) {
             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
+                        setSelectedCourse(course);
+                        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"
                     >
@@ -54,7 +65,10 @@ function ListView(props) {
                             <div>
                                 <button
                                     className="text-yellow-500 cursor-pointer"
-                                    onClick={() => handleFavouriteClick(course)}
+                                    onClick={(e) => {
+                                        e.stopPropagation();  // Prevent the event from bubbling up.
+                                        handleFavouriteClick(course);
+                                    }}
                                 >
                                     {props.favouriteCourses.some(fav => fav.code === course.code)
                                         ?
@@ -74,6 +88,12 @@ function ListView(props) {
                     color="#000061"
                 />
             )}
+             <CoursePagePopupComponent
+                isOpen={isPopupOpen}
+                onClose={() => setIsPopupOpen(false)}
+
+                course={selectedCourse}
+                    />
         </div>
     );
 }