Final fixes

client/src/modules/SearchBar/Components/SearchBar.tsx

@@ -33,31 +33,39 @@ export const SearchBar = ({
   const [query, setQuery] = useState<string>('')
   const [width, setWidth] = useState<number>(window.innerWidth)
 
-  useEffect(() => {
-    const controller = new AbortController();
-
-    if (query.toLowerCase() !== '') {
+  let timeoutId: NodeJS.Timeout
 
-      function sleep(ms: number) {
-        return new Promise(resolve => setTimeout(resolve, ms))
+  useEffect(() => {
+    function debounce(func: Function, delay: number) {
+      return (...args: any[]) => {
+        clearTimeout(timeoutId)
+        timeoutId = setTimeout(() => func(...args), delay)
       }
+    }
 
-      const fetchResults = async () => {
-        const results = await axios.post(`/api/getResultsFromQuery`, { query: query })
-
-        const subjectList = results.data.result.subjects
-        const professorList = results.data.result.professors
-        const courseList = results.data.result.courses
-        setSubjects(subjectList)
-        setProfessors(professorList)
-        setCourses(courseList)
-      }
+    async function fetchCourses() {
+      const response = await axios.post(`/api/getResultsFromQuery`, {
+        query: query,
+      })
+      const courseList = response.data.result.courses
+      const subjectList = response.data.result.subjects
+      const professorList = response.data.result.professors
+      setCourses(courseList)
+      setSubjects(subjectList)
+      setProfessors(professorList)
+    }
+    const debouncedFetchCourses = debounce(fetchCourses, 300)
 
-      fetchResults().catch()
-      sleep(1000)
-      fetchResults().catch()
+    if (query.trim() !== '') {
+      debouncedFetchCourses()
+    } else {
+      setCourses([])
+      setSubjects([])
+      setProfessors([])
+    }
 
-      return () => controller.abort();
+    return () => {
+      clearTimeout(timeoutId)
     }
   }, [query])
 
@@ -83,7 +91,7 @@ export const SearchBar = ({
       //if the down arrow was detected, increase the index value by 1 to highlight the next element
       //never index above the total number of results
       const numResults = subjects.length + professors.length + courses.length
-      setIndex(Math.min(index + 1, numResults - 1))
+      setIndex(Math.min(index + 1, numResults))
     } else if (e.key === 'ArrowUp') {
       //if the up arrow key was detected, decrease the index value by 1 to highlight the prev element
       //never index below 0 (the first element)
@@ -129,6 +137,7 @@ export const SearchBar = ({
       userInput = userInput.replace(/(?<=[a-z])(?=\d)|(?<=\d)(?=[a-z])/gi, ' ');
     }
 
+    // only sets the index after key pressed
     if (checkForCourseMatch(userInput)) {
       // If input is exact match to a class,
       //  highlight this class by setting index to index of this class

server/src/search/search.algo.ts

@@ -33,7 +33,7 @@ const editDistance = (a, b) => {
         matrix[i][j] = matrix[i - 1][j - 1];
       } else {
         matrix[i][j] = Math.min(
-          matrix[i - 1][j - 1] + 2, // substitution
+          matrix[i - 1][j - 1], // substitution
           matrix[i][j - 1], // insertion
           matrix[i - 1][j], // deletion
         ) + 1;

server/src/search/search.router.ts

@@ -41,6 +41,7 @@ searchRouter.post('/getResultsFromQuery', async (req, res) => {
     const coursesByProfessor = await searchCoursesByProfessor({ search }, searchType);
     const coursesNaive = await searchCourses({ search }, searchType);
 
+    // given 3 potential course lists, select the list with the longest length
     const courses = coursesBySubject.length > coursesByProfessor.length ?
       (coursesBySubject.length > coursesNaive.length ? coursesBySubject : coursesNaive) :
       (coursesByProfessor.length > coursesNaive.length ? coursesByProfessor : coursesNaive)
@@ -82,6 +83,7 @@ searchRouter.post('/getCourseResults', async (req, res) => {
     const coursesByProfessor = await searchCoursesByProfessor({ search }, searchType);
     const coursesNaive = await searchCourses({ search }, searchType);
 
+    // given 3 potential course lists, select the list with the longest length
     const courses = coursesBySubject.length > coursesByProfessor.length ?
       (coursesBySubject.length > coursesNaive.length ? coursesBySubject : coursesNaive) :
       (coursesByProfessor.length > coursesNaive.length ? coursesByProfessor : coursesNaive)