Some URL stuff (#121)

* sidebar component add

* tailwind workin, beggining page building

* structure

* fixed app

* Main design layout

* initial sidebar

* courseView init

* the course page initial tests

* Make it run on my comuter

* Tree without database integration

* fixes

* npm update

* add to page

* Biiiiig Refactoring

* Broken version of prereq tree

* Fixed not rendering anything. Still broken

* Working v1

* handling #prereqs

* Test

* removed commented out code

* More info expands now

* More info expands now

* More info expands now

* Start coding on line 135 in PrereqTreePresenter Mr. PO

* Prereqs colored and expands more info

* added css styling

* Fixed copy bug

* Crash fix in PrerequisitePresenter.jsx

* merge fix

* Prereq tree compression, error handling, debuging, database update

* Added null support (hopefully)

* Bug fixes

* Desplays periods

* Bug finally fixed (hopefully)

* Check if course exists before doing pop up

* Set up for url handling

* URL in progress

---------

Co-authored-by: kexana <deotsts@gmail.com>
Co-authored-by: Sami Al Saati <sami.alsaati@hotmail.com>
Co-authored-by: Kacper Lisik <lisik@kth.se>
Co-authored-by: Elias Tosteberg <elias.tosteberg@gmail.com>
Co-authored-by: Sailet03 <52610280+Sailet03@users.noreply.github.com>

Author: 5 people

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,14 +259,19 @@ 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;
     },
 
@@ -276,5 +288,42 @@ export const model = {
 
     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}
@@ -130,7 +163,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}
 
@@ -148,4 +181,4 @@ const ListViewPresenter = observer(({ model }) => {
     />;
 });
 
-export { ListViewPresenter };
+export { ListViewPresenter }; 

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>