Some linting, fixes and funky stuff

Author: jkluge

my-app/firebase.js

@@ -47,8 +47,8 @@ googleProvider.addScope("email");
  * This function sets up the Firebase connection, fetches initial data and starts listener for syncing data.
  * @param {object} model The reactive model
  */
-export function connectToFirebase(model) {
-	loadCoursesFromCacheOrFirebase(model);
+export async function connectToFirebase(model) {
+	await loadCoursesFromCacheOrFirebase(model);
 	fetchDepartmentsAndLocations(model);
 	startAverageRatingListener(model);
 	// setting missing
@@ -62,7 +62,6 @@ export function connectToFirebase(model) {
 	// automaticaly save filter options to local storage whenever they change
 	reaction(
 		() => ({ filterOptions: JSON.stringify(model.filterOptions) }),
-		// eslint-disable-next-line no-unused-vars
 		({ filterOptions }) => {
 			localStorage.setItem("filterOptions", filterOptions);
 		}
@@ -382,15 +381,14 @@ async function loadCoursesFromCacheOrFirebase(model) {
  * @param {string} review.professorName The name of the professor
  * @param {string} review.grade The grade received
  * @param {boolean} review.recommended Whether the course is recommended
- * @returns {Promise<void>} A promise that resolves when the review is added
  * @throws {Error} If there is an error adding the review or updating the average rating
  */
 export async function addReviewForCourse(courseCode, review) {
 	try {
 		const reviewsRef = ref(db, `reviews/${courseCode}/${review.uid}`);
 		await set(reviewsRef, review);
 		const updateCourseAvgRating = httpsCallable(functions, 'updateCourseAvgRating');
-   		const result = await updateCourseAvgRating({ courseCode });
+   		await updateCourseAvgRating({ courseCode });
 
 	} catch (error) {
 		console.error(

my-app/src/index.jsx

@@ -11,7 +11,7 @@ import { JsonToDatabase } from "./presenters/Tests/JsonToDatabase";
 import { AllCoursesPresenter } from "./presenters/Tests/AllCoursesPresenter.jsx";
 
 
-configure({ enforceActions: "never" });
+configure({ enforceActions: "observed", reactionScheduler: (f) => setTimeout(f, 0),});
 
 const reactiveModel = makeAutoObservable(model);
 connectToFirebase(reactiveModel);

my-app/src/model.js

@@ -1,4 +1,3 @@
-import { query } from "firebase/database";
 import {
 	addCourse,
 	addReviewForCourse,
@@ -73,13 +72,8 @@ 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;
 	},
@@ -233,21 +227,10 @@ export const model = {
 		this.setFiltersChange();
 	},
 
-	setApplyRemoveNullCourses() {
-		this.filterOptions.applyRemoveNullCourses =
-			!this.filterOptions.applyRemoveNullCourses;
-		this.setFiltersChange();
-	},
-
 	updateLevelFilter(level) {
 		this.filterOptions.level = level;
 		console.log(level);
 	},
-
-    updateLevelFilter(level) {
-        this.filterOptions.level = level;
-    },
-
 	updateLanguageFilter(languages) {
 		this.filterOptions.language = languages;
 	},
@@ -262,10 +245,6 @@ export const model = {
 		this.filterOptions.eligibility = eligibility;
 	},
 
-	updateDepartmentFilter(department) {
-		this.filterOptions.department = department;
-	},
-
 	updatePeriodFilter(period) {
 		this.filterOptions.period = period;
 	},
@@ -316,50 +295,6 @@ export const model = {
 		);
 		return fields;
 	},
-    setApplyTranscriptFilter(transcriptFilterState) {
-        this.filterOptions.applyTranscriptFilter = transcriptFilterState;
-    },
-    setApplyLevelFilter(levelFilterState) {
-        this.filterOptions.applyLevelFilter = levelFilterState;
-    },
-    setApplyLanguageFilter(languageFilterState) {
-        this.filterOptions.applyLanguageFilter = languageFilterState;
-    },
-    setApplyLocationFilter(locationFilterState) {
-        this.filterOptions.applyLocationFilter = locationFilterState;
-    },
-    setApplyCreditsFilter(creditsFilterState) {
-        this.filterOptions.applyCreditsFilter = creditsFilterState;
-    },
-    setApplyDepartmentFilter(departmentFilterState) {
-        this.filterOptions.applyDepartmentFilter = departmentFilterState;
-    },
-    setApplyPeriodFilter(periodfilterState) {
-        this.filterOptions.applyPeriodFilter = periodfilterState;
-    },
-    //for better display we would like the departments in a structured format based on school 
-    formatDepartments() {
-        const grouped = this?.departments.reduce((acc, item) => {
-            const [school, department] = item.split("/");
-            if (!acc[school]) {
-                acc[school] = [];
-            }
-            acc[school].push(department?.trim());
-            return acc;
-        }, {});
-        const sortedGrouped = Object.keys(grouped)
-            .sort()
-            .reduce((acc, key) => {
-                acc[key] = grouped[key].sort();
-                return acc;
-            }, {});
-        const fields = Object.entries(sortedGrouped).map(([school, departments], index) => ({
-            id: index + 1,
-            label: school,
-            subItems: departments,
-        }));
-        return fields;
-    },
     async getAverageRating(courseCode, option) {
         const reviews = await getReviewsForCourse(courseCode);
         if (!reviews || reviews.length === 0) return null;

my-app/src/pages/App.jsx

@@ -4,15 +4,11 @@ import { SearchbarPresenter } from '../presenters/SearchbarPresenter.jsx';
 import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
 import { FilterPresenter } from "../presenters/FilterPresenter.jsx";
 import { slide as Menu } from 'react-burger-menu';
-import { observer } from 'mobx-react-lite';
 
 
 
 function App({ model }) {
 	const [sidebarIsOpen, setSidebarIsOpen] = useState(model.sidebarIsOpen);
-	const toggleSidebar = () => {
-		setSidebarIsOpen(!sidebarIsOpen);
-	}
 
 	return (
 			/* The sidebar styling(under the menu)*/

my-app/src/presenters/FilterPresenter.jsx

@@ -1,12 +1,56 @@
-import React from 'react';
 import { observer } from "mobx-react-lite";
+import { useMemo, useEffect } from "react";
 import eligibility from "../scripts/eligibility_refined.js";
-import { SearchbarPresenter } from './SearchbarPresenter.jsx';
 
 /* FilterPresenter is responsible for applying the logic necessary to filter out the courses from the overall list */
 const FilterPresenter = observer(({ model }) => {
+   
     /* global variable for the scope of this presenter, all the smaller functions depend on it instead of passing it back and forth as params */
-    var localFilteredCourses = [];
+    var localFilteredCourses = [...model?.courses];
+
+    const filteredCourses = useMemo(() => {
+        if (model.courses.length === 0 || !model.filtersChange) {
+            return model.filteredCourses;
+        }
+        
+        if (model.filterOptions.applyRemoveNullCourses) {
+            updateNoNullcourses();
+        }
+        if(model.filterOptions.applyPeriodFilter){
+            updatePeriods();
+        }
+        if (model.filterOptions.applyLocationFilter) {
+            updateLocations();
+        }
+        if (model.filterOptions.applyLevelFilter) {
+            updateLevels();
+        }
+        if (model.filterOptions.applyLanguageFilter) {
+            updateLanguages();
+        }
+        if (model.filterOptions.applyCreditsFilter) {
+            updateCredits();
+        }
+        if (model.filterOptions.applyTranscriptFilter) {
+            applyTranscriptEligibility();
+        }
+        if (model.filterOptions.applyDepartmentFilter) {
+            updateDepartments();
+        }
+        model.filtersChange = false;
+        model.setFiltersCalculated();
+        return localFilteredCourses;
+
+    }, [model.courses,
+        model.filtersChange,
+        model.filterOptions
+    ]);
+
+    useEffect(() => {
+        model.filteredCourses = filteredCourses;
+    }, [filteredCourses]);
+
+
 
     /*  functions declared here are generally things the main function of this observer takes and runs if the given filters are enabled,
      *  this is determined through model.filterOptions.apply*Insert filter name* flags.
@@ -370,49 +414,12 @@ const FilterPresenter = observer(({ model }) => {
     }
 
     /* function that should run every single time the model changes (see note below) */
-    async function run() {
-        if (model.courses.length == 0) {
-            return;
-        }
-        if (model.filtersChange) {
-            localFilteredCourses = [...model.courses];
-
-            if (model.filterOptions.applyRemoveNullCourses) {
-                updateNoNullcourses();
-            }
-            if(model.filterOptions.applyPeriodFilter){
-                updatePeriods();
-            }
-            if (model.filterOptions.applyLocationFilter) {
-                updateLocations();
-            }
-            if (model.filterOptions.applyLevelFilter) {
-                updateLevels();
-            }
-            if (model.filterOptions.applyLanguageFilter) {
-                updateLanguages();
-            }
-            if (model.filterOptions.applyCreditsFilter) {
-                updateCredits();
-            }
-            if (model.filterOptions.applyTranscriptFilter) {
-                applyTranscriptEligibility();
-            }
-            if (model.filterOptions.applyDepartmentFilter) {
-                updateDepartments();
-            }
-
-            model.filteredCourses = [...localFilteredCourses];
-            model.filtersChange = false;
-            model.setFiltersCalculated();
-        }
-    }
 
     /*  the problem is that unless using sideeffects, the run() not being async and/or it setting the filterschange = false very early can mean
      *  that 0 courses will get put into the model.filtered courses (which is the list of courses getting passed to search, and then listview)
      *  therefore TODO: rework it to stop using this dumb flags we started before learning anything about react,observers,js
     */
-    run();
+    // run();
 
 });
 

my-app/src/presenters/ListViewPresenter.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { observer } from "mobx-react-lite";
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import ListView from "../views/ListView.jsx";
 import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
 import PrerequisitePresenter from './PrerequisitePresenter.jsx';
 import {ReviewPresenter} from "./ReviewPresenter.jsx"
 import {syncScrollPositionToFirebase} from "../../firebase.js"
-import { model } from '../model.js';
+import { useCallback } from 'react';
 
 const ListViewPresenter = observer(({ model }) => {
     const scrollContainerRef = useRef(null);
@@ -50,12 +50,12 @@ const ListViewPresenter = observer(({ model }) => {
         if (savedPosition) {
             model.setScrollPosition(parseInt(savedPosition, 10));
         }
-    }, [model.user]);
+    }, [model, model.user]);
 
     useEffect(() => {
         const cleanup = syncScrollPositionToFirebase(model, scrollContainerRef);
         return () => cleanup;
-    }, [model.user, model.currentSearch, scrollContainerRef]);
+    }, [model, model.user, model.currentSearch, scrollContainerRef]);
 
     const addFavourite = (course) => {
         model.addFavourite(course);
@@ -77,9 +77,8 @@ const ListViewPresenter = observer(({ model }) => {
 
     const [sortBy, setSortBy] = useState('relevance');
     const [sortDirection, setSortDirection] = useState('desc');
-    const [sortedCourses, setSortedCourses] = useState([]);
 
-    const sortCourses = (courses, sortType) => {
+    const sortCourses = useCallback((courses, sortType) => {
         if (!courses) return [];
 
         const sortedCourses = [...courses];
@@ -143,12 +142,12 @@ const ListViewPresenter = observer(({ model }) => {
             default:
                 return direction === 1 ? sortedCourses : sortedCourses.reverse();
         }
-    };
+    }, [sortDirection, model.avgRatings]);
 
-    useEffect(() => {
-        const sorted = sortCourses(model.currentSearch, sortBy);
-        setSortedCourses(sorted);
-    }, [model.currentSearch, sortBy, sortDirection]);
+    const sortedCourses = useMemo(() => {
+        if (!model.currentSearch) return [];
+        return sortCourses(model.currentSearch, sortBy);
+    }, [model.currentSearch, sortBy,sortCourses]);
 
 
     function indexOfNth(string, char, n) {
@@ -167,8 +166,8 @@ const ListViewPresenter = observer(({ model }) => {
     window.addEventListener('popstate', () => {
         model.handleUrlChange();
     });
-
-    model.onCoursesSet((courses) => {
+    
+    model.onCoursesSet((courses) => { // eslint-disable-line no-unused-vars
         let current_url = window.location.href;
         if (current_url.indexOf("#") != -1) {return;}
         let course_code = "";

my-app/src/presenters/PrerequisitePresenter.jsx

@@ -35,9 +35,6 @@ export const PrerequisitePresenter = observer((props) => {
     hover_popup.style.padding = "5px";
     document.body.appendChild(hover_popup);
 
-
-    let code_to_name;
-
     let input_text_obj = {};
 
     const position = { x: 0, y: 0 };
@@ -153,7 +150,8 @@ export const PrerequisitePresenter = observer((props) => {
 
     }
 
-    function handleMouseLeave(event, node) {
+    
+    function handleMouseLeave(event, node) { // eslint-disable-line no-unused-vars
         hover_popup.style.display = "none";
     }
 
@@ -467,7 +465,7 @@ export const PrerequisitePresenter = observer((props) => {
                 if (localStorage.getItem("completedCourses") != null) {
                     courses_taken = localStorage.getItem("completedCourses");
                 }
-                code_to_name = model.getCourseNames(courses_taken);
+                //code_to_name = model.getCourseNames(courses_taken);
 
                 let eligible = generateTree(courses_taken, copy);
                 if (eligible) {

my-app/src/views/SearchbarView.jsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { getAuth, signInWithPopup, signOut, GoogleAuthProvider } from "firebase/auth";
-import { observer } from "mobx-react-lite";
 import project_logo from "../assets/project_icon.png";
 import FavouritesDropdown from "./Components/FavouriteDropdown.jsx";
 
-function SearchbarView(props) {
+export function SearchbarView(props) {
 //   const [searchQuery, setSearchQuery] = useState("");
   const [user, setUser] = useState(null);
   const [showFavourites, setShowFavourites] = useState(false);
@@ -126,4 +125,4 @@ function SearchbarView(props) {
   );
 }
 
-export default observer(SearchbarView);
+export default SearchbarView;