@sendbird/uikit-react-native 2.4.1 → 2.5.0-rc.0

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,20 +1,38 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing } from 'react-native';
 
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
-import { NOOP, PASS, SendbirdGroupChannel, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
+import {
+  NOOP,
+  PASS,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdUserMessage,
+  messageComparator,
+  useFreshCallback,
+  useRefTracker,
+} from '@sendbird/uikit-utils';
 
 import MessageRenderer from '../components/MessageRenderer';
 import NewMessagesButton from '../components/NewMessagesButton';
 import ScrollToBottomButton from '../components/ScrollToBottomButton';
 import StatusComposition from '../components/StatusComposition';
+import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../constants';
 import createGroupChannelModule from '../domain/groupChannel/module/createGroupChannelModule';
-import type { GroupChannelFragment, GroupChannelModule, GroupChannelProps } from '../domain/groupChannel/types';
+import type {
+  GroupChannelFragment,
+  GroupChannelModule,
+  GroupChannelProps,
+  GroupChannelPubSubContextPayload,
+} from '../domain/groupChannel/types';
 import { useSendbirdChat } from '../hooks/useContext';
+import pubsub from '../utils/pubsub';
 
 const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): GroupChannelFragment => {
   const GroupChannelModule = createGroupChannelModule(initModule);
 
   return ({
+    searchItem,
     renderNewMessagesButton = (props) => <NewMessagesButton {...props} />,
     renderScrollToBottomButton = (props) => <ScrollToBottomButton {...props} />,
     renderMessage,
@@ -38,30 +56,48 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
   }) => {
     const { sdk, currentUser } = useSendbirdChat();
 
+    const [internalSearchItem, setInternalSearchItem] = useState(searchItem);
+    const navigateFromMessageSearch = useCallback(() => Boolean(searchItem), []);
+
+    const [groupChannelPubSub] = useState(() => pubsub<GroupChannelPubSubContextPayload>());
+    const [scrolledAwayFromBottom, setScrolledAwayFromBottom] = useState(false);
+    const scrolledAwayFromBottomRef = useRefTracker(scrolledAwayFromBottom);
+
     const {
+      loading,
       messages,
-      nextMessages,
-      newMessagesFromMembers,
+      newMessages,
+      resetNewMessages,
       next,
       prev,
+      hasNext,
       sendFileMessage,
       sendUserMessage,
       updateFileMessage,
       updateUserMessage,
       resendMessage,
       deleteMessage,
-      loading,
+      resetWithStartingPoint,
     } = useGroupChannelMessages(sdk, channel, currentUser?.userId, {
       collectionCreator,
       queryCreator,
       sortComparator,
       onChannelDeleted,
       enableCollectionWithoutLocalCache: !queryCreator,
+      shouldCountNewMessages: () => scrolledAwayFromBottomRef.current,
+      onMessagesReceived(messages) {
+        groupChannelPubSub.publish({ type: 'MESSAGES_RECEIVED', data: { messages } });
+      },
+      startingPoint: internalSearchItem?.startingPoint,
     });
 
+    const MessageComponent: GroupChannelProps['MessageList']['renderMessage'] = useCallback(
+      withFocusingAnimation(renderMessage ? (props) => <>{renderMessage(props)}</> : MessageRenderer),
+      [renderMessage],
+    );
+
     const _renderMessage: GroupChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {
-      if (renderMessage) return renderMessage(props);
-      return <MessageRenderer {...props} />;
+      return <MessageComponent {...props} />;
     });
 
     const memoizedFlatListProps = useMemo(
@@ -70,19 +106,34 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
         contentContainerStyle: { flexGrow: 1 },
         ...flatListProps,
       }),
-      [loading, flatListProps],
+      [flatListProps],
     );
 
