feat(search) Allow users to update the number of search results per page (#5212)

Co-authored-by: Chris Collins <chriscollins@Chriss-MBP-2-3.lan>
This commit is contained in:
Chris Collins 2022-06-24 19:13:09 -04:00 committed by GitHub
parent 68762a2f95
commit 4c9554e9d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 5 deletions

View File

@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import * as QueryString from 'query-string';
import { useHistory, useLocation, useParams } from 'react-router';
import { Alert } from 'antd';
@ -39,13 +39,15 @@ export const SearchPage = () => {
.filter((filter) => filter.field === ENTITY_FILTER_NAME)
.map((filter) => filter.value.toUpperCase() as EntityType);
const [numResultsPerPage, setNumResultsPerPage] = useState(SearchCfg.RESULTS_PER_PAGE);
const { data, loading, error } = useGetSearchResultsForMultipleQuery({
variables: {
input: {
types: entityFilters,
query,
start: (page - 1) * SearchCfg.RESULTS_PER_PAGE,
count: SearchCfg.RESULTS_PER_PAGE,
start: (page - 1) * numResultsPerPage,
count: numResultsPerPage,
filters: filtersWithoutEntities,
},
},
@ -118,6 +120,8 @@ export const SearchPage = () => {
loading={loading}
onChangeFilters={onChangeFilters}
onChangePage={onChangePage}
numResultsPerPage={numResultsPerPage}
setNumResultsPerPage={setNumResultsPerPage}
/>
</SearchablePage>
);

View File

@ -137,6 +137,8 @@ interface Props {
}) => Promise<SearchResultsInterface | null | undefined>;
entityFilters: EntityType[];
filtersWithoutEntities: FacetFilterInput[];
numResultsPerPage: number;
setNumResultsPerPage: (numResults: number) => void;
}
export const SearchResults = ({
@ -151,6 +153,8 @@ export const SearchResults = ({
callSearchOnVariables,
entityFilters,
filtersWithoutEntities,
numResultsPerPage,
setNumResultsPerPage,
}: Props) => {
const pageStart = searchResponse?.start || 0;
const pageSize = searchResponse?.count || 0;
@ -175,6 +179,10 @@ export const SearchResults = ({
onChangeFilters(newFilters);
};
const updateNumResults = (_currentNum: number, newNum: number) => {
setNumResultsPerPage(newNum);
};
const history = useHistory();
const combinedSiblingSearchResults = combineSiblingsInSearchResults(searchResponse?.searchResults);
@ -257,11 +265,13 @@ export const SearchResults = ({
<PaginationControlContainer>
<Pagination
current={page}
pageSize={SearchCfg.RESULTS_PER_PAGE}
pageSize={numResultsPerPage}
total={totalResults}
showLessItems
onChange={onChangePage}
showSizeChanger={false}
showSizeChanger={totalResults > SearchCfg.RESULTS_PER_PAGE}
onShowSizeChange={updateNumResults}
pageSizeOptions={['10', '20', '50']}
/>
</PaginationControlContainer>
{authenticatedUserUrn && (