feat: add jump to selected search result message

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -98,6 +98,19 @@ import {
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
 import { useThreadContext } from '../Threads';
 import { CHANNEL_CONTAINER_ID } from './constants';
+import {
+  DefaultSearchSources,
+  SearchControllerState,
+  SearchSource,
+} from '../Search/SearchController';
+import { useStateStore } from '../../store';
+
+const searchControllerStateSelector = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  Sources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
+>(
+  nextValue: SearchControllerState<StreamChatGenerics, Sources>,
+) => ({ jumpToMessageFromSearch: nextValue.focusedMessage });
 
 export type ChannelPropsForwardedToComponentContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -363,6 +376,7 @@ const ChannelInner = <
     customClasses,
     latestMessageDatesByChannels,
     mutes,
+    searchController,
   } = useChatContext<StreamChatGenerics>('Channel');
   const { t } = useTranslationContext('Channel');
   const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
@@ -387,12 +401,19 @@ const ChannelInner = <
     },
   );
 
+  const { jumpToMessageFromSearch } = useStateStore(
+    searchController.state,
+    searchControllerStateSelector,
+  );
+
   const isMounted = useIsMounted();
 
   const originalTitle = useRef('');
   const lastRead = useRef<Date | undefined>();
   const online = useRef(true);
 
+  const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const channelCapabilitiesArray = channel.data?.own_capabilities as string[];
 
   const throttledCopyStateFromChannel = throttle(
@@ -632,6 +653,38 @@ const ChannelInner = <
     if (message) dispatch({ message, type: 'setThread' });
   }, [state.messages, state.thread]);
 
+  const handleHighlightedMessageChange = useCallback(
+    ({
+      highlightDuration,
+      highlightedMessageId,
+    }: {
+      highlightedMessageId: string;
+      highlightDuration?: number;
+    }) => {
+      dispatch({
+        channel,
+        highlightedMessageId,
+        type: 'jumpToMessageFinished',
+      });
+      if (clearHighlightedMessageTimeoutId.current) {
+        clearTimeout(clearHighlightedMessageTimeoutId.current);
+      }
+      clearHighlightedMessageTimeoutId.current = setTimeout(() => {
+        if (searchController.state.getLatestValue().focusedMessage) {
+          searchController.state.partialNext({ focusedMessage: undefined });
+        }
+        clearHighlightedMessageTimeoutId.current = null;
+        dispatch({ type: 'clearHighlightedMessage' });
+      }, highlightDuration ?? DEFAULT_HIGHLIGHT_DURATION);
+    },
+    [channel, searchController],
+  );
+
+  useEffect(() => {
+    if (!jumpToMessageFromSearch?.id) return;
+    handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
+  }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
+
   /** MESSAGE */
 
   // Adds a temporary notification to message list, will be removed after 5 seconds
@@ -718,8 +771,6 @@ const ChannelInner = <
     return queryResponse.messages.length;
   };
 
-  const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
-
   const jumpToMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToMessage'] = useCallback(
     async (
       messageId,
@@ -730,22 +781,9 @@ const ChannelInner = <
       await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
 
       loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-      dispatch({
-        hasMoreNewer: channel.state.messagePagination.hasNext,
-        highlightedMessageId: messageId,
-        type: 'jumpToMessageFinished',
-      });
-
-      if (clearHighlightedMessageTimeoutId.current) {
-        clearTimeout(clearHighlightedMessageTimeoutId.current);
-      }
-
-      clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-        clearHighlightedMessageTimeoutId.current = null;
-        dispatch({ type: 'clearHighlightedMessage' });
-      }, highlightDuration);
+      handleHighlightedMessageChange({ highlightDuration, highlightedMessageId: messageId });
     },
-    [channel, loadMoreFinished],
+    [channel, handleHighlightedMessageChange, loadMoreFinished],
   );
 
   const jumpToLatestMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToLatestMessage'] = useCallback(async () => {
@@ -864,23 +902,19 @@ const ChannelInner = <
           first_unread_message_id: firstUnreadMessageId,
           last_read_message_id: lastReadMessageId,
         });
-
-      dispatch({
-        hasMoreNewer: channel.state.messagePagination.hasNext,
+      handleHighlightedMessageChange({
+        highlightDuration,
         highlightedMessageId: firstUnreadMessageId,
-        type: 'jumpToMessageFinished',
       });
-
-      if (clearHighlightedMessageTimeoutId.current) {
-        clearTimeout(clearHighlightedMessageTimeoutId.current);
-      }
-
-      clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-        clearHighlightedMessageTimeoutId.current = null;
-        dispatch({ type: 'clearHighlightedMessage' });
-      }, highlightDuration);
     },
-    [addNotification, channel, loadMoreFinished, t, channelUnreadUiState],
+    [
+      addNotification,
+      channel,
+      handleHighlightedMessageChange,
+      loadMoreFinished,
+      t,
+      channelUnreadUiState,
+    ],
   );
 
   const deleteMessage = useCallback(

src/components/Channel/channelState.ts

@@ -24,7 +24,7 @@ export type ChannelStateReducerAction<
       type: 'copyStateFromChannelOnEvent';
     }
   | {
-      hasMoreNewer: boolean;
+      channel: Channel<StreamChatGenerics>;
       highlightedMessageId: string;
       type: 'jumpToMessageFinished';
     }
