Implement Search Pagination

site/src/component/SearchHitContainer/SearchHitContainer.scss

@@ -1,4 +1,9 @@
 .search-hit-container {
     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,6 +29,9 @@ const SearchHitContainer: FC<SearchHitContainerProps> = ({ index, CourseHitItem,
         {
             index == 'courses' && <>
                 {
+                    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)} />
                     })
@@ -37,12 +41,18 @@ const SearchHitContainer: FC<SearchHitContainerProps> = ({ index, CourseHitItem,
         {
             (index == 'professors' && ProfessorHitItem) && <>
                 {
+                    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

@@ -1,4 +1,10 @@
 .search-bar {
     border-color: #80bdff;
     padding: 2vh 2vh;
+}
+
+// center the search pagination
+.search-pagination {
+    display: flex;
+    justify-content: center;
 }

site/src/component/SearchModule/SearchModule.tsx

@@ -8,11 +8,11 @@ import { Search } from 'react-bootstrap-icons';
 
 
 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, BatchCourseData, CourseGQLResponse, ProfessorGQLResponse, BatchProfessorData } from '../../types/types';
+import { PAGE_SIZE } from 'src/helpers/constants';
 
-const PAGE_SIZE = 10;
 const SEARCH_TIMEOUT_MS = 500;
 
 interface SearchModuleProps {
@@ -48,7 +48,7 @@ const SearchModule: FC<SearchModuleProps> = ({ index }) => {
             */
             let nameResults = wfs({
                 query: query,
-                numResults: PAGE_SIZE * 5,
+                // numResults: PAGE_SIZE * MAX_PAGE_NUMBER,
                 resultType: index === 'courses' ? 'COURSE' : 'INSTRUCTOR',
                 filterOptions: {
                 }
@@ -62,6 +62,8 @@ const SearchModule: FC<SearchModuleProps> = ({ index }) => {
             }
             console.log('From frontend search', names)
             dispatch(setNames({ index, names }));
+            // reset page number
+            dispatch(setPageNumber({ index, pageNumber: 0 }));
         }
         catch (e) {
             console.log(e)

site/src/component/SearchPagination/SearchPagination.tsx

@@ -0,0 +1,59 @@
+import { FC, useEffect } from "react";
+import { Pagination } from "react-bootstrap";
+import { PAGE_SIZE } from "src/helpers/constants";
+import { useAppDispatch, useAppSelector } from "src/store/hooks";
+import { setPageNumber } from "src/store/slices/searchSlice";
+import { SearchIndex } from "src/types/types";
+
+interface SearchPaginationProps {
+  index: SearchIndex;
+}
+
+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 / PAGE_SIZE);
+    active = coursePageNumber;
+  } else if (index === 'professors') {
+    numPages = Math.ceil(professorData.names.length / PAGE_SIZE);
+    active = professorPageNumber;
+  }
+
+  let items = [];
+  let startPageNumber = Math.max(0, active - 2);
+  let 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.Last onClick={() => clickPageNumber(numPages - 1)} disabled={active === numPages - 1} />
+    </Pagination>
+  );
+}
+
+export default SearchPagination;

site/src/helpers/constants.ts

@@ -0,0 +1,2 @@
+// SearchPage
+export const PAGE_SIZE = 10;