+    const onResetMessageList = useCallback((callback?: () => void) => {
+      resetWithStartingPoint(Number.MAX_SAFE_INTEGER, callback);
+      setInternalSearchItem(undefined);
+    }, []);
+
+    const onPending = (message: SendbirdFileMessage | SendbirdUserMessage) => {
+      groupChannelPubSub.publish({ type: 'MESSAGE_SENT_PENDING', data: { message } });
+    };
+
+    const onSent = (message: SendbirdFileMessage | SendbirdUserMessage) => {
+      groupChannelPubSub.publish({ type: 'MESSAGE_SENT_SUCCESS', data: { message } });
+    };
+
     const onPressSendUserMessage: GroupChannelProps['Input']['onPressSendUserMessage'] = useFreshCallback(
       async (params) => {
         const processedParams = await onBeforeSendUserMessage(params);
-        await sendUserMessage(processedParams);
+        const message = await sendUserMessage(processedParams, onPending);
+        onSent(message);
       },
     );
     const onPressSendFileMessage: GroupChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(
       async (params) => {
         const processedParams = await onBeforeSendFileMessage(params);
-        await sendFileMessage(processedParams);
+        const message = await sendFileMessage(processedParams, onPending);
+        onSent(message);
       },
     );
     const onPressUpdateUserMessage: GroupChannelProps['Input']['onPressUpdateUserMessage'] = useFreshCallback(
@@ -97,11 +148,16 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
         await updateFileMessage(message.messageId, processedParams);
       },
     );
+    const onScrolledAwayFromBottom = useFreshCallback((value: boolean) => {
+      if (!value) resetNewMessages();
+      setScrolledAwayFromBottom(value);
+    });
 
     /** @deprecated **/
     const onSendFileMessage: GroupChannelProps['Input']['onSendFileMessage'] = useFreshCallback(async (file) => {
       const processedParams = await onBeforeSendFileMessage({ file });
-      await sendFileMessage(processedParams);
+      const message = await sendFileMessage(processedParams, onPending);
+      onSent(message);
     });
     /** @deprecated **/
     const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(
@@ -112,7 +168,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
           mentionedMessageTemplate: mention?.messageTemplate,
           mentionType: mention?.type,
         });
-        await sendUserMessage(processedParams);
+        const message = await sendUserMessage(processedParams, onPending);
+        onSent(message);
       },
     );
     /** @deprecated **/
@@ -138,28 +195,39 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     return (
       <GroupChannelModule.Provider
         channel={channel}
+        groupChannelPubSub={groupChannelPubSub}
         enableTypingIndicator={enableTypingIndicator}
         keyboardAvoidOffset={keyboardAvoidOffset}
       >
-        <GroupChannelModule.Header onPressHeaderLeft={onPressHeaderLeft} onPressHeaderRight={onPressHeaderRight} />
+        <GroupChannelModule.Header
+          shouldHideRight={navigateFromMessageSearch}
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={onPressHeaderRight}
+        />
         <StatusComposition loading={loading} LoadingComponent={<GroupChannelModule.StatusLoading />}>
           <GroupChannelModule.MessageList
             channel={channel}
+            searchItem={internalSearchItem}
+            onResetMessageList={onResetMessageList}
             enableMessageGrouping={enableMessageGrouping}
             currentUserId={currentUser?.userId}
             renderMessage={_renderMessage}
             messages={messages}
-            nextMessages={nextMessages}
-            newMessagesFromMembers={newMessagesFromMembers}
+            newMessages={newMessages}
             onTopReached={prev}
             onBottomReached={next}
+            hasNext={hasNext}
+            scrolledAwayFromBottom={scrolledAwayFromBottom}
+            onScrolledAwayFromBottom={onScrolledAwayFromBottom}
             renderNewMessagesButton={renderNewMessagesButton}
             renderScrollToBottomButton={renderScrollToBottomButton}
             onResendFailedMessage={resendMessage}
             onDeleteMessage={deleteMessage}
-            onPressImageMessage={onPressImageMessage}
             onPressMediaMessage={onPressMediaMessage}
             flatListProps={memoizedFlatListProps}
+            nextMessages={newMessages}
+            newMessagesFromMembers={newMessages}
+            onPressImageMessage={onPressImageMessage}
           />
           <GroupChannelModule.Input
             SuggestedMentionList={GroupChannelModule.SuggestedMentionList}
@@ -187,4 +255,33 @@ function shouldRenderInput(channel: SendbirdGroupChannel) {
   return true;
 }
 
+function withFocusingAnimation<P extends unknown & { focused: boolean }>(Component: React.ComponentType<P>) {
+  return React.memo<P>((props) => {
+    const translateY = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      if (props.focused) {
+        setTimeout(() => {
+          Animated.sequence(
+            [
+              { toValue: -10, duration: 500 },
+              { toValue: 0, duration: 100 },
+              { toValue: -10, duration: 200 },
+              { toValue: 0, duration: 100 },
+            ].map((value) =>
+              Animated.timing(translateY, { ...value, useNativeDriver: true, easing: Easing.inOut(Easing.ease) }),
+            ),
+          ).start();
+        }, MESSAGE_SEARCH_SAFE_SCROLL_DELAY + MESSAGE_FOCUS_ANIMATION_DELAY);
+      }
+    }, [props.focused]);
+
+    return (
+      <Animated.View style={{ transform: [{ translateY }] }}>
+        <Component {...props} />
+      </Animated.View>
+    );
+  });
+}
+
 export default createGroupChannelFragment;

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -17,10 +17,17 @@ const RETURN_EMPTY_STRING = () => '';
 
 const createGroupChannelMembersFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
