@webinex/chatify 1.0.0-rc2 → 1.0.1-rc3

package/src/core/client.ts

@@ -1,137 +1,143 @@
-import { AxiosInstance } from 'axios';
-import * as SignalR from '@microsoft/signalr';
-import {
-  Account,
-  AddChatRequest,
-  AddMemberRequest,
-  Chat,
-  ChatListItem,
-  Message,
-  ReadRequest,
-  RemoveMemberRequest,
-  SendMessageRequest,
-} 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',
-] 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 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,
+  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);
+  };
+}

package/src/core/index.ts

@@ -1,14 +1,17 @@
-export * from './models';
-export * from './client';
-export * from './action';
-export * from './reducer';
-export * from './useChat';
-export * from './useChatList';
-export * from './useLoadMore';
-export * from './useMessages';
-export * from './useSignalRMonitor';
-export * from './useAccounts';
-export * from './useAddChat';
-export * from './useReadMonitor';
-export * from './useAddMember';
-export * from './useRemoveMember';
+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';

package/src/core/models.tsx

@@ -1,75 +1,82 @@
-export interface File {
-  name: string;
-  bytes: number;
-  ref: string;
-}
-
-export interface Account {
-  id: string;
-  name: string;
-  avatar: string;
-}
-
-export interface Message {
-  id: string;
-  chatId: string;
-  text: string;
-  files: File[];
-  sentAt: string;
-  sentBy: Account;
-  read: boolean;
-  requestId?: string;
-}
-
-export interface Chat {
-  id: string;
-  name: string;
-  members: Account[];
-}
-
-export interface ChatListItem {
-  id: string;
-  name: string;
-  message: Message;
-  unreadCount: number;
-}
-
-export interface SendMessageRequest {
-  chatId: string;
-  text: string;
-  files: File[];
-  requestId: string;
-}
-
-export interface MessageBody {
-  text: string;
-  files: File[];
-}
-
-export interface AddChatRequest {
-  requestId: string;
-  name: string;
-  message?: MessageBody;
-  members: string[];
-}
-
-export interface ReadRequest {
-  ids: string[];
-}
-
-export interface ReadEvent {
-  messageId: string;
-  chatId: string;
-}
-
-export interface RemoveMemberRequest {
-  chatId: string;
-  accountId: string;
-  deleteHistory: boolean;
-}
-
-export interface AddMemberRequest {
-  chatId: string;
-  accountId: string;
-  withHistory: boolean;
-}
+export interface File {
+  name: string;
+  bytes: number;
+  ref: string;
+}
+
+export interface Account {
+  id: string;
+  name: string;
+  avatar: string;
+}
+
+export interface Message {
+  id: string;
+  chatId: string;
+  text: string;
+  files: File[];
+  sentAt: string;
+  sentBy: Account;
+  requestId?: string;
+}
+
+export interface Chat {
+  id: string;
+  name: string;
+  members: Account[];
+}
+
+export interface ChatListItem {
+  id: string;
+  name: string;
+  message: Message;
+  totalUnreadCount: number;
+  active: boolean;
+  lastReadMessageId: string | null;
+}
+
+export interface SendMessageRequest {
+  chatId: string;
+  text: string;
+  files: File[];
+  requestId: string;
+}
+
+export interface MessageBody {
+  text: string;
+  files: File[];
+}
+
+export interface AddChatRequest {
+  requestId: string;
+  name: string;
+  message?: MessageBody;
+  members: string[];
+}
+
+export interface ReadRequest {
+  id: string;
+}
+
+export interface ReadEvent {
+  chatId: string;
+  newLastReadMessageId: string;
+  readCount: number;
+}
+
+export interface RemoveMemberRequest {
+  chatId: string;
+  accountId: string;
+  deleteHistory: boolean;
+}
+
+export interface AddMemberRequest {
+  chatId: string;
+  accountId: string;
+  withHistory: boolean;
+}
+
+export interface UpdateChatNameRequest {
+  id: string;
+  name: string;
+}

package/src/core/reducer.tsx

