refactor: move Search related components to experimental folder add SearchSourceResultListEnd

MartinCupela · MartinCupela · commit 12f43883fb7f · 2024-12-19T17:49:00.000+01:00
diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
@@ -78,6 +78,8 @@ import {
 } from './hooks/useChannelContainerClasses';
 import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
 import { getChannel } from '../../utils';
+import { useStateStore } from '../../store';
+import { CHANNEL_CONTAINER_ID } from './constants';
 
 import type { MessageInputProps } from '../MessageInput';
 
@@ -97,13 +99,11 @@ import {
 } from '../Attachment/attachment-sizing';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
 import { useThreadContext } from '../Threads';
-import { CHANNEL_CONTAINER_ID } from './constants';
-import {
+import type {
   DefaultSearchSources,
   SearchControllerState,
   SearchSource,
-} from '../Search/SearchController';
-import { useStateStore } from '../../store';
+} from '../../experimental/Search/SearchController';
 
 const searchControllerStateSelector = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
diff --git a/src/components/ChannelList/ChannelList.tsx b/src/components/ChannelList/ChannelList.tsx
@@ -32,17 +32,17 @@ import { NullComponent } from '../UtilityComponents';
 
 import { ChannelListContextProvider, useComponentContext } from '../../context';
 import { useChatContext } from '../../context/ChatContext';
+import { useStateStore } from '../../store';
 
 import type { Channel, ChannelFilters, ChannelOptions, ChannelSort, Event } from 'stream-chat';
 import type { ChannelAvatarProps } from '../Avatar';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { DefaultStreamChatGenerics, PaginatorProps } from '../../types/types';
-import { useStateStore } from '../../store';
-import {
+import type {
   DefaultSearchSources,
   SearchControllerState,
   SearchSource,
-} from '../Search/SearchController';
+} from '../../experimental/Search/SearchController';
 
 const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
@@ -22,7 +22,7 @@ import {
   SearchController,
   SearchSource,
   UserSearchSource,
-} from '../Search/SearchController';
+} from '../../experimental/Search/SearchController';
 
 export type ChatPropsForwardedToComponentContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -38,8 +38,9 @@ export type ChatPropsForwardedToComponentContext<
   | 'SearchSourceEmptyResults'
   | 'SearchSourceLoadingResults'
   | 'SearchSourceResultList'
+  | 'SearchSourceResultListEnd'
   | 'SearchSourceResults'
-  | 'SearchSourceResultsPresearch'
+  | 'SearchResultsPresearch'
 >;
 
 export type ChatProps<
