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

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,198 @@
+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 declare 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 declare 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 declare type UseUserListOptions<User> = {
+    sortComparator?: (a: User, b: User) => number;
+    queryCreator?: () => CustomQueryInterface<User>;
+};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@sendbird/uikit-chat-hooks",
+  "version": "1.0.0-rc.1",
+  "description": "React hooks that built with SendbirdChat SDK",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "test": "jest",
+    "build": "bob build",
+    "clean": "del lib"
+  },
+  "keywords": [
+    "react",
+    "sendbird"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sendbird/sendbird-uikit-react-native.git",
+    "directory": "packages/uikit-chat-hooks"
+  },
+  "author": "Sendbird <support@sendbird.com>",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "bugs": {
+    "url": "https://github.com/sendbird/sendbird-uikit-react-native.git/issues"
+  },
+  "homepage": "https://github.com/sendbird/sendbird-uikit-react-native.git#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@sendbird/uikit-utils": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.2",
+    "react": "^16.13.1",
+    "react-native-builder-bob": "^0.18.0",
+    "typescript": "^4.1.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.13.1",
+    "sendbird": "^3.1.22"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "typedoc": {
+    "entryPoint": "./src/index.ts",
+    "readmeFile": "./README.md",
+    "displayName": "@sendbird/uikit-chat-hooks"
+  },
+  "gitHead": "870c05138843249a23a3978106a17e7a4e466d4d"
+}

package/src/channel/useActiveGroupChannel.ts

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

package/src/channel/useGroupChannelList.ts

@@ -0,0 +1,11 @@
+import type { UseGroupChannelList } from '../types';
+import { useGroupChannelListWithCollection } from './useGroupChannelListWithCollection';
+import { useGroupChannelListWithQuery } from './useGroupChannelListWithQuery';
+
+export const useGroupChannelList: UseGroupChannelList = (sdk, userId, options) => {
+  if (sdk.isCacheEnabled || options?.enableCollectionWithoutLocalCache) {
+    return useGroupChannelListWithCollection(sdk, userId, options);
+  } else {
+    return useGroupChannelListWithQuery(sdk, userId, options);
+  }
+};

package/src/channel/useGroupChannelListWithCollection.ts

