Search bolding (#99)

Search bolding

components/common/SearchBar/searchBar.tsx

@@ -7,6 +7,8 @@ import {
   Paper,
 } from '@mui/material';
 import Popper from '@mui/material/Popper';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
 import * as React from 'react';
 import { useEffect } from 'react';
 
@@ -124,19 +126,49 @@ export const SearchBar = (props: SearchProps) => {
               }
             />
           )}
-          renderOption={(props, option) => (
-            <li
-              {...props}
-              className="bg-white/25 active:bg-white/50 focus:bg-white/50 hover:bg-white/50 my-4 mx-8 font-sans"
-            >
-              <Box className="cursor-pointer text-lg text-gray-600 pl-5 py-5">
-                {searchQueryLabel(option)}
-              </Box>
-            </li>
-          )}
-          isOptionEqualToValue={(option, value) =>
-            searchQueryEqual(option, value)
-          }
+          renderOption={(props, option, { inputValue }) => {
+            const text = searchQueryLabel(option);
+            //add spaces between prefix and course number
+            const matches = match(
+              text,
+              inputValue.replace(
+                /([a-zA-Z]{2,4})([0-9][0-9V]?[0-9]{0,2})/,
+                '$1 $2',
+              ),
+            );
+            const parts = parse(text, matches);
+            console.log(parts);
+            return (
+              <li {...props}>
+                {parts.map((part, index) => (
+                  <span
+                    key={index}
+                    className={
+                      'whitespace-pre-wrap' +
+                      (part.highlight ? ' font-bold' : '')
+                    }
+                  >
+                    {part.text}
+                  </span>
+                ))}
+              </li>
+            );
+          }}
+          isOptionEqualToValue={(option, value) => {
+            if (option.prefix !== value.prefix) {
+              return false;
+            }
+            if (option.professorName !== value.professorName) {
+              return false;
+            }
+            if (option.number !== value.number) {
+              return false;
+            }
+            if (option.sectionNumber !== value.sectionNumber) {
+              return false;
+            }
+            return true;
+          }}
           PopperComponent={(props) => {
             return (
               <Popper {...props} className="rounded-none" placement="bottom" />

components/common/SplashPageSearchBar/splashPageSearchBar.tsx

@@ -1,5 +1,7 @@
 import { Search } from '@mui/icons-material';
 import { Autocomplete, InputAdornment, InputBase } from '@mui/material';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
 import * as React from 'react';
 import { useEffect } from 'react';
 
@@ -97,6 +99,32 @@ export const SplashPageSearchBar = (props: SearchProps) => {
               }
             />
           )}
+          renderOption={(props, option, { inputValue }) => {
+            const text = searchQueryLabel(option);
+            //add spaces between prefix and course number
+            const matches = match(
+              text,
+              inputValue
+                .replace(/([a-zA-Z]{2,4})([0-9][0-9V]?[0-9]{0,2})/, '$1 $2')
+                .replace(/([0-9][0-9V]?[0-9]{0,2})([a-zA-Z]{2,4})/, '$1 $2'),
+            );
+            const parts = parse(text, matches);
+            return (
+              <li {...props}>
+                {parts.map((part, index) => (
+                  <span
+                    key={index}
+                    className={
+                      'whitespace-pre-wrap' +
+                      (part.highlight ? ' font-bold' : '')
+                    }
+                  >
+                    {part.text}
+                  </span>
+                ))}
+              </li>
+            );
+          }}
           defaultValue={[]}
         />
       </div>

package.json

@@ -25,6 +25,7 @@
     "@vercel/analytics": "^1.0.0",
     "apexcharts": "^3.33.2",
     "autoprefixer": "^10.4.2",
+    "autosuggest-highlight": "^3.3.4",
     "css-loader": "^6.7.1",
     "dotenv": "^16.0.0",
     "framer-motion": "^10.12.4",
@@ -52,6 +53,7 @@
     "@babel/preset-typescript": "^7.21.4",
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
+    "@types/autosuggest-highlight": "^3.2.0",
     "@types/node": "^18.16.1",
     "@types/react": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",