@sendbird/uikit-chat-hooks 1.0.0-rc.1

package/src/common/useAppFeatures.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+
+import { ApplicationAttributes, PremiumFeatures, SendbirdChatSDK } from '@sendbird/uikit-utils';
+
+export const useAppFeatures = (sdk: SendbirdChatSDK) => {
+  const deliveryReceiptEnabled = useMemo(() => {
+    return Boolean(sdk.appInfo?.premiumFeatureList?.includes?.(PremiumFeatures.delivery_receipt));
+  }, [sdk.appInfo?.premiumFeatureList]);
+
+  const broadcastChannelEnabled = useMemo(() => {
+    return Boolean(sdk.appInfo?.applicationAttributes?.includes?.(ApplicationAttributes.allow_broadcast_channel));
+  }, [sdk.appInfo?.applicationAttributes]);
+
+  const superGroupChannelEnabled = useMemo(() => {
+    return Boolean(sdk.appInfo?.applicationAttributes?.includes?.(ApplicationAttributes.allow_super_group_channel));
+  }, [sdk.appInfo?.applicationAttributes]);
+
+  const reactionEnabled = useMemo(() => {
+    return Boolean(sdk.appInfo?.applicationAttributes?.includes?.(ApplicationAttributes.reactions));
+  }, [sdk.appInfo?.applicationAttributes]);
+
+  return {
+    deliveryReceiptEnabled,
+    broadcastChannelEnabled,
+    superGroupChannelEnabled,
+    reactionEnabled,
+  };
+};

package/src/common/usePushTrigger.ts

@@ -0,0 +1,31 @@
+import { useCallback, useState } from 'react';
+
+import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
+import { Logger, useAsyncEffect } from '@sendbird/uikit-utils';
+
+type PushTriggerOptionType = 'all' | 'mention_only' | 'off';
+export const usePushTrigger = (sdk: SendbirdChatSDK) => {
+  const [option, setOption] = useState<PushTriggerOptionType>('off');
+
+  const updateOption = useCallback(
+    async (value: PushTriggerOptionType) => {
+      try {
+        await sdk.setPushTriggerOption(value);
+        setOption(value);
+      } catch (e) {
+        Logger.warn('[usePushTrigger]', 'Cannot update push trigger option', e);
+      }
+    },
+    [sdk, sdk.currentUser],
+  );
+
+  useAsyncEffect(async () => {
+    const currentOption = await sdk.getPushTriggerOption();
+    setOption(currentOption as PushTriggerOptionType);
+  }, [sdk, sdk.currentUser]);
+
+  return {
+    option,
+    updateOption,
+  };
+};

package/src/common/useTotalUnreadChannelCount.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
+import { truncatedBadgeCount, useAsyncEffect } from '@sendbird/uikit-utils';
+import { useUniqId } from '@sendbird/uikit-utils';
+
+import { useUserEventHandler } from '../handler/useUserEventHandler';
+
+type Params = {
+  maxCount?: number;
+};
+const HOOK_NAME = 'useTotalUnreadChannelCount';
+export const useTotalUnreadChannelCount = (sdk: SendbirdChatSDK, params?: Params) => {
+  const id = useUniqId(HOOK_NAME);
+  const [unreadChannelCount, setUnreadChannelCount] = useState(0);
+
+  useAsyncEffect(async () => {
+    setUnreadChannelCount(await sdk.getTotalUnreadChannelCount());
+  }, [sdk]);
+
+  useUserEventHandler(sdk, HOOK_NAME + id, {
+    onTotalUnreadMessageCountUpdated: async () => setUnreadChannelCount(await sdk.getTotalUnreadChannelCount()),
+  });
+
+  return truncatedBadgeCount(unreadChannelCount, params?.maxCount);
+};

