feat: add search source list footer and search source results header

Author: MartinCupela

src/components/Chat/Chat.tsx

@@ -35,10 +35,11 @@ export type ChatPropsForwardedToComponentContext<
   | 'SearchBar'
   | 'SearchResults'
   | 'SearchResultsHeader'
-  | 'SearchSourceEmptyResults'
+  | 'SearchSourceResultsEmpty'
+  | 'SearchSourceResultsHeader'
   | 'SearchSourceLoadingResults'
   | 'SearchSourceResultList'
-  | 'SearchSourceResultListEnd'
+  | 'SearchSourceResultListFooter'
   | 'SearchSourceResults'
   | 'SearchResultsPresearch'
 >;
@@ -194,11 +195,12 @@ export const Chat = <
       SearchResults: props.SearchResults,
       SearchResultsHeader: props.SearchResultsHeader,
       SearchResultsPresearch: props.SearchResultsPresearch,
-      SearchSourceEmptyResults: props.SearchSourceEmptyResults,
       SearchSourceLoadingResults: props.SearchSourceLoadingResults,
       SearchSourceResultList: props.SearchSourceResultList,
-      SearchSourceResultListEnd: props.SearchSourceResultListEnd,
+      SearchSourceResultListFooter: props.SearchSourceResultListFooter,
       SearchSourceResults: props.SearchSourceResults,
+      SearchSourceResultsEmpty: props.SearchSourceResultsEmpty,
+      SearchSourceResultsHeader: props.SearchSourceResultsHeader,
       SendButton: props.SendButton,
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       ThreadHead: props.ThreadHead,
@@ -261,12 +263,13 @@ export const Chat = <
       props.SearchBar,
       props.SearchResults,
       props.SearchResultsHeader,
-      props.SearchSourceEmptyResults,
+      props.SearchResultsPresearch,
       props.SearchSourceLoadingResults,
       props.SearchSourceResultList,
-      props.SearchSourceResultListEnd,
+      props.SearchSourceResultListFooter,
       props.SearchSourceResults,
-      props.SearchResultsPresearch,
+      props.SearchSourceResultsEmpty,
+      props.SearchSourceResultsHeader,
       props.SendButton,
       props.StartRecordingAudioButton,
       props.ThreadHead,

src/components/InfiniteScrollPaginator/InfiniteScrollPaginator.tsx

