@sendbird/uikit-utils 2.0.3 → 2.2.0

package/src/hooks/index.ts

@@ -56,6 +56,17 @@ export const useIsMountedRef = () => {
   return isMounted;
 };
 
+export const useIsFirstMount = () => {
+  const isFirstMount = useRef(true);
+
+  if (isFirstMount.current) {
+    isFirstMount.current = false;
+    return true;
+  }
+
+  return isFirstMount.current;
+};
+
 export const useFreshCallback = <T extends (...args: any[]) => any>(callback: T): T => {
   const ref = useRef<T>(callback);
   ref.current = callback;

package/src/index.ts

@@ -15,8 +15,11 @@ export {
   normalizeFileName,
   emailRegex,
   phoneRegex,
+  replaceWithRegex,
+  createMentionTemplateRegex,
 } from './shared/regex';
 export { BufferedRequest } from './shared/bufferedRequest';
+export { default as replace } from './shared/replace';
 
 export * from './hooks';
 export * from './ui-format/groupChannel';
@@ -24,6 +27,7 @@ export * from './ui-format/common';
 export * from './sendbird/channel';
 export * from './sendbird/message';
 export * from './sendbird/attrs';
+export * from './sendbird/user';
 
 export const NOOP: () => void = () => void 0;
 export const ASYNC_NOOP = async () => void 0;
@@ -35,11 +39,14 @@ export const SBErrorCode = {
 };
 export const SBErrorMessage = {
   ACL:
-    "An error occurred because you don't have access to the user list in your application.\n" +
-    'In order to gain access, you can turn on this attribute in the Access Control List settings on Sendbird Dashboard.',
+    'Sendbird provides various access control options when using the Chat SDK.\n' +
+    'By default, the Allow retrieving user list attribute is turned on to facilitate creating sample apps.\n' +
+    'However, this may grant access to unwanted data or operations, leading to potential security concerns.\n' +
+    'To manage your access control settings, you can turn on or off each setting on Sendbird Dashboard.',
 };
 
 export type {
+  UserStruct,
   FilterByValueType,
   UnionToIntersection,
   OmittedValues,
@@ -76,4 +83,9 @@ export type {
   SendbirdUserMessageUpdateParams,
   SendbirdFileMessageUpdateParams,
   SendbirdUserUpdateParams,
+  SendbirdRestrictedUser,
+  SendbirdReaction,
+  SendbirdEmojiContainer,
+  SendbirdEmoji,
+  SendbirdEmojiCategory,
 } from './types';

package/src/sendbird/channel.ts

@@ -12,20 +12,23 @@ export function isDifferentChannel<T extends SendbirdBaseChannel>(a?: T, b?: T):
   return a.url !== b.url;
 }
 
-export const isGroupChannelChatUnavailable = (channel: SendbirdGroupChannel) => {
-  return channel.myMutedState === 'muted' || (channel.isFrozen && channel.myRole !== 'operator');
+export const getGroupChannelChatAvailableState = (channel: SendbirdGroupChannel) => {
+  const frozen = channel.isFrozen && channel.myRole !== 'operator';
+  const muted = channel.myMutedState === 'muted';
+  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)
-    .forEach((it) => BufferedRequest.markAsRead.push(() => it.markAsRead()));
+    .forEach((it) => BufferedRequest.markAsRead.push(() => it.markAsRead(), it.url));
 };
 
 export const confirmAndMarkAsDelivered = async (channels: SendbirdBaseChannel[]) => {
   channels
     .filter((it): it is SendbirdGroupChannel => it.isGroupChannel() && it.unreadMessageCount > 0)
-    .forEach((it) => BufferedRequest.markAsDelivered.push(() => it.markAsDelivered()));
+    .forEach((it) => BufferedRequest.markAsDelivered.push(() => it.markAsDelivered(), it.url));
 };
 
 export function isDefaultCoverImage(coverUrl: string) {
@@ -43,3 +46,7 @@ export function getGroupChannels(channels: SendbirdChannel[]): SendbirdGroupChan
 export function getOpenChannels(channels: SendbirdChannel[]): SendbirdOpenChannel[] {
   return channels.filter((c): c is SendbirdOpenChannel => c.isOpenChannel());
 }
+
+export function getChannelUniqId(channel: SendbirdChannel) {
+  return channel.url;
+}

package/src/sendbird/message.ts

@@ -1,11 +1,13 @@
 import type {
+  SendbirdBaseChannel,
   SendbirdBaseMessage,
   SendbirdDataPayload,
   SendbirdFileMessage,
   SendbirdMessage,
+  SendbirdReaction,
   SendbirdSendableMessage,
 } from '../types';
-import { messageTime } from '../ui-format/common';
+import { getMessageTimeFormat } from '../ui-format/common';
 
 export function isNewMessage(msg: SendbirdMessage, currentUserId?: string) {
   const myMessage = isMyMessage(msg, currentUserId);
@@ -67,7 +69,7 @@ export function calcMessageGrouping(
     if (!prev) return false;
     if (curr.isAdminMessage()) return false;
     if (!hasSameSender(curr, prev)) return false;
-    if (messageTime(new Date(curr.createdAt)) !== messageTime(new Date(prev.createdAt))) return false;
+    if (getMessageTimeFormat(new Date(curr.createdAt)) !== getMessageTimeFormat(new Date(prev.createdAt))) return false;
     return true;
   };
 
@@ -76,7 +78,7 @@ export function calcMessageGrouping(
     if (!next) return false;
     if (curr.isAdminMessage()) return false;
     if (!hasSameSender(curr, next)) return false;
-    if (messageTime(new Date(curr.createdAt)) !== messageTime(new Date(next.createdAt))) return false;
+    if (getMessageTimeFormat(new Date(curr.createdAt)) !== getMessageTimeFormat(new Date(next.createdAt))) return false;
     return true;
   };
 
@@ -110,3 +112,11 @@ export function isSendbirdNotification(dataPayload?: {
 export function parseSendbirdNotification(dataPayload: RawSendbirdDataPayload): SendbirdDataPayload {
   return typeof dataPayload.sendbird === 'string' ? JSON.parse(dataPayload.sendbird) : dataPayload.sendbird;
 }
+
+export function shouldRenderReaction(channel: SendbirdBaseChannel, reactionEnabled: boolean) {
+  return channel.isGroupChannel() && !channel.isBroadcast && !channel.isSuper && reactionEnabled;
+}
+
+export function getReactionCount(reaction: SendbirdReaction) {
+  return reaction.userIds.length;
+}

package/src/sendbird/user.ts

@@ -0,0 +1,21 @@
+import type { Role } from '@sendbird/chat';
+
+import type { UserStruct } from '../types';
+
+export function ifOperator<T>(role: Role, then: T): T | undefined;
+export function ifOperator<T, V>(role: Role, then: T, or: V): T | V;
+export function ifOperator(role: Role, then: unknown, or?: unknown) {
+  if (role === 'operator') return then;
+  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/bufferedRequest.ts

@@ -5,10 +5,21 @@ let REQ_PER_TIMEOUT = 5;
 let TIMEOUT_MILLS = 1000;
 const SAFE_TIMEOUT_BUFFER = 100;
 
+function generateRandomId() {
+  return Math.random().toString(16).slice(2);
+}
+
 export class BufferedRequest {
   public static markAsRead = BufferedRequest.create();
   public static markAsDelivered = BufferedRequest.create();
 
+  public static updateMarkAsReadOptions(reqPerTimeout: number, timeoutMills: number) {
+    BufferedRequest.markAsRead = BufferedRequest.create(reqPerTimeout, timeoutMills);
+  }
+  public static updateMarkAsDeliveredOptions(reqPerTimeout: number, timeoutMills: number) {
+    BufferedRequest.markAsDelivered = BufferedRequest.create(reqPerTimeout, timeoutMills);
+  }
+
   public static get reqPerTimeout() {
     return REQ_PER_TIMEOUT;
   }
@@ -28,28 +39,33 @@ export class BufferedRequest {
   }
 
   public static create(reqPerTimeout = REQ_PER_TIMEOUT, timeoutMills = TIMEOUT_MILLS) {
-    const waitQueue: Func[] = [];
-    const nextQueue: Func[] = [];
+    const waitQueue = new Map<string, Func>();
+    const nextQueue = new Map<string, Func>();
 
     let state: State = 'idle';
     let timeout: NodeJS.Timeout | undefined;
 
     return {
-      push(func: Func) {
-        waitQueue.push(func);
+      push(func: Func, lane?: string) {
+        waitQueue.set(lane ?? generateRandomId(), func);
         this.invoke();
       },
       shift() {
-        if (nextQueue.length < reqPerTimeout) {
-          const nextRemains = Math.min(reqPerTimeout - nextQueue.length, waitQueue.length);
+        if (nextQueue.size < reqPerTimeout) {
+          const nextRemains = Math.min(reqPerTimeout - nextQueue.size, waitQueue.size);
+          const lanes = [...waitQueue.keys()];
           for (let n = 0; n < nextRemains; n++) {
-            const func = waitQueue.shift();
-            if (func) nextQueue.push(func);
+            const lane = lanes[n];
+            const func = waitQueue.get(lane);
+            if (func) {
+              waitQueue.delete(lane);
+              nextQueue.set(lane, func);
+            }
           }
         }
       },
       handleIdle() {
-        if (0 < nextQueue.length) {
+        if (0 < nextQueue.size) {
           state = 'processing';
           this.invoke();
         }
@@ -59,15 +75,24 @@ export class BufferedRequest {
 
         timeout = setTimeout(() => {
           timeout = undefined;
-          if (0 < nextQueue.length || 0 < waitQueue.length) {
+          if (0 < nextQueue.size || 0 < waitQueue.size) {
             this.invoke();
           } else {
             state = 'idle';
           }
         }, timeoutMills + SAFE_TIMEOUT_BUFFER);
 
-        nextQueue.forEach((func) => func());
-        nextQueue.length = 0;
+        let index = 0;
+        const nextRequestBaseTimeout = timeoutMills / nextQueue.size;
+        nextQueue.forEach((func) => {
+          setTimeout(() => {
+            func();
+            // TODO: Add retry
+            //.catch(() => waitQueue.set(lane, func));
+          }, nextRequestBaseTimeout * index);
+          index++;
+        });
+        nextQueue.clear();
       },
       async invoke() {
         this.shift();

package/src/shared/regex.ts

@@ -9,6 +9,8 @@ export const phoneRegex = /[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}/
 export const emailRegex = /\S+@\S+\.\S+/;
 export const newLineRegex = /\r\n|\r|\n/g;
 
+export const createMentionTemplateRegex = (trigger: string) => new RegExp(`(${trigger}[{])(.*?)([}])`, 'g');
+
 // const cases = [
 //   {
 //     type: 'urlStrict',
@@ -28,6 +30,39 @@ export const newLineRegex = /\r\n|\r|\n/g;
 //   },
 // ];
 
+export const replaceWithRegex = <T>(
+  text: string,
+  regex: RegExp,
+  replacer: (params: {
+    match: string;
+    groups: string[];
+    matchIndex: number | undefined;
+    index: number;
+    keyPrefix: string;
+  }) => T,
+  keyPrefix: string,
+) => {
+  const matches = [...text.matchAll(regex)];
+  const founds = matches.map((value) => {
+    const text = value[0];
+    const start = value.index ?? 0;
+    const end = start + text.length;
+    return { text, start, end, groups: value, matchIndex: value.index };
+  });
+
+  const items: Array<T | string> = [text];
+  let cursor = 0;
+  founds.forEach(({ text, start, end, groups, matchIndex }, index) => {
+    const restText = items.pop() as string;
+    const head = restText.slice(0, start - cursor);
+    const mid = replacer({ match: text, groups, matchIndex, index, keyPrefix });
+    const tail = restText.slice(end - cursor);
+    items.push(head, mid, tail);
+    cursor = end;
+  });
+  return items;
+};
+
 export const replaceUrlAsComponents = <T>(originText: string, replacer: (url: string) => T, strict?: boolean) => {
   const matches = [...originText.matchAll(strict ? urlRegexStrict : urlRegexRough)];
   const founds = matches.map((value) => {

package/src/shared/replace.ts

@@ -0,0 +1,5 @@
+const replace = (original: string, start: number, end: number, str: string) => {
+  return original.slice(0, start) + str + original.slice(end);
+};
+
+export default replace;

package/src/types.ts

@@ -4,7 +4,16 @@
 import type React from 'react';
 
 import type SendbirdChat from '@sendbird/chat';
-import type { BaseChannel, SendbirdError as SBError, User, UserUpdateParams } from '@sendbird/chat';
+import type {
+  BaseChannel,
+  Emoji,
+  EmojiCategory,
+  EmojiContainer,
+  RestrictedUser,
+  SendbirdError as SBError,
+  User,
+  UserUpdateParams,
+} from '@sendbird/chat';
 import type {
   GroupChannel,
   GroupChannelCollection,
@@ -23,14 +32,13 @@ import type {
   FileMessageCreateParams,
   FileMessageUpdateParams,
   PreviousMessageListQuery,
+  Reaction,
   UserMessage,
   UserMessageCreateParams,
   UserMessageUpdateParams,
 } from '@sendbird/chat/message';
 import type { OpenChannel, OpenChannelModule } from '@sendbird/chat/openChannel';
 
-import './';
-
 export type FilterByValueType<T extends object, Type> = {
   [K in keyof T as T[K] extends Type ? K : never]: T[K];
 };
@@ -57,6 +65,10 @@ export type Optional<T> = T | undefined;
 
 export type ContextValue<T extends React.Context<any>> = T extends React.Context<infer V> ? V : never;
 
+export interface UserStruct {
+  userId: string;
+}
+
 export type SendbirdChatSDK = SendbirdChat & ModuleNamespaces<[GroupChannelModule, OpenChannelModule]>;
 export type SendbirdMessage = BaseMessage | FileMessage | UserMessage | AdminMessage | SendableMessage;
 export type SendbirdChannel = BaseChannel | GroupChannel | OpenChannel;
@@ -73,11 +85,17 @@ export type SendbirdGroupChannelCreateParams = GroupChannelCreateParams;
 export type SendbirdGroupChannelUpdateParams = GroupChannelUpdateParams;
 export type SendbirdUserUpdateParams = UserUpdateParams;
 export type SendbirdUser = User;
+export type SendbirdRestrictedUser = RestrictedUser;
 export type SendbirdMember = Member;
 export type SendbirdGroupChannel = GroupChannel;
 export type SendbirdBaseChannel = BaseChannel;
 export type SendbirdOpenChannel = OpenChannel;
 
+export type SendbirdReaction = Reaction;
+export type SendbirdEmoji = Emoji;
+export type SendbirdEmojiCategory = EmojiCategory;
+export type SendbirdEmojiContainer = EmojiContainer;
+
 export type SendbirdGroupChannelCollection = GroupChannelCollection;
 export type SendbirdGroupChannelListQuery = GroupChannelListQuery;
 export type SendbirdMessageCollection = MessageCollection;

package/src/ui-format/common.ts

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns';
-import format from 'date-fns/format';
+import { format, isThisYear } from 'date-fns';
 
 type TruncateMode = 'head' | 'mid' | 'tail';
 type TruncateOption = { mode: TruncateMode; maxLen: number; separator: string };
@@ -38,15 +38,16 @@ export const truncate = (str: string, opts: Partial<TruncateOption> = defaultOpt
 };
 
 /**
- * Badge count truncate util
+ * Count truncate util
  * If count exceed the limit, it comes in the form of "MAX+"
  *
  * @param {number} count
  * @param {number} MAX default 99
+ * @param {string} MAX_SUFFIX default +
  * @returns {string}
  * */
-export const truncatedBadgeCount = (count: number, MAX = 99) => {
-  if (count >= MAX) return `${MAX}+`;
+export const truncatedCount = (count: number, MAX = 99, MAX_SUFFIX = '+') => {
+  if (count >= MAX) return `${MAX}${MAX_SUFFIX}`;
   return `${count}`;
 };
 
@@ -57,8 +58,9 @@ export const truncatedBadgeCount = (count: number, MAX = 99) => {
  * @param {Locale} [locale]
  * @returns {string}
  * */
-export const dateSeparator = (date: Date, locale?: Locale): string => {
-  return format(date, 'E, LLL dd', { locale });
+export const getDateSeparatorFormat = (date: Date, locale?: Locale): string => {
+  if (isThisYear(date)) return format(date, 'MMM dd, yyyy', { locale });
+  return format(date, 'E, MMM dd', { locale });
 };
 
 /**
@@ -68,6 +70,6 @@ export const dateSeparator = (date: Date, locale?: Locale): string => {
  * @param {Locale} [locale]
  * @returns {string}
  * */
-export const messageTime = (date: Date, locale?: Locale): string => {
+export const getMessageTimeFormat = (date: Date, locale?: Locale): string => {
   return format(date, 'p', { locale });
 };

package/src/ui-format/groupChannel.ts

@@ -1,7 +1,5 @@
 import type { Locale } from 'date-fns';
-import format from 'date-fns/format';
-import isToday from 'date-fns/isToday';
-import isYesterday from 'date-fns/isYesterday';
+import { format, isThisYear, isToday, isYesterday } from 'date-fns';
 
 import type { SendbirdGroupChannel } from '../types';
 import { truncate } from './common';
@@ -23,9 +21,12 @@ export const getGroupChannelTitle = (
 
 export const getGroupChannelPreviewTime = (channel: SendbirdGroupChannel, locale?: Locale) => {
   const timestamp = channel.lastMessage?.createdAt || channel.joinedAt * 1000 || channel.createdAt;
+
   if (isToday(timestamp)) return format(timestamp, 'p', { locale });
   if (isYesterday(timestamp)) return 'Yesterday';
-  return format(timestamp, 'MMM dd', { locale });
+  if (isThisYear(timestamp)) return format(timestamp, 'MMM dd', { locale });
+
+  return format(timestamp, 'yyyy/MM/dd', { locale });
 };
 
 export const getGroupChannelLastMessage = (channel: SendbirdGroupChannel, EMPTY_MESSAGE = '', MAX_LEN = 15) => {