package/src/common/useTotalUnreadMessageCount.ts

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import type Sendbird from 'sendbird';
+
+import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
+import { truncatedBadgeCount, useAsyncEffect } from '@sendbird/uikit-utils';
+import { useUniqId } from '@sendbird/uikit-utils';
+
+import { useUserEventHandler } from '../handler/useUserEventHandler';
+
+type Params = {
+  paramCreator?: () => Sendbird.GroupChannelTotalUnreadMessageCountParams;
+  maxCount?: number;
+};
+
+const HOOK_NAME = 'useTotalUnreadMessageCount';
+export const useTotalUnreadMessageCount = (sdk: SendbirdChatSDK, params?: Params) => {
+  const id = useUniqId(HOOK_NAME);
+  const [unreadMessageCount, setUnreadMessageCount] = useState(0);
+
+  useAsyncEffect(async () => {
+    let param;
+    if (params?.paramCreator) {
+      param = params.paramCreator();
+    } else {
+      const params = new sdk.GroupChannelTotalUnreadMessageCountParams();
+      params.superChannelFilter = 'all';
+      param = params;
+    }
+    const unreadCount = await sdk.getTotalUnreadMessageCount(param);
+    setUnreadMessageCount(unreadCount);
+  }, [sdk, params?.paramCreator]);
+
+  useUserEventHandler(
+    sdk,
+    `${HOOK_NAME}_${id}`,
+    {
+      onTotalUnreadMessageCountUpdated: (totalCount: number) => setUnreadMessageCount(totalCount),
+    },
+    [sdk],
+  );
+
+  return truncatedBadgeCount(unreadMessageCount, params?.maxCount);
+};

package/src/common/useUserList.ts

@@ -0,0 +1,103 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import { Optional, SendbirdChatSDK, SendbirdUser, useAsyncEffect } from '@sendbird/uikit-utils';
+
+import type { CustomQueryInterface, UseUserListOptions, UseUserListReturn } from '../types';
+
+const createUserQuery = <User>(sdk: SendbirdChatSDK, queryCreator?: UseUserListOptions<User>['queryCreator']) => {
+  if (queryCreator) return queryCreator();
+  return sdk.createApplicationUserListQuery() as unknown as CustomQueryInterface<User>;
+};
+
+/**
+ * Get user list from query.
+ * default query uses 'instance.createApplicationUserListQuery'
+ * The response type of hook is depends on return type of 'query.next()'
+ *
+ * You can call hook with your custom query using {@link CustomQuery}
+ * Or you can create your 'CustomQueryClass' implemented {@link CustomQueryInterface}'
+ *
+ * ```example
+ *  const { users } = useUserList(sdk, {
+ *    queryCreator: () => {
+ *      const friendQuery = sdk.createFriendListQuery();
+ *      return new CustomQuery({
+ *        next: () => friendQuery.next(),
+ *        isLoading: () => friendQuery.isLoading,
+ *        hasNext: () => friendQuery.hasMore,
+ *      });
+ *    }
+ *  })
+ * ```
+ * */
+export const useUserList = <
+  Options extends UseUserListOptions<QueriedUser>,
+  QueriedUser = Options['queryCreator'] extends Optional<() => CustomQueryInterface<infer User>> ? User : SendbirdUser,
+>(
+  sdk: SendbirdChatSDK,
+  options?: Options,
+): UseUserListReturn<QueriedUser> => {
+  const query = useRef<CustomQueryInterface<QueriedUser>>();
+
+  const [error, setError] = useState<unknown>(null);
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const [users, setUsers] = useState<QueriedUser[]>([]);
+  const sortedUsers = useMemo((): QueriedUser[] => {
+    if (options?.sortComparator) return users.sort(options.sortComparator);
+    return users;
+  }, [users, options?.sortComparator]);
+
+  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]);
+
+  useAsyncEffect(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await init();
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [init]);
+
+  const refresh = useCallback(async () => {
+    setRefreshing(true);
+    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);
+    }
+  }, []);
+
+  return {
+    loading,
+    error,
+    users: sortedUsers,
+    next,
+    refreshing,
+    refresh,
+  };
+};

