Merge pull request #38 from sendbird/fix/export-collectionCreator-in-…

…channel-list [UIKIT-2201] Fix/export collection creator in channel list
sendbird · Sep 13, 2022 · 301801c · 301801c
2 parents ebe03e0 + da1191c
commit 301801c
Show file tree

Hide file tree

Showing 18 changed files with 174 additions and 179 deletions.
diff --git a/packages/uikit-chat-hooks/src/channel/useGroupChannelListWithCollection.ts b/packages/uikit-chat-hooks/src/channel/useGroupChannelListWithCollection.ts
@@ -22,9 +22,20 @@ const createGroupChannelListCollection = (
   const passedCollection = collectionCreator?.();
   if (passedCollection) return passedCollection;
 
-  const defaultCollection = sdk.GroupChannel.createGroupChannelCollection();
-  const filter = new sdk.GroupChannelFilter();
-  return defaultCollection.setLimit(20).setFilter(filter).build();
+  const defaultOptions = {
+    includeEmpty: false,
+    limit: 20,
+    order: sdk.GroupChannelCollection.GroupChannelOrder.LATEST_LAST_MESSAGE,
+  };
+  const collectionBuilder = sdk.GroupChannel.createGroupChannelCollection();
+  const groupChannelFilter = new sdk.GroupChannelFilter();
+  groupChannelFilter.includeEmpty = defaultOptions.includeEmpty;
+
+  return collectionBuilder
+    .setFilter(groupChannelFilter)
+    .setLimit(defaultOptions.limit)
+    .setOrder(defaultOptions.order)
+    .build();
 };
 
 export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, userId, options) => {

diff --git a/packages/uikit-chat-hooks/src/channel/useGroupChannelListWithQuery.ts b/packages/uikit-chat-hooks/src/channel/useGroupChannelListWithQuery.ts
@@ -18,8 +18,15 @@ const createGroupChannelListQuery = (
   const passedQuery = queryCreator?.();
   if (passedQuery) return passedQuery;
 
+  const defaultOptions = {
+    includeEmpty: false,
+    limit: 20,
+    order: sdk.GroupChannelCollection.GroupChannelOrder.LATEST_LAST_MESSAGE,
+  };
   const defaultQuery = sdk.GroupChannel.createMyGroupChannelListQuery();
-  defaultQuery.limit = 20;
+  defaultQuery.limit = defaultOptions.limit;
+  defaultQuery.order = defaultOptions.order;
+  defaultQuery.includeEmpty = defaultOptions.includeEmpty;
   return defaultQuery;
 };
 

diff --git a/packages/uikit-chat-hooks/src/common/useMessageOutgoingStatus.ts b/packages/uikit-chat-hooks/src/common/useMessageOutgoingStatus.ts
@@ -0,0 +1,56 @@
+import type {
+  SendbirdAdminMessage,
+  SendbirdChatSDK,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdUserMessage,
+} from '@sendbird/uikit-utils';
+import { isDifferentChannel, isMyMessage, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
+
+import { useChannelHandler } from '../handler/useChannelHandler';
+import { useAppFeatures } from './useAppFeatures';
+
+const HOOK_NAME = 'useMessageOutgoingStatus';
+
+export type SBUOutgoingStatus = 'NONE' | 'PENDING' | 'FAILED' | 'UNDELIVERED' | 'DELIVERED' | 'UNREAD' | 'READ';
+
+export const useMessageOutgoingStatus = (
+  sdk: SendbirdChatSDK,
+  channel: SendbirdGroupChannel,
+  message?: SendbirdFileMessage | SendbirdUserMessage | SendbirdAdminMessage | null,
+): SBUOutgoingStatus => {
+  const features = useAppFeatures(sdk);
+  const forceUpdate = useForceUpdate();
+  const currentUser = sdk.currentUser;
+
+  const uniqId = useUniqId(HOOK_NAME);
+  useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+    onDeliveryReceiptUpdated(eventChannel) {
+      if (isDifferentChannel(channel, eventChannel)) return;
+      if (!isMyMessage(message, currentUser?.userId)) return;
+
+      forceUpdate();
+    },
+    onReadReceiptUpdated(eventChannel) {
+      if (isDifferentChannel(channel, eventChannel)) return;
+      if (!isMyMessage(message, currentUser?.userId)) return;
+
+      forceUpdate();
+    },
+  });
+
+  if (!message) return 'NONE';
+
+  if (message.sendingStatus === 'pending') return 'PENDING';
+
+  if (message.sendingStatus === 'failed') return 'FAILED';
+
+  if (channel.getUnreadMemberCount(message) === 0) return 'READ';
+
+  if (features.deliveryReceiptEnabled) {
+    if (channel.getUndeliveredMemberCount(message) === 0) return 'DELIVERED';
+    return 'UNDELIVERED';
+  }
+
+  return 'UNREAD';
+};
diff --git a/packages/uikit-chat-hooks/src/index.ts b/packages/uikit-chat-hooks/src/index.ts
@@ -2,11 +2,12 @@ export { useGroupChannelList } from './channel/useGroupChannelList';
 export { useGroupChannelMessages } from './channel/useGroupChannelMessages';
 export { useActiveGroupChannel } from './channel/useActiveGroupChannel';
 
