feat: add SearchSourceResultsContext

Author: MartinCupela

src/context/ComponentContext.tsx

@@ -52,9 +52,7 @@ import {
 import {
   SearchProps,
   SearchResultsPresearchProps,
-  SearchSourceResultListFooterProps,
   SearchSourceResultListProps,
-  SearchSourceResultsEmptyProps,
 } from '../experimental';
 
 import type {
@@ -64,7 +62,6 @@ 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,
@@ -187,19 +184,19 @@ export type ComponentContextValue<
     SearchResultsPresearchProps<StreamChatGenerics, SearchSources>
   >;
   /** 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<SearchSourceResultsEmptyProps>;
+  SearchSourceLoadingResults?: React.ComponentType;
   /** 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: [SearchSourceResultListFooter](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultListFooter.tsx) */
-  SearchSourceResultListFooter?: React.ComponentType<SearchSourceResultListFooterProps>;
+  SearchSourceResultListFooter?: React.ComponentType;
   /** 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>;
+  SearchSourceResultsEmpty?: React.ComponentType;
   /** Custom component to display the header content for a given search source results, no default component is provided. */
-  SearchSourceResultsHeader?: React.ComponentType<SearchSourceResultsHeaderProps>;
+  SearchSourceResultsHeader?: 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) */
   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/SearchContext.tsx

@@ -30,7 +30,7 @@ export type SearchContextValue<
 export const SearchContext = createContext<SearchContextValue | undefined>(undefined);
 
 /**
- * Context provider for components rendered within the `ChannelSearch`
+ * Context provider for components rendered within the `Search` component
  */
 export const SearchContextProvider = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -51,14 +51,5 @@ export const useSearchContext = <
   Sources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 >() => {
   const contextValue = useContext(SearchContext);
-
-  if (!contextValue) {
-    console.warn(
-      `The useChannelSearchContext hook was called outside of the ChannelSearchContext provider. Make sure this hook is called within the ChannelSearch component.`,
-    );
-
-    return {} as SearchContextValue<StreamChatGenerics, Sources>;
-  }
-
   return (contextValue as unknown) as SearchContextValue<StreamChatGenerics, Sources>;
 };

src/experimental/Search/SearchResults/SearchSourceLoadingResults.tsx

@@ -1,14 +1,10 @@
 import React from 'react';
 import { useTranslationContext } from '../../../context';
-import { SearchSource } from '../SearchController';
+import { useSearchSourceResultsContext } from '../SearchSourceResultsContext';
 
-export type SearchSourceLoadingResultsProps = {
-  searchSource: SearchSource;
-};
-
-export const SearchSourceLoadingResults = ({ searchSource }: SearchSourceLoadingResultsProps) => {
+export const SearchSourceLoadingResults = () => {
   const { t } = useTranslationContext();
-
+  const { searchSource } = useSearchSourceResultsContext();
   return (
     <div
       className='str-chat__channel-search-container-searching'

src/experimental/Search/SearchResults/SearchSourceResultList.tsx

@@ -1,17 +1,21 @@
 import React, { ComponentType, useCallback } from 'react';
-import { InfiniteScrollPaginator } from '../../../components/InfiniteScrollPaginator/InfiniteScrollPaginator';
 import { DefaultSearchResultItems, SearchResultItemComponents } from './SearchResultItem';
 import { SearchSourceResultListFooter as DefaultSearchSourceResultListFooter } from './SearchSourceResultListFooter';
+import { useSearchSourceResultsContext } from '../SearchSourceResultsContext';
+import { InfiniteScrollPaginator } from '../../../components/InfiniteScrollPaginator/InfiniteScrollPaginator';
 import { useComponentContext } from '../../../context';
-import type { DefaultSearchSources, SearchSource, SourceItemsRecord } from '../SearchController';
+import { useStateStore } from '../../../store';
+import type { DefaultSearchSources, SearchSource, SearchSourceState } from '../SearchController';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
+const searchSourceStateSelector = (nextValue: SearchSourceState) => ({
+  items: nextValue.items,
+});
+
 export type SearchSourceResultListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   Sources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 > = {
-  searchSource: SearchSource;
-  items?: SourceItemsRecord<StreamChatGenerics, Sources>[Sources[number]['type']];
   loadMoreDebounceMs?: number;
   loadMoreThresholdPx?: number;
   SearchResultItems?: SearchResultItemComponents<Sources>;
@@ -21,16 +25,19 @@ export const SearchSourceResultList = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   SearchSources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 >({
-  items,
   loadMoreThresholdPx = 80,
   loadMoreDebounceMs = 100,
-  searchSource,
   SearchResultItems = DefaultSearchResultItems as SearchResultItemComponents<SearchSources>,
 }: SearchSourceResultListProps<StreamChatGenerics, SearchSources>) => {
   const {
     SearchSourceResultListFooter = DefaultSearchSourceResultListFooter,
   } = useComponentContext<StreamChatGenerics, NonNullable<unknown>, SearchSources>();
+
+  const { searchSource } = useSearchSourceResultsContext();
+  const { items } = useStateStore(searchSource.state, searchSourceStateSelector);
+
   const loadMore = useCallback(() => searchSource.search(), [searchSource]);
+
   const SearchResultItem = SearchResultItems[
     searchSource.type as SearchSources[number]['type']
   ] as ComponentType<{ item: unknown }>;
@@ -47,7 +54,7 @@ export const SearchSourceResultList = <
         {items?.map((item, i) => (
           <SearchResultItem item={item} key={`source-search-result-${searchSource.type}-${i}`} />
         ))}
-        <SearchSourceResultListFooter searchSource={searchSource} />
+        <SearchSourceResultListFooter />
       </InfiniteScrollPaginator>
     </div>
   );

src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { DefaultSearchSources, SearchSource, SearchSourceState } from '../SearchController';
 import { SearchSourceLoadingResults as DefaultSearchSourceLoadingResults } from './SearchSourceLoadingResults';
+import { useSearchSourceResultsContext } from '../SearchSourceResultsContext';
 import { useComponentContext, useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import type { DefaultStreamChatGenerics } from '../../../types';
@@ -10,28 +11,23 @@ const searchSourceStateSelector = (value: SearchSourceState) => ({
   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 { searchSource } = useSearchSourceResultsContext();
   const { hasMore, isLoading } = useStateStore(searchSource.state, searchSourceStateSelector);
 
   return (
     <div className='str-chat__search-source-result-list__footer'>
       {isLoading ? (
-        <SearchSourceLoadingResults searchSource={searchSource} />
+        <SearchSourceLoadingResults />
       ) : !hasMore ? (
         <div className='str-chat__search-source-results---empty'>
           {t<string>('All results loaded')}

src/experimental/Search/SearchResults/SearchSourceResults.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { SearchSourceResultList as DefaultSearchSourceResultList } from './SearchSourceResultList';
 import { SearchSourceResultsEmpty as DefaultSearchSourceResultsEmpty } from './SearchSourceResultsEmpty';
 import { SearchSourceResultsHeader as DefaultSearchSourceResultsHeader } from './SearchSourceResultsHeader';
+import { SearchSourceResultsContextProvider } from '../SearchSourceResultsContext';
 import { useComponentContext } from '../../../context';
 import { useStateStore } from '../../../store';
 import type { DefaultSearchSources, SearchSource, SearchSourceState } from '../SearchController';
@@ -14,6 +15,7 @@ const searchSourceStateSelector = (nextValue: SearchSourceState) => ({
 });
 
 export type SearchSourceResultsProps = { searchSource: SearchSource };
+
 export const SearchSourceResults = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   SearchSources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
@@ -28,14 +30,13 @@ export const SearchSourceResults = <
   const { isLoading, items } = useStateStore(searchSource.state, searchSourceStateSelector);
 
   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>
+    <SearchSourceResultsContextProvider value={{ searchSource }}>
+      <div className='str-chat__search-source-results'>
+        <SearchSourceResultsHeader />
+        {items?.length || isLoading ? <SearchSourceResultList /> : <SearchSourceResultsEmpty />}
+      </div>
+    </SearchSourceResultsContextProvider>
   );
 };

src/experimental/Search/SearchResults/SearchSourceResultsEmpty.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
-import { SearchSource } from '../SearchController';
 import { useTranslationContext } from '../../../context';
 
-export type SearchSourceResultsEmptyProps = {
-  searchSource: SearchSource;
-};
-
 export const SearchSourceResultsEmpty = () => {
   const { t } = useTranslationContext();
   return (

src/experimental/Search/SearchResults/SearchSourceResultsHeader.tsx

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

src/experimental/Search/SearchSourceResultsContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, PropsWithChildren, useContext } from 'react';
+import { SearchSource } from './SearchController';
+
+export type SearchSourceResultsContextValue = {
+  searchSource: SearchSource;
+};
+
+export const SearchSourceResultsContext = createContext<
+  SearchSourceResultsContextValue | undefined
+>(undefined);
+
+/**
+ * Context provider for components rendered within the `SearchSourceResults`
+ */
+export const SearchSourceResultsContextProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: SearchSourceResultsContextValue;
+}>) => (
+  <SearchSourceResultsContext.Provider
+    value={(value as unknown) as SearchSourceResultsContextValue}
+  >
+    {children}
+  </SearchSourceResultsContext.Provider>
+);
+
+export const useSearchSourceResultsContext = () => {
+  const contextValue = useContext(SearchSourceResultsContext);
+  return (contextValue as unknown) as SearchSourceResultsContextValue;
+};