Merge remote-tracking branch 'origin/main' into cleanup

Author: Sailet03

my-app/src/index.jsx

@@ -1,44 +1,46 @@
-import { configure, makeAutoObservable } from "mobx";
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import { createRoot } from "react-dom/client";
-import { connectToFirebase } from "../firebase";
-import { model } from "./model";
-import App from "./pages/App.jsx";
-import "./styles.css";
-
-import SharedView from "./pages/SharedView.jsx";
-import { JsonToDatabase } from "./presenters/Tests/JsonToDatabase";
-import { AllCoursesPresenter } from "./presenters/Tests/AllCoursesPresenter.jsx";
-
-configure({ enforceActions: "never" });
-
-const reactiveModel = makeAutoObservable(model);
-connectToFirebase(reactiveModel);
-
-export function makeRouter(reactiveModel) {
-  return createHashRouter([
-    {
-      path: "/",
-      element: <App model={reactiveModel} />,
-    },
-    {
-      path: "/share",
-      //element: <SharedView />,
-      element: <SharedView model={reactiveModel} />,
-    },
-    {
-      path: "/button",
-      element: <JsonToDatabase model={reactiveModel} />,
-    },
-    {
-      path: "/all",
-      element: <AllCoursesPresenter model={reactiveModel} />,
-    },
-  ]);
-}
-
-createRoot(document.getElementById("root")).render(
-  <RouterProvider router={makeRouter(reactiveModel)} />
-);
-
-window.myModel = reactiveModel;
+import { configure, makeAutoObservable } from "mobx";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createRoot } from "react-dom/client";
+import { connectToFirebase } from "../firebase";
+import { model } from "./model";
+import App from "./pages/App.jsx";
+import "./styles.css";
+
+import SharedView from "./pages/SharedView.jsx";
+import { JsonToDatabase } from "./presenters/Tests/JsonToDatabase";
+import { AllCoursesPresenter } from "./presenters/Tests/AllCoursesPresenter.jsx";
+
+
+configure({ enforceActions: "never" });
+
+const reactiveModel = makeAutoObservable(model);
+connectToFirebase(reactiveModel);
+
+export function makeRouter(reactiveModel) {
+  return createBrowserRouter([
+    {
+      path: "/",
+      element: <App model={reactiveModel} />,
+    },
+    {
+      path: "/share",
+      //element: <SharedView />,
+      element: <SharedView model={reactiveModel} />,
+    },
+    {
+      path: "/button",
+      element: <JsonToDatabase model={reactiveModel} />,
+    },
+    {
+      path: "/all",
+      element: <AllCoursesPresenter model={reactiveModel} />,
+    }, 
+    
+  ]);
+}
+
+createRoot(document.getElementById("root")).render(
+  <RouterProvider router={makeRouter(reactiveModel)} />
+);
+
+window.myModel = reactiveModel;

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/PrerequisitePresenter.jsx

@@ -23,7 +23,7 @@ export const PrerequisitePresenter = observer((props) => {
     let codeCounter = 0;
     let hover_popup = document.createElement("div");
     hover_popup.setAttribute("id", "course_popup");
-    hover_popup.style.fontSize = 0.75 + "rem";
+    hover_popup.style.fontSize = 1 + "rem";
     hover_popup.style.pointerEvents = "none";
     hover_popup.style.position = "absolute";
     hover_popup.style.backgroundColor = "white";
@@ -111,9 +111,9 @@ export const PrerequisitePresenter = observer((props) => {
         const popupHeight = pos.height + 20;
         hover_popup.style.minWidth = popupWidth + "px";
         hover_popup.style.minHeight = popupHeight + "px";
-        hover_popup.style.maxWidth = pos.width * 3 + "px";
+        hover_popup.style.maxWidth = pos.width * 2 + "px";
 
-        hover_popup.style.fontSize = window.getComputedStyle(document.querySelector(`[data-id="${node.id}"]`)).fontSize;
+        //hover_popup.style.fontSize = window.getComputedStyle(document.querySelector(`[data-id="${node.id}"]`)).fontSize;
         hover_popup.style.display = "flex";
 
 

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/styles.css

@@ -26,15 +26,20 @@
 .bm-burger-button {
     position: absolute;
     width: 36px;
-    height: 30px;
-    left: 20px;
-    top: 20px;
+    height: 36px;
+    left: 36px;
+    top: 36px;
 }
 
-
-.bm-menu-wrap {
-    position: fixed;
-    height: 100%;
-    z-index: 10;
-}
+/* Hide scrollbars everywhere but allow scrolling */
+html, body {
+    overflow: auto;
+    scrollbar-width: none;        /* Firefox */
+    -ms-overflow-style: none;     /* Internet Explorer 10+ */
+  }
+  
+  html::-webkit-scrollbar,
+  body::-webkit-scrollbar {
+    display: none;                /* Chrome, Safari, Edge */
+  }
 

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { DotPulse, Quantum } from 'ldrs/react';
 import 'ldrs/react/Quantum.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import { useNavigate, Link } from 'react-router-dom';
 
 function ListView(props) {
     const [displayedCourses, setDisplayedCourses] = useState([]);
@@ -10,7 +11,8 @@ function ListView(props) {
     const [isLoading, setIsLoading] = useState(true);
     const [sortBy, setSortBy] = useState('relevance');
     const [sortDirection, setSortDirection] = useState('asc');
-   
+    const navigate = useNavigate();
+
     const toggleReadMore = (courseCode) => {
         setReadMore(prevState => ({
             ...prevState,
@@ -30,7 +32,6 @@ function ListView(props) {
         let ret_string = "";
         if (periods) {
             let keys = Object.keys(periods);
-            console.log(periods["P1"])
             for (let key of keys) {
                 if (periods[key]) {
                     ret_string += key + " | ";
@@ -42,9 +43,9 @@ function ListView(props) {
         }
     };
 
-    const handlePeriods2 = (course) => {
-        return "Test";
-    }
+    const handleClickBackArrow = (course_name) => {
+        navigate(course_name);
+    };
 
 
     useEffect(() => {
@@ -157,10 +158,11 @@ function ListView(props) {
                         initialScrollY={0}
                     >
                         {displayedCourses.map(course => (
+                            <Link to={'/?' + course.code}>
                             <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"
@@ -243,6 +245,7 @@ function ListView(props) {
                                     </div>
                                 </div>
                             </div>
+                            </Link>
                         ))}
                     </InfiniteScroll>
                 </div>