@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha1

package/src/core/api/chatApi.ts

@@ -0,0 +1,87 @@
+import { BaseApiEndpointBuilder, __baseApi, __settings } from './baseApi';
+import { unsubscribe } from '../client';
+import { Chat } from '../types';
+
+export function chatEndpoints(builder: BaseApiEndpointBuilder) {
+  return {};
+}
+
+const chatApi = __baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getChat: builder.query<Chat, { id: string }>({
+      queryFn: async ({ id }) => ({ data: await __settings.client.chat(id) }),
+      providesTags: ['chat', 'account'],
+      onCacheEntryAdded: async ({ id }, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+
+        unsubscribe(
+          __settings.client.subscribe(
+            'chatify://chat-member-added',
+            ([chatId, _, account, message, , read]) =>
+              chatId === id &&
+              updateCachedData((chat) => {
+                chat.members.push(account);
+                chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
+              }),
+          ),
+          __settings.client.subscribe(
+            'chatify://chat-member-removed',
+            ([chatId, accountId, , message, read]) =>
+              id === chatId &&
+              updateCachedData((chat) => {
+                chat.members = chat.members.filter((x) => x.id !== accountId);
+                chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
+              }),
+          ),
+          __settings.client.subscribe(
+            'chatify://chat-name-changed',
+            ([chatId, newName, message, read]) =>
+              id === chatId &&
+              updateCachedData((chat) => {
+                chat.name = newName;
+                chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
+              }),
+          ),
+          __settings.client.subscribe(
+            'chatify://chat-new-message',
+            ([message]) =>
+              id === message.chatId &&
+              updateCachedData((chat) => {
+                chat.lastReadMessageId =
+                  message.sentBy.id === __settings.me() ? message.id : chat.lastReadMessageId;
+              }),
+          ),
+          __settings.client.subscribe(
+            'chatify://chat-message-read',
+            ([events]) =>
+              events.find((x) => x.chatId === id) &&
+              updateCachedData((chat) => {
+                const event = events.find((x) => x.chatId === id)!;
+                chat.lastReadMessageId = event.newLastReadMessageId;
+              }),
+          ),
+        ).when(cacheEntryRemoved);
+      },
+    }),
+
+    addChat: builder.mutation<string, { name: string; members: string[] }>({
+      queryFn: async ({ name, members }) => {
+        const chatId = await __settings.client.addChat({
+          name,
+          members,
+          requestId: new Date().getTime().toString(),
+        });
+        return { data: chatId };
+      },
+    }),
+
+    updateChatName: builder.mutation<void, { id: string; name: string }>({
+      queryFn: async ({ id, name }) => {
+        await __settings.client.updateChatName({ id, name });
+        return { data: null! };
+      },
+    }),
+  }),
+});
+
+export const __chatApi = chatApi;

package/src/core/api/chatListApi.ts

