Skip to content

Commit 70455ab

Browse files
Sailet03kexanaDinoxhLSKpr
authored
Refactoring for the Prereq Tree (#37)
* sidebar component add * tailwind workin, beggining page building * structure * fixed app * Main design layout * initial sidebar * courseView init * the course page initial tests * Make it run on my comuter * Tree without database integration * fixes * npm update * add to page * Biiiiig Refactoring --------- Co-authored-by: kexana <deotsts@gmail.com> Co-authored-by: Sami Al Saati <sami.alsaati@hotmail.com> Co-authored-by: Kacper Lisik <lisik@kth.se> Co-authored-by: Justus Kluge
1 parent e204e6c commit 70455ab

7 files changed

Lines changed: 148 additions & 97 deletions

File tree

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
22
import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx";
33
import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx";
44
import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
5-
import CourseView from '../views/CourseView.jsx';
65
import {model} from '/src/model.js';
76

87
function App() {

‎my-app/src/presenters/ListViewPresenter.jsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
import React from 'react';
2-
import { observer } from "mobx-react-lite";
2+
import { observer} from "mobx-react-lite";
3+
import { useState } from 'react';
34
import ListView from "../views/ListView.jsx";
5+
import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
6+
import PrerequisitePresenter from './PrerequisitePresenter.jsx';
47

58
const ListViewPresenter = observer(({ model }) => {
9+
10+
const [isPopupOpen, setIsPopupOpen] = useState(false);
11+
const [selectedCourse, setSelectedCourse] = useState(null);
12+
const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse}/>
13+
const popup = <CoursePagePopup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} course={selectedCourse} prerequisiteTree={preP}/>
14+
615
const addFavourite = (course) => {
716
model.addFavourite(course);
817
}
@@ -16,6 +25,11 @@ const ListViewPresenter = observer(({ model }) => {
1625
favouriteCourses={model.favourites}
1726
addFavourite={addFavourite}
1827
removeFavourite={removeFavourite}
28+
isPopupOpen={isPopupOpen}
29+
setIsPopupOpen={setIsPopupOpen}
30+
setSelectedCourse={setSelectedCourse}
31+
popUp={popup}
32+
1933
/>;
2034
});
2135

my-app/src/views/PrerequisiteTree.jsx renamed to my-app/src/presenters/PrerequisitePresenter.jsx

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from "react";
2-
import ReactFlow, { MiniMap, Controls, Background } from "reactflow";
3-
import "reactflow/dist/style.css";
4-
1+
import { observer } from "mobx-react-lite";
2+
import PrerequisiteTreeView from "../views/PrerequisiteTreeView";
53

4+
export const PrerequisitePresenter = observer((props) => {
5+
66
//contains the nodes and lines
77
const initialNodes = [];
88
const initialEdges = [];
@@ -61,24 +61,12 @@ function loadTree(course) {
6161
preR2 = [["SF1005"], ["SF1006", "SF1007"]];
6262
addChildNodes(start, preR2, column);
6363
column++;
64-
6564
}
65+
loadTree(props.selectedCourse.code);
66+
67+
return <PrerequisiteTreeView initialNodes={initialNodes} initialEdges={initialEdges}/>
68+
});
69+
70+
export default PrerequisitePresenter;
6671

67-
const PrerequisiteTree = () => {
68-
if (initialNodes.length == 0){
69-
loadTree("SF2526");
70-
}
71-
7272

73-
return (
74-
<div style={{ width: "100%", height: "500px" }}>
75-
<ReactFlow nodes={initialNodes} edges={initialEdges} fitView>
76-
<MiniMap />
77-
<Controls />
78-
<Background variant="dots" gap={12} size={1} />
79-
</ReactFlow>
80-
</div>
81-
);
82-
};
83-
84-
export default PrerequisiteTree;

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

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
2-
import CourseView from '../CourseView';
32

4-
function CoursePagePopup({ isOpen, onClose, course }) {
3+
function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
54
if (!isOpen || !course) return null; // Don't render if not open or course not selected
65

76
return (
@@ -14,7 +13,55 @@ function CoursePagePopup({ isOpen, onClose, course }) {
1413
onClick={(e) => e.stopPropagation()}
1514
>
1615
<div className="flex-1">
17-
<CourseView course={course} />
16+
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
17+
{/* Course Title Section */}
18+
<div>
19+
<h2 className="text-5xl font-extrabold text-[#2e2e4f]">
20+
{course.code} - {course.name}
21+
<span className="ml-4 text-lg text-violet-900">({course.credits} Credits)</span> {/* Display Credits */}
22+
</h2>
23+
</div>
24+
<div>
25+
<button
26+
className="text-yellow-500 cursor-pointer"
27+
onClick={(e) => {
28+
e.stopPropagation(); // prevent popup from opening
29+
handleFavouriteClick(course.code);
30+
}}
31+
>
32+
{/* {model.favouriteCourses.includes(course.code)
33+
? 'Remove from Favourites'
34+
: 'Add to Favourites'} */}
35+
</button>
36+
</div>
37+
38+
{/* Description Section */}
39+
<div>
40+
<h3 className="text-2xl font-bold text-[#3d3d68] mb-4">Course Description</h3>
41+
<div
42+
className="text-lg leading-8 text-[#2c2c2c] tracking-wide prose prose-slate max-w-full"
43+
dangerouslySetInnerHTML={{ __html: course.description }}
44+
/>
45+
</div>
46+
47+
{/* Prerequisite Graph Tree Section */}
48+
<div>
49+
<h3 className="text-2xl font-semibold text-[#2e2e4f]">Prerequisite Graph Tree</h3>
50+
<p className="text-lg text-slate-700 leading-7">Graph tree or prerequisite info will go here...</p>
51+
</div>
52+
{/* Reviews Section */}
53+
<div>
54+
<h3 className="text-2xl font-semibold text-[#2e2e4f]">Reviews</h3>
55+
<p className="text-lg text-slate-700 leading-7">Here would be some reviews of the course...</p>
56+
</div>
57+
58+
{/* Prerequisite Graph Tree Section */}
59+
<div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
60+
<h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
61+
{/* Placeholder for graph tree */}
62+
{prerequisiteTree}
63+
</div>
64+
</div>
1865
</div>
1966
<button
2067
onClick={onClose}

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

Lines changed: 53 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,59 @@
1-
import React from 'react';
2-
import PrerequisiteTree from "./PrerequisiteTree.jsx";
1+
// import React from 'react';
2+
// import PrerequisiteTree from "./PrerequisiteTree.jsx";
3+
// // import {model} from '/src/model.js';
34

4-
// import {model} from '/src/model.js';
5-
6-
export default function CourseView({ course }) {
7-
if (!course) return null;
5+
// export default function CourseView({ course }) {
6+
// if (!course) return null;
87

98

10-
return (
11-
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
12-
{/* Course Title Section */}
13-
<div>
14-
<h2 className="text-5xl font-extrabold text-[#2e2e4f]">
15-
{course.code} - {course.name}
16-
<span className="ml-4 text-lg text-violet-900">({course.credits} Credits)</span> {/* Display Credits */}
17-
</h2>
18-
</div>
19-
<div>
20-
<button
21-
className="text-yellow-500 cursor-pointer"
22-
onClick={(e) => {
23-
e.stopPropagation(); // prevent popup from opening
24-
handleFavouriteClick(course.code);
25-
}}
26-
>
27-
{/* {model.favouriteCourses.includes(course.code)
28-
? 'Remove from Favourites'
29-
: 'Add to Favourites'} */}
30-
</button>
31-
</div>
32-
33-
{/* Description Section */}
34-
<div>
35-
<h3 className="text-2xl font-bold text-[#3d3d68] mb-4">Course Description</h3>
36-
<div
37-
className="text-lg leading-8 text-[#2c2c2c] tracking-wide prose prose-slate max-w-full"
38-
dangerouslySetInnerHTML={{ __html: course.description }}
39-
/>
40-
</div>
41-
42-
{/* Prerequisite Graph Tree Section */}
43-
<div>
44-
<h3 className="text-2xl font-semibold text-[#2e2e4f]">Prerequisite Graph Tree</h3>
45-
<p className="text-lg text-slate-700 leading-7">Graph tree or prerequisite info will go here...</p>
46-
</div>
47-
{/* Reviews Section */}
48-
<div>
49-
<h3 className="text-2xl font-semibold text-[#2e2e4f]">Reviews</h3>
50-
<p className="text-lg text-slate-700 leading-7">Here would be some reviews of the course...</p>
51-
</div>
9+
// return (
10+
// <div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
11+
// {/* Course Title Section */}
12+
// <div>
13+
// <h2 className="text-5xl font-extrabold text-[#2e2e4f]">
14+
// {course.code} - {course.name}
15+
// <span className="ml-4 text-lg text-violet-900">({course.credits} Credits)</span> {/* Display Credits */}
16+
// </h2>
17+
// </div>
18+
// <div>
19+
// <button
20+
// className="text-yellow-500 cursor-pointer"
21+
// onClick={(e) => {
22+
// e.stopPropagation(); // prevent popup from opening
23+
// handleFavouriteClick(course.code);
24+
// }}
25+
// >
26+
// {/* {model.favouriteCourses.includes(course.code)
27+
// ? 'Remove from Favourites'
28+
// : 'Add to Favourites'} */}
29+
// </button>
30+
// </div>
5231

32+
// {/* Description Section */}
33+
// <div>
34+
// <h3 className="text-2xl font-bold text-[#3d3d68] mb-4">Course Description</h3>
35+
// <div
36+
// className="text-lg leading-8 text-[#2c2c2c] tracking-wide prose prose-slate max-w-full"
37+
// dangerouslySetInnerHTML={{ __html: course.description }}
38+
// />
39+
// </div>
5340

54-
{/* Prerequisite Graph Tree Section */}
55-
<div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
56-
<h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
57-
{/* Placeholder for graph tree */}
58-
<PrerequisiteTree />
59-
</div>
41+
// {/* Prerequisite Graph Tree Section */}
42+
// <div>
43+
// <h3 className="text-2xl font-semibold text-[#2e2e4f]">Prerequisite Graph Tree</h3>
44+
// <p className="text-lg text-slate-700 leading-7">Graph tree or prerequisite info will go here...</p>
45+
// </div>
46+
// {/* Reviews Section */}
47+
// <div>
48+
// <h3 className="text-2xl font-semibold text-[#2e2e4f]">Reviews</h3>
49+
// <p className="text-lg text-slate-700 leading-7">Here would be some reviews of the course...</p>
50+
// </div>
6051

61-
</div>
62-
);
63-
}
52+
// {/* Prerequisite Graph Tree Section */}
53+
// <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
54+
// <h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
55+
// {/* Placeholder for graph tree */}
56+
// </div>
57+
// </div>
58+
// );
59+
// }

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

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
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-
64

75
function ListView(props) {
86
const coursesToDisplay = props.searchResults.length > 0 ? props.searchResults : props.courses;
97
const [readMoreState, setReadMoreState] = useState({});
10-
const [isPopupOpen, setIsPopupOpen] = useState(false);
11-
const [selectedCourse, setSelectedCourse] = useState(null);
12-
138

149
const toggleReadMore = (courseCode) => {
1510
setReadMoreState(prevState => (
@@ -33,8 +28,8 @@ function ListView(props) {
3328
<div
3429
onClick={() => {
3530
console.log('Clicked:', course); // check browser console
36-
setSelectedCourse(course);
37-
setIsPopupOpen(true);
31+
props.setSelectedCourse(course);
32+
props.setIsPopupOpen(true);
3833
}}
3934
key={course.code}
4035
className="p-5 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
@@ -91,12 +86,7 @@ function ListView(props) {
9186
color="#000061"
9287
/>
9388
)}
94-
<CoursePagePopupComponent
95-
isOpen={isPopupOpen}
96-
onClose={() => setIsPopupOpen(false)}
97-
98-
course={selectedCourse}
99-
/>
89+
{props.popUp}
10090
</div>
10191
);
10292
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react";
2+
import ReactFlow, { MiniMap, Controls, Background } from "reactflow";
3+
import "reactflow/dist/style.css";
4+
5+
function PrerequisiteTreeView(props){
6+
return (
7+
<div style={{ width: "100%", height: "500px" }}>
8+
<ReactFlow nodes={props.initialNodes} edges={props.initialEdges} fitView>
9+
<MiniMap />
10+
<Controls />
11+
<Background variant="dots" gap={12} size={1} />
12+
</ReactFlow>
13+
</div>
14+
);
15+
};
16+
17+
export default PrerequisiteTreeView;

0 commit comments

Comments
 (0)