Skip to content

Commit 8735f7b

Browse files
DinoxhLSKpr
Dinoxh
and
LSKpr
authored
improved courseView (#35)
* added loader * Course page merged with main * fav button fixed --------- Co-authored-by: Kacper Lisik <lisik@kth.se>
1 parent a5369e3 commit 8735f7b

4 files changed

Lines changed: 89 additions & 74 deletions

File tree

‎my-app/src/pages/App.jsx‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,33 +22,6 @@ function App() {
2222
<div className="flex-auto border overflow-auto bg-[#121212]">
2323
<ListViewPresenter model={model} />
2424
</div>
25-
<button
26-
onClick={() => setIsPopupOpen(true)}
27-
className="px-4 py-2 bg-blue-500 text-white"
28-
>
29-
open
30-
</button>
31-
{isPopupOpen && (
32-
<div
33-
className="backdrop-blur-sm fixed inset-0 bg-transparent flex justify-end z-100"
34-
onClick={() => setIsPopupOpen(false)}
35-
>
36-
<div
37-
className="bg-indigo-400/70 backdrop-blur-sm h-full w-3/4 flex flex-col overflow-auto"
38-
onClick={(e) => e.stopPropagation()}
39-
>
40-
<div className="flex-1">
41-
<CourseView />
42-
</div>
43-
<button
44-
onClick={() => setIsPopupOpen(false)}
45-
className="px-4 py-2 bg-blue-500 text-white"
46-
>
47-
Close
48-
</button>
49-
</div>
50-
</div>
51-
)}
5225
</div>
5326
</div>
5427
);

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import CourseView from '../CourseView';
3+
4+
function CoursePagePopup({ isOpen, onClose, course }) {
5+
if (!isOpen || !course) return null; // Don't render if not open or course not selected
6+
7+
return (
8+
<div
9+
className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
10+
onClick={onClose}
11+
>
12+
<div
13+
className="bg-indigo-400/70 backdrop-blur-sm h-full w-3/4 flex flex-col overflow-auto"
14+
onClick={(e) => e.stopPropagation()}
15+
>
16+
<div className="flex-1">
17+
<CourseView course={course} />
18+
</div>
19+
<button
20+
onClick={onClose}
21+
className="px-4 py-2 bg-violet-500 text-white"
22+
>
23+
Close
24+
</button>
25+
</div>
26+
</div>
27+
);
28+
}
29+
30+
export default CoursePagePopup;

‎my-app/src/views/CourseView.jsx‎

Lines changed: 38 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,53 @@
11
import React from 'react';
2+
// import {model} from '/src/model.js';
23

3-
export default function CourseView(props) {
4+
export default function CourseView({ course }) {
5+
if (!course) return null;
6+
7+
48
return (
5-
<div style={{ margin: '20px' }}>
9+
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
610
{/* Course Title Section */}
7-
<div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
8-
<h2 style={{ fontSize: '36px', fontWeight: 'bold' }}>ID1203 - Best course in the Universe</h2>
11+
<div>
12+
<h2 className="text-5xl font-extrabold text-[#2e2e4f]">
13+
{course.code} - {course.name}
14+
<span className="ml-4 text-lg text-violet-900">({course.credits} Credits)</span> {/* Display Credits */}
15+
</h2>
16+
</div>
17+
<div>
18+
<button
19+
className="text-yellow-500 cursor-pointer"
20+
onClick={(e) => {
21+
e.stopPropagation(); // prevent popup from opening
22+
handleFavouriteClick(course.code);
23+
}}
24+
>
25+
{/* {model.favouriteCourses.includes(course.code)
26+
? 'Remove from Favourites'
27+
: 'Add to Favourites'} */}
28+
</button>
929
</div>
1030

1131
{/* Description Section */}
12-
<div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px', color: 'white' }}>
13-
<h3 style={{ fontSize: '24px', fontWeight: 'bold' }}>
14-
The course is an introduction to networking, protocols and communication.
15-
16-
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.
17-
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.
18-
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.
19-
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.
20-
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.
21-
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.
22-
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.
23-
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.
24-
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.
25-
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.
26-
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.
27-
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.
28-
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.
29-
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.
30-
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.
31-
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.
32-
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.
33-
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.
34-
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.
35-
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.
36-
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.
37-
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.
38-
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.
39-
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.
40-
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.
41-
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.
42-
43-
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>
32+
<div>
33+
<h3 className="text-2xl font-bold text-[#3d3d68] mb-4">Course Description</h3>
34+
<div
35+
className="text-lg leading-8 text-[#2c2c2c] tracking-wide prose prose-slate max-w-full"
36+
dangerouslySetInnerHTML={{ __html: course.description }}
37+
/>
4438
</div>
4539

40+
{/* Prerequisite Graph Tree Section */}
41+
<div>
42+
<h3 className="text-2xl font-semibold text-[#2e2e4f]">Prerequisite Graph Tree</h3>
43+
<p className="text-lg text-slate-700 leading-7">Graph tree or prerequisite info will go here...</p>
44+
</div>
4645
{/* Reviews Section */}
47-
<div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
48-
<h3 style={{ fontFamily: 'Georgia, serif', fontSize: '24px' }}>Reviews</h3>
49-
{/* Placeholder for reviews */}
50-
<p style={{ fontSize: '16px' }}>Here would be some reviews of the course...</p>
46+
<div>
47+
<h3 className="text-2xl font-semibold text-[#2e2e4f]">Reviews</h3>
48+
<p className="text-lg text-slate-700 leading-7">Here would be some reviews of the course...</p>
5149
</div>
5250

53-
{/* Prerequisite Graph Tree Section */}
54-
<div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
55-
<h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
56-
{/* Placeholder for graph tree */}
57-
<p style={{ fontSize: '16px' }}>Graph tree or prerequisite info will go here...</p>
58-
</div>
5951
</div>
6052
);
6153
}

‎my-app/src/views/ListView.jsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import React, { useState } from 'react';
22
import { Quantum } from 'ldrs/react';
33
import 'ldrs/react/Quantum.css';
4+
import CoursePagePopupComponent from '../views/Components/CoursePagePopup.jsx';
5+
46

57
function ListView(props) {
68
const coursesToDisplay = props.searchResults.length > 0 ? props.searchResults : props.courses;
79
const [readMoreState, setReadMoreState] = useState({});
10+
const [isPopupOpen, setIsPopupOpen] = useState(false);
11+
const [selectedCourse, setSelectedCourse] = useState(null);
12+
813

914
const toggleReadMore = (courseCode) => {
1015
setReadMoreState(prevState => (
@@ -19,12 +24,18 @@ function ListView(props) {
1924
props.addFavourite(course);
2025
}
2126
};
27+
2228

2329
return (
2430
<div className="relative bg-white text-black p-2 flex flex-col gap-5 h-full overflow-auto">
2531
{coursesToDisplay.length > 0 ? (
2632
coursesToDisplay.map((course) => (
2733
<div
34+
onClick={() => {
35+
console.log('Clicked:', course); // check browser console
36+
setSelectedCourse(course);
37+
setIsPopupOpen(true);
38+
}}
2839
key={course.code}
2940
className="p-5 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
3041
>
@@ -54,7 +65,10 @@ function ListView(props) {
5465
<div>
5566
<button
5667
className="text-yellow-500 cursor-pointer"
57-
onClick={() => handleFavouriteClick(course)}
68+
onClick={(e) => {
69+
e.stopPropagation(); // Prevent the event from bubbling up.
70+
handleFavouriteClick(course);
71+
}}
5872
>
5973
{props.favouriteCourses.some(fav => fav.code === course.code)
6074
?
@@ -74,6 +88,12 @@ function ListView(props) {
7488
color="#000061"
7589
/>
7690
)}
91+
<CoursePagePopupComponent
92+
isOpen={isPopupOpen}
93+
onClose={() => setIsPopupOpen(false)}
94+
95+
course={selectedCourse}
96+
/>
7797
</div>
7898
);
7999
}

0 commit comments

Comments
 (0)