@@ -0,0 +1,134 @@
+import { BaseApiEndpointBuilder, __settings } from './baseApi';
+import { unsubscribe } from '../client';
+import { ChatListItem } from '../types';
+
+export function chatListEndpoints(builder: BaseApiEndpointBuilder) {
+  return {
+    getChatList: builder.query<ChatListItem[], void>({
+      queryFn: async () => ({ data: await __settings.client.chats() }),
+      providesTags: ['chat', 'account'],
+      onCacheEntryAdded: async (_, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+
+        unsubscribe(
+          __settings.client.subscribe('chatify://chat-created', ([chat]) =>
+            updateCachedData((chatList) => {
+              chatList.push(chat);
+            }),
+          ),
+
+          __settings.client.subscribe('chatify://chat-new-message', ([message]) =>
+            updateCachedData((chatList) => {
+              const chat = chatList.find((x) => x.id === message.chatId);
+
+              if (!chat) {
+                return;
+              }
+
+              chat.message = message;
+
+              if (message.sentBy.id === __settings.me()) {
+                chat.lastReadMessageId = message.id;
+                chat.totalUnreadCount = 0;
+              }
+
+              if (message.sentBy.id !== __settings.me()) {
+                chat.totalUnreadCount++;
+              }
+            }),
+          ),
+          __settings.client.subscribe('chatify://chat-message-read', ([events]) =>
+            updateCachedData((chatList) => {
+              for (const event of events) {
+                const chat = chatList.find((x) => x.id === event.chatId);
+
+                if (!chat) {
+                  return;
+                }
+
+                chat.lastReadMessageId = event.newLastReadMessageId;
+                chat.totalUnreadCount = chat.totalUnreadCount - event.readCount;
+              }
+            }),
+          ),
+          __settings.client.subscribe(
+            'chatify://chat-member-added',
+            ([chatId, chatName, account, message, , read]) =>
+              updateCachedData((chatList) => {
+                const chat = chatList.find((x) => x.id === chatId);
+
+                if (account.id === __settings.me() && !chat) {
+                  chatList.push({
+                    id: chatId,
+                    name: chatName,
+                    message,
+                    totalUnreadCount: read ? 0 : 1,
+                    active: true,
+                    lastReadMessageId: read ? message.id : null,
+                  });
+                }
+
+                if (!chat) {
+                  return;
+                }
+
+                chat.message = message;
+                chat.active = true;
+
+                if (read) {
+                  chat.totalUnreadCount = 0;
+                  chat.lastReadMessageId = message.id;
+                } else {
+                  chat.totalUnreadCount++;
+                }
+              }),
+          ),
+          __settings.client.subscribe(
+            'chatify://chat-member-removed',
+            ([chatId, accountId, deleteHistory, message, read]) =>
+              updateCachedData((chatList) => {
+                if (accountId === __settings.me() && deleteHistory) {
+                  return chatList.filter((x) => x.id !== chatId);
+                }
+
+                const chat = chatList.find((x) => x.id === chatId);
+
+                if (!chat) {
+                  return;
+                }
+
+                chat.message = message;
+
+                if (accountId === __settings.me()) {
+                  chat.active = false;
+                }
+
+                if (!read) {
+                  chat.totalUnreadCount++;
+                } else {
+                  chat.totalUnreadCount = 0;
+                  chat.lastReadMessageId = message.id;
+                }
+              }),
+          ),
+          __settings.client.subscribe('chatify://chat-name-changed', ([chatId, newName, message, read]) =>
+            updateCachedData((chatList) => {
+              const chat = chatList.find((x) => x.id === chatId);
+              if (!chat) return;
+
+              chat.name = newName;
+              chat.message = message;
+
+              if (!read) {
+                chat.totalUnreadCount++;
+              } else {
+                chat.totalUnreadCount = 0;
+                chat.lastReadMessageId = message.id;
+              }
+            }),
+          ),
+        ).when(cacheEntryRemoved);
+      },
+    }),
+  };
+}

package/src/core/api/chatMemberApi.ts

@@ -0,0 +1,20 @@
+import { AddChatMemberRequest, RemoveChatMemberRequest } from '../types';
+import { BaseApiEndpointBuilder, __settings } from './baseApi';
+
+export function chatMemberEndpoints(builder: BaseApiEndpointBuilder) {
+  return {
+    removeChatMember: builder.mutation<void, RemoveChatMemberRequest>({
+      queryFn: async (args) => {
+        await __settings.client.removeChatMember(args);
+        return { data: null! };
+      },
+    }),
+
+    addChatMember: builder.mutation<void, AddChatMemberRequest>({
+      queryFn: async (args) => {
+        await __settings.client.addChatMember(args);
+        return { data: null! };
+      },
+    }),
+  };
+}

package/src/core/api/chatMessageApi.ts

@@ -0,0 +1,12 @@
+import { unsubscribe } from '../client';
+import { Debounce, DebounceValue } from '../debounce';
+import { ChatMessage, chatId } from '../types';
+import { BaseApiEndpointBuilder, DEFAULT_MESSAGE_LIST_TAKE, __baseApi, __settings } from './baseApi';
+
+export function chatMessageEndpoints(builder: BaseApiEndpointBuilder) {
+  return {};
+}
+
+export const __chatMessageApi = __baseApi.injectEndpoints({
+  endpoints: (builder) => ({}),
+});

package/src/core/api/index.ts

@@ -0,0 +1 @@
+export * from './api';

package/src/core/api/threadApi.ts

@@ -0,0 +1,8 @@
+import { Thread, ThreadWatchListItem, calcThreadListUnreadCount } from '../types';
+import { __baseApi, __settings } from './baseApi';
+import { unsubscribe } from '../client';
+import { useMemo } from 'react';
+
+export const __threadApi = __baseApi.injectEndpoints({
+  endpoints: (builder) => ({}),
+});

package/src/core/api/threadMessageApi.ts

@@ -0,0 +1,20 @@
+import { DEFAULT_MESSAGE_LIST_TAKE, __baseApi, __settings } from './baseApi';
+import { SendThreadMessageRequest, ThreadMessage, parseThreadMessageId } from '../types';
+import { unsubscribe } from '../client';
+import { Debounce, DebounceValue } from '../debounce';
+
+export interface ThreadMessageList {
+  messages: ThreadMessage[];
+  hasMore: boolean;
+}
+
+const THREAD_MESSAGE_READ_QUEUE = new Debounce<string>({
+  callback: (id) => __settings.client.readThreadMessage(id),
+  compare: (a, b) => -a.localeCompare(b),
+  groupBy: (id) => parseThreadMessageId(id)[0],
+  timeout: 500,
+});
+
+export const __threadMessageApi = __baseApi.injectEndpoints({
+  endpoints: (builder) => ({}),
+});