@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import type {
+  SendbirdChannel,
+  SendbirdChatSDK,
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCollection,
+} from '@sendbird/uikit-utils';
+import { arrayToMap, useAsyncEffect, useUniqId } from '@sendbird/uikit-utils';
+
+import { useAppFeatures } from '../common/useAppFeatures';
+import { useChannelHandler } from '../handler/useChannelHandler';
+import type { UseGroupChannelList, UseGroupChannelListOptions } from '../types';
+
+type GroupChannelMap = Record<string, SendbirdGroupChannel>;
+
+const HOOK_NAME = 'useGroupChannelListWithCollection';
+const createGroupChannelListCollection = (
+  sdk: SendbirdChatSDK,
+  collectionCreator: UseGroupChannelListOptions['collectionCreator'],
+) => {
+  const passedCollection = collectionCreator?.();
+  if (passedCollection) return passedCollection;
+
+  const defaultCollection = sdk.GroupChannel.createGroupChannelCollection();
+  const filter = new sdk.GroupChannelFilter();
+  return defaultCollection.setLimit(20).setFilter(filter).build();
+};
+
+export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, userId, options) => {
+  const id = useUniqId(HOOK_NAME);
+  const { deliveryReceiptEnabled } = useAppFeatures(sdk);
+
+  const collectionRef = useRef<SendbirdGroupChannelCollection>();
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const [groupChannelMap, setGroupChannelMap] = useState<GroupChannelMap>({});
+  const groupChannels = useMemo(() => {
+    const channels = Object.values(groupChannelMap);
+    if (options?.sortComparator) return channels.sort(options?.sortComparator);
+    return channels;
+  }, [groupChannelMap, options?.sortComparator]);
+
+  // ---------- internal methods ---------- //
+  const updateChannels = (channels: SendbirdChannel[], clearPrev: boolean) => {
+    const groupChannels = channels.filter((c): c is SendbirdGroupChannel => c.isGroupChannel());
+    if (clearPrev) setGroupChannelMap(arrayToMap(groupChannels, 'url'));
+    else setGroupChannelMap((prev) => ({ ...prev, ...arrayToMap(groupChannels, 'url') }));
+    if (deliveryReceiptEnabled) groupChannels.forEach((channel) => sdk.markAsDelivered(channel.url));
+  };
+  const deleteChannels = (channelUrls: string[]) => {
+    setGroupChannelMap(({ ...draft }) => {
+      channelUrls.forEach((url) => delete draft[url]);
+      return draft;
+    });
+  };
+  const init = useCallback(
+    async (uid?: string) => {
+      if (collectionRef.current) collectionRef.current?.dispose();
+
+      if (uid) {
+        collectionRef.current = createGroupChannelListCollection(sdk, options?.collectionCreator);
+        if (collectionRef.current?.hasMore) {
+          updateChannels(await collectionRef.current?.loadMore(), true);
+        }
+
+        collectionRef.current?.setGroupChannelCollectionHandler({
+          onChannelsAdded(_, channels) {
+            updateChannels(channels, false);
+          },
+          onChannelsUpdated(_, channels) {
+            updateChannels(channels, false);
+          },
+          onChannelsDeleted(_, channelUrls) {
+            deleteChannels(channelUrls);
+          },
+        });
+      }
+    },
+    [sdk, options?.collectionCreator],
+  );
+  // ---------- internal methods ends ---------- //
+
+  // ---------- internal hooks ---------- //
+  useEffect(() => {
+    return () => {
+      if (collectionRef.current) collectionRef.current?.dispose();
+    };
+  }, []);
+
+  useAsyncEffect(async () => {
+    setLoading(true);
+    await init(userId);
+    setLoading(false);
+  }, [init, userId]);
+
+  useChannelHandler(
+    sdk,
+    `${HOOK_NAME}_${id}`,
+    {
+      onUserBanned: (channel, user) => {
+        const isMe = user.userId === userId;
+        if (isMe) deleteChannels([channel.url]);
+        else updateChannels([channel], false);
+      },
+    },
+    [sdk, userId],
+  );
+  // ---------- internal hooks ends ---------- //
+
+  // ---------- returns methods ---------- //
+  const refresh = useCallback(async () => {
+    setRefreshing(true);
+    await init(userId);
+    setRefreshing(false);
+  }, [init, userId]);
+
+  const update = useCallback(
+    (channel: SendbirdGroupChannel) => {
+      if (deliveryReceiptEnabled) sdk.markAsDelivered(channel.url);
+      setGroupChannelMap((prev) => ({ ...prev, [channel.url]: channel }));
+    },
+    [sdk],
+  );
+
+  const next = useCallback(async () => {
+    if (collectionRef.current?.hasMore) {
+      const channels = await collectionRef.current?.loadMore();
+      setGroupChannelMap((prev) => ({ ...prev, ...arrayToMap(channels, 'url') }));
+      if (deliveryReceiptEnabled) channels.forEach((channel) => sdk.markAsDelivered(channel.url));
+    }
+  }, [sdk]);
+  // ---------- returns methods ends ---------- //
+
+  return {
+    loading,
+    groupChannels,
+    refresh,
+    refreshing,
+    next,
+    update,
+  };
+};

package/src/channel/useGroupChannelListWithQuery.ts

