Handle Paginated Endpoint for Search Functionality (#503)

* Add PaperComponent prop to ElementSearchInput

---------

Signed-off-by: LE SAULNIER Kevin <[email protected]>
Co-authored-by: LE SAULNIER Kevin <[email protected]>
Co-authored-by: jamal-khey <[email protected]>

Author: 3 people

src/components/ElementSearchDialog/element-search-input.tsx

@@ -20,7 +20,13 @@ export type RenderElementProps<T> = HTMLAttributes<HTMLLIElement> & {
 export interface ElementSearchInputProps<T>
     extends Pick<
         AutocompleteProps<T, false, boolean, true>,
-        'sx' | 'size' | 'loadingText' | 'loading' | 'disableClearable'
+        | 'sx'
+        | 'size'
+        | 'loadingText'
+        | 'loading'
+        | 'disableClearable'
+        | 'getOptionDisabled'
+        | 'PaperComponent'
     > {
     searchTerm: string;
     onSearchTermChange: (searchTerm: string) => void;
@@ -38,7 +44,9 @@ export interface ElementSearchInputProps<T>
     showResults?: boolean;
 }
 
-export function ElementSearchInput<T>(props: ElementSearchInputProps<T>) {
+export function ElementSearchInput<T>(
+    props: Readonly<ElementSearchInputProps<T>>
+) {
     const {
         elementsFound,
         loading,
@@ -56,6 +64,7 @@ export function ElementSearchInput<T>(props: ElementSearchInputProps<T>) {
         size,
         sx,
         disableClearable,
+        PaperComponent,
     } = props;
 
     const intl = useIntl();
@@ -131,6 +140,7 @@ export function ElementSearchInput<T>(props: ElementSearchInputProps<T>) {
                 return option === value;
             }}
             disabled={searchTermDisabled}
+            PaperComponent={PaperComponent}
         />
     );
 }

src/components/ElementSearchDialog/index.ts

@@ -9,3 +9,4 @@ export { default as TagRenderer } from './tag-renderer';
 export type { TagRendererProps } from './tag-renderer';
 export { ElementSearchInput } from './element-search-input';
 export { default as useElementSearch } from './use-element-search';
+export type { Paginated } from './use-element-search';

src/components/ElementSearchDialog/use-element-search.tsx

@@ -11,17 +11,43 @@ import { useSnackMessage } from '../../hooks/useSnackMessage';
 
 const SEARCH_FETCH_TIMEOUT_MILLIS = 1000;
 
+export type Paginated<T> = {
+    content: T[];
+    totalPages: number;
+    totalElements: number;
+    last: boolean;
+    size: number;
+    number: number;
+    sort: {
+        sorted: boolean;
+        unsorted: boolean;
+        empty: boolean;
+    };
+    first: boolean;
+    numberOfElements: number;
+    empty: boolean;
+};
+
 interface UseElementSearch<T> {
-    fetchElements: (newSearchTerm: string) => Promise<T[]>;
+    fetchElements: (newSearchTerm: string) => Promise<Paginated<T> | T[]>;
 }
 
-const useElementSearch = <T,>(props: UseElementSearch<T>) => {
+const useElementSearch = <T,>(
+    props: UseElementSearch<T>
+): {
+    searchTerm: string;
+    updateSearchTerm: (newSearchTerm: string) => void;
+    elementsFound: T[];
+    isLoading: boolean;
+    totalElements: number;
+} => {
     const { fetchElements } = props;
 
     const { snackError } = useSnackMessage();
     const [isLoading, setIsLoading] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
-    const [elementsFound, setElementsFound] = useState<T[]>([]);
+    const [elementsFound, setElementsFound] = useState<T[]>([] as T[]);
+    const [totalElements, setTotalElements] = useState(0);
     const lastSearchTermRef = useRef('');
 
     const searchMatchingElements = useCallback(
@@ -31,17 +57,25 @@ const useElementSearch = <T,>(props: UseElementSearch<T>) => {
             }
 
             lastSearchTermRef.current = newSearchTerm;
+
             fetchElements(newSearchTerm)
                 .then((infos) => {
                     if (newSearchTerm === lastSearchTermRef.current) {
-                        setElementsFound(infos);
+                        if (Array.isArray(infos)) {
+                            setElementsFound(infos);
+                            setTotalElements(infos.length);
+                        } else {
+                            setElementsFound(infos.content);
+                            setTotalElements(infos.totalElements);
+                        }
                         setIsLoading(false);
                     } // else ignore results of outdated fetch
                 })
                 .catch((error) => {
                     // else ignore errors of outdated fetch if changing "isLoading state"
                     if (newSearchTerm === lastSearchTermRef.current) {
                         setElementsFound([]);
+                        setTotalElements(0);
                         setIsLoading(false);
                         snackError({
                             messageTxt: error.message,
@@ -50,7 +84,7 @@ const useElementSearch = <T,>(props: UseElementSearch<T>) => {
                     }
                 });
         },
-        [snackError, fetchElements]
+        [fetchElements, snackError]
     );
 
     const debouncedSearchMatchingElements = useDebounce(
@@ -66,6 +100,7 @@ const useElementSearch = <T,>(props: UseElementSearch<T>) => {
             // still debouncing to cancel previous call, otherwise last call will still trigger
             if (newSearchTerm.length === 0) {
                 setElementsFound([]);
+                setTotalElements(0);
                 setIsLoading(false);
             } else {
                 setIsLoading(true);
@@ -76,7 +111,13 @@ const useElementSearch = <T,>(props: UseElementSearch<T>) => {
         [debouncedSearchMatchingElements]
     );
 
-    return { searchTerm, updateSearchTerm, elementsFound, isLoading };
+    return {
+        searchTerm,
+        updateSearchTerm,
+        elementsFound,
+        isLoading,
+        totalElements,
+    };
 };
 
 export default useElementSearch;

src/index.ts

@@ -179,6 +179,7 @@ export {
     ElementSearchInput,
     useElementSearch,
 } from './components/ElementSearchDialog';
+export type { Paginated } from './components/ElementSearchDialog';
 export type { TagRendererProps } from './components/ElementSearchDialog';
 export { EquipmentItem } from './components/ElementSearchDialog/equipment-item';
 export { default as CardErrorBoundary } from './components/CardErrorBoundary';