package/src/core/client.ts

@@ -3,15 +3,20 @@ import * as SignalR from '@microsoft/signalr';
 import {
   Account,
   AddChatRequest,
-  AddMemberRequest,
+  AddChatMemberRequest,
   Chat,
   ChatListItem,
-  Message,
-  ReadRequest,
-  RemoveMemberRequest,
-  SendMessageRequest,
+  ChatMessage,
+  ReadChatMessageEvent,
+  ReadChatMessageRequest,
+  RemoveChatMemberRequest,
+  SendChatMessageRequest,
   UpdateChatNameRequest,
-} from './models';
+  SendThreadMessageRequest,
+  Thread,
+  ThreadMessage,
+  ThreadWatchListItem as ThreadListItem,
+} from './types';
 
 export interface ChatifySignalRConfig {
   hubUri?: string;
@@ -29,20 +34,58 @@ export interface ChatifyClientConfig {
   signalR: ChatifySignalRConfig;
 }
 
-const METHODS = [
-  'chatify://new-message',
+export const CHATIFY_SIGNALR_METHODS = [
+  'chatify://chat-new-message',
   'chatify://chat-created',
-  'chatify://read',
-  'chatify://member-added',
-  'chatify://member-removed',
+  '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, requestId: string];
+  'chatify://chat-created': [chat: ChatListItem, requestId: string];
+  '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 = {
@@ -55,9 +98,22 @@ export class ChatifyClient {
   }
 
   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!();
 
-    this._connection = new SignalR.HubConnectionBuilder()
+    const connection = new SignalR.HubConnectionBuilder()
       .withUrl(this._config.signalR!.hubUri!, {
         accessTokenFactory: this._config.signalR!.accessTokenFactory
           ? this._config.signalR!.accessTokenFactory
@@ -67,20 +123,32 @@ export class ChatifyClient {
       .withAutomaticReconnect()
       .build();
 
-    METHODS.forEach((x) => {
-      this._connection.on(x, (...args) => {
-        this._subscribers[x]?.forEach((s) => s(args));
+    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);
+          }
+        });
       });
     });
 
-    this._connection.onreconnected(() => this._reconnectSubscribers.forEach((subscriber) => subscriber()));
+    connection.onreconnected(() => this._reconnectSubscribers.forEach((subscriber) => subscriber()));
 
-    await this._connection.start();
+    await connection.start();
+    return connection;
   };
 
-  public subscribe = <T extends any[]>(method: string, subscriber: (args: T) => void) => {
-    this._subscribers[method] = this._subscribers[method] ?? [];
-    this._subscribers[method].push(subscriber as any);
+  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);
   };
 
@@ -104,7 +172,7 @@ export class ChatifyClient {
   };
 
   public chat = async (id: string) => {
-    const { data } = await this.axios.get<Chat>(`chat/${id}`);
+    const { data } = await this.axios.get<Chat>(`chat/${encodeURIComponent(id)}`);
     return data;
   };
 
@@ -113,31 +181,100 @@ export class ChatifyClient {
     return data;
   };
 
-  public messages = async (args: { chatId: string; skip?: number; take?: number }) => {
+  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<Message[]>(`chat/${chatId}/message?pagingRule=${pagingRule}`);
+    const { data } = await this.axios.get<ChatMessage[]>(
+      `chat/${encodeURIComponent(chatId)}/message?pagingRule=${pagingRule}`,
+    );
     return data;
   };
 
-  public send = async (request: SendMessageRequest) => {
+  public sendChatMessage = async (request: SendChatMessageRequest) => {
     const { chatId, ...rest } = request;
-    await this.axios.post(`chat/${chatId}/message`, rest);
+    await this.axios.post(`chat/${encodeURIComponent(chatId)}/message`, rest);
   };
 
-  public read = async (request: ReadRequest) => {
+  public readChatMessage = async (request: ReadChatMessageRequest) => {
     await this.axios.put(`chat/message/read`, request);
   };
 
-  public removeMember = async (request: RemoveMemberRequest) => {
-    await this.axios.delete(`chat/${request.chatId}/member`, { data: 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/${request.id}/name`, request);
+    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 addMember = async (request: AddMemberRequest) => {
-    await this.axios.post(`chat/${request.chatId}/member`, request);
+  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 './constants';
+export * from './types';
+export * from './api';
 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';