Merge branch 'main' into improved-burger-menu-2

Author: Dinoxh

my-app/src/index.jsx

@@ -1,5 +1,5 @@
 import { configure, makeAutoObservable } from "mobx";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createHashRouter, RouterProvider } from "react-router-dom";
 import { createRoot } from "react-dom/client";
 import { connectToFirebase } from "../firebase";
 import { model } from "./model";
@@ -17,7 +17,7 @@ const reactiveModel = makeAutoObservable(model);
 connectToFirebase(reactiveModel);
 
 export function makeRouter(reactiveModel) {
-  return createBrowserRouter([
+  return createHashRouter([
     {
       path: "/",
       element: <App model={reactiveModel} />,

my-app/src/model.js

@@ -49,6 +49,12 @@ export const model = {
     isPopupOpen: false,
     selectedCourse: null,
 
+    _coursesListeners: [], //  internal list of listeners
+
+    onCoursesSet(callback) {
+      this._coursesListeners.push(callback);
+    },
+
     setUser(user) {
         if (!this.user)
             this.user = user;
@@ -68,6 +74,7 @@ export const model = {
 
     setCourses(courses){
         this.courses = courses;
+        this._coursesListeners.forEach(cb => cb(courses));
     },
 
     async addCourse(course) {
@@ -252,19 +259,65 @@ export const model = {
     },
 
     setPopupOpen(isOpen) {
-        console.log("OPENING/CLOSING A POPUP");
-        // if (isOpen && this.selectedCourse) {
-        //     // this.addHistoryItem(this.selectedCourse.code);
-        //     console.log("user path history:")
-        //     for (let index = 0; index < this.searchHistory.length; index++) {
-        //         console.log(this.searchHistory[index]);
-        //     }
-        // }
+        if (isOpen) {
+            window.history.pushState({}, '', '/' + this.selectedCourse.code);
+        }
+        console.log("POPOPOOPOPOOOOOOP")
+        if (!isOpen) {
+            let current_url = window.location.href;
+            console.log(current_url);
+            let end_idx = indexOfNth(current_url, '/', 3);
+            if (end_idx >= 0 && end_idx < current_url.length - 1 && current_url.indexOf("#") == -1) {
+                window.history.back();
+            }
+        }
+
         this.isPopupOpen = isOpen;
     },
 
     setSelectedCourse(course) {
         this.selectedCourse = course;
     },
 
+
+    toggleSidebarIsOpen() {
+        this.sidebarIsOpen = !this.sidebarIsOpen;
+    },
+
+    handleUrlChange() {
+        let current_url = window.location.href;
+        let start_idx = indexOfNth(current_url, '/', 3) + 1;
+        console.log(current_url)
+        
+        if (start_idx > 0 && start_idx < current_url.length && current_url.indexOf("#") == -1) {
+            let course_code = current_url.slice(start_idx);
+            let course = this.getCourse(course_code);
+            console.log(course_code)
+            if (course) {
+                console.log("ACTIVE")
+                this.setSelectedCourse(course);
+                this.setPopupOpen(true);
+            }
+            console.log("Forward");
+        } else {
+            console.log("Back")
+            this.setPopupOpen(false);
+        }
+        //console.log("back");
+    }
+
 };
+
+
+function indexOfNth(string, char, n) {
+    let count = 0;
+    for (let i = 0; i < string.length; i++) {
+        if (string[i] == char) {
+            count++;
+        }
+        if (count == n) {
+            return i;
+        }
+    }
+    return -1;
+}

my-app/src/presenters/ListViewPresenter.jsx

@@ -103,6 +103,39 @@ const ListViewPresenter = observer(({ model }) => {
         setSortedCourses(sorted);
     }, [model.currentSearch, sortBy, sortDirection]);
 
+
+    window.addEventListener('popstate', () => {
+        model.handleUrlChange();
+    });
+
+    function indexOfNth(string, char, n) {
+        let count = 0;
+        for (let i = 0; i < string.length; i++) {
+            if (string[i] == char) {
+                count++;
+            }
+            if (count == n) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    model.onCoursesSet((courses) => {
+        let current_url = window.location.href;
+        if (indexOfNth(current_url, '/', 3) != current_url.length - 1) {
+            window.history.replaceState({}, '', '/');
+            /*
+            setTimeout(() => {
+                const newPath = '/' + current_url.slice(indexOfNth(current_url, '/', 3) + 1);
+                window.history.pushState({}, '', newPath);
+              }, 50); 
+            }
+            */
+        model.handleUrlChange();
+        }
+    })
+
     const preP = <PrerequisitePresenter
         model={model}
         isPopupOpen={model.isPopupOpen}
@@ -132,7 +165,7 @@ const ListViewPresenter = observer(({ model }) => {
         handleFavouriteClick={handleFavouriteClick}
 
         isPopupOpen={model.isPopupOpen}
-        handlePopupOpen={(isOpen) => model.setPopupOpen(isOpen)}
+        setPopupOpen={(isOpen) => model.setPopupOpen(isOpen)}
         setSelectedCourse={(course) => model.setSelectedCourse(course)}
         popup={popup}
 
@@ -150,4 +183,4 @@ const ListViewPresenter = observer(({ model }) => {
     />;
 });
 
-export { ListViewPresenter };
+export { ListViewPresenter }; 

my-app/src/presenters/SearchbarPresenter.jsx

@@ -28,8 +28,19 @@ const SearchbarPresenter = observer(({ model }) => {
             model.setCurrentSearch(model.filteredCourses);
         } else {
             const fuse = new Fuse(model.filteredCourses, fuseOptions);
-            const results = fuse.search(query).map((r) => r.item);
-            model.setCurrentSearch(results);
+            const results = fuse.search(query);
+            
+            const sortedResults = results.sort((a, b) => {
+                const aStartsWith = a.item.code.toLowerCase().startsWith(query.toLowerCase());
+                const bStartsWith = b.item.code.toLowerCase().startsWith(query.toLowerCase());
+                
+                //sort by prefix match as a primary sorting 
+                if (aStartsWith && !bStartsWith) return -1;
+                if (!aStartsWith && bStartsWith) return 1;
+                return a.score - b.score;  //Fuse.js score sorting otherwise
+            });
+
+            model.setCurrentSearch(sortedResults.map(r => r.item));
         }
     }, 500), []);
 

my-app/src/views/ListView.jsx

@@ -158,11 +158,11 @@ function ListView(props) {
                         initialScrollY={0}
                     >
                         {displayedCourses.map(course => (
-                            <Link to={'/?' + course.code}>
                             <div
                                 onClick={() => {
                                     props.setSelectedCourse(course);
-                                    props.handlePopupOpen(true);
+                                    props.setPopupOpen(true);
+                                    //window.history.pushState({}, '', '/' + course.code);
                                 }}
                                 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"
@@ -245,7 +245,6 @@ function ListView(props) {
                                     </div>
                                 </div>
                             </div>
-                            </Link>
                         ))}
                     </InfiniteScroll>
                 </div>