Search bar bug fix (#127)

* fixed summation after long fight with git :!

* sorting kinda works - some problems exist

* fixed search + filter interaction

* sorting is better now / Metallic Materials are the only issue

* asc/desc have correct icon now

* added favicon

* fixed the website name in index.html

* ArrowLeft closes the CoursePopup

* popup variables moved to the model

* popup variables moved to the model

* bug fix

* prefix matching is preffered in search function

* git stash fight

* searchbar escape char bug fix

---------

Co-authored-by: Kacper Lisik <lisik@kth.se>

Author: LSKpr

my-app/src/model.js

@@ -1,3 +1,4 @@
+import { query } from "firebase/database";
 import { addCourse, addReviewForCourse, getReviewsForCourse, uploadDepartmentsAndLocations } from "../firebase";
 
 
@@ -52,6 +53,7 @@ export const model = {
     },
     isPopupOpen: false,
     selectedCourse: null,
+    searchQueryModel: "",
 
     _coursesListeners: [], //  internal list of listeners
 

my-app/src/presenters/ListViewPresenter.jsx

@@ -168,7 +168,7 @@ const ListViewPresenter = observer(({ model }) => {
         setPopupOpen={(isOpen) => model.setPopupOpen(isOpen)}
         setSelectedCourse={(course) => model.setSelectedCourse(course)}
         popup={popup}
-
+        query={model.searchQueryModel}
         targetScroll={model.scrollPosition}
         setTargetScroll={setTargetScroll}
         scrollContainerRef={scrollContainerRef}

my-app/src/presenters/SearchbarPresenter.jsx

@@ -17,7 +17,7 @@ const SearchbarPresenter = observer(({ model }) => {
             { name: 'name', weight: 0.3 },  
             { name: 'description', weight: 0.1 }, 
         ],
-        threshold: 0.4,           // adjust this for sensitivity
+        threshold: 0.3141592653589793238,           // adjust this for sensitivity
         ignoreLocation: true,
         minMatchCharLength: 2,
     };
@@ -41,6 +41,7 @@ const SearchbarPresenter = observer(({ model }) => {
             });
 
             model.setCurrentSearch(sortedResults.map(r => r.item));
+            model.searchQueryModel = query;
         }
     }, 500), []);
 

my-app/src/views/ListView.jsx

@@ -4,6 +4,17 @@ import 'ldrs/react/Quantum.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { useNavigate, Link } from 'react-router-dom';
 
+// Add this helper function at the top of your component
+const highlightText = (text, query) => {
+    if (!query || !text) return text;
+    
+    // Escape special regex characters in the query
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // const escapedQuery = query; //for testing purposes
+    const regex = new RegExp(`(${escapedQuery})`, 'gi');
+    return text.replace(regex, '<u>$1</u>');
+};
+
 function ListView(props) {
     const [displayedCourses, setDisplayedCourses] = useState([]);
     const [hasMore, setHasMore] = useState(true);
@@ -169,17 +180,27 @@ function ListView(props) {
                             >
                                 <div>
                                     <div className="codeNameContainer" style={{ display: 'flex' }}>
-                                    <p className="font-bold text-[#000061]">{course.code}</p>
-                                    <p className="font-bold text-[#000061]" style={{color: "GrayText", opacity: 0.5, marginLeft: "0.5em"}}>{handlePeriods(course?.periods)}</p>
+                                        <p className="font-bold text-[#000061]" 
+                                           dangerouslySetInnerHTML={{ 
+                                               __html: highlightText(course.code, props.query) 
+                                           }} 
+                                        />
+                                        <p className="font-bold text-[#000061]" 
+                                           style={{color: "GrayText", opacity: 0.5, marginLeft: "0.5em"}}>
+                                           {handlePeriods(course?.periods)}
+                                        </p>
                                     </div>
-                                    <p className="font-bold">{course.name} </p>
+                                    <p className="font-bold" 
+                                       dangerouslySetInnerHTML={{ 
+                                           __html: highlightText(course.name, props.query) 
+                                       }} 
+                                    />
                                     <p
                                         className="text-gray-600"
                                         dangerouslySetInnerHTML={{
                                             __html: readMore[course.code]
-
-                                                ? course?.description
-                                                : (course?.description?.slice(0, 200)+"..."),
+                                                ? highlightText(course?.description, props.query)
+                                                : highlightText(course?.description?.slice(0, 200) + "...", props.query)
                                         }}
                                     />
                                     {course?.description?.length > 150 && (