Hopefully better search

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_FINDMYNEXTCOURSE }}
+          channelId: live
+          projectId: findmynextcourse

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,21 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+on: pull_request
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+jobs:
+  build_and_preview:
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_FINDMYNEXTCOURSE }}
+          projectId: findmynextcourse

my-app/package.json

@@ -17,7 +17,9 @@
     "@xyflow/react": "^12.5.5",
     "autoprefixer": "^10.4.21",
     "firebase": "^11.5.0",
+    "fuse.js": "^7.1.0",
     "ldrs": "^1.1.6",
+    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "mobx": "^6.13.7",
     "mobx-react-lite": "^4.1.0",

my-app/src/presenters/SearchbarPresenter.jsx

@@ -1,27 +1,39 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { observer } from "mobx-react-lite";
 import { useState } from 'react';
 import CoursePagePopup from '../views/Components/CoursePagePopup.jsx';
 import PrerequisitePresenter from './PrerequisitePresenter.jsx';
 import { ReviewPresenter } from "../presenters/ReviewPresenter.jsx";
 import SearchbarView from "../views/SearchbarView.jsx";
+import Fuse from 'fuse.js'
+import debounce from 'lodash.debounce';
 
 const SearchbarPresenter = observer(({ model }) => {
 
-    const searchCourses = (query) => {
-        //model.filteredCourses is essentially a smaller subset of model.courses, if theres no filters, it should be the same
-        console.log("---------------search recalculated");
-        console.log("filtered courses length: ", model.filteredCourses.length);
-        const searchResults = model.filteredCourses.filter(course =>
-            course.code.toLowerCase().includes(query.toLowerCase()) ||
-            course.name.toLowerCase().includes(query.toLowerCase()) ||
-            course.description?.toLowerCase().includes(query.toLowerCase())
-        );
-        model.setCurrentSearchText(query);
-        model.setCurrentSearch(searchResults);
-        console.log(model.currentSearch.length);
+    const [searchQuery, setSearchQuery] = useState("");
+
+    const fuseOptions = {
+        keys: [
+            { name: 'code', weight: 0.6 },   
+            { name: 'name', weight: 0.3 },  
+            { name: 'description', weight: 0.1 }, 
+        ],
+        threshold: 0.3,           // adjust this for sensitivity
+        ignoreLocation: true,
+        minMatchCharLength: 2,
     };
 
+    // Debounced search function
+    const searchCourses = useCallback(debounce((query) => {
+        if (!query.trim()) {
+            model.setCurrentSearch(model.filteredCourses);
+        } else {
+            const fuse = new Fuse(model.filteredCourses, fuseOptions);
+            const results = fuse.search(query).map((r) => r.item);
+            model.setCurrentSearch(results);
+        }
+    }, 500), []);
+
     const addFavourite = (course) => {
         model.addFavourite(course);
     };
@@ -54,7 +66,6 @@ const SearchbarPresenter = observer(({ model }) => {
     const [selectedCourse, setSelectedCourse] = useState(null);
     const preP = <PrerequisitePresenter model={model} selectedCourse={selectedCourse} />;
     const reviewPresenter = <ReviewPresenter model={model} course={selectedCourse} />;
-    const [searchQuery, setSearchQuery] = useState("");
 
     const popup = <CoursePagePopup
         favouriteCourses={model.favourites}