@@ -0,0 +1,124 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import type Sendbird from 'sendbird';
+
+import type { SendbirdChannel, SendbirdChatSDK, SendbirdGroupChannel } from '@sendbird/uikit-utils';
+import { arrayToMap, useAsyncEffect } from '@sendbird/uikit-utils';
+
+import { useAppFeatures } from '../common/useAppFeatures';
+import { useChannelHandler } from '../handler/useChannelHandler';
+import type { UseGroupChannelList, UseGroupChannelListOptions } from '../types';
+
+type GroupChannelMap = Record<string, SendbirdGroupChannel>;
+
+const HOOK_NAME = 'useGroupChannelListWithQuery';
+const createGroupChannelListQuery = (
+  sdk: SendbirdChatSDK,
+  queryCreator: UseGroupChannelListOptions['queryCreator'],
+) => {
+  const passedQuery = queryCreator?.();
+  if (passedQuery) return passedQuery;
+
+  const defaultQuery = sdk.GroupChannel.createMyGroupChannelListQuery();
+  defaultQuery.limit = 20;
+  return defaultQuery;
+};
+
+export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, options) => {
+  const { deliveryReceiptEnabled } = useAppFeatures(sdk);
+  const queryRef = useRef<Sendbird.GroupChannelListQuery>();
+  const [loading, setLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const [groupChannelMap, setGroupChannelMap] = useState<GroupChannelMap>({});
+  const groupChannels = useMemo(() => {
+    const channels = Object.values(groupChannelMap);
+    if (options?.sortComparator) return channels.sort(options?.sortComparator);
+    return channels;
+  }, [groupChannelMap, options?.sortComparator]);
+
+  // ---------- internal methods ---------- //
+  const updateChannels = (channels: SendbirdChannel[], clearPrev: boolean) => {
+    const groupChannels = channels.filter((c): c is SendbirdGroupChannel => c.isGroupChannel());
+    if (clearPrev) setGroupChannelMap(arrayToMap(groupChannels, 'url'));
+    else setGroupChannelMap((prev) => ({ ...prev, ...arrayToMap(groupChannels, 'url') }));
+
+    if (deliveryReceiptEnabled) groupChannels.forEach((channel) => sdk.markAsDelivered(channel.url));
+  };
+  const deleteChannels = (channelUrls: string[]) => {
+    setGroupChannelMap(({ ...draft }) => {
+      channelUrls.forEach((url) => delete draft[url]);
+      return draft;
+    });
+  };
+  const init = useCallback(
+    async (uid?: string) => {
+      if (uid) {
+        queryRef.current = createGroupChannelListQuery(sdk, options?.queryCreator);
+        if (queryRef.current?.hasNext) {
+          const channels = await queryRef.current.next();
+          updateChannels(channels, true);
+        }
+      }
+    },
+    [sdk, options?.queryCreator],
+  );
+  // ---------- internal methods ends ---------- //
+
+  // ---------- internal hooks ---------- //
+  useAsyncEffect(async () => {
+    setLoading(true);
+    await init(userId);
+    setLoading(false);
+  }, [init, userId]);
+
+  useChannelHandler(
+    sdk,
+    HOOK_NAME,
+    {
+      onChannelChanged: (channel) => updateChannels([channel], false),
+      onChannelFrozen: (channel) => updateChannels([channel], false),
+      onChannelUnfrozen: (channel) => updateChannels([channel], false),
+      onChannelMemberCountChanged: (channels) => updateChannels(channels, false),
+      onChannelDeleted: (url) => deleteChannels([url]),
+      onUserJoined: (channel) => updateChannels([channel], false),
+      onUserLeft: (channel, user) => {
+        const isMe = user.userId === userId;
+        if (isMe) deleteChannels([channel.url]);
+        else updateChannels([channel], false);
+      },
+      onUserBanned(channel, user) {
+        const isMe = user.userId === userId;
+        if (isMe) deleteChannels([channel.url]);
+        else updateChannels([channel], false);
+      },
+    },
+    [sdk, userId],
+  );
+  // ---------- internal hooks ends ---------- //
+
+  // ---------- returns methods ---------- //
+  const refresh = useCallback(async () => {
+    setRefreshing(true);
+    await init(userId);
+    setRefreshing(false);
+  }, [init, userId]);
+
+  const update = useCallback(
+    (channel: SendbirdGroupChannel) => {
+      if (deliveryReceiptEnabled) sdk.markAsDelivered(channel.url);
+      setGroupChannelMap((prev) => ({ ...prev, [channel.url]: channel }));
+    },
+    [sdk],
+  );
+
+  const next = useCallback(async () => {
+    if (queryRef.current?.hasNext) {
+      const channels = await queryRef.current.next();
+      setGroupChannelMap((prev) => ({ ...prev, ...arrayToMap(channels, 'url') }));
+      if (deliveryReceiptEnabled) channels.forEach((channel) => sdk.markAsDelivered(channel.url));
+    }
+  }, [sdk]);
+  // ---------- returns methods ends ---------- //
+
+  return { loading, groupChannels, update, refresh, refreshing, next };
+};

package/src/channel/useGroupChannelMessages/index.ts

@@ -0,0 +1,11 @@
+import type { UseGroupChannelMessages } from '../../types';
+import { useGroupChannelMessagesWithCollection } from './useGroupChannelMessagesWithCollection';
+import { useGroupChannelMessagesWithQuery } from './useGroupChannelMessagesWithQuery';
+
+export const useGroupChannelMessages: UseGroupChannelMessages = (sdk, channel, userId, options) => {
+  if (sdk.isCacheEnabled || options?.enableCollectionWithoutLocalCache) {
+    return useGroupChannelMessagesWithCollection(sdk, channel, userId, options);
+  } else {
+    return useGroupChannelMessagesWithQuery(sdk, channel, userId, options);
+  }
+};