[UIKIT-1882] Fix/war room (#27)

* fix(core): usePushTokenRegistration param

* fix(core): changed onPressImageMessage prop of GroupChannel as optional

* fix(core): added channel no members string

* fix(sample): auto sign-in without screen transition

* enhancement(core): added action menu error toast

* fix(core): cannot detect proper scroll position on the GroupChannel message list

* fix(core): receive new messages separately

* fix(core): scroll to bottom without animation

* fix(uikit): file message layout

* fix(chat-hook): use collection default options

* fix(chat-hooks): always use active channel on business logic

* chore(uikit): SendbirdUIKitContainer provider re-ordered

* fix(utils): sort messages by sending status

* fix(core): GroupChannel typing indicator status

* fix(uikit): changed default create params in GroupChannelCreate

* fix(uikit): ui styles

* fix(core): remove openLimitedPhotoLibraryPicker from NativeFileService

* fix(foundation): show default Avatar when image uri is invalid

* fix(uikit): changed default long press delay

* fix(uikit): remove currentUser from user list of GroupChannelCreate

* chore: update peer dependencies

* fix(uikit): read receipt component

* enhancement(core): improvement cover url logic, implement chat helper funcs

* fix(core): update strings

* fix(core): clear cache on leave channel temporary

* fix(core): send button display with trim

* feat(core): implement status module component

* feat(foundation): added pared text url regex cases

* fix(core): scroll error on UserListList

* fix(core): changed NativeFileService file system module

* skip: apply lint

* skip: fix build issue

* skip: update README.md

Author: bang9

packages/uikit-chat-hooks/package.json

@@ -49,11 +49,6 @@
     "react": ">=16.13.1",
     "sendbird": "^3.1.16"
   },
