Merge branch 'main' of github.com:jkluge/Find-My-Next-Course into reviews-db

jkluge · jkluge · commit 2801feff085f · 2025-05-09T15:01:09.000+02:00
diff --git a/my-app/index.html b/my-app/index.html
@@ -3,8 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4883205682873966"
+            crossorigin="anonymous"></script>
     <title>Course Compass</title>
 
+
     <!-- Favicon for all themes (fallback) -->
     <link rel="icon" type="image/png" href="/favicons-light/favicon-32x32.png" />
 
diff --git a/my-app/src/model.js b/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
 
diff --git a/my-app/src/presenters/ListViewPresenter.jsx b/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}
diff --git a/my-app/src/presenters/SearchbarPresenter.jsx b/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), []);
 
diff --git a/my-app/src/views/ListView.jsx b/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 && (
