Implement Search Pagination

site/src/component/SearchHitContainer/SearchHitContainer.scss

@@ -2,3 +2,8 @@
   padding-top: 2vh;
   overflow-y: auto;
 }
+
+.no-results {
+  padding: 2vh 2vh;
+  text-align: center;
+}

site/src/component/SearchHitContainer/SearchHitContainer.tsx

@@ -4,6 +4,7 @@ import './SearchHitContainer.scss';
 import { useAppSelector } from '../../store/hooks';
 
 import { SearchIndex, CourseGQLData, ProfessorGQLData } from '../../types/types';
+import SearchPagination from '../SearchPagination/SearchPagination';
 
 interface SearchHitContainerProps {
   index: SearchIndex;
@@ -28,18 +29,31 @@ const SearchHitContainer: FC<SearchHitContainerProps> = ({ index, CourseHitItem,
     <div ref={containerDivRef} className="search-hit-container">
       {index == 'courses' && (
         <>
-          {courseResults.map((course, i) => {
-            return <CourseHitItem key={`course-hit-item-${i}`} index={i} {...(course as CourseGQLData)} />;
-          })}
+          {courseResults.length === 0 ? (
+            <div className="no-results">No results found</div>
+          ) : (
+            courseResults.map((course, i) => {
+              return <CourseHitItem key={`course-hit-item-${i}`} index={i} {...(course as CourseGQLData)} />;
+            })
+          )}
         </>
       )}
       {index == 'professors' && ProfessorHitItem && (
         <>
-          {professorResults.map((professor, i) => {
-            return <ProfessorHitItem key={`professor-hit-item-${i}`} index={i} {...(professor as ProfessorGQLData)} />;
-          })}
+          {professorResults.length === 0 ? (
+            <div className="no-results">No results found</div>
+          ) : (
+            professorResults.map((professor, i) => {
+              return (
+                <ProfessorHitItem key={`professor-hit-item-${i}`} index={i} {...(professor as ProfessorGQLData)} />
+              );
+            })
+          )}
         </>
       )}
+      <div className="search-pagination">
+        <SearchPagination index={index} />
+      </div>
     </div>
   );
 };

site/src/component/SearchModule/SearchModule.scss

@@ -15,3 +15,9 @@
     border-color: #80bdff;
   }
 }
+
+// center the search pagination
+.search-pagination {
+  display: flex;
+  justify-content: center;
+}

site/src/component/SearchModule/SearchModule.tsx

@@ -1,17 +1,19 @@
-import { FC, useEffect } from 'react';
-import { Search } from 'react-bootstrap-icons';
+import { useState, useEffect, FC } from 'react';
+import './SearchModule.scss';
+import wfs from 'websoc-fuzzy-search';
 import Form from 'react-bootstrap/Form';
 import InputGroup from 'react-bootstrap/InputGroup';
-import wfs from 'websoc-fuzzy-search';
-import './SearchModule.scss';
+import { Search } from 'react-bootstrap-icons';
 
-import { searchAPIResults } from '../../helpers/util';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
-import { setNames, setResults } from '../../store/slices/searchSlice';
+import { setNames, setPageNumber, setResults } from '../../store/slices/searchSlice';
+import { searchAPIResults } from '../../helpers/util';
 import { SearchIndex } from '../../types/types';
+import { NUM_RESULTS_PER_PAGE } from '../../helpers/constants';
 
-const PAGE_SIZE = 10;
 const SEARCH_TIMEOUT_MS = 500;