@@ -112,6 +113,7 @@ export const Chat = <
   const searchController = useMemo(() => {
     if (customChannelSearchController) return customChannelSearchController;
     return new SearchController<StreamChatGenerics, SearchSources>({
+      config: { keepSingleActiveSource: false },
       sources: ([
         new UserSearchSource<StreamChatGenerics>(client),
         new ChannelSearchSource<StreamChatGenerics>(client),
@@ -191,11 +193,12 @@ export const Chat = <
       SearchBar: props.SearchBar,
       SearchResults: props.SearchResults,
       SearchResultsHeader: props.SearchResultsHeader,
+      SearchResultsPresearch: props.SearchResultsPresearch,
       SearchSourceEmptyResults: props.SearchSourceEmptyResults,
       SearchSourceLoadingResults: props.SearchSourceLoadingResults,
       SearchSourceResultList: props.SearchSourceResultList,
+      SearchSourceResultListEnd: props.SearchSourceResultListEnd,
       SearchSourceResults: props.SearchSourceResults,
-      SearchSourceResultsPresearch: props.SearchSourceResultsPresearch,
       SendButton: props.SendButton,
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       ThreadHead: props.ThreadHead,
@@ -261,8 +264,9 @@ export const Chat = <
       props.SearchSourceEmptyResults,
       props.SearchSourceLoadingResults,
       props.SearchSourceResultList,
+      props.SearchSourceResultListEnd,
       props.SearchSourceResults,
-      props.SearchSourceResultsPresearch,
+      props.SearchResultsPresearch,
       props.SendButton,
       props.StartRecordingAudioButton,
       props.ThreadHead,
diff --git a/src/components/Chat/hooks/useCreateChatContext.ts b/src/components/Chat/hooks/useCreateChatContext.ts
@@ -2,7 +2,10 @@ import { useMemo } from 'react';
 
 import type { ChatContextValue } from '../../../context/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import type { DefaultSearchSources, SearchSource } from '../../Search/SearchController';
+import type {
+  DefaultSearchSources,
+  SearchSource,
+} from '../../../experimental/Search/SearchController';
 
 export const useCreateChatContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -29,7 +29,6 @@ export * from './Modal';
 export * from './Poll';
 export * from './Reactions';
 export * from './SafeAnchor';
-export * from './Search';
 export * from './Thread';
 export * from './Tooltip';
 export * from './TypingIndicator';
diff --git a/src/context/ChatContext.tsx b/src/context/ChatContext.tsx
@@ -10,7 +10,7 @@ import {
   DefaultSearchSources,
   SearchController,
   SearchSource,
-} from '../components/Search/SearchController';
+} from '../experimental/Search/SearchController';
 
 type CSSClasses =
   | 'chat'
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
@@ -36,10 +36,6 @@ import {
   ReactionSelectorProps,
   ReactionsListProps,
   RecordingPermissionDeniedNotificationProps,
-  SearchProps,
-  SearchResultsPresearchProps,
-  SearchSourceEmptyResultsProps,
-  SearchSourceResultListProps,
   SendButtonProps,
   StartRecordingAudioButtonProps,
   SuggestionItemProps,
@@ -53,13 +49,21 @@ import {
   UnreadMessagesSeparatorProps,
 } from '../components';
 
+import {
+  SearchProps,
+  SearchResultsPresearchProps,
+  SearchSourceEmptyResultsProps,
+  SearchSourceResultListEndProps,
+  SearchSourceResultListProps,
+} from '../experimental';
+
 import type {
   CustomTrigger,
   DefaultStreamChatGenerics,
   PropsWithChildrenOnly,
   UnknownType,
 } from '../types/types';
-import type { DefaultSearchSources, SearchSource } from '../components/Search/SearchController';
+import type { DefaultSearchSources, SearchSource } from '../experimental/Search/SearchController';
 
 export type ComponentContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -189,6 +193,8 @@ export type ComponentContextValue<
   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 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 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) */
diff --git a/src/context/index.ts b/src/context/index.ts
@@ -1,6 +1,5 @@
 export * from './ChannelActionContext';
 export * from './ChannelListContext';
-export * from './SearchContext';
 export * from './ChannelStateContext';
 export * from './ChatContext';
 export * from './ComponentContext';
diff --git a/src/experimental/Search/Search.tsx b/src/experimental/Search/Search.tsx
@@ -4,7 +4,8 @@ import React from 'react';
 import { DefaultSearchSources, SearchControllerState, SearchSource } from './SearchController';
 import { SearchBar as DefaultSearchBar } from './SearchBar/SearchBar';
 import { SearchResults as DefaultSearchResults } from './SearchResults/SearchResults';
-import { SearchContextProvider, useChatContext, useComponentContext } from '../../context';
+import { SearchContextProvider } from './SearchContext';
+import { useChatContext, useComponentContext } from '../../context';
 import { useStateStore } from '../../store';
 
 import type { DefaultStreamChatGenerics } from '../../types';
diff --git a/src/experimental/Search/SearchBar/SearchBar.tsx b/src/experimental/Search/SearchBar/SearchBar.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { useCallback, useEffect } from 'react';
-import { useSearchContext, useTranslationContext } from '../../../context';
+import { useSearchContext } from '../SearchContext';
+import { useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import type { SearchControllerState } from '../SearchController';
 
diff --git a/src/experimental/Search/SearchBar/index.ts b/src/experimental/Search/SearchBar/index.ts
diff --git a/src/experimental/Search/SearchContext.tsx b/src/experimental/Search/SearchContext.tsx
@@ -1,10 +1,6 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
-import {
-  DefaultSearchSources,
-  SearchController,
-  SearchSource,
-} from '../components/Search/SearchController';
-import type { DefaultStreamChatGenerics } from '../types';
+import { DefaultSearchSources, SearchController, SearchSource } from './SearchController';
+import type { DefaultStreamChatGenerics } from '../../types';
 
 export type SearchContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
diff --git a/src/experimental/Search/SearchController.ts b/src/experimental/Search/SearchController.ts
@@ -1,14 +1,17 @@
 import debounce from 'lodash.debounce';
-import { ChannelOptions, ChannelSort, StateStore, UserOptions } from 'stream-chat';
+import { StateStore } from 'stream-chat';
 import type {
   Channel,
   ChannelFilters,
+  ChannelOptions,
+  ChannelSort,
   MessageFilters,
   MessageResponse,
   SearchMessageSort,
   SearchOptions,
   StreamChat,
   UserFilters,
+  UserOptions,
   UserResponse,
   UserSort,
 } from 'stream-chat';
@@ -176,7 +179,7 @@ export abstract class BaseSearchSource<T> implements SearchSource<T> {
     }
   }
 
-  async search(searchQuery?: string) {
+  search = async (searchQuery?: string) => {
     if (!this.isActive) return;
     const hasNewSearchQuery = typeof searchQuery !== 'undefined';
     const preventLoadMore =
@@ -194,9 +197,9 @@ export abstract class BaseSearchSource<T> implements SearchSource<T> {
 
     await new Promise((resolve) => {
       this.resolveDebouncedSearch = resolve;
-      this.searchDebounced(searchQuery);
+      this.searchDebounced(searchQuery ?? this.searchQuery);
     });
-  }
+  };
 
   resetState(stateOverrides?: Partial<SearchSourceState<T>>) {
     this.state.next({
diff --git a/src/experimental/Search/SearchResults/SearchResultItem.tsx b/src/experimental/Search/SearchResults/SearchResultItem.tsx
@@ -1,9 +1,10 @@
 import uniqBy from 'lodash.uniqby';
 import React, { ComponentType, useCallback, useMemo } from 'react';
 import { Channel, MessageResponse, User } from 'stream-chat';
-import { Avatar } from '../../Avatar';
-import { ChannelPreview } from '../../ChannelPreview';
-import { useChannelListContext, useChatContext, useSearchContext } from '../../../context';
+import { useSearchContext } from '../SearchContext';
+import { Avatar } from '../../../components/Avatar';
+import { ChannelPreview } from '../../../components/ChannelPreview';
+import { useChannelListContext, useChatContext } from '../../../context';
 import type { DefaultStreamChatGenerics } from '../../../types';
 import type {
   DefaultSearchSources,
diff --git a/src/experimental/Search/SearchResults/SearchResults.tsx b/src/experimental/Search/SearchResults/SearchResults.tsx
@@ -8,7 +8,8 @@ import type {
   SearchControllerState,
   SearchSource,
 } from '../SearchController';
-import { useComponentContext, useSearchContext, useTranslationContext } from '../../../context';
+import { useSearchContext } from '../SearchContext';
+import { useComponentContext, useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
diff --git a/src/experimental/Search/SearchResults/SearchResultsHeader.tsx b/src/experimental/Search/SearchResults/SearchResultsHeader.tsx
@@ -1,7 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
 import { DefaultSearchSources, SearchControllerState, SearchSource } from '../SearchController';
-import { useSearchContext, useTranslationContext } from '../../../context';
+import { useSearchContext } from '../SearchContext';
+import { useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
diff --git a/src/experimental/Search/SearchResults/SearchResultsPresearch.tsx b/src/experimental/Search/SearchResults/SearchResultsPresearch.tsx
diff --git a/src/experimental/Search/SearchResults/SearchSourceEmptyResults.tsx b/src/experimental/Search/SearchResults/SearchSourceEmptyResults.tsx
diff --git a/src/experimental/Search/SearchResults/SearchSourceLoadingResults.tsx b/src/experimental/Search/SearchResults/SearchSourceLoadingResults.tsx
diff --git a/src/experimental/Search/SearchResults/SearchSourceResultList.tsx b/src/experimental/Search/SearchResults/SearchSourceResultList.tsx
@@ -1,7 +1,8 @@
 import React, { ComponentType, useCallback } from 'react';
-import { InfiniteScrollPaginator } from '../../InfiniteScrollPaginator/InfiniteScrollPaginator';
+import { InfiniteScrollPaginator } from '../../../components/InfiniteScrollPaginator/InfiniteScrollPaginator';
 import { DefaultSearchResultItems, SearchResultItemComponents } from './SearchResultItem';
 import { SearchSourceLoadingResults as DefaultSearchSourceLoadingResults } from './SearchSourceLoadingResults';
+import { SearchSourceResultListEnd as DefaultSearchSourceResultListEnd } from './SearchSourceResultListEnd';
 import { useComponentContext } from '../../../context';
 import type { DefaultSearchSources, SearchSource, SourceItemsRecord } from '../SearchController';
 import type { DefaultStreamChatGenerics } from '../../../types';
@@ -10,6 +11,7 @@ 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']];
@@ -20,16 +22,16 @@ export const SearchSourceResultList = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   SearchSources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 >({
+  hasMore,
   isLoading,
   items,
   searchSource,
   SearchResultItems = DefaultSearchResultItems as SearchResultItemComponents<SearchSources>,
 }: SearchSourceResultListProps<StreamChatGenerics, SearchSources>) => {
-  const { SearchSourceLoadingResults = DefaultSearchSourceLoadingResults } = useComponentContext<
-    StreamChatGenerics,
-    NonNullable<unknown>,
-    SearchSources
-  >();
+  const {
+    SearchSourceLoadingResults = DefaultSearchSourceLoadingResults,
+    SearchSourceResultListEnd = DefaultSearchSourceResultListEnd,
+  } = useComponentContext<StreamChatGenerics, NonNullable<unknown>, SearchSources>();
   const loadMore = useCallback(() => searchSource.search(), [searchSource]);
   const SearchResultItem = SearchResultItems[
     searchSource.type as SearchSources[number]['type']
@@ -44,6 +46,7 @@ export const SearchSourceResultList = <
           <SearchResultItem item={item} key={`source-search-result-${searchSource}-${i}`} />
         ))}
         {isLoading && <SearchSourceLoadingResults searchSource={searchSource} />}
+        {!hasMore && <SearchSourceResultListEnd searchSource={searchSource} />}
       </InfiniteScrollPaginator>
     </div>
   );
diff --git a/src/experimental/Search/SearchResults/SearchSourceResultListEnd.tsx b/src/experimental/Search/SearchResults/SearchSourceResultListEnd.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { useTranslationContext } from '../../../context';
+import type { SearchSource } from '../SearchController';
+
+export type SearchSourceResultListEndProps = {
+  searchSource: SearchSource;
+};
+
+export const SearchSourceResultListEnd = () => {
+  const { t } = useTranslationContext();
+  return (
+    <div className='str-chat__search-source-empty-results'>{t<string>('All results loaded')}</div>
+  );
+};
diff --git a/src/experimental/Search/SearchResults/SearchSourceResults.tsx b/src/experimental/Search/SearchResults/SearchSourceResults.tsx
@@ -7,6 +7,7 @@ import type { DefaultSearchSources, SearchSource, SearchSourceState } from '../S
 import type { DefaultStreamChatGenerics } from '../../../types';
 
 const searchSourceStateSelector = (nextValue: SearchSourceState) => ({
+  hasMore: nextValue.hasMore,
   isLoading: nextValue.isLoading,
   items: nextValue.items,
 });
@@ -22,10 +23,18 @@ export const SearchSourceResults = <
     SearchSourceEmptyResults = DefaultSearchSourceEmptyResults,
     SearchSourceResultList = DefaultSearchSourceResultList,
   } = useComponentContext<StreamChatGenerics, NonNullable<unknown>, SearchSources>();
-  const { isLoading, items } = useStateStore(searchSource.state, searchSourceStateSelector);
+  const { hasMore, isLoading, items } = useStateStore(
+    searchSource.state,
+    searchSourceStateSelector,
+  );
 
   return !items && !isLoading ? null : items?.length || isLoading ? (
-    <SearchSourceResultList isLoading={isLoading} items={items} searchSource={searchSource} />
+    <SearchSourceResultList
+      hasMore={hasMore}
+      isLoading={isLoading}
+      items={items}
+      searchSource={searchSource}
+    />
   ) : (
     <SearchSourceEmptyResults searchSource={searchSource} />
   );
diff --git a/src/experimental/Search/SearchResults/index.ts b/src/experimental/Search/SearchResults/index.ts
@@ -5,4 +5,5 @@ export * from './SearchResultsPresearch';
 export * from './SearchSourceEmptyResults';
 export * from './SearchSourceLoadingResults';
 export * from './SearchSourceResultList';
+export * from './SearchSourceResultListEnd';
 export * from './SearchSourceResults';
diff --git a/src/experimental/Search/index.ts b/src/experimental/Search/index.ts
@@ -1,3 +1,4 @@
 export * from './Search';
 export * from './SearchBar';
+export * from './SearchContext';
 export * from './SearchResults';
diff --git a/src/experimental/index.ts b/src/experimental/index.ts
@@ -1 +1,2 @@
 export * from './MessageActions';
+export * from './Search';
