@sendbird/uikit-utils 2.3.0 → 2.4.0

package/src/hooks/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DependencyList } from 'react';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
 
 type Destructor = () => void;
 type AsyncEffectCallback = () => void | Destructor | Promise<void> | Promise<Destructor>;
@@ -13,6 +13,11 @@ export const useUniqId = (key: string) => {
   })[0];
 };
 
+export const useUniqHandlerId = (name: string) => {
+  const id = useUniqId(name);
+  return `${name}_${id}`;
+};
+
 export const useForceUpdate = () => {
   const [, updater] = useState(0);
   return useCallback(() => updater((prev) => prev + 1), []);
@@ -72,3 +77,28 @@ export const useFreshCallback = <T extends (...args: any[]) => any>(callback: T)
   ref.current = callback;
   return useCallback(((...args) => ref.current(...args)) as T, []);
 };
+
+export const useDebounceEffect = (action: () => void, delay: number, deps: DependencyList = []) => {
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(async () => {
+      try {
+        await action();
+      } finally {
+        timeoutRef.current = undefined;
+      }
+    }, delay);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+      }
+    };
+  }, [delay, ...deps]);
+};
+
+export const usePartialState = <S>(initialState: S) => {
+  return useReducer((prev: S, state: Partial<S>) => ({ ...prev, ...state }), initialState);
+};

package/src/hooks/react-native.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { AppState, AppStateEvent, AppStateStatus } from 'react-native';
 import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -22,13 +22,11 @@ export const useSafeAreaPadding = <
   edges: T[],
 ): Result => {
   const safeAreaInsets = useSafeAreaInsets();
-  return useMemo(() => {
-    return edges.reduce((map, edge) => {
-      const paddingKey = edgePaddingMap[edge];
-      map[paddingKey] = safeAreaInsets[edge];
-      return map;
-    }, {} as { [key in EdgePaddingMap[T]]: EdgeInsets[T] });
-  }, edges) as Result;
+  return edges.reduce((map, edge) => {
+    const paddingKey = edgePaddingMap[edge];
+    map[paddingKey] = safeAreaInsets[edge];
+    return map;
+  }, {} as { [key in EdgePaddingMap[T]]: EdgeInsets[T] }) as Result;
 };
 
 type AppStateListener = (status: AppStateStatus) => void;

package/src/index.ts

@@ -24,6 +24,7 @@ export * from './shared';
 export * from './hooks';
 export * from './hooks/react-native';
 export * from './ui-format/groupChannel';
+export * from './ui-format/openChannel';
 export * from './ui-format/common';
 export * from './sendbird/channel';
 export * from './sendbird/message';
@@ -34,9 +35,19 @@ export const NOOP: () => void = () => void 0;
 export const ASYNC_NOOP = async () => void 0;
 export const PASS = <T>(val: T) => val;
 export const toMegabyte = (byte: number) => byte / 1024 / 1024;