-export { useUserList } from './common/useUserList';
+export { useAppFeatures } from './common/useAppFeatures';
+export { useMessageOutgoingStatus } from './common/useMessageOutgoingStatus';
 export { usePushTrigger } from './common/usePushTrigger';
-export { useTotalUnreadMessageCount } from './common/useTotalUnreadMessageCount';
 export { useTotalUnreadChannelCount } from './common/useTotalUnreadChannelCount';
-export { useAppFeatures } from './common/useAppFeatures';
+export { useTotalUnreadMessageCount } from './common/useTotalUnreadMessageCount';
+export { useUserList } from './common/useUserList';
 
 export { useChannelHandler } from './handler/useChannelHandler';
 export { useConnectionHandler } from './handler/useConnectionHandler';

diff --git a/packages/uikit-react-native-foundation/src/ui/GroupChannelPreview/index.tsx b/packages/uikit-react-native-foundation/src/ui/GroupChannelPreview/index.tsx
@@ -87,21 +87,23 @@ const GroupChannelPreview = ({
         </View>
 
         <View style={styles.rightBottomSection}>
-          <View style={[styles.body, bodyIcon && { alignItems: 'center' }]}>
-            {bodyIcon && (
-              <Icon
-                size={18}
-                icon={bodyIcon}
-                color={color.default.none.bodyIcon}
-                containerStyle={[
-                  styles.bodyIcon,
-                  { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },
-                ]}
-              />
-            )}
-            <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>
-              {body}
-            </Text>
+          <View style={styles.body}>
+            <View style={styles.bodyWrapper}>
+              {bodyIcon && (
+                <Icon
+                  size={18}
+                  icon={bodyIcon}
+                  color={color.default.none.bodyIcon}
+                  containerStyle={[
+                    styles.bodyIcon,
+                    { backgroundColor: colors.ui.groupChannelPreview.default.none.bodyIconBackground },
+                  ]}
+                />
+              )}
+              <Text body3 numberOfLines={1} style={styles.bodyText} color={color.default.none.textBody}>
+                {body}
+              </Text>
+            </View>
           </View>
           <View>{badgeCount > 0 && <Badge count={badgeCount} maxCount={maxBadgeCount} />}</View>
         </View>
@@ -116,10 +118,11 @@ const Separator = ({ color }: SeparatorProps) => <View style={[styles.separator,
 
 const styles = createStyleSheet({
   container: {
+    height: 76,
     width: '100%',
     flexDirection: 'row',
     paddingHorizontal: 16,
-    paddingVertical: 10,
+    paddingTop: 10,
     alignItems: 'center',
   },
   coverContainer: {
@@ -170,9 +173,12 @@ const styles = createStyleSheet({
   body: {
     marginRight: 4,
     flex: 1,
-    justifyContent: 'center',
+    flexDirection: 'row',
     alignItems: 'flex-start',
+  },
+  bodyWrapper: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
   bodyText: {
     flex: 1,

diff --git a/packages/uikit-react-native/src/components/FileViewer.tsx b/packages/uikit-react-native/src/components/FileViewer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StatusBar, StyleSheet, View } from 'react-native';
+import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
@@ -17,7 +17,6 @@ import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte, useIIFE } from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';
-import SBUPressable from './SBUPressable';
 
 type Props = {
   fileMessage: SendbirdFileMessage;
@@ -191,9 +190,9 @@ const FileViewerHeader = ({ topInset, onClose, subtitle, title }: HeaderProps) =
         { paddingTop: topInset, height: defaultHeight + topInset, backgroundColor: palette.overlay01 },
       ]}
     >
-      <SBUPressable as={'TouchableOpacity'} onPress={onClose} style={styles.barButton}>
+      <TouchableOpacity onPress={onClose} style={styles.barButton}>
         <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />
-      </SBUPressable>
+      </TouchableOpacity>
       <View style={styles.barTitleContainer}>
         <Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle}>
           {title}
@@ -233,13 +232,13 @@ const FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDown
         },
       ]}
     >
-      <SBUPressable as={'TouchableOpacity'} onPress={onPressDownload} style={styles.barButton}>
+      <TouchableOpacity onPress={onPressDownload} style={styles.barButton}>
         <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />
-      </SBUPressable>
+      </TouchableOpacity>
       <View style={styles.barTitleContainer} />
-      <SBUPressable as={'TouchableOpacity'} onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
+      <TouchableOpacity onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
         {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}
-      </SBUPressable>
+      </TouchableOpacity>
     </View>
   );
 };

diff --git a/packages/uikit-react-native/src/components/MessageRenderer/MessageOutgoingStatus.tsx b/packages/uikit-react-native/src/components/MessageRenderer/MessageOutgoingStatus.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
+import { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
 import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../../hooks/useContext';
 
@@ -12,64 +12,31 @@ type Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };
 const MessageOutgoingStatus = ({ channel, message }: Props) => {
   if (!message.isUserMessage() && !message.isFileMessage()) return null;
 
-  const { sdk, features } = useSendbirdChat();
+  const { sdk } = useSendbirdChat();
   const { colors } = useUIKitTheme();
+  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, message);
 
-  const uniqId = useUniqId('MessageOutgoingStatus');
-  const forceUpdate = useForceUpdate();
-
-  useEffect(() => {
-    const handlerId = `MessageOutgoingStatus_${uniqId}`;
-
-    if (
-      message.sendingStatus === 'succeeded' &&
-      channel.getUnreadMemberCount(message) === 0 &&
-      channel.getUndeliveredMemberCount(message) === 0
-    ) {
-      sdk.removeChannelHandler(handlerId);
-    } else {
-      const handler = new sdk.ChannelHandler();
-
-      handler.onReadReceiptUpdated = (eventChannel) => {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        forceUpdate();
-      };
-
-      if (features.deliveryReceiptEnabled) {
-        handler.onDeliveryReceiptUpdated = (eventChannel) => {
-          if (isDifferentChannel(channel, eventChannel)) return;
-          forceUpdate();
-        };
-      }
-
-      sdk.addChannelHandler(handlerId, handler);
-    }
-
-    return () => {
-      sdk.removeChannelHandler(handlerId);
-    };
-  }, [message.sendingStatus]);
-
-  if (message.sendingStatus === 'pending') {
+  if (outgoingStatus === 'PENDING') {
     return <LoadingSpinner size={SIZE} style={styles.container} />;
   }
 
-  if (message.sendingStatus === 'failed') {
+  if (outgoingStatus === 'FAILED') {
     return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;
   }
 
-  if (channel.getUnreadMemberCount(message) === 0) {
+  if (outgoingStatus === 'READ') {
     return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;
   }
 
-  if (features.deliveryReceiptEnabled) {
-    if (channel.getUndeliveredMemberCount(message) === 0) {
-      return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
-    }
+  if (outgoingStatus === 'UNREAD' || outgoingStatus === 'DELIVERED') {
+    return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+  }
+
+  if (outgoingStatus === 'UNDELIVERED') {
     return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
   }
 
-  return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+  return null;
 };
 
 const styles = createStyleSheet({

diff --git a/packages/uikit-react-native/src/components/SBUPressable.tsx b/packages/uikit-react-native/src/components/SBUPressable.tsx