refactor: remove onSearch and onChange callbacks from Search props

Author: MartinCupela

src/components/ChannelList/ChannelList.tsx

@@ -227,10 +227,12 @@ const UnMemoizedChannelList = <
     useImageFlagEmojisOnWindows,
   } = useChatContext<StreamChatGenerics>('ChannelList');
   const { Search } = useComponentContext();
-  const { searchIsActive } = useStateStore(searchController.state, searchControllerStateSelector);
   const channelListRef = useRef<HTMLDivElement>(null);
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
   const [searchActive, setSearchActive] = useState(false);
+
+  // Indicator relevant when Search component that relies on SearchController is used
+  const { searchIsActive } = useStateStore(searchController.state, searchControllerStateSelector);
   /**
    * Set a channel with id {customActiveChannel} as active and move it to the top of the list.
    * If customActiveChannel prop is absent, then set the first channel in list as active channel.
@@ -388,12 +390,10 @@ const UnMemoizedChannelList = <
         {showChannelSearch &&
           (Search ? (
             <Search
+              directMessagingChannelType={additionalChannelSearchProps?.channelType}
               disabled={additionalChannelSearchProps?.disabled}
               exitSearchOnInputBlur={additionalChannelSearchProps?.clearSearchOnClickOutside}
-              inputOnChangeHandler={onSearch}
-              onSearchExit={onSearchExit}
               placeholder={additionalChannelSearchProps?.placeholder}
-              userToUserCreatedChannelType={additionalChannelSearchProps?.channelType}
             />
           ) : (
             <ChannelSearch

src/experimental/Search/Search.tsx

@@ -22,28 +22,22 @@ const searchControllerStateSelector = <
 
 // todo: rename all search components to Search only
 export type SearchProps = {
+  directMessagingChannelType?: string;
   /** Sets the input element into disabled state */
   disabled?: boolean;
   /** Clear search state / results on every click outside the search input, defaults to true */
   exitSearchOnInputBlur?: boolean;
-  /** Callback invoked with every search input change handler */
-  inputOnChangeHandler?: React.ChangeEventHandler<HTMLInputElement>;
-  /** Callback invoked when the search UI is deactivated */
-  onSearchExit?: () => void;
   /** Custom placeholder text to be displayed in the search input */
   placeholder?: string;
