@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha3

package/src/core/client.ts

@@ -1,143 +1,280 @@
-import { AxiosInstance } from 'axios';
-import * as SignalR from '@microsoft/signalr';
-import {
-  Account,
-  AddChatRequest,
-  AddMemberRequest,
-  Chat,
-  ChatListItem,
-  Message,
-  ReadRequest,
-  RemoveMemberRequest,
-  SendMessageRequest,
-  UpdateChatNameRequest,
-} from './models';
-
-export interface ChatifySignalRConfig {
-  hubUri?: string;
-  accessTokenFactory?: () => Promise<string>;
-  headersFactory?: () => Promise<Record<string, string>>;
-}
-
-const DEFAULT_SIGNALR_CONFIG: ChatifySignalRConfig = {
-  hubUri: '/api/chatify/hub',
-  headersFactory: () => Promise.resolve({}),
-};
-
-export interface ChatifyClientConfig {
-  axios: AxiosInstance;
-  signalR: ChatifySignalRConfig;
-}
-
-const METHODS = [
-  'chatify://new-message',
-  'chatify://chat-created',
-  'chatify://read',
-  'chatify://member-added',
-  'chatify://member-removed',
-  'chatify://chat-name-changed',
-] as const;
-
-export class ChatifyClient {
-  private _config: ChatifyClientConfig;
-  private _connection: SignalR.HubConnection = null!;
-  private _subscribers: Record<string, ((args: any[]) => void)[]> = {};
-  private _reconnectSubscribers: Array<() => void> = [];
-
-  constructor(config: ChatifyClientConfig) {
-    this._config = {
-      ...config,
-      signalR: {
-        ...DEFAULT_SIGNALR_CONFIG,
-        ...config.signalR,
-      },
-    };
-  }
-
-  public connect = async () => {
-    const headers = await this._config.signalR!.headersFactory!();
-
-    this._connection = new SignalR.HubConnectionBuilder()
-      .withUrl(this._config.signalR!.hubUri!, {
-        accessTokenFactory: this._config.signalR!.accessTokenFactory
-          ? this._config.signalR!.accessTokenFactory
-          : undefined,
-        headers,
-      })
-      .withAutomaticReconnect()
-      .build();
-
-    METHODS.forEach((x) => {
-      this._connection.on(x, (...args) => {
-        this._subscribers[x]?.forEach((s) => s(args));
-      });
-    });
-
-    this._connection.onreconnected(() => this._reconnectSubscribers.forEach((subscriber) => subscriber()));
-
-    await this._connection.start();
-  };
-
-  public subscribe = <T extends any[]>(method: string, subscriber: (args: T) => void) => {
-    this._subscribers[method] = this._subscribers[method] ?? [];
-    this._subscribers[method].push(subscriber as any);
-    return () => this._subscribers[method].filter((x) => x !== subscriber);
-  };
-
-  public subscribeReconnect = (subscriber: () => any) => {
-    this._reconnectSubscribers.push(subscriber);
-    return () => this._reconnectSubscribers.filter((x) => x !== subscriber);
-  };
-
-  private get axios() {
-    return this._config.axios;
-  }
-
-  public accounts = async () => {
-    const { data } = await this.axios.get<Account[]>('account');
-    return data;
-  };
-
-  public chats = async () => {
-    const { data } = await this.axios.get<ChatListItem[]>('chat');
-    return data;
-  };
-
-  public chat = async (id: string) => {
-    const { data } = await this.axios.get<Chat>(`chat/${id}`);
-    return data;
-  };
-
-  public addChat = async (args: AddChatRequest) => {
-    const { data } = await this.axios.post<string>(`chat`, args);
-    return data;
-  };
-
-  public messages = async (args: { chatId: string; skip?: number; take?: number }) => {
-    const { chatId, skip = 0, take = 20 } = args;
-    const pagingRule = encodeURIComponent(JSON.stringify({ skip, take }));
-    const { data } = await this.axios.get<Message[]>(`chat/${chatId}/message?pagingRule=${pagingRule}`);
-    return data;
-  };
-
-  public send = async (request: SendMessageRequest) => {
-    const { chatId, ...rest } = request;
-    await this.axios.post(`chat/${chatId}/message`, rest);
-  };
-
-  public read = async (request: ReadRequest) => {
-    await this.axios.put(`chat/message/read`, request);
-  };
-
-  public removeMember = async (request: RemoveMemberRequest) => {
-    await this.axios.delete(`chat/${request.chatId}/member`, { data: request });
-  };
-
-  public updateChatName = async (request: UpdateChatNameRequest) => {
-    await this.axios.put(`chat/${request.id}/name`, request);
-  };
-
-  public addMember = async (request: AddMemberRequest) => {
-    await this.axios.post(`chat/${request.chatId}/member`, request);
-  };
-}
+import { AxiosInstance } from 'axios';
+import * as SignalR from '@microsoft/signalr';
+import {
+  Account,
+  AddChatRequest,
+  AddChatMemberRequest,
+  Chat,
+  ChatListItem,
+  ChatMessage,
+  ReadChatMessageEvent,
+  ReadChatMessageRequest,
+  RemoveChatMemberRequest,
+  SendChatMessageRequest,
+  UpdateChatNameRequest,
+  SendThreadMessageRequest,
+  Thread,
+  ThreadMessage,
+  ThreadWatchListItem as ThreadListItem,
+} from './types';
+
+export interface ChatifySignalRConfig {
+  hubUri?: string;
+  accessTokenFactory?: () => Promise<string>;
+  headersFactory?: () => Promise<Record<string, string>>;
+}
+
+const DEFAULT_SIGNALR_CONFIG: ChatifySignalRConfig = {
+  hubUri: '/api/chatify/hub',
+  headersFactory: () => Promise.resolve({}),
+};
+
+export interface ChatifyClientConfig {
+  axios: AxiosInstance;
+  signalR: ChatifySignalRConfig;
+}
+
+export const CHATIFY_SIGNALR_METHODS = [
+  'chatify://chat-new-message',
+  'chatify://chat-created',
+  'chatify://chat-message-read',
+  'chatify://chat-member-added',
+  'chatify://chat-member-removed',
+  'chatify://chat-name-changed',
+
+  'chatify://thread-created',
+  'chatify://thread-message-new',
+  'chatify://thread-message-read',
+  'chatify://thread-watch-added',
+  'chatify://thread-watch-removed',
+] as const;
+
+export type ChatifySignalRMethod = (typeof CHATIFY_SIGNALR_METHODS)[number];
+
+export type ChatifySignalRArgsByMethod = {
+  'chatify://chat-new-message': [message: ChatMessage];
+  'chatify://chat-created': [chat: ChatListItem];
+  'chatify://chat-message-read': [events: ReadChatMessageEvent[]];
+  'chatify://chat-member-added': [
+    chatId: string,
+    chatName: string,
+    account: Account,
+    message: ChatMessage,
+    withHistory: boolean,
+    read: boolean,
+  ];
+  'chatify://chat-member-removed': [
+    chatId: string,
+    accountId: string,
+    deleteHistory: boolean,
+    message: ChatMessage,
+    read: boolean,
+  ];
+  'chatify://chat-name-changed': [chatId: string, newName: string, message: ChatMessage, read: boolean];
+
+  'chatify://thread-message-new': [threadId: string, message: ThreadMessage, readForId: string | null];
+  'chatify://thread-message-read': [threadId: string, messageId: string];
+  'chatify://thread-watch-added': [thread: ThreadListItem];
+  'chatify://thread-watch-removed': [id: string];
+  'chatify://thread-created': [thread: ThreadListItem, watch: boolean];
+};
+
+export class ChatifyClient {
+  private _config: ChatifyClientConfig;
+  private _connection: SignalR.HubConnection = null!;
+  private _connectionPromise: Promise<SignalR.HubConnection> | null = null!;
+  private _subscribers: Record<string, ((args: any[]) => void)[]> = {};
+  private _reconnectSubscribers: Array<() => void> = [];
+  private _threadConnectionByThreadId = new Map<string, number>();
+
+  constructor(config: ChatifyClientConfig) {
+    this._config = {
+      ...config,
+      signalR: {
+        ...DEFAULT_SIGNALR_CONFIG,
+        ...config.signalR,
+      },
+    };
+  }
+
+  public connect = async () => {
+    if (this._connection) {
+      return;
+    }
+
+    if (this._connectionPromise) {
+      return await this._connectionPromise;
+    }
+
+    this._connectionPromise = this.createAndStartConnection();
+    this._connection = await this._connectionPromise;
+  };
+
+  private createAndStartConnection = async () => {
+    const headers = await this._config.signalR!.headersFactory!();
+
+    const connection = new SignalR.HubConnectionBuilder()
+      .withUrl(this._config.signalR!.hubUri!, {
+        accessTokenFactory: this._config.signalR!.accessTokenFactory
+          ? this._config.signalR!.accessTokenFactory
+          : undefined,
+        headers,
+      })
+      .withAutomaticReconnect()
+      .build();
+
+    CHATIFY_SIGNALR_METHODS.forEach((x) => {
+      connection.on(x, (...args) => {
+        this._subscribers[x]?.forEach((s) => {
+          try {
+            s(args);
+          } catch (ex) {
+            console.error(`Failed to notify subscriber`, ex);
+          }
+        });
+      });
+    });
+
+    connection.onreconnected(() => this._reconnectSubscribers.forEach((subscriber) => subscriber()));
+
+    await connection.start();
+    return connection;
+  };
+
+  public subscribe = <TMethod extends ChatifySignalRMethod>(
+    method: TMethod,
+    subscriber: (args: ChatifySignalRArgsByMethod[TMethod]) => void,
+  ) => {
+    this.connect().then(() => {
+      this._subscribers[method] = this._subscribers[method] ?? [];
+      this._subscribers[method].push(subscriber as any);
+    });
+    return () => this._subscribers[method].filter((x) => x !== subscriber);
+  };
+
+  public subscribeReconnect = (subscriber: () => any) => {
+    this._reconnectSubscribers.push(subscriber);
+    return () => this._reconnectSubscribers.filter((x) => x !== subscriber);
+  };
+
+  private get axios() {
+    return this._config.axios;
+  }
+
+  public accounts = async () => {
+    const { data } = await this.axios.get<Account[]>('account');
+    return data;
+  };
+
+  public chats = async () => {
+    const { data } = await this.axios.get<ChatListItem[]>('chat');
+    return data;
+  };
+
+  public chat = async (id: string) => {
+    const { data } = await this.axios.get<Chat>(`chat/${encodeURIComponent(id)}`);
+    return data;
+  };
+
+  public addChat = async (args: AddChatRequest) => {
+    const { data } = await this.axios.post<string>(`chat`, args);
+    return data;
+  };
+
+  public chatMessages = async (args: { chatId: string; skip?: number; take?: number }) => {
+    const { chatId, skip = 0, take = 20 } = args;
+    const pagingRule = encodeURIComponent(JSON.stringify({ skip, take }));
+    const { data } = await this.axios.get<ChatMessage[]>(
+      `chat/${encodeURIComponent(chatId)}/message?pagingRule=${pagingRule}`,
+    );
+    return data;
+  };
+
+  public sendChatMessage = async (request: SendChatMessageRequest) => {
+    const { chatId, ...rest } = request;
+    await this.axios.post(`chat/${encodeURIComponent(chatId)}/message`, rest);
+  };
+
+  public readChatMessage = async (request: ReadChatMessageRequest) => {
+    await this.axios.put(`chat/message/read`, request);
+  };
+
+  public removeChatMember = async (request: RemoveChatMemberRequest) => {
+    await this.axios.delete(`chat/${encodeURIComponent(request.chatId)}/member`, { data: request });
+  };
+
+  public updateChatName = async (request: UpdateChatNameRequest) => {
+    await this.axios.put(`chat/${encodeURIComponent(request.id)}/name`, request);
+  };
+
+  public addChatMember = async (request: AddChatMemberRequest) => {
+    await this.axios.post(`chat/${encodeURIComponent(request.chatId)}/member`, request);
+  };
+
+  public sendThreadMessage = async ({ body, threadId }: SendThreadMessageRequest) => {
+    const { data: id } = await this.axios.post<string>(`thread/${encodeURIComponent(threadId)}/message`, {
+      body,
+    });
+    return id;
+  };
+
+  public readThreadMessage = async (id: string) => {
+    await this.axios.put(`thread/message/${encodeURIComponent(id)}/read`);
+  };
+
+  public watchThreads = async () => {
+    const { data } = await this.axios.get<ThreadListItem[]>(`thread/watch`);
+    return data;
+  };
+
+  public thread = async (id: string) => {
+    const { data } = await this.axios.get<Thread>(`thread/${encodeURIComponent(id)}`);
+    return data;
+  };
+
+  public threadMessages = async ({
+    threadId,
+    skip,
+    take,
+  }: {
+    threadId: string;
+    skip: number;
+    take: number;
+  }) => {
+    const searchParams = new URLSearchParams();
+    searchParams.append('skip', skip.toString());
+    searchParams.append('take', take.toString());
+    const { data } = await this.axios.get<ThreadMessage[]>(
+      `thread/${encodeURIComponent(threadId)}/message?${searchParams.toString()}`,
+    );
+    return data;
+  };
+
+  public watchThread = async (id: string, watch: boolean) => {
+    await this.axios.put(`thread/${encodeURIComponent(id)}/watch`, { watch });
+  };
+
+  public connectToThread = async (id: string) => {
+    const connectionCount = this._threadConnectionByThreadId.get(id) ?? 0;
+    this._threadConnectionByThreadId.set(id, connectionCount + 1);
+
+    if (connectionCount === 0) {
+      this.connect().then(() => this._connection.invoke('ConnectToThread', id));
+    }
+  };
+
+  public disconnectFromThread = async (id: string) => {
+    const connectionCount = this._threadConnectionByThreadId.get(id) ?? 0;
+    this._threadConnectionByThreadId.set(id, Math.max(0, connectionCount - 1));
+
+    if (connectionCount === 1) {
+      this.connect().then(() => this._connection.invoke('DisconnectFromThread', id));
+    }
+  };
+}
+
+export function unsubscribe(...subscribers: Array<() => void>) {
+  const result = () => subscribers.forEach((x) => x());
+  result.when = (promise: Promise<any>) => promise.then(result);
+  return result;
+}