@@ -15,6 +15,7 @@ const mousewheelListener = (event: Event) => {
 
 export type InfiniteScrollPaginatorProps = React.ComponentProps<'div'> & {
   listenToScroll?: (distanceFromBottom: number, distanceFromTop: number, threshold: number) => void;
+  loadNextDebounceMs?: number;
   loadNextOnScrollToBottom?: () => void;
   loadNextOnScrollToTop?: () => void;
   /** Offset from when to start the loadNextPage call */
@@ -26,6 +27,7 @@ export const InfiniteScrollPaginator = (props: PropsWithChildren<InfiniteScrollP
   const {
     children,
     listenToScroll,
+    loadNextDebounceMs = 500,
     loadNextOnScrollToBottom,
     loadNextOnScrollToTop,
     threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD,
@@ -60,8 +62,14 @@ export const InfiniteScrollPaginator = (props: PropsWithChildren<InfiniteScrollP
         if (distanceFromBottom < Number(threshold)) {
           loadNextOnScrollToBottom?.();
         }
-      }, 500),
-    [listenToScroll, loadNextOnScrollToBottom, loadNextOnScrollToTop, threshold],
+      }, loadNextDebounceMs),
+    [
+      listenToScroll,
+      loadNextDebounceMs,
+      loadNextOnScrollToBottom,
+      loadNextOnScrollToTop,
+      threshold,
+    ],
   );
 
   useEffect(() => {

src/context/ComponentContext.tsx

@@ -52,9 +52,9 @@ import {
 import {
   SearchProps,
   SearchResultsPresearchProps,
-  SearchSourceEmptyResultsProps,
-  SearchSourceResultListEndProps,
+  SearchSourceResultListFooterProps,
   SearchSourceResultListProps,
+  SearchSourceResultsEmptyProps,
 } from '../experimental';
 
 import type {
@@ -64,6 +64,7 @@ import type {
   UnknownType,
 } from '../types/types';
 import type { DefaultSearchSources, SearchSource } from '../experimental/Search/SearchController';
+import { SearchSourceResultsHeaderProps } from '../experimental/Search/SearchResults/SearchSourceResultsHeader';
 
 export type ComponentContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -185,18 +186,20 @@ export type ComponentContextValue<
   SearchResultsPresearch?: React.ComponentType<
     SearchResultsPresearchProps<StreamChatGenerics, SearchSources>
   >;
-  /** Custom component to display the search source results UI with 0 items found, defaults to and accepts same props as: [SearchSourceEmptyResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceEmptyResults.tsx) */
-  SearchSourceEmptyResults?: React.ComponentType<SearchSourceEmptyResultsProps>;
   /** Custom component to display the search source results UI during the search query execution, defaults to and accepts same props as: [SearchSourceLoadingResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceLoadingResults.tsx) */
-  SearchSourceLoadingResults?: React.ComponentType<SearchSourceEmptyResultsProps>;
+  SearchSourceLoadingResults?: React.ComponentType<SearchSourceResultsEmptyProps>;
   /** Custom component to display the search source items results, defaults to and accepts same props as: [SearchSourceResultList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultList.tsx) */
   SearchSourceResultList?: React.ComponentType<
     SearchSourceResultListProps<StreamChatGenerics, SearchSources>
   >;
-  /** Custom component to indicate the end of the last page for a searched source, defaults to and accepts same props as: [SearchSourceResultListEnd](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultListEnd.tsx) */
-  SearchSourceResultListEnd?: React.ComponentType<SearchSourceResultListEndProps>;
+  /** Custom component to indicate the end of the last page for a searched source, defaults to and accepts same props as: [SearchSourceResultListFooter](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultListFooter.tsx) */
+  SearchSourceResultListFooter?: React.ComponentType<SearchSourceResultListFooterProps>;
   /** Custom UI component to display search results items for a given search source pane, defaults to and accepts same props as: [SearchSourceResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SourceSearchResults.tsx) */
   SearchSourceResults?: React.ComponentType;
+  /** Custom component to display the search source results UI with 0 items found, defaults to and accepts same props as: [SearchSourceResultsEmpty](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsEmpty.tsx) */
+  SearchSourceResultsEmpty?: React.ComponentType<SearchSourceResultsEmptyProps>;
+  /** Custom component to display the header content for a given search source results, no default component is provided. */
+  SearchSourceResultsHeader?: React.ComponentType<SearchSourceResultsHeaderProps>;
   /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
   SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;
   /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */

src/experimental/Search/SearchResults/SearchSourceResultList.tsx

@@ -1,8 +1,7 @@
 import React, { ComponentType, useCallback } from 'react';
 import { InfiniteScrollPaginator } from '../../../components/InfiniteScrollPaginator/InfiniteScrollPaginator';
 import { DefaultSearchResultItems, SearchResultItemComponents } from './SearchResultItem';
-import { SearchSourceLoadingResults as DefaultSearchSourceLoadingResults } from './SearchSourceLoadingResults';
-import { SearchSourceResultListEnd as DefaultSearchSourceResultListEnd } from './SearchSourceResultListEnd';
+import { SearchSourceResultListFooter as DefaultSearchSourceResultListFooter } from './SearchSourceResultListFooter';
 import { useComponentContext } from '../../../context';
 import type { DefaultSearchSources, SearchSource, SourceItemsRecord } from '../SearchController';
 import type { DefaultStreamChatGenerics } from '../../../types';
@@ -11,26 +10,25 @@ export type SearchSourceResultListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   Sources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 > = {
-  hasMore: boolean;
   searchSource: SearchSource;
-  isLoading?: boolean;
   items?: SourceItemsRecord<StreamChatGenerics, Sources>[Sources[number]['type']];
+  loadMoreDebounceMs?: number;
+  loadMoreThresholdPx?: number;
   SearchResultItems?: SearchResultItemComponents<Sources>;
 };
 
 export const SearchSourceResultList = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   SearchSources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 >({
-  hasMore,
-  isLoading,
   items,
+  loadMoreThresholdPx = 80,
+  loadMoreDebounceMs = 100,
   searchSource,
   SearchResultItems = DefaultSearchResultItems as SearchResultItemComponents<SearchSources>,
 }: SearchSourceResultListProps<StreamChatGenerics, SearchSources>) => {
   const {
-    SearchSourceLoadingResults = DefaultSearchSourceLoadingResults,
-    SearchSourceResultListEnd = DefaultSearchSourceResultListEnd,
+    SearchSourceResultListFooter = DefaultSearchSourceResultListFooter,
   } = useComponentContext<StreamChatGenerics, NonNullable<unknown>, SearchSources>();
   const loadMore = useCallback(() => searchSource.search(), [searchSource]);
   const SearchResultItem = SearchResultItems[
@@ -41,12 +39,15 @@ export const SearchSourceResultList = <
 
   return (
     <div className='str-chat__search-source-result-list'>
-      <InfiniteScrollPaginator loadNextOnScrollToBottom={loadMore} threshold={40}>
+      <InfiniteScrollPaginator
+        loadNextDebounceMs={loadMoreDebounceMs}
+        loadNextOnScrollToBottom={loadMore}
+        threshold={loadMoreThresholdPx}
+      >
         {items?.map((item, i) => (
-          <SearchResultItem item={item} key={`source-search-result-${searchSource}-${i}`} />
+          <SearchResultItem item={item} key={`source-search-result-${searchSource.type}-${i}`} />
         ))}
-        {isLoading && <SearchSourceLoadingResults searchSource={searchSource} />}
-        {!hasMore && <SearchSourceResultListEnd searchSource={searchSource} />}
+        <SearchSourceResultListFooter searchSource={searchSource} />
       </InfiniteScrollPaginator>
     </div>
   );

src/experimental/Search/SearchResults/SearchSourceResultListEnd.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { DefaultSearchSources, SearchSource, SearchSourceState } from '../SearchController';
+import { SearchSourceLoadingResults as DefaultSearchSourceLoadingResults } from './SearchSourceLoadingResults';
+import { useComponentContext, useTranslationContext } from '../../../context';
+import { useStateStore } from '../../../store';
+import type { DefaultStreamChatGenerics } from '../../../types';
+
+const searchSourceStateSelector = (value: SearchSourceState) => ({
+  hasMore: value.hasMore,
+  isLoading: value.isLoading,
+});
+
+export type SearchSourceResultListFooterProps = {
+  searchSource: SearchSource;
+};
+
+export const SearchSourceResultListFooter = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  SearchSources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
+>({
+  searchSource,
+}: SearchSourceResultListFooterProps) => {
+  const { t } = useTranslationContext();
+  const { SearchSourceLoadingResults = DefaultSearchSourceLoadingResults } = useComponentContext<
+    StreamChatGenerics,
+    NonNullable<unknown>,
+    SearchSources
+  >();
+  const { hasMore, isLoading } = useStateStore(searchSource.state, searchSourceStateSelector);
+
+  return (
+    <div className='str-chat__search-source-result-list__footer'>
+      {isLoading ? (
+        <SearchSourceLoadingResults searchSource={searchSource} />
+      ) : !hasMore ? (
+        <div className='str-chat__search-source-results---empty'>
+          {t<string>('All results loaded')}
+        </div>
+      ) : null}
+    </div>
+  );
+};

src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { SearchSourceEmptyResults as DefaultSearchSourceEmptyResults } from './SearchSourceEmptyResults';
 import { SearchSourceResultList as DefaultSearchSourceResultList } from './SearchSourceResultList';
+import { SearchSourceResultsEmpty as DefaultSearchSourceResultsEmpty } from './SearchSourceResultsEmpty';
+import { SearchSourceResultsHeader as DefaultSearchSourceResultsHeader } from './SearchSourceResultsHeader';
 import { useComponentContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import type { DefaultSearchSources, SearchSource, SearchSourceState } from '../SearchController';
@@ -20,22 +21,21 @@ export const SearchSourceResults = <
   searchSource,
 }: SearchSourceResultsProps) => {
   const {
-    SearchSourceEmptyResults = DefaultSearchSourceEmptyResults,
     SearchSourceResultList = DefaultSearchSourceResultList,
+    SearchSourceResultsEmpty = DefaultSearchSourceResultsEmpty,
+    SearchSourceResultsHeader = DefaultSearchSourceResultsHeader,
   } = useComponentContext<StreamChatGenerics, NonNullable<unknown>, SearchSources>();
-  const { hasMore, isLoading, items } = useStateStore(
-    searchSource.state,
-    searchSourceStateSelector,
-  );
+  const { isLoading, items } = useStateStore(searchSource.state, searchSourceStateSelector);
 
-  return !items && !isLoading ? null : items?.length || isLoading ? (
-    <SearchSourceResultList
-      hasMore={hasMore}
-      isLoading={isLoading}
-      items={items}
-      searchSource={searchSource}
-    />
-  ) : (
-    <SearchSourceEmptyResults searchSource={searchSource} />
+  if (!items && !isLoading) return null;
+  return (
+    <div className='str-chat__search-source-results'>
+      <SearchSourceResultsHeader searchSource={searchSource} />
+      {items?.length || isLoading ? (
+        <SearchSourceResultList items={items} searchSource={searchSource} />
+      ) : (
+        <SearchSourceResultsEmpty searchSource={searchSource} />
+      )}
+    </div>
   );
 };

src/experimental/Search/SearchResults/SearchSourceResults.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { SearchSource } from '../SearchController';
 import { useTranslationContext } from '../../../context';
 
-export type SearchSourceEmptyResultsProps = {
+export type SearchSourceResultsEmptyProps = {
   searchSource: SearchSource;
 };
 
-export const SearchSourceEmptyResults = () => {
+export const SearchSourceResultsEmpty = () => {
   const { t } = useTranslationContext();
   return (
-    <div className='str-chat__search-source-empty-results'>{t<string>('No results found')}</div>
+    <div className='str-chat__search-source-results-empty'>{t<string>('No results found')}</div>
   );
 };

…archResults/SearchSourceEmptyResults.tsx …archResults/SearchSourceResultsEmpty.tsxsrc/experimental/Search/SearchResults/SearchSourceEmptyResults.tsx renamed to src/experimental/Search/SearchResults/SearchSourceResultsEmpty.tsx src/experimental/Search/SearchResults/SearchSourceEmptyResults.tsx renamed to src/experimental/Search/SearchResults/SearchSourceResultsEmpty.tsx

@@ -0,0 +1,7 @@
+import type { SearchSource } from '../SearchController';
+
+export type SearchSourceResultsHeaderProps = {
+  searchSource: SearchSource;
+};
+
+export const SearchSourceResultsHeader = () => null;

src/experimental/Search/SearchResults/SearchSourceResultsHeader.tsx

@@ -2,8 +2,8 @@ export * from './SearchResultItem';
 export * from './SearchResults';
 export * from './SearchResultsHeader';
 export * from './SearchResultsPresearch';
-export * from './SearchSourceEmptyResults';
+export * from './SearchSourceResultsEmpty';
 export * from './SearchSourceLoadingResults';
 export * from './SearchSourceResultList';
-export * from './SearchSourceResultListEnd';
+export * from './SearchSourceResultListFooter';
 export * from './SearchSourceResults';