+const FULL_RESULT_THRESHOLD = 3;
+const INITIAL_MAX_PAGE = 5;
 
 interface SearchModuleProps {
   index: SearchIndex;
@@ -21,12 +23,14 @@
   const dispatch = useAppDispatch();
   const courseSearch = useAppSelector((state) => state.search.courses);
   const professorSearch = useAppSelector((state) => state.search.professors);
+  const [hasFullResults, setHasFullResults] = useState(false);
+  const [lastQuery, setLastQuery] = useState('');
   let pendingRequest: NodeJS.Timeout | null = null;
 
   // Search empty string to load some results
   useEffect(() => {
     searchNames('');
   }, [index]);
 
   // Refresh search results when names and page number changes
   useEffect(() => {
@@ -38,17 +42,17 @@
 
   const searchNames = (query: string) => {
     try {
-      /*
-                TODO: Search optimization
-                - Currently sending a query request for every input change
-                - Goal is to have only one query request pending
-                - Use setTimeout/clearTimeout to keep track of pending query request
-            */
+      // Get all results only when query changes or user reaches the fourth page or after
+      const currentPage = index === 'courses' ? courseSearch.pageNumber : professorSearch.pageNumber;
       const nameResults = wfs({
         query: query,
-        numResults: PAGE_SIZE * 5,
         resultType: index === 'courses' ? 'COURSE' : 'INSTRUCTOR',
-        filterOptions: {},
+        // Load INITIAL_MAX_PAGE pages first
+        // when user reaches the 4th page or after, load all results
+        numResults:
+          lastQuery !== query || currentPage < FULL_RESULT_THRESHOLD
+            ? NUM_RESULTS_PER_PAGE * INITIAL_MAX_PAGE
+            : undefined,
       });
       let names: string[] = [];
       if (index === 'courses') {
@@ -65,14 +69,24 @@
       }
       console.log('From frontend search', names);
       dispatch(setNames({ index, names }));
+      // reset page number and hasFullResults flag if query changes
+      if (query !== lastQuery) {
+        dispatch(setPageNumber({ index, pageNumber: 0 }));
+        setHasFullResults(false);
+        setLastQuery(query);
+      }
     } catch (e) {
       console.log(e);
     }
   };
 
   const searchResults = async (index: SearchIndex, pageNumber: number, names: string[]) => {
+    if (!hasFullResults && pageNumber >= FULL_RESULT_THRESHOLD) {
+      setHasFullResults(true);
+      searchNames(lastQuery);
+    }
     // Get the subset of names based on the page
-    const pageNames = names.slice(PAGE_SIZE * pageNumber, PAGE_SIZE * (pageNumber + 1));
+    const pageNames = names.slice(NUM_RESULTS_PER_PAGE * pageNumber, NUM_RESULTS_PER_PAGE * (pageNumber + 1));
     const results = await searchAPIResults(index, pageNames);
     dispatch(setResults({ index, results: Object.values(results) }));
   };

site/src/component/SearchPagination/SearchPagination.tsx

@@ -0,0 +1,61 @@
+import { FC } from 'react';
+import { Pagination } from 'react-bootstrap';
+import { NUM_RESULTS_PER_PAGE } from '../../helpers/constants';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { setPageNumber } from '../../store/slices/searchSlice';
+import { SearchIndex } from '../../types/types';
+
+interface SearchPaginationProps {
+  index: SearchIndex;
+}
+
+/* SearchPagination is the page buttons at the bottom of the search results */
+const SearchPagination: FC<SearchPaginationProps> = ({ index }) => {
+  const dispatch = useAppDispatch();
+  const coursePageNumber = useAppSelector((state) => state.search.courses.pageNumber);
+  const professorPageNumber = useAppSelector((state) => state.search.professors.pageNumber);
+
+  const courseData = useAppSelector((state) => state.search.courses);
+  const professorData = useAppSelector((state) => state.search.professors);
+
+  const clickPageNumber = (pageNumber: number) => {
+    dispatch(setPageNumber({ index, pageNumber }));
+  };
+
+  let numPages = 0;
+  let active = 0;
+  if (index === 'courses') {
+    numPages = Math.ceil(courseData.names.length / NUM_RESULTS_PER_PAGE);
+    active = coursePageNumber;
+  } else if (index === 'professors') {
+    numPages = Math.ceil(professorData.names.length / NUM_RESULTS_PER_PAGE);
+    active = professorPageNumber;
+  }
+
+  // only show 5 page numbers at a time
+  const items = [];
+  let startPageNumber = Math.max(0, active - 2);
+  const endPageNumber = Math.min(numPages, startPageNumber + 5); // exclusive
+  startPageNumber = Math.max(0, endPageNumber - 5);
+  for (let i = startPageNumber; i < endPageNumber; i++) {
+    items.push(
+      <Pagination.Item key={i} active={i === active} onClick={() => clickPageNumber(i)}>
+        {i + 1}
+      </Pagination.Item>,
+    );
+  }
+
+  return (
+    // hide if there is no page or only one page
+    numPages <= 1 ? null : (
+      <Pagination>
+        <Pagination.First onClick={() => clickPageNumber(0)} disabled={active === 0} />
+        <Pagination.Prev onClick={() => clickPageNumber(active - 1)} disabled={active === 0} />
+        {items}
+        <Pagination.Next onClick={() => clickPageNumber(active + 1)} disabled={active === numPages - 1} />
+      </Pagination>
+    )
+  );
+};
+
+export default SearchPagination;

site/src/helpers/constants.ts

@@ -0,0 +1,4 @@
+// SearchPage
+// Defined in the constants file because it is used in both
+// SearchModule (the search bar) and SearchPagination (the pagination buttons)
+export const NUM_RESULTS_PER_PAGE = 10;