package/src/core/constants.ts

@@ -0,0 +1 @@
+export const SYSTEM_ID = 'chatify::system';

package/src/core/debounce.ts

@@ -0,0 +1,90 @@
+interface DebounceInternalValue<T> {
+  value: T;
+  enqueueTime: number;
+}
+
+export interface DebounceValue<T> extends DebounceInternalValue<T> {
+  state: 'enqueued' | 'processing';
+}
+
+export interface DebounceConfig<T> {
+  timeout: number;
+  callback: (value: T) => Promise<any>;
+  groupBy: (value: T) => string;
+  compare: (a: T, b: T) => number;
+}
+
+export class Debounce<T> {
+  private _enqueued: DebounceInternalValue<T>[] = [];
+  private _processing: DebounceInternalValue<T>[] = [];
+  private _timeoutByGroup: Record<string, NodeJS.Timeout> = {};
+  private _subscribers: ((value: Debounce<T>) => any)[] = [];
+
+  constructor(public config: DebounceConfig<T>) {}
+
+  public get units(): DebounceValue<T>[] {
+    return [
+      ...this._enqueued.map((x) => ({ ...x, state: 'enqueued' as const })),
+      ...this._processing.map((x) => ({ ...x, state: 'processing' as const })),
+    ];
+  }
+
+  public subscribe = (callback: (value: Debounce<T>) => any) => {
+    this._subscribers.push(callback);
+    return () => {
+      this._subscribers = this._subscribers.filter((x) => x !== callback);
+    };
+  };
+
+  public notify = () => {
+    this._subscribers.forEach((subscriber) => subscriber(this));
+  };
+
+  public push(value: T) {
+    const group = this.config.groupBy(value);
+    const unit = this._enqueued.find((unit) => this.config.groupBy(unit.value) === group);
+
+    if (!unit) {
+      this._enqueued.push({ value, enqueueTime: Date.now() });
+    } else if (this.config.compare(unit.value, value) >= 0) {
+      unit.value = value;
+      unit.enqueueTime = Date.now();
+    }
+
+    this._process(group);
+  }
+
+  private _process(group: string) {
+    if (!this._enqueued.some((unit) => this.config.groupBy(unit.value) === group)) {
+      return;
+    }
+
+    let timeout = this._timeoutByGroup[group];
+    timeout && clearTimeout(timeout);
+
+    if (this._processing.some((unit) => this.config.groupBy(unit.value) === group)) {
+      return;
+    }
+
+    timeout = setTimeout(() => {
+      const processing = this._enqueued.find((unit) => this.config.groupBy(unit.value) === group)!;
+      this._processing.push(processing);
+      this._enqueued.splice(this._enqueued.indexOf(processing), 1);
+      this.notify();
+
+      this.config
+        .callback(processing.value)
+        .then(() => {
+          this._processing.splice(this._processing.indexOf(processing), 1);
+          this.notify();
+          this._process(group);
+        })
+        .catch(() => {
+          this._processing.splice(this._processing.indexOf(processing), 1);
+          this.push(processing.value);
+        });
+    }, this.config.timeout);
+
+    this._timeoutByGroup[group] = timeout;
+  }
+}