@@ -160,8 +160,9 @@ export const channelReducer = <
     case 'jumpToMessageFinished': {
       return {
         ...state,
-        hasMoreNewer: action.hasMoreNewer,
+        hasMoreNewer: action.channel.state.messagePagination.hasNext,
         highlightedMessageId: action.highlightedMessageId,
+        messages: action.channel.state.messages,
       };
     }
 

src/components/Search/SearchController.ts

@@ -1,7 +1,7 @@
-import { StateStore } from 'stream-chat';
 import type {
   Channel,
   ChannelFilters,
+  MessageFilters,
   MessageResponse,
   SearchMessageSort,
   SearchOptions,
@@ -10,6 +10,7 @@ import type {
   UserResponse,
   UserSort,
 } from 'stream-chat';
+import { StateStore } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types';
 import debounce from 'lodash.debounce';
 import type { DebouncedFunc } from 'lodash';
@@ -248,12 +249,18 @@ export class MessageSearchSource<
 
   protected async query(searchQuery: string) {
     if (!this.client.userID) return { items: [] };
-    // @ts-ignore
+
     const channelFilters: ChannelFilters<StreamChatGenerics> = {
       members: { $in: [this.client.userID] },
-    };
-    const messageFilters = searchQuery;
+    } as ChannelFilters<StreamChatGenerics>;
+
+    const messageFilters: MessageFilters<StreamChatGenerics> = {
+      text: searchQuery,
+      type: 'regular', // todo: type: 'reply'
+    } as MessageFilters<StreamChatGenerics>;
+
     const sort: SearchMessageSort<StreamChatGenerics> = { created_at: -1 };
+
     const options = {
       limit: this.pageSize,
       next: this.next,
@@ -352,10 +359,13 @@ export type SearchControllerState<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   Sources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 > = {
-  isActive: boolean; // todo: cancel query execution
+  isActive: boolean;
   queriesInProgress: Array<Sources[number]['type']>;
   searchQuery: string;
   activeSource?: Sources[number];
+  // FIXME: focusedMessage should live in a MessageListController class that does not exist yet.
+  //  This state prop should be then removed
+  focusedMessage?: MessageResponse<StreamChatGenerics>;
   input?: HTMLInputElement;
 };
 

src/components/Search/SearchResults/SearchResultItem.tsx

@@ -2,18 +2,15 @@ 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,
-  ChannelPreviewMessenger,
-  useChannelPreviewInfo,
-} from '../../ChannelPreview';
+import { ChannelPreview } from '../../ChannelPreview';
 import { useChannelListContext, useChatContext, useSearchContext } from '../../../context';
 import type { DefaultStreamChatGenerics } from '../../../types';
 import type {
   DefaultSearchSources,
   InferSearchQueryResult,
   SearchSource,
 } from '../SearchController';
+import { DEFAULT_JUMP_TO_PAGE_SIZE } from '../../../constants/limits';
 
 export type ChannelSearchResultItemProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -44,12 +41,13 @@ export type ChannelByMessageSearchResultItemProps<
 };
 
 export const MessageSearchResultItem = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  SearchSources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 >({
   item,
 }: ChannelByMessageSearchResultItemProps<StreamChatGenerics>) => {
-  const { client } = useChatContext<StreamChatGenerics>();
-  const { setActiveChannel } = useChatContext<StreamChatGenerics>();
+  const { client, searchController } = useChatContext<StreamChatGenerics, SearchSources>();
+  const { channel: activeChannel, setActiveChannel } = useChatContext<StreamChatGenerics>();
   const { setChannels } = useChannelListContext<StreamChatGenerics>();
 
   const channel = useMemo(() => {
@@ -59,28 +57,29 @@ export const MessageSearchResultItem = <
     return client.channel(type, id);
   }, [client, item]);
 
-  const onSelect = useCallback(() => {
+  const onSelect = useCallback(async () => {
     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 });
     setActiveChannel(channel);
     setChannels?.((channels) => uniqBy([channel, ...channels], 'cid'));
-    // todo: jumpToMessage
-  }, [channel, setActiveChannel, setChannels]);
+  }, [channel, item, searchController, setActiveChannel, setChannels]);
 
-  const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
-    channel,
-  });
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const getLatestMessagePreview = useCallback(() => item.text!, [item]);
 
   if (!channel) return;
 
   return (
-    <ChannelPreviewMessenger
+    <ChannelPreview
+      active={
+        channel.cid === activeChannel?.cid &&
+        item.id === searchController.state.getLatestValue().focusedMessage?.id
+      }
       channel={channel}
       className='str-chat__search-result'
-      displayImage={displayImage}
-      displayTitle={displayTitle}
-      groupChannelDisplayInfo={groupChannelDisplayInfo}
-      latestMessagePreview={item.text}
+      getLatestMessagePreview={getLatestMessagePreview}
       onSelect={onSelect}
     />
   );