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

@@ -1,107 +1,149 @@
-import React, { useState, useEffect, Component, FC } from 'react';
-import './SearchModule.scss';
-import wfs from 'websoc-fuzzy-search';
-import axios from 'axios';
-import Form from 'react-bootstrap/Form';
-import InputGroup from 'react-bootstrap/InputGroup';
-import { Search } from 'react-bootstrap-icons';
+import React, { useState, useEffect, Component, FC } from "react";
+import "./SearchModule.scss";
+import wfs from "websoc-fuzzy-search";
+import axios from "axios";
+import Form from "react-bootstrap/Form";
+import InputGroup from "react-bootstrap/InputGroup";
+import { Search } from "react-bootstrap-icons";
 
+import { useAppDispatch, useAppSelector } from "../../store/hooks";
+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";
 
-import { useAppDispatch, useAppSelector } from '../../store/hooks';
-import { setNames, setResults } from '../../store/slices/searchSlice';
-import { searchAPIResults } from '../../helpers/util';
-import { SearchIndex, BatchCourseData, CourseGQLResponse, ProfessorGQLResponse, BatchProfessorData } from '../../types/types';
-
-const PAGE_SIZE = 10;
 const SEARCH_TIMEOUT_MS = 500;
+const FULL_RESULT_THRESHOLD = 3;
+const INITIAL_MAX_PAGE = 5;
 
 interface SearchModuleProps {
-    index: SearchIndex;
+  index: SearchIndex;
 }
 
 const SearchModule: FC<SearchModuleProps> = ({ index }) => {
-    const dispatch = useAppDispatch();
-    const courseSearch = useAppSelector(state => state.search.courses);
-    const professorSearch = useAppSelector(state => state.search.professors);
-    let pendingRequest: NodeJS.Timeout | null = null;
+  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('');
-    }, [])
+  // Search empty string to load some results
+  useEffect(() => {
+    searchNames("");
+  }, []);
 
-    // Refresh search results when names and page number changes
-    useEffect(() => {
-        searchResults('courses', courseSearch.pageNumber, courseSearch.names);
-    }, [courseSearch.names, courseSearch.pageNumber])
-    useEffect(() => {
-        searchResults('professors', professorSearch.pageNumber, professorSearch.names);
-    }, [professorSearch.names, professorSearch.pageNumber])
+  // Refresh search results when names and page number changes
+  useEffect(() => {
+    searchResults("courses", courseSearch.pageNumber, courseSearch.names);
+  }, [courseSearch.names, courseSearch.pageNumber]);
+  useEffect(() => {
+    searchResults(
+      "professors",
+      professorSearch.pageNumber,
+      professorSearch.names
+    );
+  }, [professorSearch.names, professorSearch.pageNumber]);
 
-    let 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
-            */
-            let nameResults = wfs({
-                query: query,
-                numResults: PAGE_SIZE * 5,
-                resultType: index === 'courses' ? 'COURSE' : 'INSTRUCTOR',
-                filterOptions: {
-                }
-            })
-            let names: string[] = [];
-            if (index == 'courses') {
-                names = Object.keys(nameResults);
-            }
-            else if (index == 'professors') {
-                names = Object.keys(nameResults).map(n => nameResults[n].metadata.ucinetid) as string[];
-            }
-            console.log('From frontend search', names)
-            dispatch(setNames({ index, names }));
-        }
-        catch (e) {
-            console.log(e)
-        }
+  let searchNames = (query: string) => {
+    try {
+      // Get all results only when query changes or user reaches the fourth page or after
+      const currentPage =
+        index === "courses"
+          ? courseSearch.pageNumber
+          : professorSearch.pageNumber;
+      let nameResults = wfs({
+        query: query,
+        resultType: index === "courses" ? "COURSE" : "INSTRUCTOR",
+        numResults:
+          lastQuery !== query || currentPage < FULL_RESULT_THRESHOLD
+            ? PAGE_SIZE * INITIAL_MAX_PAGE
+            : undefined,
+      });
+      let names: string[] = [];
+      if (index == "courses") {
+        names = Object.keys(nameResults);
+      } else if (index == "professors") {
+        names = Object.keys(nameResults).map(
+          (n) => nameResults[n].metadata.ucinetid
+        ) as string[];
+      }
+      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);
     }
+  };
 
-    let searchResults = async (index: SearchIndex, pageNumber: number, names: string[]) => {
-        // Get the subset of names based on the page
-        let pageNames = names.slice(PAGE_SIZE * pageNumber, PAGE_SIZE * (pageNumber + 1))
-        let results = await searchAPIResults(index, pageNames);
-        dispatch(setResults({ index, results: Object.values(results) }));
+  let 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
+    let pageNames = names.slice(
+      PAGE_SIZE * pageNumber,
+      PAGE_SIZE * (pageNumber + 1)
+    );
+    let results = await searchAPIResults(index, pageNames);
+    dispatch(setResults({ index, results: Object.values(results) }));
+  };
 
-    let searchNamesAfterTimeout = (query: string) => {
-        if (pendingRequest) {
-            clearTimeout(pendingRequest);
-        }
-        let timeout = setTimeout(() => {
-            searchNames(query);
-            pendingRequest = null;
-        }, SEARCH_TIMEOUT_MS);
-        pendingRequest = timeout;
+  let searchNamesAfterTimeout = (query: string) => {
+    if (pendingRequest) {
+      clearTimeout(pendingRequest);
     }
+    let timeout = setTimeout(() => {
+      searchNames(query);
+      pendingRequest = null;
+    }, SEARCH_TIMEOUT_MS);
+    pendingRequest = timeout;
+  };
 
-    let coursePlaceholder = 'Search a course number or department';
-    let professorPlaceholder = 'Search a professor';
-    let placeholder = index == 'courses' ? coursePlaceholder : professorPlaceholder;
+  let coursePlaceholder = "Search a course number or department";
+  let professorPlaceholder = "Search a professor";
+  let placeholder =
+    index == "courses" ? coursePlaceholder : professorPlaceholder;
 
-    return <div className='search-module'>
-        <Form.Group className="mb-3">
-            <InputGroup>
-                <InputGroup.Prepend>
-                    <InputGroup.Text>
-                        <Search />
-                    </InputGroup.Text>
-                </InputGroup.Prepend>
-                <Form.Control className='search-bar' type="text" placeholder={placeholder} onChange={(e) => searchNamesAfterTimeout(e.target.value)} />
-            </InputGroup>
-        </Form.Group>
+  return (
+    <div className="search-module">
+      <Form.Group className="mb-3">
+        <InputGroup>
+          <InputGroup.Prepend>
+            <InputGroup.Text>
+              <Search />
+            </InputGroup.Text>
+          </InputGroup.Prepend>
+          <Form.Control
+            className="search-bar"
+            type="text"
+            placeholder={placeholder}
+            onChange={(e) => searchNamesAfterTimeout(e.target.value)}
+          />
+        </InputGroup>
+      </Form.Group>
     </div>
-}
+  );
+};
 
-export default SearchModule;
+export default SearchModule;

site/src/component/SearchPagination/SearchPagination.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+}
+
+export default SearchPagination;

site/src/helpers/constants.ts

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