refactor: subscribe to search controller's internal state to watch focusedMessage value

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -63,7 +63,6 @@ import {
 import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
 import { useThreadContext } from '../Threads';
 import { getChannel } from '../../utils';
-import { useStateStore } from '../../store';
 
 import type {
   APIErrorResponse,
@@ -76,7 +75,6 @@ import type {
   EventAPIResponse,
   Message,
   MessageResponse,
-  SearchControllerState,
   SendMessageAPIResponse,
   Channel as StreamChannel,
   StreamChat,
@@ -99,12 +97,7 @@ import {
   getVideoAttachmentConfiguration,
 } from '../Attachment/attachment-sizing';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-
-const searchControllerStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
-  nextValue: SearchControllerState<StreamChatGenerics>,
-) => ({ jumpToMessageFromSearch: nextValue.focusedMessage });
+import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
 
 export type ChannelPropsForwardedToComponentContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -396,12 +389,7 @@ const ChannelInner = <
       loading: !channel.initialized,
     },
   );
-
-  const { jumpToMessageFromSearch } = useStateStore(
-    searchController.state,
-    searchControllerStateSelector,
-  );
-
+  const jumpToMessageFromSearch = useSearchFocusedMessage();
   const isMounted = useIsMounted();
 
   const originalTitle = useRef('');
@@ -666,8 +654,8 @@ const ChannelInner = <
         clearTimeout(clearHighlightedMessageTimeoutId.current);
       }
       clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-        if (searchController.state.getLatestValue().focusedMessage) {
-          searchController.state.partialNext({ focusedMessage: undefined });
+        if (searchController.internalState.getLatestValue().focusedMessage) {
+          searchController.internalState.partialNext({ focusedMessage: undefined });
         }
         clearHighlightedMessageTimeoutId.current = null;
         dispatch({ type: 'clearHighlightedMessage' });

src/components/ChannelList/ChannelList.tsx

@@ -41,11 +41,9 @@ const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
 const DEFAULT_SORT = {};
 
-const searchControllerStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
-  nextValue: SearchControllerState<StreamChatGenerics>,
-) => ({ searchIsActive: nextValue.isActive });
+const searchControllerStateSelector = (nextValue: SearchControllerState) => ({
+  searchIsActive: nextValue.isActive,
+});
 
 export type ChannelListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics

src/experimental/Search/Search.tsx

@@ -14,10 +14,8 @@ type SearchControllerStateSelectorReturnValue = {
   isActive: boolean;
 };
 
-const searchControllerStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
-  nextValue: SearchControllerState<StreamChatGenerics>,
+const searchControllerStateSelector = (
+  nextValue: SearchControllerState,
 ): SearchControllerStateSelectorReturnValue => ({ isActive: nextValue.isActive });
 
 export type SearchProps = {
@@ -46,7 +44,7 @@ export const Search = <
   const { searchController } = useChatContext<StreamChatGenerics>();
 
   const { isActive } = useStateStore<
-    SearchControllerState<StreamChatGenerics>,
+    SearchControllerState,
     SearchControllerStateSelectorReturnValue
   >(searchController.state, searchControllerStateSelector);
 

src/experimental/Search/SearchResults/SearchResultItem.tsx

@@ -63,7 +63,7 @@ export const MessageSearchResultItem = <
     if (!channel) return;
     await channel.state.loadMessageIntoState(item.id, undefined, DEFAULT_JUMP_TO_PAGE_SIZE);
     // FIXME: message focus should be handled by yet non-existent msg list controller in client packaged
-    searchController.state.partialNext({ focusedMessage: item });
+    searchController.internalState.partialNext({ focusedMessage: item });
     setActiveChannel(channel);
     setChannels?.((channels) => uniqBy([channel, ...channels], 'cid'));
   }, [channel, item, searchController, setActiveChannel, setChannels]);
@@ -77,7 +77,7 @@ export const MessageSearchResultItem = <
     <ChannelPreview
       active={
         channel.cid === activeChannel?.cid &&
-        item.id === searchController.state.getLatestValue().focusedMessage?.id
+        item.id === searchController.internalState.getLatestValue().focusedMessage?.id
       }
       channel={channel}
       className='str-chat__search-result'

src/experimental/Search/SearchResults/SearchResults.tsx

@@ -10,11 +10,7 @@ import { useStateStore } from '../../../store';
 import type { SearchControllerState } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
-const searchControllerStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
-  nextValue: SearchControllerState<StreamChatGenerics>,
-) => ({
+const searchControllerStateSelector = (nextValue: SearchControllerState) => ({
   activeSources: nextValue.sources.filter((s) => s.isActive),
   isActive: nextValue.isActive,
   searchQuery: nextValue.searchQuery,

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

@@ -119,7 +119,7 @@ describe('SearchResultItem Components', () => {
         fireEvent.click(screen.getByTestId(CHANNEL_PREVIEW_BUTTON_TEST_ID));
       });
 
-      expect(searchController.state.getLatestValue().focusedMessage).toStrictEqual(
+      expect(searchController.internalState.getLatestValue().focusedMessage).toStrictEqual(
         messageResponseData,
       );
       expect(mockSetActiveChannel.mock.calls[0][0].id).toBe(messageResponseData.channel.id);

src/experimental/Search/hooks/index.ts

@@ -1 +1,2 @@
+export * from './useSearchFocusedMessage';
 export * from './useSearchQueriesInProgress';

src/experimental/Search/hooks/useSearchFocusedMessage.ts

@@ -0,0 +1,22 @@
+import type { DefaultStreamChatGenerics } from '../../../types';
+import type { InternalSearchControllerState } from 'stream-chat';
+import { useChatContext } from '../../../context';
+import { useStateStore } from '../../../store';
+
+const searchControllerStateSelector = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>(
+  nextValue: InternalSearchControllerState<StreamChatGenerics>,
+) => ({ focusedMessage: nextValue.focusedMessage });
+
+export const useSearchFocusedMessage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>() => {
+  const { searchController } = useChatContext<StreamChatGenerics>('Channel');
+  const { focusedMessage } = useStateStore(
+    searchController.internalState,
+    searchControllerStateSelector,
+  );
+
+  return focusedMessage;
+};

src/experimental/Search/hooks/useSearchQueriesInProgress.ts

@@ -5,11 +5,7 @@ import { useStateStore } from '../../../store';
 import type { SearchController, SearchControllerState, SearchSource } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types';
 
-const searchControllerStateSelector = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
-  value: SearchControllerState<StreamChatGenerics>,
-) => ({
+const searchControllerStateSelector = (value: SearchControllerState) => ({
   sources: value.sources,
 });