@webinex/chatify 1.0.0-rc2 → 1.0.0-rc3

package/src/core/index.ts

@@ -2,13 +2,16 @@ 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 './state';
+export * from './useGetChatQuery';
+export * from './useGetChatListQuery';
+export * from './useFetchNextMutation';
+export * from './useGetMessagesQuery';
 export * from './useSignalRMonitor';
-export * from './useAccounts';
-export * from './useAddChat';
+export * from './useGetAccountsQuery';
+export * from './useAddChatMutation';
 export * from './useReadMonitor';
-export * from './useAddMember';
-export * from './useRemoveMember';
+export * from './useAddMemberMutation';
+export * from './useRemoveMemberMutation';
+export * from './useSendMutation';
+export * from './useUpdateChatNameMutation';

package/src/core/models.tsx

@@ -17,7 +17,6 @@ export interface Message {
   files: File[];
   sentAt: string;
   sentBy: Account;
-  read: boolean;
   requestId?: string;
 }
 
@@ -31,7 +30,9 @@ export interface ChatListItem {
   id: string;
   name: string;
   message: Message;
-  unreadCount: number;
+  totalUnreadCount: number;
+  active: boolean;
+  lastReadMessageId: string | null;
 }
 
 export interface SendMessageRequest {
@@ -54,12 +55,13 @@ export interface AddChatRequest {
 }
 
 export interface ReadRequest {
-  ids: string[];
+  id: string;
 }
 
 export interface ReadEvent {
-  messageId: string;
   chatId: string;
+  newLastReadMessageId: string;
+  readCount: number;
 }
 
 export interface RemoveMemberRequest {
@@ -73,3 +75,8 @@ export interface AddMemberRequest {
   accountId: string;
   withHistory: boolean;
 }
+
+export interface UpdateChatNameRequest {
+  id: string;
+  name: string;
+}

package/src/core/reducer.tsx

@@ -2,9 +2,10 @@ import React, { PropsWithChildren, useCallback, useContext, useEffect, useRef, u
 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 = ACTIONS[action.type](state, action.data as any);
+  const result = produce(state, (draft) => ACTIONS[action.type](draft, action.data as any));
   console.debug('[Chatify]: ', action, result);
   return result;
 }

package/src/core/state.ts

@@ -1,5 +1,13 @@
+import { Account, Chat, ChatListItem, Message, SendMessageRequest, File } from './models';
+
+export type MessageState =
+  | ({ type: 'message' } & Message)
+  | { type: 'next' }
+  | { type: 'sending'; text: string; files: File[]; requestId: string };
+
 export interface UIState {
-  view?: 'chat' | 'new-chat' | 'chat-settings';
+  view?: 'chat' | 'new-chat';
+  showMembers: boolean;
   chatId?: string;
 }
 
@@ -15,24 +23,70 @@ export interface MutationState {
   error?: any;
 }
 
+export interface QueueState<TValue> {
+  queued: TValue[];
+  processing: TValue[];
+  timestamp: number;
+}
+
 export interface State {
   ui: UIState;
-  query: Record<string, QueryState<any>>;
-  mutation: Record<string, MutationState>;
-  read: {
-    queued: string[];
-    sent: string[];
-    timestamp: number;
+  query: {
+    messages: Record<string, QueryState<MessageState[]>>;
+    chats: Record<string, QueryState<Chat>>;
+    chatList: QueryState<ChatListItem[]>;
+    accounts: QueryState<Account[]>;
+  };
+  mutation: {
+    fetchNext: MutationState;
+    removeMember: MutationState;
+    addMember: MutationState;
+    updateChatName: MutationState;
+    addChat: MutationState;
+    send: MutationState;
+  };
+  queue: {
+    read: QueueState<string>;
+    send: QueueState<SendMessageRequest>;
   };
 }
 
+export const INITIAL_QUERY_STATE: QueryState<any> = {
+  uninitialized: false,
+  isFetching: true,
+  data: undefined,
+  error: undefined,
+};
+
 export const INITIAL_STATE: State = {
-  ui: {},
-  query: {},
-  mutation: {},
-  read: {
-    queued: [],
-    sent: [],
-    timestamp: 0,
+  ui: {
+    showMembers: false,
+  },
+  query: {
+    messages: {},
+    chats: {},
+    chatList: { uninitialized: true, isFetching: false, data: undefined, error: undefined },
+    accounts: { uninitialized: true, isFetching: false, data: undefined, error: undefined },
+  },
+  mutation: {
+    fetchNext: { isFetching: false, error: undefined },
+    removeMember: { isFetching: false, error: undefined },
+    addMember: { isFetching: false, error: undefined },
+    updateChatName: { isFetching: false, error: undefined },
+    addChat: { isFetching: false, error: undefined },
+    send: { isFetching: false, error: undefined },
+  },
+  queue: {
+    read: {
+      queued: [],
+      processing: [],
+      timestamp: 0,
+    },
+
+    send: {
+      queued: [],
+      processing: [],
+      timestamp: 0,
+    },
   },
 };

package/src/core/useAddChatMutation.tsx

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { AddChatRequest } from './models';
+import { useDispatch, useStateRef } from './reducer';
+
+export function useAddChatMutation() {
+  const client = useClient();
+  const dispatch = useDispatch();
+  const stateRef = useStateRef();
+
+  const invoke = useCallback((args: AddChatRequest) => {
+    dispatch({ type: 'addChat_fetch', data: void 0 });
+    client
+      .addChat(args)
+      .then(() => dispatch({ type: 'addChat_fulfilled', data: void 0 }))
+      .catch((error) => dispatch({ type: 'addChat_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [invoke, stateRef.current.mutation.addChat] as const;
+}

package/src/core/useAddMemberMutation.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { AddMemberRequest } from './models';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useAddMemberMutation() {
+  const client = useClient();
+  const dispatch = useDispatch();
+  const state = useStateRef();
+  useSelect((x) => x.mutation.addMember, []);
+
+  const invoke = useCallback(
+    (args: AddMemberRequest) => {
+      dispatch({ type: 'addMember_fetch', data: void 0 });
+      client
+        .addMember(args)
+        .then(() => dispatch({ type: 'addMember_fulfilled', data: void 0 }))
+        .catch((error) => dispatch({ type: 'addMember_rejected', data: { error } }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch],
+  );
+
+  return [invoke, state.current.mutation.addMember] as const;
+}

package/src/core/useFetchNextMutation.tsx

@@ -0,0 +1,28 @@
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+import { useCallback } from 'react';
+
+export function useFetchNextMutation({ chatId }: { chatId: string }) {
+  const state = useStateRef();
+  useSelect((x) => x.mutation.fetchNext, []);
+  const dispatch = useDispatch();
+  const client = useClient();
+
+  const fetchNext = useCallback(() => {
+    const skip = state.current.query.messages[chatId].data?.filter((x) => x.type === 'message').length;
+    dispatch({ type: 'fetchNext_fetch', data: { chatId } });
+    client
+      .messages({ chatId, skip, take: 16 })
+      .then((messages) =>
+        dispatch({
+          type: 'fetchNext_fulfilled',
+          data: { chatId, messages: messages.slice(0, 15), hasMore: messages.length === 16 },
+        }),
+      )
+      .catch((error) => dispatch({ type: 'fetchNext_rejected', data: { chatId, error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatId]);
+
+  return [fetchNext, state.current.mutation.fetchNext] as const;
+}

package/src/core/useGetAccountsQuery.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useGetAccountsQuery() {
+  const client = useClient();
+  const stateRef = useStateRef();
+  useSelect((x) => x.query.accounts, []);
+  const dispatch = useDispatch();
+
+  const uninitialized = useMemo(() => {
+    const uninitialized = stateRef.current.query.accounts.uninitialized !== false;
+    uninitialized && dispatch({ type: 'accounts_fetch', data: void 0 });
+    return uninitialized;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!uninitialized) {
+      return;
+    }
+
+    client
+      .accounts()
+      .then((accounts) => dispatch({ type: 'accounts_fulfilled', data: { accounts } }))
+      .catch((error) => dispatch({ type: 'accounts_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uninitialized]);
+
+  return stateRef.current.query.accounts;
+}

package/src/core/useGetChatListQuery.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useGetChatListQuery() {
+  const stateRef = useStateRef();
+  const client = useClient();
+  useSelect((x) => x.query.chatList, []);
+  const dispatch = useDispatch();
+
+  const uninitialized = useMemo(() => {
+    const uninitialized = stateRef.current.query.chatList.uninitialized !== false;
+    uninitialized && dispatch({ type: 'chatList_fetch', data: void 0 });
+    return uninitialized;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!uninitialized) {
+      return;
+    }
+
+    client
+      .chats()
+      .then((chats) => dispatch({ type: 'chatList_fulfilled', data: { chats } }))
+      .catch((error) => dispatch({ type: 'chatList_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return stateRef.current.query.chatList;
+}

package/src/core/useGetChatQuery.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useMemo } from 'react';
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useGetChatQuery(args: { chatId: string }) {
+  const { chatId } = args;
+  const client = useClient();
+  const stateRef = useStateRef();
+  useSelect((x) => x.query.chats[chatId], [chatId]);
+  const dispatch = useDispatch();
+
+  const uninitialized = useMemo(() => {
+    const uninitialized = stateRef.current.query.chats[chatId]?.uninitialized !== false;
+    uninitialized && dispatch({ type: 'chat_fetch', data: { chatId } });
+    return uninitialized;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatId]);
+
+  useEffect(() => {
+    if (!uninitialized) {
+      return;
+    }
+
+    client
+      .chat(chatId)
+      .then((chat) => dispatch({ type: 'chat_fulfilled', data: { chat } }))
+      .catch((error) => dispatch({ type: 'chat_rejected', data: { chatId, error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uninitialized, chatId]);
+
+  return stateRef.current.query.chats[chatId];
+}

package/src/core/useGetMessagesQuery.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useMemo } from 'react';
+import { useClient } from '../ChatifyContext';
+import { MessageState, QueryState } from './state';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useGetMessagesQuery(args: { chatId: string }): QueryState<MessageState[]> {
+  const { chatId } = args;
+  const stateRef = useStateRef();
+  const dispatch = useDispatch();
+  useSelect((x) => x.query.messages[chatId], [chatId]);
+  const client = useClient();
+
+  const uninitialized = useMemo(() => {
+    const uninitialized = stateRef.current.query.messages[chatId]?.uninitialized !== false;
+    uninitialized && dispatch({ type: 'messages_fetch', data: { chatId } });
+    return uninitialized;
+  }, [chatId, dispatch, stateRef]);
+
+  useEffect(() => {
+    if (!uninitialized) {
+      return;
+    }
+
+    client.messages({ chatId, skip: 0, take: 16 }).then((messages) =>
+      dispatch({
+        type: 'messages_fulfilled',
+        data: { chatId, messages: messages.slice(0, 15), hasMore: messages.length === 16 },
+      }),
+    );
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatId]);
+
+  return stateRef.current.query.messages[chatId];
+}

package/src/core/useReadMonitor.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelect } from './reducer';
 
 export function useReadMonitor() {
   const client = useClient();
-  const [queued, timestamp] = useSelect((x) => [x.read.queued, x.read.timestamp], []);
+  const [queued, timestamp] = useSelect((x) => [x.queue.read.queued, x.queue.read.timestamp], []);
   const dispatch = useDispatch();
   const timer = useRef<NodeJS.Timeout | null>(null);
 
@@ -18,12 +18,13 @@ export function useReadMonitor() {
     }
 
     timer.current = setTimeout(() => {
-      dispatch({ type: 'read_send', data: { ids: queued } });
-      client
-        .read({ ids: queued })
-        .catch(() =>
-          dispatch({ type: 'read_reject', data: { ids: queued, timestamp: new Date().getTime() } }),
-        );
+      for (const id of queued) {
+        dispatch({ type: 'read_send', data: { id } });
+
+        client
+          .read({ id })
+          .catch(() => dispatch({ type: 'read_reject', data: { id, timestamp: new Date().getTime() } }));
+      }
     }, 100);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/core/useRemoveMemberMutation.tsx

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { RemoveMemberRequest } from './models';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useRemoveMemberMutation() {
+  const stateRef = useStateRef();
+  useSelect((x) => x.mutation.removeMember, []);
+  const dispatch = useDispatch();
+  const client = useClient();
+
+  const invoke = useCallback((args: RemoveMemberRequest) => {
+    dispatch({ type: 'removeMember_fetch', data: void 0 });
+    client
+      .removeMember(args)
+      .then(() => dispatch({ type: 'removeMember_fulfilled', data: void 0 }))
+      .catch((error) => dispatch({ type: 'removeMember_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [invoke, stateRef.current.mutation.removeMember] as const;
+}

package/src/core/useSendMutation.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { SendMessageRequest } from './models';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useSendMutation() {
+  const stateRef = useStateRef();
+  useSelect((x) => x.mutation.send, []);
+  const dispatch = useDispatch();
+  const client = useClient();
+
+  const invoke = useCallback((args: SendMessageRequest) => {
+    const { chatId, requestId, files, text } = args;
+    dispatch({ type: 'send_fetch', data: { chatId, requestId, files, text } });
+    client
+      .send(args)
+      .then(() => dispatch({ type: 'send_fulfilled', data: { chatId, requestId } }))
+      .catch((error) => dispatch({ type: 'send_rejected', data: { chatId, requestId, error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [invoke, stateRef.current.mutation.send] as const;
+}

package/src/core/useSignalRMonitor.tsx

@@ -12,7 +12,7 @@ export function useSignalRMonitor(me: string, client: ChatifyClient) {
     client.connect().then(() => {
       unsubscribes.push(
         client.subscribe('chatify://new-message', ([message, requestId]: [Message, string]) => {
-          dispatch({ type: 'message_received', data: { message, requestId } });
+          dispatch({ type: 'message_received', data: { message, requestId, me } });
         }),
       );
       unsubscribes.push(
@@ -28,16 +28,30 @@ export function useSignalRMonitor(me: string, client: ChatifyClient) {
       unsubscribes.push(
         client.subscribe(
           'chatify://member-added',
-          ([chatId, chatName, account, message]: [string, string, Account, Message]) => {
-            dispatch({ type: 'member_added', data: { chatId, chatName, account, me, message } });
+          ([chatId, chatName, account, message, withHistory]: [
+            string,
+            string,
+            Account,
+            Message,
+            boolean,
+          ]) => {
+            dispatch({ type: 'member_added', data: { chatId, chatName, account, me, message, withHistory } });
           },
         ),
       );
       unsubscribes.push(
         client.subscribe(
           'chatify://member-removed',
-          ([chatId, accountId, deleteHistory]: [string, string, boolean]) => {
-            dispatch({ type: 'member_removed', data: { chatId, accountId, deleteHistory, me } });
+          ([chatId, accountId, deleteHistory, message]: [string, string, boolean, Message]) => {
+            dispatch({ type: 'member_removed', data: { chatId, accountId, deleteHistory, me, message } });
+          },
+        ),
+      );
+      unsubscribes.push(
+        client.subscribe(
+          'chatify://chat-name-changed',
+          ([chatId, newName, message]: [string, string, Message]) => {
+            dispatch({ type: 'chatNameChanged_received', data: { chatId, newName, message } });
           },
         ),
       );

package/src/core/useUpdateChatNameMutation.tsx

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { UpdateChatNameRequest } from './models';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useUpdateChatNameMutation() {
+  const stateRef = useStateRef();
+  useSelect((x) => x.mutation.updateChatName, []);
+  const dispatch = useDispatch();
+  const client = useClient();
+
+  const invoke = useCallback((args: UpdateChatNameRequest) => {
+    dispatch({ type: 'updateChatName_fetch', data: void 0 });
+    client
+      .updateChatName(args)
+      .then(() => dispatch({ type: 'updateChatName_fulfilled', data: void 0 }))
+      .catch((error) => dispatch({ type: 'updateChatName_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [invoke, stateRef.current.mutation.updateChatName] as const;
+}

package/src/{ui/styles → styles}/aside.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-flow: column nowrap;
 
-  .wxchtf-chats.ant-menu {
+  .wxchtf-chat-list.ant-menu {
     flex: 1 1 auto;
     height: 100px;
     overflow-y: auto;