-  userToUserCreatedChannelType?: string;
 };
 
 export const Search = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >({
+  directMessagingChannelType = 'messaging',
   disabled,
   exitSearchOnInputBlur,
-  inputOnChangeHandler,
-  onSearchExit,
   placeholder,
-  userToUserCreatedChannelType = 'messaging',
 }: SearchProps) => {
   const {
     SearchBar = DefaultSearchBar,
@@ -60,13 +54,11 @@ export const Search = <
   return (
     <SearchContextProvider<StreamChatGenerics>
       value={{
+        directMessagingChannelType,
         disabled,
         exitSearchOnInputBlur,
-        inputOnChangeHandler,
-        onSearchExit,
         placeholder,
         searchController,
-        userToUserCreatedChannelType,
       }}
     >
       <div

src/experimental/Search/SearchBar/SearchBar.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import { useSearchContext } from '../SearchContext';
 import { useSearchQueriesInProgress } from '../hooks';
@@ -16,39 +16,28 @@ const searchControllerStateSelector = (nextValue: SearchControllerState) => ({
 
 export const SearchBar = () => {
   const { t } = useTranslationContext();
-  const {
-    disabled,
-    exitSearchOnInputBlur,
-    onSearchExit,
-    placeholder,
-    searchController,
-  } = useSearchContext();
+  const { disabled, exitSearchOnInputBlur, placeholder, searchController } = useSearchContext();
   const queriesInProgress = useSearchQueriesInProgress(searchController);
 
   const { input, isActive, searchQuery } = useStateStore(
     searchController.state,
     searchControllerStateSelector,
   );
 
-  const exitSearch = useCallback(() => {
-    searchController.exit();
-    onSearchExit?.();
-  }, [searchController, onSearchExit]);
-
   useEffect(() => {
     if (!input) return;
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         input.blur();
-        exitSearch();
+        searchController.exit();
       }
     };
 
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [exitSearch, input]);
+  }, [searchController, input]);
 
   return (
     <div className='str-chat__search-bar' data-testid='search-bar'>
@@ -63,7 +52,7 @@ export const SearchBar = () => {
           data-testid='search-input'
           disabled={disabled}
           onBlur={() => {
-            if (exitSearchOnInputBlur) exitSearch();
+            if (exitSearchOnInputBlur) searchController.exit();
           }}
           onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
             if (event.target.value) {
@@ -98,7 +87,7 @@ export const SearchBar = () => {
           data-testid='search-bar-button'
           onClick={() => {
             input?.blur();
-            exitSearch();
+            searchController.exit();
           }}
         >
           {t<string>('Cancel')}

src/experimental/Search/SearchContext.tsx

@@ -5,17 +5,13 @@ import type { DefaultStreamChatGenerics } from '../../types';
 export type SearchContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = {
-  searchController: SearchController<StreamChatGenerics>;
   /** The type of channel to create on user result select, defaults to `messaging` */
-  userToUserCreatedChannelType: string;
+  directMessagingChannelType: string;
+  searchController: SearchController<StreamChatGenerics>;
   /** Sets the input element into disabled state */
   disabled?: boolean;
   // /** Clear search state / results on every click outside the search input, defaults to true */
   exitSearchOnInputBlur?: boolean;
-  /** Search input change handler */
-  inputOnChangeHandler?: React.ChangeEventHandler<HTMLInputElement>;
-  /** Custom callback invoked when the search UI is deactivated */
-  onSearchExit?: () => void;
   // todo: document this is not available - better override search result item
   /** Custom handler function to run on search result item selection */
   // onSelectResult?: (

src/experimental/Search/SearchResults/SearchResultItem.tsx

@@ -100,16 +100,16 @@ export const UserSearchResultItem = <
 }: UserSearchResultItemProps<StreamChatGenerics>) => {
   const { client, setActiveChannel } = useChatContext<StreamChatGenerics>();
   const { setChannels } = useChannelListContext<StreamChatGenerics>();
-  const { userToUserCreatedChannelType } = useSearchContext<StreamChatGenerics>();
+  const { directMessagingChannelType } = useSearchContext<StreamChatGenerics>();
 
   const onClick = useCallback(() => {
-    const newChannel = client.channel(userToUserCreatedChannelType, {
+    const newChannel = client.channel(directMessagingChannelType, {
       members: [client.userID as string, item.id],
     });
     newChannel.watch();
     setActiveChannel(newChannel);
     setChannels?.((channels) => uniqBy([newChannel, ...channels], 'cid'));
-  }, [client, item, setActiveChannel, setChannels, userToUserCreatedChannelType]);
+  }, [client, item, setActiveChannel, setChannels, directMessagingChannelType]);
 
   return (
     <button

src/experimental/Search/__tests__/Search.test.js

@@ -24,12 +24,10 @@ describe('Search', () => {
   };
 
   const defaultProps = {
+    directMessagingChannelType: 'messaging',
     disabled: false,
     exitSearchOnInputBlur: true,
-    inputOnChangeHandler: jest.fn(),
-    onSearchExit: jest.fn(),
     placeholder: 'Search',
-    userToUserCreatedChannelType: 'messaging',
   };
 
   beforeEach(() => {
@@ -180,12 +178,12 @@ describe('Search', () => {
     expect(screen.getByTestId(SEARCH_TEST_ID)).toHaveClass('str-chat__search--active');
   });
 
-  it('uses default userToUserCreatedChannelType when not provided', () => {
-    const { userToUserCreatedChannelType, ...propsWithoutChannelType } = defaultProps;
+  it('uses default directMessagingChannelType when not provided', () => {
+    const { directMessagingChannelType, ...propsWithoutChannelType } = defaultProps;
 
     const ContextConsumer = () => {
       const context = React.useContext(jest.requireActual('../SearchContext').SearchContext);
-      return <div data-testid='channel-type'>{context.userToUserCreatedChannelType}</div>;
+      return <div data-testid='channel-type'>{context.directMessagingChannelType}</div>;
     };
     const SearchBar = () => <ContextConsumer />;
     useComponentContext.mockReturnValue({

src/experimental/Search/__tests__/SearchBar.test.js

@@ -28,7 +28,6 @@ describe('SearchBar', () => {
   const defaultProps = {
     disabled: false,
     exitSearchOnInputBlur: false,
-    onSearchExit: jest.fn(),
     placeholder: 'Custom placeholder',
     searchController: mockSearchController,
   };
@@ -148,7 +147,6 @@ describe('SearchBar', () => {
 
     expect(mockInput.blur).toHaveBeenCalledWith();
     expect(mockSearchController.exit).toHaveBeenCalledWith();
-    expect(defaultProps.onSearchExit).toHaveBeenCalledWith();
   });
 
   it('handles escape key press', () => {
@@ -165,7 +163,6 @@ describe('SearchBar', () => {
 
     expect(mockInput.blur).toHaveBeenCalledWith();
     expect(mockSearchController.exit).toHaveBeenCalledWith();
-    expect(defaultProps.onSearchExit).toHaveBeenCalledWith();
   });
 
   it('handles blur when exitSearchOnInputBlur is true', () => {
@@ -181,7 +178,6 @@ describe('SearchBar', () => {
     fireEvent.blur(input);
 
     expect(mockSearchController.exit).toHaveBeenCalledWith();
-    expect(defaultProps.onSearchExit).toHaveBeenCalledWith();
   });
 
   it('disables input when disabled prop is true', () => {

src/experimental/Search/__tests__/SearchResultItem.test.js

@@ -22,7 +22,7 @@ const CHANNEL_PREVIEW_BUTTON_TEST_ID = 'channel-preview-button';
 
 const mockSetActiveChannel = jest.fn().mockImplementation();
 const mockSetChannels = jest.fn().mockImplementation();
-const userToUserCreatedChannelType = 'X';
+const directMessagingChannelType = 'X';
 
 const renderComponent = async ({
   activeChannel,
@@ -63,7 +63,7 @@ const renderComponent = async ({
       }}
     >
       <ChannelListContextProvider value={{ setChannels: mockSetChannels }}>
-        <SearchContextProvider value={{ userToUserCreatedChannelType }}>
+        <SearchContextProvider value={{ directMessagingChannelType }}>
           <SearchResultItemComponent item={item} />
         </SearchContextProvider>
       </ChannelListContextProvider>