-  "peerDependenciesMeta": {
-    "sendbird": {
-      "optional": false
-    }
-  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",

packages/uikit-chat-hooks/src/channel/useActiveGroupChannel.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import type Sendbird from 'sendbird';
+
+import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
+
+export const useActiveGroupChannel = (sdk: SendbirdChatSDK, staleChannel: Sendbird.GroupChannel) => {
+  const [activeChannel, setActiveChannel] = useState(() => staleChannel);
+
+  useEffect(() => {
+    sdk.GroupChannel.getChannel(staleChannel.url).then(setActiveChannel);
+  }, [staleChannel.url]);
+
+  return { activeChannel, setActiveChannel };
+};

packages/uikit-chat-hooks/src/channel/useGroupChannelListWithCollection.ts

@@ -20,13 +20,7 @@ const createGroupChannelListCollection = (
 
   const defaultCollection = sdk.GroupChannel.createGroupChannelCollection();
   const filter = new sdk.GroupChannelFilter();
-  filter.includeEmpty = true;
-  filter.memberStateFilter = sdk.GroupChannelFilter.MemberStateFilter.ALL;
-  return defaultCollection
-    .setLimit(20)
-    .setFilter(filter)
-    .setOrder(sdk.GroupChannelCollection.GroupChannelOrder.LATEST_LAST_MESSAGE)
-    .build();
+  return defaultCollection.setLimit(20).setFilter(filter).build();
 };
 
 export const useGroupChannelListWithCollection = (

packages/uikit-chat-hooks/src/channel/useGroupChannelListWithQuery.ts

@@ -20,9 +20,6 @@ const createGroupChannelListQuery = (
 
   const defaultQuery = sdk.GroupChannel.createMyGroupChannelListQuery();
   defaultQuery.limit = 20;
-  defaultQuery.includeEmpty = true;
-  defaultQuery.memberStateFilter = 'all';
-  defaultQuery.order = 'latest_last_message';
   return defaultQuery;
 };
 

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts

@@ -1,12 +1,13 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import type Sendbird from 'sendbird';
 
-import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
+import type { SendbirdChannel, SendbirdChatSDK } from '@sendbird/uikit-utils';
 import { Logger, NOOP, isDifferentChannel, useForceUpdate, useIsMountedRef } from '@sendbird/uikit-utils';
 
 import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
+import { useActiveGroupChannel } from '../useActiveGroupChannel';
 import { useGroupChannelMessagesReducer } from './reducer';
 
 const createMessageCollection = (
@@ -17,7 +18,7 @@ const createMessageCollection = (
   if (creator) return creator();
   const collection = channel.createMessageCollection();
   const filter = new sdk.MessageFilter();
-  return collection.setLimit(100).setStartingPoint(Date.now()).setFilter(filter).build();
+  return collection.setLimit(100).setFilter(filter).build();
 };
 
 const HOOK_NAME = 'useGroupChannelMessagesWithCollection';
@@ -38,14 +39,10 @@ export const useGroupChannelMessagesWithCollection = (
 
   const collectionRef = useRef<Sendbird.MessageCollection>();
 
-  // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update after setActiveChannel
-  const [activeChannel, setActiveChannel] = useState(() => staleChannel);
+  // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update af
+  const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, staleChannel);
   const forceUpdate = useForceUpdate();
 
-  useEffect(() => {
-    setActiveChannel(staleChannel);
-  }, [staleChannel.url]);
-
   const {
     loading,
     refreshing,
@@ -73,8 +70,15 @@ export const useGroupChannelMessagesWithCollection = (
     }
   };
 
+  const updateChannel = (channel: SendbirdChannel) => {
+    if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
+      setActiveChannel(channel);
+      forceUpdate();
+    }
+  };
+
   const init = useCallback(
-    async (uid?: string) => {
+    async (uid?: string, callback?: () => void) => {
       if (collectionRef.current) collectionRef.current?.dispose();
 
       if (uid) {
@@ -91,6 +95,7 @@ export const useGroupChannelMessagesWithCollection = (
               updateMessages(messages, true, sdk.currentUser.userId);
               updateMessages(collectionRef.current?.pendingMessages ?? [], false, sdk.currentUser.userId);
               updateMessages(collectionRef.current?.failedMessages ?? [], false, sdk.currentUser.userId);
+              if (messages?.length) callback?.();
             }
           })
           .onApiResult((err, messages) => {
@@ -103,19 +108,22 @@ export const useGroupChannelMessagesWithCollection = (
                 updateMessages(collectionRef.current?.failedMessages ?? [], false, sdk.currentUser.userId);
               }
             }
+            callback?.();
           });
 
         collectionRef.current.setMessageCollectionHandler({
-          onMessagesAdded(_, __, messages) {
+          onMessagesAdded(_, channel, messages) {
             disposeManuallyAfterUnmounted();
             channelMarkAs();
             updateNextMessages(messages, false, sdk.currentUser.userId);
+            updateChannel(channel);
           },
-          onMessagesUpdated(_, __, messages) {
+          onMessagesUpdated(_, channel, messages) {
             disposeManuallyAfterUnmounted();
             updateMessages(messages, false, sdk.currentUser.userId);
+            updateChannel(channel);
           },
-          onMessagesDeleted(_, __, messages) {
+          onMessagesDeleted(_, channel, messages) {
             disposeManuallyAfterUnmounted();
             const msgIds = messages.map((m) => m.messageId);
             const reqIds = messages
@@ -124,17 +132,15 @@ export const useGroupChannelMessagesWithCollection = (
 
             deleteMessages(msgIds, reqIds);
             deleteNextMessages(msgIds, reqIds);
+            updateChannel(channel);
           },
           onChannelDeleted() {
             disposeManuallyAfterUnmounted();
             options?.onChannelDeleted?.();
           },
           onChannelUpdated(_, channel) {
             disposeManuallyAfterUnmounted();
-            if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
-              setActiveChannel(channel);
-              forceUpdate();
-            }
+            updateChannel(channel);
           },
           onHugeGapDetected() {
             disposeManuallyAfterUnmounted();
@@ -169,8 +175,7 @@ export const useGroupChannelMessagesWithCollection = (
     // NOTE: Cache read is heavy synchronous task, and it prevents smooth ui transition
     setTimeout(async () => {
       updateLoading(true);
-      await init(userId);
-      updateLoading(false);
+      init(userId, () => updateLoading(false));
     }, 0);
   }, [init, userId]);
 
@@ -182,8 +187,7 @@ export const useGroupChannelMessagesWithCollection = (
 
   const refresh: UseGroupChannelMessages['refresh'] = useCallback(async () => {
     updateRefreshing(true);
-    await init(userId);
-    updateRefreshing(false);
+    init(userId, () => updateRefreshing(false));
   }, [init, userId]);
 
   const prev: UseGroupChannelMessages['prev'] = useCallback(async () => {

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useRef } from 'react';
 import type Sendbird from 'sendbird';
 
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
@@ -7,6 +7,7 @@ import { Logger, isDifferentChannel, useAsyncEffect, useForceUpdate } from '@sen
 import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
+import { useActiveGroupChannel } from '../useActiveGroupChannel';
 import { useGroupChannelMessagesReducer } from './reducer';
 
 const createMessageQuery = (
@@ -32,13 +33,9 @@ export const useGroupChannelMessagesWithQuery = (
   const queryRef = useRef<Sendbird.PreviousMessageListQuery>();
 
   // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update after setActiveChannel
-  const [activeChannel, setActiveChannel] = useState(() => staleChannel);
+  const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, staleChannel);
   const forceUpdate = useForceUpdate();
 
-  useEffect(() => {
-    setActiveChannel(staleChannel);
-  }, [staleChannel.url]);
-
   const {
     loading,
     refreshing,
@@ -114,10 +111,7 @@ export const useGroupChannelMessagesWithQuery = (
       onChannelHidden: channelUpdater,
       onChannelMemberCountChanged(channels) {
         const channel = channels.find((c) => !isDifferentChannel(c, activeChannel));
-        if (channel) {
-          setActiveChannel(channel);
-          forceUpdate();
-        }
+        if (channel) channelUpdater(channel);
       },
       onChannelDeleted(channelUrl: string) {
         if (activeChannel.url === channelUrl) options?.onChannelDeleted?.();

packages/uikit-chat-hooks/src/common/useUserList.ts

@@ -40,6 +40,7 @@ export const useUserList = <
 ): UseUserList<QueriedUser> => {
   const query = useRef<CustomQueryInterface<QueriedUser>>();
 
+  const [error, setError] = useState<unknown>(null);
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
 
@@ -49,47 +50,55 @@ export const useUserList = <
     return users;
   }, [users, options?.sortComparator]);
 
-  // ---------- internal methods ------------ //
   const updateUsers = (users: QueriedUser[], clearPrev: boolean) => {
     if (clearPrev) setUsers(users);
     else setUsers((prev) => prev.concat(users));
   };
+
   const init = useCallback(async () => {
     query.current = createUserQuery<QueriedUser>(sdk, options?.queryCreator);
     if (query.current?.hasNext) {
       const users = await query.current?.next();
       updateUsers(users, true);
     }
   }, [sdk, options?.queryCreator]);
-  // ---------- internal methods ends ------------ //
 
-  // ---------- internal hooks ------------ //
   useAsyncEffect(async () => {
     setLoading(true);
-    await init();
-    setLoading(false);
+    setError(null);
+    try {
+      await init();
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
   }, [init]);
-  // ---------- internal hooks ends ------------ //
 
-  // ---------- returns methods ---------- //
   const refresh = useCallback(async () => {
     setRefreshing(true);
-    await init();
-    setRefreshing(false);
+    setError(null);
+    try {
+      await init();
+    } catch (e) {
+      setError(e);
+    } finally {
+      setRefreshing(false);
+    }
   }, [init]);
 
   const next = useCallback(async () => {
     if (query.current && query.current?.hasNext) {
       updateUsers(await query.current?.next(), false);
     }
   }, []);
-  // ---------- returns methods ends ---------- //
 
   return {
     loading,
-    refreshing,
-    refresh,
+    error,
     users: sortedUsers,
     next,
+    refreshing,
+    refresh,
   };
 };

packages/uikit-chat-hooks/src/index.tsx

@@ -1,5 +1,6 @@
 export { useGroupChannelList } from './channel/useGroupChannelList';
 export { useGroupChannelMessages } from './channel/useGroupChannelMessages';
+export { useActiveGroupChannel } from './channel/useActiveGroupChannel';
 
 export { useUserList } from './common/useUserList';
 export { usePushTrigger } from './common/usePushTrigger';

packages/uikit-chat-hooks/src/types.ts

@@ -202,6 +202,11 @@ export interface UseUserList<User> {
    * */
   refreshing: boolean;
 
+  /**
+   * Error state
+   * */
+  error: unknown | null;
+
   /**
    * Refresh, clear and reload messages from latest
    * @return {Promise<void>}

packages/uikit-react-native-core/README.md

@@ -12,7 +12,8 @@ npm install @sendbird/uikit-react-native-core \
             react-native-image-picker \
             react-native-document-picker \
             @react-native-community/cameraroll \
-            react-native-fs \
+            react-native-file-access \
+            react-native-device-info \
             @react-native-clipboard/clipboard \
             @react-native-firebase/messaging @react-native-firebase/app \
             date-fns