Merge branch 'main' into prereq-oaktree

daDevBoat · web-flow · commit 28684bba946c · 2025-05-08T16:26:28.000+02:00
diff --git a/my-app/src/model.js b/my-app/src/model.js
@@ -7,6 +7,8 @@ export const model = {
     //instead of passing searchcouses lambda function down into the searchbarview.
     /* courses returned from SearchbarPresenter (search is applied on top of filteredCourses[]) to be shown in the ListView */
     currentSearch: [],
+
+    sidebarIsOpen: true,
     /* current query text */
     currentSearchText: "",
     scrollPosition: 0,
@@ -15,6 +17,7 @@ export const model = {
     departments : [],
     locations: [],
     favourites: [],
+    searchHistory:[],
     isReady: false,
     /* this is a boolean flag showing that filtering options in the UI have changed, triggering the FilterPresenter to recalculate the filteredCourses[] */
     filtersChange: false, 
@@ -43,6 +46,8 @@ export const model = {
         period: [true, true, true, true],
         applyPeriodFilter: true
     },
+    isPopupOpen: false,
+    selectedCourse: null,
 
     setUser(user) {
         if (!this.user)
@@ -73,6 +78,13 @@ export const model = {
             console.error("Error adding course:", error);
         }
     },
+    addHistoryItem(course_id) {
+        try {
+            this.searchHistory = [...this.searchHistory, course_id];
+        } catch (error) {
+            console.error("Error adding course code to the history:", error);
+        }
+    },
     setDepartments(departments){
         this.departments = departments;
     },
@@ -238,4 +250,26 @@ export const model = {
         // cache the result
         return avgRtg;
     },
+
+    setPopupOpen(isOpen) {
+        if (isOpen && this.selectedCourse) {
+            this.addHistoryItem(this.selectedCourse.code);
+        }
+        this.isPopupOpen = isOpen;
+    },
+
+    setSelectedCourse(course) {
+        this.selectedCourse = course;
+    },
+    setSidebarState(state) {
+        this.sidebarIsOpen = state;
+    },
+
+    getSidebarState() {
+        return this.sidebarIsOpen;
+    },
+
+    toggleSidebarIsOpen() {
+        this.sidebarIsOpen = !this.sidebarIsOpen;
+    }
 };
diff --git a/my-app/src/pages/App.jsx b/my-app/src/pages/App.jsx
@@ -6,73 +6,71 @@ import { FilterPresenter } from "../presenters/FilterPresenter.jsx";
 import { Routes, Route } from 'react-router-dom';
 import SharedView from '../pages/SharedView.jsx';
 import { slide as Menu } from 'react-burger-menu';
+import { observer } from 'mobx-react-lite';
+
 
-function MainAppLayout({ model }) {
-	const [sidebarIsOpen, setSidebarIsOpen] = useState(true);
 
-	const toggleSidebar = () => {
-		setSidebarIsOpen(!sidebarIsOpen);
-	}
+function MainAppLayout({ model }) {
 
+	const [sidebarIsOpen, setSidebarIsOpen] = useState(model.sidebarIsOpen);
 
 	return (
 			/* The sidebar styling(under the menu)*/
 		<div className=" flex h-screen w-screen bg-[#6246a8] ">
 			{	/* If sidebar is open, set length to 400px, else it should not be visible  */}
 			<div className={`${sidebarIsOpen ? 'w-[400px]' : 'w-0'}`}>
 				<Menu
-					width={400} // menu width
-					isOpen={sidebarIsOpen}
+					width={400}
+					isOpen={model.sidebarIsOpen}
 					onStateChange={(state) => setSidebarIsOpen(state.isOpen)}
-					className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] z-0 h-screen" // The menu styling
+					className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] z-0 h-screen"
 					noOverlay
 					styles={{
 						bmMenuWrap: {
 							zIndex: '10'
-						}
+						},
+						bmBurgerButton: {
+							position: 'fixed',
+							top: '20px',
+							left: '20px',
+							width: '36px',
+							height: '30px'
+						},
 					}}
+					customBurgerIcon={ <img src="https://img.icons8.com/ios-filled/50/ffffff/menu-2.png" /> }
 				>
-					{/* The menu contents */}
-					<SidebarPresenter model={model} />
+					<SidebarPresenter model={model}/>
 				</Menu>
 			</div>
 
+
+
 			<div className="flex-1 h-full flex flex-col ">
 
+
 				<div className="bg-gradient-to-t from-[#6246a8] to-[#6747c0] text-white">
 					<div className="flex items-center">
-						{/* The button to open the menu */}
-						<button
-							onClick={toggleSidebar}
-							className="p-2 ml-2 text-white hover:bg-purple-700 rounded"
-						>
-							<img
-								src="https://img.icons8.com/ios-filled/50/ffffff/menu-2.png"
-								alt="menu icon"
-								className="w-6 h-6"
-							/>
-						</button>
-						<SearchbarPresenter model={model} />
+						<SearchbarPresenter model={model}/>
 					</div>
 				</div>
 
 
 				<div className="flex-auto border bg-[#121212] relative">
-					<ListViewPresenter model={model} />
+					<ListViewPresenter model={model}/>
 				</div>
 
-				<FilterPresenter model={model} />
+				<FilterPresenter model={model}/>
 			</div>
 		</div>)
 }
 
