URL and prereq tree compatability fixes

my-app/src/model.js

@@ -62,6 +62,13 @@ export const model = {
       this._coursesListeners.push(callback);
     },
 
+    _coursesListeners: [], //  internal list of listeners
+    urlStackPointer: 0,
+
+    onCoursesSet(callback) {
+      this._coursesListeners.push(callback);
+    },
+
     setUser(user) {
         if (!this.user)
             this.user = user;
@@ -297,14 +304,10 @@ export const model = {
     },
 
     setPopupOpen(isOpen) {
-        if (isOpen) {
-            window.history.pushState({}, '', '/' + this.selectedCourse.code);
-        }
         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) {
+            let end_index = indexOfNth(current_url, '/', 3);
+            if (end_index + 1 != current_url.length) {
                 window.history.back();
             }
         }
@@ -324,23 +327,18 @@ export const model = {
     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.urlStackPointer++;
+        } else if (start_idx > 0){
             this.setPopupOpen(false);
         }
-        //console.log("back");
     }
 
 };

my-app/src/presenters/ListViewPresenter.jsx

@@ -150,11 +150,7 @@ 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++) {
@@ -168,19 +164,22 @@ const ListViewPresenter = observer(({ model }) => {
         return -1;
     }
 
+    window.addEventListener('popstate', () => {
+        model.handleUrlChange();
+    });
+
     model.onCoursesSet((courses) => {
         let current_url = window.location.href;
-        if (indexOfNth(current_url, '/', 3) != current_url.length - 1) {
+        let course_code = "";
+        let start_index = indexOfNth(current_url, '/', 3) + 1;
+        if (start_index > 1) {
+            course_code = current_url.slice(start_index);
+        }
+        if (start_index != current_url.length && course_code.length >= 6) {
             window.history.replaceState({}, '', '/');
-            /*
-            setTimeout(() => {
-                const newPath = '/' + current_url.slice(indexOfNth(current_url, '/', 3) + 1);
-                window.history.pushState({}, '', newPath);
-              }, 50); 
-            }
-            */
-        model.handleUrlChange();
+            window.history.pushState({}, '', '/' + course_code);
         }
+        model.handleUrlChange();
     })
 
     const preP = <PrerequisitePresenter

my-app/src/presenters/PrerequisitePresenter.jsx

@@ -215,11 +215,6 @@ export const PrerequisitePresenter = observer((props) => {
             type: node_type,
             data: { label: name },
             style: { 
-                //padding: 0,
-                //maxWidth: "100px",
-                //display: 'inline-block',
-                //justifyContent: 'center',
-                //alignItems: 'center',
                 zIndex: 0 
             },
             position,
@@ -484,7 +479,9 @@ export const PrerequisitePresenter = observer((props) => {
                 let copy = JSON.parse(JSON.stringify(props.selectedCourse.prerequisites));
                 let courses_taken = [];
                 if (localStorage.getItem("completedCourses") != null) {
-                    courses_taken = localStorage.getItem("completedCourses");
+                    for (let obj of localStorage.getItem("completedCourses")) {
+                        courses_taken.push(obj?.id);
+                    }
                 }
                 code_to_name = model.getCourseNames(courses_taken);
 

my-app/src/views/Components/FavouriteDropdown.jsx

@@ -40,6 +40,8 @@ const FavouritesDropdown = observer((props) => {
                                 onClick={() => {
                                     props.setSelectedCourse(course);
                                     props.setIsPopupOpen(true);
+                                    window.history.pushState({}, '', '/' + course.code);
+
                                 }}
                                 key={course.code}
                                 className="p-3 hover:bg-indigo-400/50 cursor-pointer flex justify-between items-center w-full border-b border-solid border-violet-400"
@@ -95,9 +97,6 @@ const FavouritesDropdown = observer((props) => {
             </div>
 
             {/* Optional course popup */}
-            <div className="relative z-50">
-                {props.isPopupOpen && props.popup}
-            </div>
         </div>
     );
 });

my-app/src/views/ListView.jsx

@@ -176,7 +176,7 @@ function ListView(props) {
                                 onClick={() => {
                                     props.setSelectedCourse(course);
                                     props.setPopupOpen(true);
-                                    //window.history.pushState({}, '', '/' + course.code);
+                                    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"

my-app/src/views/SearchbarView.jsx

@@ -89,7 +89,9 @@ function SearchbarView(props) {
                     {showFavourites && (
                         <FavouritesDropdown
                             {...props}
-                            onClick={(e) => e.stopPropagation()}
+                            onClick={
+                                    (e) => e.stopPropagation()           
+                            }
                         />
                     )}
                 </div>