display search results count

folio-org · Oct 21, 2024 · 29cdc45 · 29cdc45
1 parent 1828243
commit 29cdc45
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 21 deletions.
diff --git a/src/common/hooks/useSearch.ts b/src/common/hooks/useSearch.ts
@@ -209,6 +209,7 @@ export const useSearch = () => {
     setFacets(selectedFacets);
 
     setIsLoading(true);
+    clearPagination();
     await getSearchSourceData?.();
     await fetchData({
       query: selectedQuery,

diff --git a/src/components/ComplexLookupField/ModalComplexLookup.tsx b/src/components/ComplexLookupField/ModalComplexLookup.tsx
@@ -1,5 +1,5 @@
-import { FC, memo, useCallback, useEffect, useMemo } from 'react';
-import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
+import { FC, memo, useCallback, useEffect } from 'react';
+import { useResetRecoilState, useSetRecoilState } from 'recoil';
 import classNames from 'classnames';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { getSearchResults } from '@common/api/search.api';
@@ -51,7 +51,6 @@ export const ModalComplexLookup: FC<ModalComplexLookupProps> = memo(
     const setIsMarcPreviewOpen = useSetRecoilState(state.ui.isMarcPreviewOpen);
     const setSearchQuery = useSetRecoilState(state.search.query);
     const clearSearchQuery = useResetRecoilState(state.search.query);
-    const searchResultsMetadata = useRecoilValue(state.search.pageMetadata);
     const setMarcMetadata = useSetRecoilState(state.data.marcPreviewMetadata);
     const clearMarcMetadata = useResetRecoilState(state.data.marcPreviewMetadata);
     const { getFacetsData, getSourceData } = useComplexLookupApi(api, filters);
@@ -77,29 +76,24 @@ export const ModalComplexLookup: FC<ModalComplexLookupProps> = memo(
       onClose();
     };
 
-    const searchControlsSubLabel = useMemo(
-      () =>
-        searchResultsMetadata?.totalElements ? (
-          <FormattedMessage
-            id={'ld.recordsFound'}
-            values={{
-              recordsCount: (
-                <FormattedNumber value={searchResultsMetadata?.totalElements} data-testid="records-found-count" />
-              ),
-            }}
-          />
-        ) : undefined,
-      [searchResultsMetadata?.totalElements],
+    const renderSearchControlsSubLabel = (totalElements: number) => (
+      <FormattedMessage
+        id={'ld.recordsFound'}
+        values={{
+          recordsCount: <FormattedNumber value={totalElements} data-testid="records-found-count" />,
+        }}
+      />
     );
 
     const renderSearchControlPane = useCallback(
       () => (
         <SearchControlPane
           label={<FormattedMessage id={labels.modal.searchResults} />}
-          subLabel={searchControlsSubLabel}
+          renderSubLabel={renderSearchControlsSubLabel}
+          segmentsConfig={segments.primary}
         />
       ),
-      [labels.modal.searchResults, searchControlsSubLabel],
+      [labels.modal.searchResults],
     );
 
     const loadMarcData = useCallback(

diff --git a/src/components/SearchControlPane/SearchControlPane.tsx b/src/components/SearchControlPane/SearchControlPane.tsx
@@ -1,22 +1,40 @@
 import { FC } from 'react';
+import { useRecoilValue } from 'recoil';
 import classNames from 'classnames';
 import { IS_EMBEDDED_MODE } from '@common/constants/build.constants';
+import { useSearchContext } from '@common/hooks/useSearchContext';
+import { SearchSegment } from '@common/constants/search.constants';
+import state from '@state';
 import './SearchControlPane.scss';
 
 type SearchControlPaneProps = {
   children?: ReactElement;
   label: string | ReactElement;
-  subLabel?: string | ReactElement;
+  segmentsConfig: PrimarySegmentsConfig;
+  renderSubLabel?: (count: number) => ReactElement;
   renderCloseButton?: () => ReactElement;
 };
 
-export const SearchControlPane: FC<SearchControlPaneProps> = ({ children, label, subLabel, renderCloseButton }) => {
+export const SearchControlPane: FC<SearchControlPaneProps> = ({
+  children,
+  label,
+  renderSubLabel,
+  renderCloseButton,
+  segmentsConfig,
+}) => {
+  const searchResultsMetadata = useRecoilValue(state.search.pageMetadata);
+  const { navigationSegment } = useSearchContext();
+  const selectedSegment = navigationSegment?.value;
+  const isVisibleSubLabel = segmentsConfig[selectedSegment as SearchSegment]?.isVisibleSubLabel;
+
   return (
     <div className={classNames(['search-control-pane', IS_EMBEDDED_MODE && 'search-control-pane-embedded'])}>
       {renderCloseButton?.()}
       <div className="search-control-pane-title">
         <div className="search-control-pane-mainLabel">{label}</div>
-        {subLabel && <div className="search-control-pane-subLabel">{subLabel}</div>}
+        {isVisibleSubLabel && !!renderSubLabel && (
+          <div className="search-control-pane-subLabel">{renderSubLabel?.(searchResultsMetadata?.totalElements)}</div>
+        )}
       </div>
       {children}
     </div>

diff --git a/src/configs/complexLookup/complexLookup.config.ts b/src/configs/complexLookup/complexLookup.config.ts
@@ -48,11 +48,13 @@ export const COMPLEX_LOOKUPS_CONFIG: ComplexLookupsConfig = {
           type: SearchSegment.Search,
           labelId: 'ld.search',
           isVisiblePaginationCount: true,
+          isVisibleSubLabel: true,
         },
         [SearchSegment.Browse]: {
           type: SearchSegment.Browse,
           labelId: 'ld.browse',
           isVisiblePaginationCount: false,
+          isVisibleSubLabel: false,
         },
       },
       defaultValues: {

diff --git a/src/types/complexLookup.d.ts b/src/types/complexLookup.d.ts
@@ -23,6 +23,7 @@ type SearchSegmentConfig = {
   type: SearchSegment;
   labelId: string;
   isVisiblePaginationCount?: boolean;
+  isVisibleSubLabel?: boolean;
 };
 
 type PrimarySegmentsConfig = { [key in SearchSegment]: SearchSegmentConfig };