package/src/core/index.ts

@@ -1,17 +1,4 @@
-export * from './models';
-export * from './client';
-export * from './action';
-export * from './reducer';
-export * from './state';
-export * from './useGetChatQuery';
-export * from './useGetChatListQuery';
-export * from './useFetchNextMutation';
-export * from './useGetMessagesQuery';
-export * from './useSignalRMonitor';
-export * from './useGetAccountsQuery';
-export * from './useAddChatMutation';
-export * from './useReadMonitor';
-export * from './useAddMemberMutation';
-export * from './useRemoveMemberMutation';
-export * from './useSendMutation';
-export * from './useUpdateChatNameMutation';
+export * from './constants';
+export * from './types';
+export * from './api';
+export * from './client';

package/src/core/types.tsx

@@ -0,0 +1,149 @@
+export interface File {
+  name: string;
+  bytes: number;
+  ref: string;
+}
+
+export interface Account {
+  id: string;
+  name: string;
+  avatar: string;
+}
+
+export interface MessageBase {
+  id: string;
+  text: string | null;
+  files: File[];
+  sentAt: string;
+  sentBy: Account;
+}
+
+export interface ChatMessage extends MessageBase {
+  chatId: string;
+}
+
+export interface Chat {
+  id: string;
+  name: string;
+  members: Account[];
+  active: boolean;
+  lastReadMessageId: string | null;
+}
+
+export interface ChatListItem {
+  id: string;
+  name: string;
+  message: ChatMessage;
+  totalUnreadCount: number;
+  active: boolean;
+  lastReadMessageId: string | null;
+}
+
+export interface SendChatMessageRequest {
+  chatId: string;
+  text: string | null;
+  files: File[];
+}
+
+export interface MessageBody {
+  text: string | null;
+  files: File[];
+}
+
+export interface AddChatRequest {
+  name: string;
+  message?: MessageBody;
+  members: string[];
+}
+
+export interface ReadChatMessageRequest {
+  id: string;
+}
+
+export interface ReadChatMessageEvent {
+  chatId: string;
+  newLastReadMessageId: string;
+  readCount: number;
+}
+
+export interface RemoveChatMemberRequest {
+  chatId: string;
+  accountId: string;
+  deleteHistory: boolean;
+}
+
+export interface AddChatMemberRequest {
+  chatId: string;
+  accountId: string;
+  withHistory: boolean;
+}
+
+export interface UpdateChatNameRequest {
+  id: string;
+  name: string;
+}
+
+export function chatId(messageId: string) {
+  return messageId.slice(0, 36);
+}
+
+export interface ThreadWatchListItem {
+  id: string;
+  name: string;
+  createdById: string;
+  createdAt: string;
+  archive: boolean;
+  lastMessage: ThreadMessage | null;
+  lastReadMessageId: string | null;
+}
+
+export interface Thread {
+  id: string;
+  name: string;
+  createdBy: Account;
+  createdAt: string;
+  archive: boolean;
+  lastMessageId: string | null;
+  lastReadMessageId: string | null;
+  watch: boolean;
+}
+
+export interface ThreadMessage extends MessageBase {
+  threadId: string;
+}
+
+export interface SendThreadMessageRequest {
+  threadId: string;
+  body: MessageBody;
+}
+
+export type SystemMessageText =
+  | 'chatify://chat-created'
+  | 'chatify://member-added'
+  | 'chatify://member-removed'
+  | `chatify://chat-name-changed`;
+
+export function parseThreadMessageId(messageId: string) {
+  const [threadId, index] = messageId.split('::', 2);
+  return [threadId, parseInt(index, 10)] as const;
+}
+
+export function calcThreadUnreadCount(
+  thread: Pick<ThreadWatchListItem, 'lastMessage' | 'lastReadMessageId'>,
+) {
+  const lastReadMessageIndex =
+    thread.lastReadMessageId != null ? parseThreadMessageId(thread.lastReadMessageId)[1] : -1;
+
+  const lastThreadMessageIndex =
+    thread.lastMessage?.id != null ? parseThreadMessageId(thread.lastMessage?.id)[1] : -1;
+
+  return lastThreadMessageIndex - lastReadMessageIndex;
+}
+
+export function calcThreadListUnreadCount(
+  threads: Pick<ThreadWatchListItem, 'lastMessage' | 'lastReadMessageId'>[],
+) {
+  return threads.reduce((prev, thread) => {
+    return prev + calcThreadUnreadCount(thread);
+  }, 0);
+}