-): GroupChannelMembersFragment<SendbirdMember> => {
+): GroupChannelMembersFragment => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
-  return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    onPressHeaderRight,
+    renderUser,
+    sortComparator,
+    queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelMembersFragment');
 
     const refreshSchedule = useRef<NodeJS.Timeout>();
@@ -30,7 +37,8 @@ const createGroupChannelMembersFragment = (
     const { show } = useUserProfile();
 
     const { users, refresh, loading, next, error, upsertUser, deleteUser } = useUserList(sdk, {
-      queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
+      queryCreator,
+      sortComparator,
     });
 
     useChannelHandler(sdk, handlerId, {

package/src/fragments/createGroupChannelMutedMembersFragment.tsx

@@ -18,16 +18,19 @@ const createGroupChannelMutedMembersFragment = (
 ): GroupChannelMutedMembersFragment => {
   const GroupChannelMutedMembersModule = createGroupChannelMutedMembersModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft = NOOP,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createMutedUserListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelMutedMembersFragment');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {
-      queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(sdk, handlerId, {
       onUserMuted(eventChannel, user) {

package/src/fragments/createGroupChannelNotificationsFragment.tsx

@@ -13,12 +13,11 @@ const createGroupChannelNotificationsFragment = (
 ): GroupChannelNotificationsFragment => {
   const GroupChannelNotificationsModule = createGroupChannelNotificationsModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, children, channel }) => {
+  return ({ onPressHeaderLeft = NOOP, channel }) => {
     return (
       <GroupChannelNotificationsModule.Provider channel={channel}>
         <GroupChannelNotificationsModule.Header onPressHeaderLeft={onPressHeaderLeft} />
         <GroupChannelNotificationsModule.View />
-        {children}
       </GroupChannelNotificationsModule.Provider>
     );
   };

package/src/fragments/createGroupChannelOperatorsFragment.tsx

@@ -15,7 +15,13 @@ const createGroupChannelOperatorsFragment = (
 ): GroupChannelOperatorsFragment => {
   const GroupChannelOperatorsModule = createGroupChannelOperatorsModule(initModule);
 
-  return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    onPressHeaderRight,
+    renderUser,
+    queryCreator = () => channel.createOperatorListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelOperatorsFragment');
 
     const { STRINGS } = useLocalization();
@@ -23,9 +29,7 @@ const createGroupChannelOperatorsFragment = (
     const { openMenu } = useActionMenu();
     const { show } = useUserProfile();
 
-    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, {
-      queryCreator: () => channel.createOperatorListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(sdk, handlerId, {
       onUserLeft(eventChannel, user) {

package/src/fragments/createGroupChannelRegisterOperatorFragment.tsx

@@ -13,16 +13,20 @@ import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
 const createGroupChannelRegisterOperatorFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
-): GroupChannelRegisterOperatorFragment<SendbirdMember> => {
+): GroupChannelRegisterOperatorFragment => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
-  return ({ channel, onPressHeaderLeft, sortComparator, renderUser, onPressHeaderRight }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    sortComparator,
+    renderUser,
+    onPressHeaderRight,
+    queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
+  }) => {
     const { sdk, currentUser } = useSendbirdChat();
     const { STRINGS } = useLocalization();
-    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {
-      queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
-      sortComparator,
-    });
+    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, { queryCreator, sortComparator });
 
     const _renderUser: NonNullable<typeof renderUser> = useCallback(
       (user, selectedUsers, setSelectedUsers) => {

package/src/fragments/createGroupChannelSettingsFragment.tsx

@@ -18,6 +18,7 @@ const createGroupChannelSettingsFragment = (
     channel,
     onPressMenuModeration,
     onPressMenuMembers,
+    onPressMenuSearchInChannel,
     onPressMenuLeaveChannel,
     onPressMenuNotification,
     menuItemsCreator,
@@ -40,6 +41,7 @@ const createGroupChannelSettingsFragment = (
             menuItemsCreator={menuItemsCreator}
             onPressMenuModeration={onPressMenuModeration}
             onPressMenuMembers={onPressMenuMembers}
+            onPressMenuSearchInChannel={onPressMenuSearchInChannel}
             onPressMenuLeaveChannel={onPressMenuLeaveChannel}
             onPressMenuNotification={onPressMenuNotification}
           />

package/src/fragments/createMessageSearchFragment.tsx

@@ -0,0 +1,159 @@
+import React, { useRef, useState } from 'react';
+
+import { MessageSearchOrder } from '@sendbird/chat/message';
+import {
+  Logger,
+  NOOP,
+  SendbirdBaseMessage,
+  SendbirdChatSDK,
+  SendbirdGroupChannel,
+  SendbirdMessageSearchQuery,
+  useFreshCallback,
+  useSafeAreaPadding,
+} from '@sendbird/uikit-utils';
+
+import { MessageSearchResultItem } from '../components/MessageSearchResultItem';
+import StatusComposition from '../components/StatusComposition';
+import { createMessageSearchModule } from '../domain/messageSearch';
+import type { MessageSearchFragment, MessageSearchModule, MessageSearchProps } from '../domain/messageSearch/types';
+import { useSendbirdChat } from '../hooks/useContext';
+
+type DefaultMessageSearchQueryParams = {
+  keyword: string;
+  channelUrl: string;
+  messageTimestampFrom: number;
+  order: MessageSearchOrder;
+};
+
+type SearchQueryOptions = DefaultMessageSearchQueryParams & {
+  queryCreator?: (params: DefaultMessageSearchQueryParams) => SendbirdMessageSearchQuery;
+};
+
+function getMessageSearchQuery(sdk: SendbirdChatSDK, options: SearchQueryOptions) {
+  if (options.queryCreator) return options.queryCreator(options);
+  return sdk.createMessageSearchQuery(options);
+}
+
+const createMessageSearchFragment = (initModule?: Partial<MessageSearchModule>): MessageSearchFragment => {
+  const MessageSearchModule = createMessageSearchModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, channel, queryCreator, renderSearchResultItem, onPressSearchResultItem }) => {
+    const padding = useSafeAreaPadding(['left', 'right', 'bottom']);
+
+    const { sdk } = useSendbirdChat();
+    const { keyword, setKeyword, search, searchResults, loading, next, error, query } = useMessageSearch(sdk, {
+      channel,
+      queryCreator,
+    });
+
+    const renderItem: MessageSearchProps['List']['renderSearchResultItem'] = useFreshCallback((props) => {
+      if (renderSearchResultItem) return renderSearchResultItem(props);
+      return <MessageSearchResultItem {...props} />;
+    });
+
+    return (
+      <MessageSearchModule.Provider>
+        <MessageSearchModule.Header
+          keyword={keyword}
+          onChangeKeyword={setKeyword}
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={search}
+        />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<MessageSearchModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<MessageSearchModule.StatusError onPressRetry={search} />}
+        >
+          {query && (
+            <MessageSearchModule.List
+              channel={channel}
+              onPressSearchResultItem={onPressSearchResultItem}
+              messages={searchResults}
+              renderSearchResultItem={renderItem}
+              flatListProps={{
+                keyboardDismissMode: 'on-drag',
+                keyboardShouldPersistTaps: 'handled',
+                onEndReached: next,
+                ListEmptyComponent: MessageSearchModule.StatusEmpty,
+                contentContainerStyle: { flexGrow: 1, ...padding },
+              }}
+            />
+          )}
+        </StatusComposition>
+      </MessageSearchModule.Provider>
+    );
+  };
+};
+
+const useMessageSearch = (
+  sdk: SendbirdChatSDK,
+  { channel, queryCreator }: { channel: SendbirdGroupChannel; queryCreator: SearchQueryOptions['queryCreator'] },
+) => {
+  const [query, setQuery] = useState<SendbirdMessageSearchQuery>();
+  const [keyword, setKeyword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<unknown>(null);
+  const [searchResults, setSearchResults] = useState<SendbirdBaseMessage[]>([]);
+  const queryInProgress = useRef(false);
+
+  const search = useFreshCallback(async () => {
+    if (keyword.length <= 0) return;
+    if (queryInProgress.current) return;
+
+    const query = getMessageSearchQuery(sdk, {
+      keyword,
+      channelUrl: channel.url,
+      messageTimestampFrom: Math.max(channel.joinedAt, channel.invitedAt),
+      order: MessageSearchOrder.TIMESTAMP,
+      queryCreator,
+    });
+
+    setQuery(query);
+    setLoading(true);
+    setError(null);
+
+    try {
+      queryInProgress.current = true;
+      const result = await query.next();
+      setSearchResults(result);
+    } catch (err) {
+      Logger.warn('[MessageSearchFragment] search failure', err);
+      setError(err);
+    } finally {
+      queryInProgress.current = false;
+      setLoading(false);
+    }
+  });
+
+  const next = useFreshCallback(async () => {
+    if (!query?.hasNext) return;
+    if (queryInProgress.current) return;
+
+    try {
+      queryInProgress.current = true;
+      const result = await query.next();
+      setSearchResults((prev) => [...prev, ...result]);
+    } catch (err) {
+      Logger.warn('[MessageSearchFragment] next failure', err);
+      setError(err);
+    } finally {
+      queryInProgress.current = false;
+    }
+  });
+
+  return {
+    keyword,
+    setKeyword,
+
+    query,
+    loading,
+    error,
+    searchResults,
+
+    search,
+    next,
+  };
+};
+
+export default createMessageSearchFragment;

package/src/fragments/createOpenChannelBannedUsersFragment.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, useFreshCallback } from '@sendbird/uikit-utils';
+import { useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -18,14 +18,17 @@ const createOpenChannelBannedUsersFragment = (
 ): OpenChannelBannedUsersFragment => {
   const OpenChannelBannedUsersModule = createOpenChannelBannedUsersModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createBannedUserListQuery({ limit: 20 }),
+  }) => {
     const { STRINGS } = useLocalization();
     const { currentUser, sdk } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, {
-      queryCreator: () => channel.createBannedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, { queryCreator });
 
     const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
       if (renderUser) return renderUser(props);