package/src/handler/useChannelHandler.ts

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+import type Sendbird from 'sendbird';
+
+import { Logger, SendbirdChatSDK } from '@sendbird/uikit-utils';
+
+export const useChannelHandler = (
+  sdk: SendbirdChatSDK,
+  handlerId: string,
+  hookHandler: Partial<Sendbird.ChannelHandler>,
+  deps: React.DependencyList = [],
+) => {
+  useEffect(() => {
+    Logger.debug('[useChannelHandler] hook called by', handlerId);
+
+    const handler = new sdk.ChannelHandler();
+    const handlerKeys = Object.keys(handler) as (keyof typeof handler)[];
+    handlerKeys.forEach((key) => {
+      const hookHandlerFn = hookHandler[key];
+      if (hookHandlerFn) handler[key] = hookHandlerFn as () => unknown;
+    });
+
+    sdk.addChannelHandler(handlerId, handler);
+    return () => sdk.removeChannelHandler(handlerId);
+  }, [sdk, handlerId, ...deps]);
+};

package/src/handler/useConnectionHandler.ts

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+import type Sendbird from 'sendbird';
+
+import { Logger, SendbirdChatSDK } from '@sendbird/uikit-utils';
+
+export const useConnectionHandler = (
+  sdk: SendbirdChatSDK,
+  handlerId: string,
+  hookHandler: Partial<Sendbird.ConnectionHandler>,
+  deps: React.DependencyList = [],
+) => {
+  useEffect(() => {
+    Logger.info('[useConnectionHandler]', handlerId);
+
+    const handler = new sdk.ConnectionHandler();
+    const handlerKeys = Object.keys(handler) as (keyof typeof handler)[];
+    handlerKeys.forEach((key) => {
+      const hookHandlerFn = hookHandler[key];
+      if (hookHandlerFn) handler[key] = hookHandlerFn;
+    });
+
+    sdk.addConnectionHandler(handlerId, handler);
+    return () => sdk.removeConnectionHandler(handlerId);
+  }, [sdk, handlerId, ...deps]);
+};

package/src/handler/useUserEventHandler.ts

@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import type Sendbird from 'sendbird';
+
+import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
+import { Logger } from '@sendbird/uikit-utils';
+
+export const useUserEventHandler = (
+  sdk: SendbirdChatSDK,
+  handlerId: string,
+  hookHandler: Partial<Sendbird.UserEventHandler>,
+  deps: React.DependencyList = [],
+) => {
+  useEffect(() => {
+    Logger.debug('[useUserEventHandler] hook called by', handlerId);
+
+    const handler = new sdk.UserEventHandler();
+    const handlerKeys = Object.keys(handler) as (keyof typeof handler)[];
+    handlerKeys.forEach((key) => {
+      const hookHandlerFn = hookHandler[key];
+      if (hookHandlerFn) handler[key] = hookHandlerFn as () => unknown;
+    });
+
+    sdk.addUserEventHandler(handlerId, handler);
+    return () => sdk.removeUserEventHandler(handlerId);
+  }, [sdk, handlerId, ...deps]);
+};

package/src/index.ts

@@ -0,0 +1,26 @@
+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';
+export { useTotalUnreadMessageCount } from './common/useTotalUnreadMessageCount';
+export { useTotalUnreadChannelCount } from './common/useTotalUnreadChannelCount';
+export { useAppFeatures } from './common/useAppFeatures';
+
+export { useChannelHandler } from './handler/useChannelHandler';
+export { useConnectionHandler } from './handler/useConnectionHandler';
+export { useUserEventHandler } from './handler/useUserEventHandler';
+
+export { CustomQuery } from './model/CustomQuery';
+
+export type {
+  UseGroupChannelList,
+  UseGroupChannelListOptions,
+  UseGroupChannelMessages,
+  UseUserListOptions,
+  UseGroupChannelMessagesOptions,
+  UseUserListReturn,
+  CustomQueryInterface,
+  CustomBidirectionalQueryInterface,
+} from './types';

package/src/model/CustomQuery.ts

