diff --git a/js-packages/search-frontend/src/components/Filters.tsx b/js-packages/search-frontend/src/components/Filters.tsx index 117b78ef8..8205afef4 100644 --- a/js-packages/search-frontend/src/components/Filters.tsx +++ b/js-packages/search-frontend/src/components/Filters.tsx @@ -26,6 +26,7 @@ type FiltersProps = { sortAfterKey: string; isCollapsable?: boolean; numberItems?: number | null | undefined; + numberOfResults: number; }; function Filters({ searchQuery, @@ -40,6 +41,7 @@ function Filters({ sortAfterKey, isCollapsable = true, numberItems, + numberOfResults, }: FiltersProps) { const suggestionCategories = useSuggestionCategories(); const { t } = useTranslation(); @@ -50,6 +52,7 @@ function Filters({ sort, language, sortAfterKey, + numberOfResults, ); React.useEffect(() => { if (!isPreviousData) { diff --git a/js-packages/search-frontend/src/components/FiltersHorizontal.tsx b/js-packages/search-frontend/src/components/FiltersHorizontal.tsx index 57bea73be..2fcdbdbe9 100644 --- a/js-packages/search-frontend/src/components/FiltersHorizontal.tsx +++ b/js-packages/search-frontend/src/components/FiltersHorizontal.tsx @@ -39,6 +39,7 @@ type FiltersProps = { dynamicFilters: boolean; language: string; sortAfterKey: string; + numberOfResults: number; }; function FiltersHorizontal({ searchQuery, @@ -51,6 +52,7 @@ function FiltersHorizontal({ dynamicFilters, language, sortAfterKey, + numberOfResults, }: FiltersProps) { const suggestionCategories = useSuggestionCategories(); const [lastSearchQueryWithResults, setLastSearchQueryWithResults] = @@ -60,6 +62,7 @@ function FiltersHorizontal({ sort, language, sortAfterKey, + numberOfResults, ); React.useEffect(() => { if (!isPreviousData) { diff --git a/js-packages/search-frontend/src/components/FiltersMobileLiveChange.tsx b/js-packages/search-frontend/src/components/FiltersMobileLiveChange.tsx index a92ff6d6a..6fd12b048 100644 --- a/js-packages/search-frontend/src/components/FiltersMobileLiveChange.tsx +++ b/js-packages/search-frontend/src/components/FiltersMobileLiveChange.tsx @@ -47,6 +47,7 @@ export type FiltersMobileProps = { language: string; sortAfterKey: string; isCollapsable?: boolean; + numberOfResults: number; }; function FiltersMobileLiveChange({ dynamicFilters, @@ -65,12 +66,14 @@ function FiltersMobileLiveChange({ viewTabs = false, sortAfterKey, isCollapsable = true, + numberOfResults, }: FiltersMobileProps) { const results = useInfiniteResults( searchQuery, sort, language, sortAfterKey, + numberOfResults, ); const { t } = useTranslation(); const componet = ( @@ -165,6 +168,7 @@ function FiltersMobileLiveChange({ language={language} sortAfterKey={sortAfterKey} isCollapsable={isCollapsable} + numberOfResults={numberOfResults} preFilters={ viewTabs ? ( = { setSortAfterKey: React.Dispatch>; sortAfterKey: string; setTotalResult: React.Dispatch>; + numberOfResults: number; }; function Results({ displayMode, @@ -47,6 +48,7 @@ function Results({ setSortAfterKey, sortAfterKey, setTotalResult, + numberOfResults, }: ResultsProps) { const renderers = useRenderers(); @@ -66,6 +68,7 @@ function Results({ overChangeCard={overChangeCard} language={language} sortAfterKey={sortAfterKey} + numberOfResults={numberOfResults} /> ); case "infinite": @@ -83,6 +86,7 @@ function Results({ language={language} setSortAfterKey={setSortAfterKey} sortAfterKey={sortAfterKey} + numberOfResults={numberOfResults} /> ); case "virtual": @@ -99,6 +103,7 @@ function Results({ overChangeCard={overChangeCard} language={language} sortAfterKey={sortAfterKey} + numberOfResults={numberOfResults} /> ); } @@ -199,6 +204,7 @@ type ResulListProps = { overChangeCard?: boolean; language: string; setTotalResult: React.Dispatch>; + numberOfResults: number; }; type FiniteResultsProps = ResulListProps & { sortAfterKey: string }; @@ -214,12 +220,14 @@ export function FiniteResults({ language, sortAfterKey, setTotalResult, + numberOfResults, }: FiniteResultsProps) { const results = useInfiniteResults( searchQuery, sort, language, sortAfterKey, + numberOfResults, ); setTotalResult(results.data?.pages[0].total ?? null); @@ -278,12 +286,14 @@ export function InfiniteResults({ setSortAfterKey, sortAfterKey, setTotalResult, + numberOfResults, }: InfiniteResultsProps) { const results = useInfiniteResults( searchQuery, sort, language, sortAfterKey, + numberOfResults, ); const { t } = useTranslation(); @@ -435,12 +445,14 @@ export function VirtualResults({ language, sortAfterKey, setTotalResult, + numberOfResults, }: VirtualResultsProps) { const results = useInfiniteResults( searchQuery, sort, language, sortAfterKey, + numberOfResults, ); const resultsFlat = results.data?.pages.flatMap((page) => page.result); const thereAreResults = Boolean( @@ -538,8 +550,9 @@ export function useInfiniteResults( sort: SortField[], language: string, sortAfterKey: string, + numberOfResults: number, ) { - const pageSize = 25; + const pageSize = numberOfResults; const client = useOpenK9Client(); return useInfiniteQuery( ["results", searchQuery, sort, language, sortAfterKey] as const, diff --git a/js-packages/search-frontend/src/components/ResultListPagination.tsx b/js-packages/search-frontend/src/components/ResultListPagination.tsx index 8fd772741..ac3e37904 100644 --- a/js-packages/search-frontend/src/components/ResultListPagination.tsx +++ b/js-packages/search-frontend/src/components/ResultListPagination.tsx @@ -474,9 +474,17 @@ function useInfiniteResults( ) { const pageSize = elementForPage; const client = useOpenK9Client(); + console.log( + searchQuery, + sort, + language, + sortAfterKey, + elementForPage, + result, + ); return useInfiniteQuery( - ["results", searchQuery, sort, language, sortAfterKey, result] as const, + ["results", searchQuery, sort, language, sortAfterKey] as const, async ({ queryKey: [, searchQuery, sort], pageParam = 0 }) => { const RangePage: [number, number] = sortAfterKey === "" ? [result, pageSize] : [0, pageSize]; diff --git a/js-packages/search-frontend/src/embeddable/Main.tsx b/js-packages/search-frontend/src/embeddable/Main.tsx index 7f4804ab6..f4ca70ce0 100644 --- a/js-packages/search-frontend/src/embeddable/Main.tsx +++ b/js-packages/search-frontend/src/embeddable/Main.tsx @@ -154,7 +154,7 @@ export function Main({ }, [languageQuery.data, i18n]); const [sortAfterKey, setSortAfterKey] = React.useState(""); const [totalResult, setTotalResult] = React.useState(null); - + const numberOfResults = configuration.numberResult || 7; return ( {renderPortal( @@ -215,6 +215,7 @@ export function Main({ , configuration.filtersConfigurable @@ -263,6 +265,7 @@ export function Main({ , configuration.results, @@ -321,6 +325,7 @@ export function Main({ language={languageSelect} setSortAfterKey={setSortAfterKey} sortAfterKey={sortAfterKey} + numberOfResults={numberOfResults} /> , configuration.resultList ? configuration.resultList.element : null, @@ -341,7 +346,7 @@ export function Main({ setSortAfterKey={setSortAfterKey} sortAfterKey={sortAfterKey} numberOfResults={totalResult || 0} - pagination={7} + pagination={numberOfResults} currentPage={currentPage} setCurrentPage={setCurrentPage} /> @@ -457,6 +462,7 @@ export function Main({ isCollapsable={ configuration.filtersMobileLiveChange?.isCollapsable ?? true } + numberOfResults={numberOfResults} /> , configuration.filtersMobileLiveChange?.element !== undefined diff --git a/js-packages/search-frontend/src/embeddable/entry.tsx b/js-packages/search-frontend/src/embeddable/entry.tsx index c15e8c794..477081eae 100644 --- a/js-packages/search-frontend/src/embeddable/entry.tsx +++ b/js-packages/search-frontend/src/embeddable/entry.tsx @@ -266,6 +266,7 @@ export type Configuration = { defaultTokens: Array; resultsDisplayMode: ResultsDisplayMode; tenant: string | null; + numberResult: number | null | undefined; isQueryAnalysis: boolean | null; token: string | null; totalResult: Element | string | null; @@ -310,6 +311,7 @@ const defaultConfiguration: Configuration = { searchAutoselect: true, searchReplaceText: true, isQueryAnalysis: true, + numberResult: null, filterTokens: [], defaultTokens: [], resultsDisplayMode: { type: "infinite" },