-export const isFunction = <T>(param?: T): param is NonNullable<T> => typeof param === 'function';
+export const isFunction = (param?: unknown): param is Function => typeof param === 'function';
+
+export function ifThenOr<T>(cond: boolean, then: T): T | undefined;
+export function ifThenOr<T, V>(cond: boolean, then: T, or: V): T | V;
+export function ifThenOr(cond: boolean, then: unknown, or?: unknown) {
+  if (cond) return then;
+  return or;
+}
+
 export const SBErrorCode = {
   NON_AUTHORIZED: 400108,
+  CHANNEL_NOT_FOUND_SERVER: 400201,
+  CHANNEL_NOT_FOUND_SDK: 900500,
 };
 export const SBErrorMessage = {
   ACL:
@@ -54,6 +65,7 @@ export type {
   PartialDeep,
   Optional,
   ContextValue,
+  OnBeforeHandler,
   SendbirdMessage,
   SendbirdChatSDK,
   SendbirdChannel,
@@ -79,6 +91,7 @@ export type {
   SendbirdDataPayload,
   SendbirdPreviousMessageListQuery,
   SendbirdSendableMessage,
+  SendbirdOpenChannelListQuery,
   SendbirdGroupChannelListQuery,
   SendbirdGroupChannelUpdateParams,
   SendbirdUserMessageUpdateParams,
@@ -89,4 +102,7 @@ export type {
   SendbirdEmojiContainer,
   SendbirdEmoji,
   SendbirdEmojiCategory,
+  SendbirdOpenChannelUpdateParams,
+  SendbirdOpenChannelCreateParams,
+  SendbirdParticipant,
 } from './types';

package/src/sendbird/channel.ts

@@ -1,5 +1,11 @@
 import { BufferedRequest } from '../shared/bufferedRequest';
-import type { SendbirdBaseChannel, SendbirdChannel, SendbirdGroupChannel, SendbirdOpenChannel } from '../types';
+import type {
+  SendbirdBaseChannel,
+  SendbirdChannel,
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCreateParams,
+  SendbirdOpenChannel,
+} from '../types';
 
 /**
  * Diff utils for channel
@@ -13,12 +19,21 @@ export function isDifferentChannel<T extends SendbirdBaseChannel>(a?: T, b?: T):
 }
 
 export const getGroupChannelChatAvailableState = (channel: SendbirdGroupChannel) => {
-  const frozen = channel.isFrozen && channel.myRole !== 'operator';
+  const isOperator = channel.myRole === 'operator';
+  const frozen = channel.isFrozen && !isOperator;
   const muted = channel.myMutedState === 'muted';
   const disabled = frozen || muted;
   return { disabled, frozen, muted };
 };
 
+export const getOpenChannelChatAvailableState = async (channel: SendbirdOpenChannel, userId: string) => {
+  const isOperator = channel.isOperator(userId);
+  const frozen = channel.isFrozen && !isOperator;
+  const muted = (await channel.getMyMutedInfo()).isMuted;
+  const disabled = frozen || muted;
+  return { disabled, frozen, muted };
+};
+
 export const confirmAndMarkAsRead = async (channels: SendbirdBaseChannel[]) => {
   channels
     .filter((it): it is SendbirdGroupChannel => it.isGroupChannel() && it.unreadMessageCount > 0)
@@ -50,3 +65,19 @@ export function getOpenChannels(channels: SendbirdChannel[]): SendbirdOpenChanne
 export function getChannelUniqId(channel: SendbirdChannel) {
   return channel.url;
 }
+
+export function getDefaultGroupChannelCreateParams(params: {
+  invitedUserIds: string[];
+  currentUserId?: string;
+}): SendbirdGroupChannelCreateParams {
+  const createParams: SendbirdGroupChannelCreateParams = {
+    name: '',
+    coverUrl: '',
+    isDistinct: false,
+    invitedUserIds: params.invitedUserIds,
+  };
+
+  if (params.currentUserId) createParams.operatorUserIds = [params.currentUserId];
+
+  return createParams;
+}

package/src/sendbird/message.ts

@@ -1,3 +1,4 @@
+import { getFileExtension, getFileType } from '../shared/regex';
 import type {
   SendbirdBaseChannel,
   SendbirdBaseMessage,
@@ -114,9 +115,61 @@ export function parseSendbirdNotification(dataPayload: RawSendbirdDataPayload):
 }
 
 export function shouldRenderReaction(channel: SendbirdBaseChannel, reactionEnabled: boolean) {
-  return channel.isGroupChannel() && !channel.isBroadcast && !channel.isSuper && reactionEnabled;
+  if (channel.isOpenChannel()) {
+    return false;
+  }
+
+  if (channel.isGroupChannel()) {
+    if (channel.isBroadcast) return false;
+    if (channel.isSuper) return false;
+  }
+
+  return reactionEnabled;
 }
 
 export function getReactionCount(reaction: SendbirdReaction) {
   return reaction.userIds.length;
 }
+
+type MessageType =
+  | 'user'
+  | 'admin'
+  | 'file'
+  | 'unknown'
+  | `user.${'opengraph'}`
+  | `file.${'image' | 'video' | 'audio'}`;
+
+export function getFileTypeFromMessage(message: SendbirdFileMessage) {
+  return getFileType(message.type || getFileExtension(message.name));
+}
+
+export function getMessageType(message: SendbirdMessage): MessageType {
+  if (message.isAdminMessage()) {
+    return 'admin';
+  }
+
+  if (message.isUserMessage()) {
+    if (message.ogMetaData) {
+      return 'user.opengraph';
+    }
+    return 'user';
+  }
+
+  if (message.isFileMessage()) {
+    const fileType = getFileTypeFromMessage(message);
+    switch (fileType) {
+      case 'image':
+      case 'video': {
+        return `file.${fileType}`;
+      }
+      case 'audio': {
+        return `file.${fileType}`;
+      }
+      default: {
+        return 'file';
+      }
+    }
+  }
+
+  return 'unknown';
+}

package/src/sendbird/user.ts

@@ -9,13 +9,6 @@ export function ifOperator(role: Role, then: unknown, or?: unknown) {
   return or;
 }
 
-export function ifMuted<T>(muted: boolean, then: T): T | undefined;
-export function ifMuted<T, V>(muted: boolean, then: T, or: V): T | V;
-export function ifMuted(muted: boolean, then: unknown, or?: unknown) {
-  if (muted) return then;
-  return or;
-}
-
 export function getUserUniqId<T extends UserStruct>(user: T) {
   return user.userId;
 }

package/src/shared/index.ts

@@ -54,3 +54,13 @@ export function shouldCompressImage(filePath: string, compressionEnabled = true)
   const extension = getFileExtension(filePath);
   return Boolean(extension.match(/jpg|jpeg|png/i) && compressionEnabled);
 }
+
+/**
+ * Returns the picked data from object.
+ * */
+export function pick<T extends { [key: string]: unknown }, Keys extends keyof T>(obj: T, keys: Keys[]) {
+  return keys.reduce((pickedObj, key) => {
+    pickedObj[key] = obj[key];
+    return pickedObj;
+  }, {} as { [key in Keys]: T[key] });
+}

package/src/types.ts

@@ -9,6 +9,7 @@ import type {
   Emoji,
   EmojiCategory,
   EmojiContainer,
+  Participant,
   RestrictedUser,
   SendbirdError as SBError,
   User,
@@ -24,7 +25,12 @@ import type {
   Member,
   MessageCollection,
 } from '@sendbird/chat/groupChannel';
-import type { ModuleNamespaces, SendableMessage } from '@sendbird/chat/lib/__definition';
+import type {
+  ModuleNamespaces,
+  OpenChannelCreateParams,
+  OpenChannelUpdateParams,
+  SendableMessage,
+} from '@sendbird/chat/lib/__definition';
 import type {
   AdminMessage,
   BaseMessage,
@@ -37,7 +43,7 @@ import type {
   UserMessageCreateParams,
   UserMessageUpdateParams,
 } from '@sendbird/chat/message';
-import type { OpenChannel, OpenChannelModule } from '@sendbird/chat/openChannel';
+import type { OpenChannel, OpenChannelListQuery, OpenChannelModule } from '@sendbird/chat/openChannel';
 
 export type FilterByValueType<T extends object, Type> = {
   [K in keyof T as T[K] extends Type ? K : never]: T[K];
@@ -65,6 +71,8 @@ export type Optional<T> = T | undefined;
 
 export type ContextValue<T extends React.Context<any>> = T extends React.Context<infer V> ? V : never;
 
+export type OnBeforeHandler<T> = (params: T) => T | Promise<T>;
+
 export interface UserStruct {
   userId: string;
 }
@@ -81,12 +89,18 @@ export type SendbirdFileMessageCreateParams = FileMessageCreateParams;
 export type SendbirdFileMessageUpdateParams = FileMessageUpdateParams;
 export type SendbirdUserMessageCreateParams = UserMessageCreateParams;
 export type SendbirdUserMessageUpdateParams = UserMessageUpdateParams;
+
 export type SendbirdGroupChannelCreateParams = GroupChannelCreateParams;
 export type SendbirdGroupChannelUpdateParams = GroupChannelUpdateParams;
+export type SendbirdOpenChannelCreateParams = OpenChannelCreateParams;
+export type SendbirdOpenChannelUpdateParams = OpenChannelUpdateParams;
+
 export type SendbirdUserUpdateParams = UserUpdateParams;
 export type SendbirdUser = User;
 export type SendbirdRestrictedUser = RestrictedUser;
 export type SendbirdMember = Member;
+export type SendbirdParticipant = Participant;
+
 export type SendbirdGroupChannel = GroupChannel;
 export type SendbirdBaseChannel = BaseChannel;
 export type SendbirdOpenChannel = OpenChannel;
@@ -98,6 +112,7 @@ export type SendbirdEmojiContainer = EmojiContainer;
 
 export type SendbirdGroupChannelCollection = GroupChannelCollection;
 export type SendbirdGroupChannelListQuery = GroupChannelListQuery;
+export type SendbirdOpenChannelListQuery = OpenChannelListQuery;
 export type SendbirdMessageCollection = MessageCollection;
 export type SendbirdPreviousMessageListQuery = PreviousMessageListQuery;
 

package/src/ui-format/openChannel.ts

@@ -0,0 +1,11 @@
+import type { SendbirdOpenChannel } from '../types';
+
+export const getOpenChannelTitle = (channel: SendbirdOpenChannel, DEFAULT_CHANNEL_NAME = 'Open Channel') => {
+  const trimmedChannelName = channel.name.trim();
+  if (trimmedChannelName === '') return DEFAULT_CHANNEL_NAME;
+  return trimmedChannelName;
+};
+
+export const getOpenChannelParticipants = (channel: SendbirdOpenChannel) => {
+  return `${channel.participantCount} participants`;
+};