Issue #614: fix call search

smclab · Sep 28, 2023 · d42d3a5 · d42d3a5
1 parent 788a7bf
commit d42d3a5
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 4 deletions.
diff --git 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
@@ -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
@@ -47,6 +47,7 @@ export type FiltersMobileProps<E> = {
   language: string;
   sortAfterKey: string;
   isCollapsable?: boolean;
+  numberOfResults: number;
 };
 function FiltersMobileLiveChange<E>({
   dynamicFilters,
@@ -65,12 +66,14 @@ function FiltersMobileLiveChange<E>({
   viewTabs = false,
   sortAfterKey,
   isCollapsable = true,
+  numberOfResults,
 }: FiltersMobileProps<E>) {
   const results = useInfiniteResults<any>(
     searchQuery,
     sort,
     language,
     sortAfterKey,
+    numberOfResults,
   );
   const { t } = useTranslation();
   const componet = (
@@ -165,6 +168,7 @@ function FiltersMobileLiveChange<E>({
           language={language}
           sortAfterKey={sortAfterKey}
           isCollapsable={isCollapsable}
+          numberOfResults={numberOfResults}
           preFilters={
             viewTabs ? (
               <ViewAllTabs

diff --git a/js-packages/search-frontend/src/components/ResultList.tsx b/js-packages/search-frontend/src/components/ResultList.tsx
@@ -33,6 +33,7 @@ type ResultsProps<E> = {
   setSortAfterKey: React.Dispatch<React.SetStateAction<string>>;
   sortAfterKey: string;
   setTotalResult: React.Dispatch<React.SetStateAction<number | null>>;
+  numberOfResults: number;
 };
 function Results<E>({
   displayMode,
@@ -47,6 +48,7 @@ function Results<E>({
   setSortAfterKey,
   sortAfterKey,
   setTotalResult,
+  numberOfResults,
 }: ResultsProps<E>) {
   const renderers = useRenderers();
 
@@ -66,6 +68,7 @@ function Results<E>({
           overChangeCard={overChangeCard}
           language={language}
           sortAfterKey={sortAfterKey}
+          numberOfResults={numberOfResults}
         />
       );
     case "infinite":
@@ -83,6 +86,7 @@ function Results<E>({
           language={language}
           setSortAfterKey={setSortAfterKey}
           sortAfterKey={sortAfterKey}
+          numberOfResults={numberOfResults}
         />
       );
     case "virtual":
@@ -99,6 +103,7 @@ function Results<E>({
           overChangeCard={overChangeCard}
           language={language}
           sortAfterKey={sortAfterKey}
+          numberOfResults={numberOfResults}
         />
       );
   }
@@ -199,6 +204,7 @@ type ResulListProps<E> = {
   overChangeCard?: boolean;
   language: string;
   setTotalResult: React.Dispatch<React.SetStateAction<number | null>>;
+  numberOfResults: number;
 };
 
 type FiniteResultsProps<E> = ResulListProps<E> & { sortAfterKey: string };
@@ -214,12 +220,14 @@ export function FiniteResults<E>({
   language,
   sortAfterKey,
   setTotalResult,
+  numberOfResults,
 }: FiniteResultsProps<E>) {
   const results = useInfiniteResults<E>(
     searchQuery,
     sort,
     language,
     sortAfterKey,
+    numberOfResults,
   );
 
   setTotalResult(results.data?.pages[0].total ?? null);
@@ -278,12 +286,14 @@ export function InfiniteResults<E>({
   setSortAfterKey,
   sortAfterKey,
   setTotalResult,
+  numberOfResults,
 }: InfiniteResultsProps<E>) {
   const results = useInfiniteResults<E>(
     searchQuery,
     sort,
     language,
     sortAfterKey,
+    numberOfResults,
   );
 
   const { t } = useTranslation();
@@ -435,12 +445,14 @@ export function VirtualResults<E>({
   language,
   sortAfterKey,
   setTotalResult,
+  numberOfResults,
 }: VirtualResultsProps<E>) {
   const results = useInfiniteResults<E>(
     searchQuery,
     sort,
     language,
     sortAfterKey,
+    numberOfResults,
   );
   const resultsFlat = results.data?.pages.flatMap((page) => page.result);
   const thereAreResults = Boolean(
@@ -538,8 +550,9 @@ export function useInfiniteResults<E>(
   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
@@ -474,9 +474,17 @@ function useInfiniteResults<E>(
 ) {
   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
@@ -154,7 +154,7 @@ export function Main({
   }, [languageQuery.data, i18n]);
   const [sortAfterKey, setSortAfterKey] = React.useState("");
   const [totalResult, setTotalResult] = React.useState<number | null>(null);
-
+  const numberOfResults = configuration.numberResult || 7;
   return (
     <React.Fragment>
       {renderPortal(
@@ -215,6 +215,7 @@ export function Main({
           <FiltersMemo
             searchQuery={searchQuery}
             onAddFilterToken={addFilterToken}
+            numberOfResults={numberOfResults}
             onRemoveFilterToken={removeFilterToken}
             onConfigurationChange={onConfigurationChange}
             filtersSelect={configuration.filterTokens}
@@ -242,6 +243,7 @@ export function Main({
               configuration.filtersConfigurable?.isCollapsable ?? true
             }
             numberItems={configuration.filtersConfigurable?.numberItems}
+            numberOfResults={numberOfResults}
           />
         </I18nextProvider>,
         configuration.filtersConfigurable
@@ -263,6 +265,7 @@ export function Main({
           <FiltersHorizontalMemo
             searchQuery={searchQuery}
             onAddFilterToken={addFilterToken}
+            numberOfResults={numberOfResults}
             sortAfterKey={sortAfterKey}
             onRemoveFilterToken={removeFilterToken}
             onConfigurationChange={onConfigurationChange}
@@ -296,6 +299,7 @@ export function Main({
             language={languageSelect}
             setSortAfterKey={setSortAfterKey}
             sortAfterKey={sortAfterKey}
+            numberOfResults={numberOfResults}
           />
         </I18nextProvider>,
         configuration.results,
@@ -321,6 +325,7 @@ export function Main({
             language={languageSelect}
             setSortAfterKey={setSortAfterKey}
             sortAfterKey={sortAfterKey}
+            numberOfResults={numberOfResults}
           />
         </I18nextProvider>,
         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}
           />
         </I18nextProvider>,
         configuration.filtersMobileLiveChange?.element !== undefined

diff --git 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<SearchToken>;
   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" },