Fixes and sorting (#116)

* fixed summation after long fight with git :!

* sorting kinda works - some problems exist

* fixed search + filter interaction

* sorting is better now / Metallic Materials are the only issue

* asc/desc have correct icon now

* added favicon

* fixed the website name in index.html

* ArrowLeft closes the CoursePopup

* popup variables moved to the model

* popup variables moved to the model

---------

Co-authored-by: Kacper Lisik <lisik@kth.se>

Author: LSKpr

my-app/src/model.js

@@ -17,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, 
@@ -45,6 +46,8 @@ export const model = {
         period: [true, true, true, true],
         applyPeriodFilter: true
     },
+    isPopupOpen: false,
+    selectedCourse: null,
 
     setUser(user) {
         if (!this.user)
@@ -75,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;
     },
@@ -241,6 +251,16 @@ export const model = {
         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;
     },
@@ -252,7 +272,4 @@ export const model = {
     toggleSidebarIsOpen() {
         this.sidebarIsOpen = !this.sidebarIsOpen;
     }
-
-
-
 };

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,38 +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}

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}

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();
 			}
 		};

my-app/src/views/ListView.jsx

@@ -30,7 +30,7 @@ function ListView(props) {
         let ret_string = "";
         if (periods) {
             let keys = Object.keys(periods);
-            console.log(periods["P1"])
+            // console.log(periods["P1"])
             for (let key of keys) {
                 if (periods[key]) {
                     ret_string += key + " | ";
@@ -160,7 +160,7 @@ function ListView(props) {
                             <div
                                 onClick={() => {
                                     props.setSelectedCourse(course);
-                                    props.setIsPopupOpen(true);
+                                    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"