diff --git a/my-app/src/model.js b/my-app/src/model.js index 4590e58..339ffbc 100644 --- a/my-app/src/model.js +++ b/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"); } }; diff --git a/my-app/src/presenters/ListViewPresenter.jsx b/my-app/src/presenters/ListViewPresenter.jsx index f213fb7..cb0d2c8 100644 --- a/my-app/src/presenters/ListViewPresenter.jsx +++ b/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 = { 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); diff --git a/my-app/src/views/Components/FavouriteDropdown.jsx b/my-app/src/views/Components/FavouriteDropdown.jsx index 55c292b..2103c4a 100644 --- a/my-app/src/views/Components/FavouriteDropdown.jsx +++ b/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) => { {/* Optional course popup */} -
- {props.isPopupOpen && props.popup} -
); }); diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx index 45e09fa..3b22c68 100644 --- a/my-app/src/views/ListView.jsx +++ b/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" diff --git a/my-app/src/views/SearchbarView.jsx b/my-app/src/views/SearchbarView.jsx index f12a8a2..985f948 100644 --- a/my-app/src/views/SearchbarView.jsx +++ b/my-app/src/views/SearchbarView.jsx @@ -89,7 +89,9 @@ function SearchbarView(props) { {showFavourites && ( e.stopPropagation()} + onClick={ + (e) => e.stopPropagation() + } /> )}