-function App({ model }) {
+function App({model}) {
 	return (
 		<Routes>
-			<Route path="/" element={<MainAppLayout model={model} />} />
-			<Route path="/share" element={<SharedView model={model} />} />
+			<Route path="/" element={<MainAppLayout model={model}/>}/>
+			<Route path="/share" element={<SharedView model={model}/>}/>
 		</Routes>
 	);
 }
 
-export default App;
+export default observer(App);
diff --git a/my-app/src/presenters/ListViewPresenter.jsx b/my-app/src/presenters/ListViewPresenter.jsx
@@ -74,8 +74,6 @@ const ListViewPresenter = observer(({ model }) => {
         model.setScrollPosition(position);
     }
 
-    const [isPopupOpen, setIsPopupOpen] = useState(false);
-    const [selectedCourse, setSelectedCourse] = useState(null);
     const [sortBy, setSortBy] = useState('relevance');
     const [sortDirection, setSortDirection] = useState('desc');
     const [sortedCourses, setSortedCourses] = useState([]);
@@ -107,36 +105,33 @@ const ListViewPresenter = observer(({ model }) => {
 
     const preP = <PrerequisitePresenter
         model={model}
-        isPopupOpen={isPopupOpen}
-        setIsPopupOpen={setIsPopupOpen}
-        setSelectedCourse={setSelectedCourse}
-        selectedCourse={selectedCourse} />;
-    const reviewPresenter = <ReviewPresenter model={model} course={selectedCourse} />;
+        isPopupOpen={model.isPopupOpen}
+        setIsPopupOpen={(isOpen) => model.setPopupOpen(isOpen)}
+        setSelectedCourse={(course) => model.setSelectedCourse(course)}
+        selectedCourse={model.selectedCourse} />;
+    const reviewPresenter = <ReviewPresenter model={model} course={model.selectedCourse} />;
 
     const popup = <CoursePagePopup
         favouriteCourses={model.favourites}
+        addHistoryItem={model.addHistoryItem}
         addFavourite={addFavourite}
         removeFavourite={removeFavourite}
         handleFavouriteClick={handleFavouriteClick}
-        isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)}
-        course={selectedCourse}
+        isOpen={model.isPopupOpen} 
+        onClose={() => model.setPopupOpen(false)}
+        course={model.selectedCourse}
         prerequisiteTree={preP}
         reviewPresenter={reviewPresenter}/>
 
-
     return <ListView
-        // courses={model.courses}
-        // searchResults={model.currentSearch}
-        // currentSearchLenght={model.currentSearch.length}
-
         favouriteCourses={model.favourites}
         addFavourite={addFavourite}
         removeFavourite={removeFavourite}
         handleFavouriteClick={handleFavouriteClick}
 
-        isPopupOpen={isPopupOpen}
-        setIsPopupOpen={setIsPopupOpen}
-        setSelectedCourse={setSelectedCourse}
+        isPopupOpen={model.isPopupOpen}
+        handlePopupOpen={(isOpen) => model.setPopupOpen(isOpen)}
+        setSelectedCourse={(course) => model.setSelectedCourse(course)}
         popup={popup}
 
         targetScroll={model.scrollPosition}
diff --git a/my-app/src/presenters/SearchbarPresenter.jsx b/my-app/src/presenters/SearchbarPresenter.jsx
@@ -9,7 +9,6 @@ import Fuse from 'fuse.js'
 import debounce from 'lodash.debounce';
 
 const SearchbarPresenter = observer(({ model }) => {
-
     const [searchQuery, setSearchQuery] = useState("");
 
     const fuseOptions = {
@@ -62,23 +61,27 @@ const SearchbarPresenter = observer(({ model }) => {
         model.setFavourite([]);
     }
 
-    const [isPopupOpen, setIsPopupOpen] = useState(false);
-    const [selectedCourse, setSelectedCourse] = useState(null);
-    const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse} />;
-    const reviewPresenter = <ReviewPresenter model={model} course={selectedCourse} />;
-
-    const popup = <CoursePagePopup
-        favouriteCourses={model.favourites}
-        addFavourite={addFavourite}
-        removeFavourite={removeFavourite}
-        handleFavouriteClick={handleFavouriteClick}
-        isOpen={isPopupOpen}
-        onClose={() => setIsPopupOpen(false)}
-        course={selectedCourse}
-        reviewPresenter={reviewPresenter}
-        prerequisiteTree={preP}
+    const preP = <PrerequisitePresenter 
+        model={model}
+        selectedCourse={model.selectedCourse}
     />;
-    
+    const reviewPresenter = <ReviewPresenter 
+        model={model} 
+        course={model.selectedCourse} 
+    />;
+
+    //Popup is displayed only in the list view now, to change the displayed course use model.setSelectedCourse(course)
+    // const popup = <CoursePagePopup
+    //     favouriteCourses={model.favourites}
+    //     addFavourite={addFavourite}
+    //     removeFavourite={removeFavourite}
+    //     handleFavouriteClick={handleFavouriteClick}
+    //     isOpen={model.isPopupOpen}
+    //     onClose={() => model.setPopupOpen(false)}
+    //     course={model.selectedCourse}
+    //     reviewPresenter={reviewPresenter}
+    //     prerequisiteTree={preP}
+    // />;
 
     if(model.filtersCalculated){
         searchCourses(searchQuery);
@@ -92,12 +95,12 @@ const SearchbarPresenter = observer(({ model }) => {
             removeAllFavourites={removeAllFavourites}
             addFavourite={addFavourite}
             removeFavourite={removeFavourite}
-            isPopupOpen={isPopupOpen}
-            setIsPopupOpen={setIsPopupOpen}
-            setSelectedCourse={setSelectedCourse}
-            popup={popup}
+            isPopupOpen={model.isPopupOpen}
+            setIsPopupOpen={(isOpen) => model.setPopupOpen(isOpen)}
+            setSelectedCourse={(course) => model.setSelectedCourse(course)}
+            // popup={popup}
             setSearchQuery={setSearchQuery}
-            searchQuery={searchQuery}  // Add this line
+            searchQuery={searchQuery}
             handleFavouriteClick={handleFavouriteClick}
             totalCredits={creditsSum(model.favourites)}
             resetScrollPosition={resetScoll}
diff --git a/my-app/src/styles.css b/my-app/src/styles.css
@@ -41,4 +41,5 @@ html, body {
   html::-webkit-scrollbar,
   body::-webkit-scrollbar {
     display: none;                /* Chrome, Safari, Edge */
-  }
+  }
+
diff --git a/my-app/src/views/Components/CoursePagePopup.jsx b/my-app/src/views/Components/CoursePagePopup.jsx
@@ -34,7 +34,7 @@ function CoursePagePopup({
 
 	useEffect(() => {
 		const handleKeyDown = (event) => {
-			if (event.key === 'Escape') {
+			if (event.key === 'Escape' || event.key === 'ArrowLeft') {
 				onClose();
 			}
 		};
diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx
@@ -162,8 +162,7 @@ function ListView(props) {
                             <div
                                 onClick={() => {
                                     props.setSelectedCourse(course);
-                                    props.setIsPopupOpen(true);
-                                    //handleClickBackArrow(course.code);
+                                    props.handlePopupOpen(true);
                                 }}
                                 key={course.code}
                                 className="p-5 mb-3 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
diff --git a/my-app/src/views/ReviewView.jsx b/my-app/src/views/ReviewView.jsx
diff --git a/package-lock.json b/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ function CoursePagePopup({`
`34`	`34`
`35`	`35`	`useEffect(() => {`
`36`	`36`	`const handleKeyDown = (event) => {`
`37`		`- if (event.key === 'Escape') {`
	`37`	`+ if (event.key === 'Escape' \|\| event.key === 'ArrowLeft') {`
`38`	`38`	`onClose();`
`39`	`39`	`}`
`40`	`40`	`};`