Refactoring for the Prereq Tree

my-app/src/pages/App.jsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { SidebarPresenter } from "../presenters/SidebarPresenter.jsx";
 import { SearchbarPresenter } from "../presenters/SearchbarPresenter.jsx";
 import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
-import CourseView from '../views/CourseView.jsx';
 import {model} from '/src/model.js';
 
 function App() {

my-app/src/presenters/ListViewPresenter.jsx

@@ -1,8 +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 [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} prerequisiteTree={preP}/>
+
     const addFavourite = (course) => {
         model.addFavourite(course);
     }
@@ -16,6 +25,11 @@ const ListViewPresenter = observer(({ model }) => {
         favouriteCourses={model.favourites}
         addFavourite={addFavourite}
         removeFavourite={removeFavourite}
+        isPopupOpen={isPopupOpen}
+        setIsPopupOpen={setIsPopupOpen}
+        setSelectedCourse={setSelectedCourse}
+        popUp={popup}
+
     />;
 });
 

my-app/src/views/PrerequisiteTree.jsx → my-app/src/presenters/PrerequisitePresenter.jsx

@@ -1,8 +1,8 @@
-import React from "react";
-import ReactFlow, { MiniMap, Controls, Background } from "reactflow";
-import "reactflow/dist/style.css";
-
+import { observer } from "mobx-react-lite";
+import PrerequisiteTreeView from "../views/PrerequisiteTreeView";
 
+export const PrerequisitePresenter = observer((props) => {
+
 //contains the nodes and lines
 const initialNodes = [];
 const initialEdges = [];
@@ -61,24 +61,12 @@ function loadTree(course) {
     preR2 = [["SF1005"], ["SF1006", "SF1007"]];
     addChildNodes(start, preR2, column);
     column++;
-
 }
+    loadTree(props.selectedCourse.code);   
+
+    return <PrerequisiteTreeView initialNodes={initialNodes} initialEdges={initialEdges}/>
+});
+
+export default PrerequisitePresenter;
 
-const PrerequisiteTree = () => {
-    if (initialNodes.length == 0){
-        loadTree("SF2526");
-    }
-
 
-    return (
-        <div style={{ width: "100%", height: "500px" }}>
-            <ReactFlow nodes={initialNodes} edges={initialEdges} fitView>
-                <MiniMap />
-                <Controls />
-                <Background variant="dots" gap={12} size={1} />
-            </ReactFlow>
-        </div>
-    );
-};
-
-export default PrerequisiteTree;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import CourseView from '../CourseView'; 
 
-function CoursePagePopup({ isOpen, onClose, course }) {
+function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
   if (!isOpen || !course) return null; // Don't render if not open or course not selected
 
   return (
@@ -14,7 +13,55 @@ function CoursePagePopup({ isOpen, onClose, course }) {
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex-1">
-          <CourseView course={course} />
+          <div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
+            {/* Course Title Section */}
+            <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>
+              <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>
+              <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 */}
+              {prerequisiteTree}
+            </div>
+          </div>
         </div>
         <button
           onClick={onClose}

my-app/src/views/CourseView.jsx

@@ -1,63 +1,59 @@
-import React from 'react';
-import PrerequisiteTree from "./PrerequisiteTree.jsx";
+// import React from 'react';
+// import PrerequisiteTree from "./PrerequisiteTree.jsx";
+// // import {model} from '/src/model.js';
 
-// import {model} from '/src/model.js';
-
-export default function CourseView({ course }) {
-    if (!course) return null;
+// export default function CourseView({ course }) {
+//     if (!course) return null;
 
 
-    return (
-        <div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
-            {/* Course Title Section */}
-            <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>
-                <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>
-                <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>
+//     return (
+//         <div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
+//             {/* Course Title Section */}
+//             <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>
+//                 <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 style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
-                <h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
-                {/* Placeholder for graph tree */}
-                <PrerequisiteTree />
-            </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>
+//                 <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>
 
-        </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 */}
+//             </div>
+//         </div>
+//     );
+// }

my-app/src/views/ListView.jsx

@@ -1,15 +1,10 @@
 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 => (
@@ -33,8 +28,8 @@ function ListView(props) {
                     <div
                     onClick={() => {
                         console.log('Clicked:', course); // check browser console
-                        setSelectedCourse(course);
-                        setIsPopupOpen(true);
+                        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"
@@ -91,12 +86,7 @@ function ListView(props) {
                     color="#000061"
                 />
             )}
-             <CoursePagePopupComponent
-                isOpen={isPopupOpen}
-                onClose={() => setIsPopupOpen(false)}
-
-                course={selectedCourse}
-                    />
+             {props.popUp}
         </div>
     );
 }

my-app/src/views/PrerequisiteTreeView.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactFlow, { MiniMap, Controls, Background } from "reactflow";
+import "reactflow/dist/style.css";
+
+function PrerequisiteTreeView(props){
+    return (
+        <div style={{ width: "100%", height: "500px" }}>
+            <ReactFlow nodes={props.initialNodes} edges={props.initialEdges} fitView>
+                <MiniMap />
+                <Controls />
+                <Background variant="dots" gap={12} size={1} />
+            </ReactFlow>
+        </div>
+    );
+};
+
+export default PrerequisiteTreeView;