@@ -0,0 +1,20 @@
+import type { CustomQueryInterface } from '../types';
+
+type ConstructorParams<T> = {
+  next: () => Promise<T[]>;
+  isLoading: () => boolean;
+  hasNext: () => boolean;
+};
+
+export class CustomQuery<T> implements CustomQueryInterface<T> {
+  constructor(private params: ConstructorParams<T>) {}
+  get isLoading(): boolean {
+    return this.params.isLoading();
+  }
+  get hasNext(): boolean {
+    return this.params.hasNext();
+  }
+  next() {
+    return this.params.next();
+  }
+}

package/src/types.ts

@@ -0,0 +1,246 @@
+import type Sendbird from 'sendbird';
+
+import type {
+  SendbirdChatSDK,
+  SendbirdError,
+  SendbirdFileMessage,
+  SendbirdFileMessageParams,
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCollection,
+  SendbirdMessage,
+  SendbirdMessageCollection,
+  SendbirdUserMessage,
+  SendbirdUserMessageParams,
+} from '@sendbird/uikit-utils';
+
+export interface CustomQueryInterface<Data> {
+  isLoading: boolean;
+  next: () => Promise<Data[]>;
+  hasNext: boolean;
+}
+export interface CustomBidirectionalQueryInterface<Data> {
+  isLoading: boolean;
+  next: () => Promise<Data[]>;
+  hasNext: () => boolean;
+  prev: () => Promise<Data[]>;
+  hasPrev: () => boolean;
+}
+
+/**
+ * @interface UseGroupChannelList
+ * @description interface for group channel list hook
+ * */
+export interface UseGroupChannelList {
+  (sdk: SendbirdChatSDK, userId?: string, options?: UseGroupChannelListOptions): {
+    /**
+     * Loading state, only available on first render
+     * */
+    loading: boolean;
+
+    /**
+     * Refreshing state, status is changes when the refresh is called.
+     * */
+    refreshing: boolean;
+
+    /**
+     * Refresh, clear and reload messages from latest
+     * @return {Promise<void>}
+     * */
+    refresh: () => Promise<void>;
+
+    /**
+     * Update channel, update or insert channel to state
+     * @param {SendbirdGroupChannel} channel
+     * @return {void}
+     * */
+    update: (channel: SendbirdGroupChannel) => void;
+
+    /**
+     * Get group channels state
+     * */
+    groupChannels: SendbirdGroupChannel[];
+
+    /**
+     * Fetch next channels to state
+     * @return {Promise<void>}
+     * */
+    next: () => Promise<void>;
+  };
+}
+export type UseGroupChannelListOptions = {
+  sortComparator?: (a: SendbirdGroupChannel, b: SendbirdGroupChannel) => number;
+  queryCreator?: () => Sendbird.GroupChannelListQuery;
+  collectionCreator?: () => SendbirdGroupChannelCollection;
+  enableCollectionWithoutLocalCache?: boolean;
+};
+
+/**
+ * @interface UseGroupChannelMessages
+ * @description interface for group channel messages hook
+ * - Receive new messages from other users -> append to state(nextMessages)
+ * - onTopReached -> prev() -> fetch prev messages and append to state(messages)
+ * - onBottomReached -> next() -> nextMessages append to state(messages)
+ * */
+export interface UseGroupChannelMessages {
+  (sdk: SendbirdChatSDK, channel: SendbirdGroupChannel, userId?: string, options?: UseGroupChannelMessagesOptions): {
+    /**
+     * Loading state, only available on first render
+     * */
+    loading: boolean;
+
+    /**
+     * Refreshing state, status is changes when the refresh is called.
+     * */
+    refreshing: boolean;
+
+    /**
+     * Refresh, clear and reload messages from latest
+     * @return {Promise<void>}
+     * */
+    refresh: () => Promise<void>;
+
+    /**
+     * Get messages, this state is for render
+     * For example, if a user receives a new messages while searching for an old message
+     * for this case, new messages will be included here.
+     * @return {SendbirdMessage[]}
+     * */
+    messages: SendbirdMessage[];
+
+    /**
+     * Fetch prev messages to state
+     * @return {Promise<void>}
+     * */
+    prev: () => Promise<void>;
+
+    /**
+     * Get messages, this state is for temporary data before render
+     * For example, if a user receives a new messages while searching for an old message
+     * for this case, new messages will be included here.
+     * */
+    nextMessages: SendbirdMessage[];
+
+    /**
+     * Get new messages from nextMessages
+     * A new message means a message that meets the below conditions
+     * - Not admin message
+     * - Not updated message
+     * - Not current user's message
+     * */
+    newMessagesFromMembers: SendbirdMessage[];
+
+    /**
+     * Fetch next messages to state
+     * @return {Promise<void>}
+     * */
+    next: () => Promise<void>;
+
+    /**
+     * Send file message
+     * @param params file message params
+     * @param callback sent message callback
+     * @return pending message
+     * */
+    sendFileMessage: (
+      params: SendbirdFileMessageParams,
+      onPending?: (message: SendbirdFileMessage, error?: SendbirdError) => void,
+    ) => Promise<SendbirdFileMessage>;
+
+    /**
+     * Send user message
+     * @param params user message params
+     * @param callback sent message callback
+     * @return pending message
+     * */
+    sendUserMessage: (
+      params: SendbirdUserMessageParams,
+      onPending?: (message: SendbirdUserMessage, error?: SendbirdError) => void,
+    ) => Promise<SendbirdUserMessage>;
+
+    /**
+     * Update file message
+     * @param messageId
+     * @param params file message params
+     * @return updated message
+     * */
+    updateFileMessage: (messageId: number, params: SendbirdFileMessageParams) => Promise<SendbirdFileMessage>;
+
+    /**
+     * Update user message
+     * @param messageId
+     * @param params user message params
+     * @return updated message
+     * */
+    updateUserMessage: (messageId: number, params: SendbirdUserMessageParams) => Promise<SendbirdUserMessage>;
+
+    /**
+     * Resend failed message
+     * @param failedMessage failed message to resend
+     * @return {Promise<void>}
+     * */
+    resendMessage: (failedMessage: SendbirdFileMessage | SendbirdUserMessage) => Promise<void>;
+
+    /**
+     * Delete message
+     * @param message sent or failed message
+     * @return {Promise<void>}
+     * */
+    deleteMessage: (message: SendbirdFileMessage | SendbirdUserMessage) => Promise<void>;
+
+    /**
+     * Activated channel
+     * */
+    activeChannel: SendbirdGroupChannel;
+  };
+}
+
+export type UseGroupChannelMessagesOptions = {
+  sortComparator?: (a: SendbirdMessage, b: SendbirdMessage) => number;
+  queryCreator?: () => Sendbird.PreviousMessageListQuery;
+  collectionCreator?: () => SendbirdMessageCollection;
+  enableCollectionWithoutLocalCache?: boolean;
+  onChannelDeleted?: () => void;
+};
+
+/**
+ * @interface UseUserListReturn
+ * @description interface for user list hook return value
+ * */
+export interface UseUserListReturn<User> {
+  /**
+   * Loading state, only available on first render
+   * */
+  loading: boolean;
+
+  /**
+   * Refreshing state, status is changes when the refresh is called.
+   * */
+  refreshing: boolean;
+
+  /**
+   * Error state
+   * */
+  error: unknown | null;
+
+  /**
+   * Refresh, clear and reload messages from latest
+   * @return {Promise<void>}
+   * */
+  refresh: () => Promise<void>;
+
+  /**
+   * Get users state
+   * */
+  users: User[];
+
+  /**
+   * Fetch next users to state
+   * @return {Promise<void>}
+   * */
+  next: () => Promise<void>;
+}
+
+export type UseUserListOptions<User> = {
+  sortComparator?: (a: User, b: User) => number;
+  queryCreator?: () => CustomQueryInterface<User>;
+};