@@ -1,86 +1,87 @@
-import React, { PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { ACTIONS, Action } from './action';
-import { INITIAL_STATE, State } from './state';
-import { shallowEqual } from 'shallow-equal';
-
-function reducer(state: State, action: Action) {
-  const result = ACTIONS[action.type](state, action.data as any);
-  console.debug('[Chatify]: ', action, result);
-  return result;
-}
-
-export type Reducer = ReturnType<typeof useReducer>;
-
-type Subscriber = (state: State) => void;
-
-export function useReducer() {
-  const state = useRef(INITIAL_STATE);
-  const subscribers = useRef<Subscriber[]>([]);
-
-  const dispatch = useCallback((action: Action) => {
-    const newState = reducer(state.current, action);
-    if (state.current === newState) {
-      return;
-    }
-
-    state.current = newState;
-    subscribers.current.forEach((s) => s(newState));
-  }, []);
-
-  const subscribe = useCallback((subscriber: Subscriber) => {
-    subscribers.current.push(subscriber);
-    return () => {
-      subscribers.current = subscribers.current.filter((x) => x !== subscriber);
-    };
-  }, []);
-
-  return [state, dispatch, subscribe] as const;
-}
-
-const ReducerContext = React.createContext<Reducer>(null!);
-export function ReducerProvider({ children }: PropsWithChildren<{}>) {
-  const reducer = useReducer();
-  return <ReducerContext.Provider value={reducer}>{children}</ReducerContext.Provider>;
-}
-
-export function useDispatch() {
-  return useContext(ReducerContext)[1];
-}
-
-export function useStateRef() {
-  const [reducerState] = useContext(ReducerContext);
-  return reducerState;
-}
-
-export function useSelect<TResult>(
-  select: (state: State) => TResult,
-
-  // TODO: make deps work
-  deps: any[],
-): TResult {
-  const [reducerState, , subscribe] = useContext(ReducerContext);
-  const prev = useRef(select(reducerState.current));
-  const [state, setState] = useState(prev.current);
-
-  useEffect(() => {
-    const value = select(reducerState.current);
-    if (!shallowEqual<any>(prev.current, value)) {
-      prev.current = value;
-      setState(value);
-    }
-
-    return subscribe((state: State) => {
-      const newValue = select(state);
-      if (shallowEqual<any>(newValue, prev.current)) {
-        return;
-      }
-
-      prev.current = newValue;
-      setState(newValue);
-    });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return state;
-}
+import React, { PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { ACTIONS, Action } from './action';
+import { INITIAL_STATE, State } from './state';
+import { shallowEqual } from 'shallow-equal';
+import { produce } from 'immer';
+
+function reducer(state: State, action: Action) {
+  const result = produce(state, (draft) => ACTIONS[action.type](draft, action.data as any));
+  console.debug('[Chatify]: ', action, result);
+  return result;
+}
+
+export type Reducer = ReturnType<typeof useReducer>;
+
+type Subscriber = (state: State) => void;
+
+export function useReducer() {
+  const state = useRef(INITIAL_STATE);
+  const subscribers = useRef<Subscriber[]>([]);
+
+  const dispatch = useCallback((action: Action) => {
+    const newState = reducer(state.current, action);
+    if (state.current === newState) {
+      return;
+    }
+
+    state.current = newState;
+    subscribers.current.forEach((s) => s(newState));
+  }, []);
+
+  const subscribe = useCallback((subscriber: Subscriber) => {
+    subscribers.current.push(subscriber);
+    return () => {
+      subscribers.current = subscribers.current.filter((x) => x !== subscriber);
+    };
+  }, []);
+
+  return [state, dispatch, subscribe] as const;
+}
+
+const ReducerContext = React.createContext<Reducer>(null!);
+export function ReducerProvider({ children }: PropsWithChildren<{}>) {
+  const reducer = useReducer();
+  return <ReducerContext.Provider value={reducer}>{children}</ReducerContext.Provider>;
+}
+
+export function useDispatch() {
+  return useContext(ReducerContext)[1];
+}
+
+export function useStateRef() {
+  const [reducerState] = useContext(ReducerContext);
+  return reducerState;
+}
+
+export function useSelect<TResult>(
+  select: (state: State) => TResult,
+
+  // TODO: make deps work
+  deps: any[],
+): TResult {
+  const [reducerState, , subscribe] = useContext(ReducerContext);
+  const prev = useRef(select(reducerState.current));
+  const [state, setState] = useState(prev.current);
+
+  useEffect(() => {
+    const value = select(reducerState.current);
+    if (!shallowEqual<any>(prev.current, value)) {
+      prev.current = value;
+      setState(value);
+    }
+
+    return subscribe((state: State) => {
+      const newValue = select(state);
+      if (shallowEqual<any>(newValue, prev.current)) {
+        return;
+      }
+
+      prev.current = newValue;
+      setState(newValue);
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return state;
+}