@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha10

package/src/core/state.ts

@@ -1,93 +0,0 @@
-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';
-  showMembers: boolean;
-  chatId?: string;
-}
-
-export interface QueryState<TData> {
-  uninitialized: boolean;
-  isFetching: boolean;
-  error?: any;
-  data?: TData;
-  requestId?: string;
-}
-
-export interface MutationState {
-  isFetching: boolean;
-  error?: any;
-}
-
-export interface QueueState<TValue> {
-  queued: TValue[];
-  processing: TValue[];
-  timestamp: number;
-}
-
-export interface State {
-  ui: UIState;
-  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 FETCH_QUERY_STATE: QueryState<any> = Object.freeze({
-  uninitialized: false,
-  isFetching: true,
-  data: undefined,
-  error: undefined,
-});
-
-export const INITIAL_STATE: State = {
-  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

@@ -1,28 +0,0 @@
-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 });
-    return client
-      .addChat(args)
-      .then((id) => {
-        dispatch({ type: 'addChat_fulfilled', data: void 0 });
-        return id;
-      })
-      .catch((error) => {
-        dispatch({ type: 'addChat_rejected', data: { error } });
-        throw error;
-      });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return [invoke, stateRef.current.mutation.addChat] as const;
-}

package/src/core/useAddMemberMutation.tsx

@@ -1,25 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,30 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useClient } from '../ChatifyContext';
-import { useDispatch, useSelect, useStateRef } from './reducer';
-import { FETCH_QUERY_STATE, QueryState } from './state';
-import { uniqId } from '../util';
-import { Account } from './models';
-
-export function useGetAccountsQuery(): QueryState<Account[]> {
-  const id = useRef(uniqId());
-  const client = useClient();
-  const stateRef = useStateRef();
-  const queryState = useSelect((x) => x.query.accounts, []) ?? FETCH_QUERY_STATE;
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (stateRef.current.query.accounts.uninitialized === false) {
-      return;
-    }
-
-    dispatch({ type: 'accounts_fetch', data: { requestId: id.current } });
-    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
-  }, []);
-
-  return queryState ?? FETCH_QUERY_STATE;
-}

package/src/core/useGetChatListQuery.tsx

@@ -1,30 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useClient } from '../ChatifyContext';
-import { useDispatch, useSelect, useStateRef } from './reducer';
-import { uniqId } from '../util';
-import { FETCH_QUERY_STATE, QueryState } from './state';
-import { ChatListItem } from './models';
-
-export function useGetChatListQuery(): QueryState<ChatListItem[]> {
-  const id = useRef(uniqId());
-  const stateRef = useStateRef();
-  const client = useClient();
-  const queryState = useSelect((x) => x.query.chatList, []) ?? FETCH_QUERY_STATE;
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (stateRef.current.query.chatList.uninitialized === false) {
-      return;
-    }
-
-    dispatch({ type: 'chatList_fetch', data: { requestId: id.current } });
-    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 queryState ?? FETCH_QUERY_STATE;
-}

package/src/core/useGetChatQuery.tsx

@@ -1,31 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useClient } from '../ChatifyContext';
-import { useDispatch, useSelect, useStateRef } from './reducer';
-import { uniqId } from '../util';
-import { FETCH_QUERY_STATE, QueryState } from './state';
-import { Chat } from './models';
-
-export function useGetChatQuery(args: { chatId: string }): QueryState<Chat> {
-  const id = useRef(uniqId());
-  const { chatId } = args;
-  const client = useClient();
-  const stateRef = useStateRef();
-  const queryState = useSelect((x) => x.query.chats[chatId], [chatId]) ?? FETCH_QUERY_STATE;
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (stateRef.current.query.chats[chatId]?.uninitialized === false) {
-      return;
-    }
-
-    dispatch({ type: 'chat_fetch', data: { chatId, requestId: id.current } });
-    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
-  }, [chatId]);
-
-  return queryState ?? FETCH_QUERY_STATE;
-}

package/src/core/useGetMessagesQuery.tsx

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

package/src/core/useReadMonitor.tsx

@@ -1,32 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useClient } from '../ChatifyContext';
-import { useDispatch, useSelect } from './reducer';
-
-export function useReadMonitor() {
-  const client = useClient();
-  const [queued, timestamp] = useSelect((x) => [x.queue.read.queued, x.queue.read.timestamp], []);
-  const dispatch = useDispatch();
-  const timer = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    if (queued.length === 0) {
-      return;
-    }
-
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-
-    timer.current = setTimeout(() => {
-      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
-  }, [timestamp]);
-}

package/src/core/useRemoveMemberMutation.tsx

@@ -1,23 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,66 +0,0 @@
-import { useEffect } from 'react';
-import { useDispatch } from './reducer';
-import { Account, ChatListItem, Message, ReadEvent } from './models';
-import { ChatifyClient } from './client';
-
-export function useSignalRMonitor(me: string, client: ChatifyClient) {
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    let unsubscribes: Array<() => void> = [];
-
-    client.connect().then(() => {
-      unsubscribes.push(
-        client.subscribe('chatify://new-message', ([message, requestId]: [Message, string]) => {
-          dispatch({ type: 'message_received', data: { message, requestId, me } });
-        }),
-      );
-      unsubscribes.push(
-        client.subscribe('chatify://chat-created', ([chat, requestId]: [ChatListItem, string]) => {
-          dispatch({ type: 'chat_created', data: { chat, requestId } });
-        }),
-      );
-      unsubscribes.push(
-        client.subscribe('chatify://read', ([events]: [ReadEvent[]]) => {
-          dispatch({ type: 'read_received', data: { events } });
-        }),
-      );
-      unsubscribes.push(
-        client.subscribe(
-          'chatify://member-added',
-          ([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, 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 } });
-          },
-        ),
-      );
-    });
-
-    return () => {
-      unsubscribes.forEach((x) => x());
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-}

package/src/core/useUpdateChatNameMutation.tsx

@@ -1,23 +0,0 @@
-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/AddChatButton.tsx

@@ -1,17 +0,0 @@
-import { Button } from 'antd';
-import { useDispatch } from '../core';
-import { useCallback } from 'react';
-import { customize } from './customize';
-
-export const AddChatButton = customize('AddChatButton', () => {
-  const dispatch = useDispatch();
-  const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
-
-  return (
-    <span className="wxchtf-add-btn-wrapper">
-      <Button className="wxchtf-add-btn" onClick={onAddChat} icon="+">
-        Add chat
-      </Button>
-    </span>
-  );
-});

package/src/ui/Avatar.tsx

@@ -1,18 +0,0 @@
-import { FC } from 'react';
-import { Account } from '../core';
-import { Avatar as AntdAvatar } from 'antd';
-import { customize } from './customize';
-
-export interface AvatarProps {
-  account: Account;
-}
-
-const _Avatar: FC<AvatarProps> = (props: AvatarProps) => {
-  const { account } = props;
-
-  return <AntdAvatar src={account.avatar} />;
-};
-
-_Avatar.displayName = 'Avatar';
-
-export const Avatar = customize('Avatar', _Avatar);

package/src/ui/ChatList/ChatList.tsx

@@ -1,42 +0,0 @@
-import { Menu, MenuProps } from 'antd';
-import { useCallback, useMemo } from 'react';
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
-import { useGetChatListQuery, useDispatch, useSelect } from '../../core';
-import { ChatListItemBox } from './ChatListItemBox';
-import { customize } from '../customize';
-
-function useOnSelect() {
-  const dispatch = useDispatch();
-
-  return useCallback(
-    (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) =>
-      dispatch({ type: 'chat_open', data: { chatId: info.selectedKeys[0] } }),
-    [dispatch],
-  );
-}
-
-function useMenuItems() {
-  const { data: chats } = useGetChatListQuery();
-
-  return useMemo<MenuItemType[] | undefined>(() => {
-    return chats
-      ?.slice()
-      .sort((a, b) => -a.message.id.substring(47).localeCompare(b.message.id.substring(47)))
-      .map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} /> }));
-  }, [chats]);
-}
-
-export const ChatList = customize('ChatList', () => {
-  const activeChatId = useSelect((x) => x.ui.chatId, []);
-  const selected = useMemo(() => (activeChatId ? [activeChatId] : []), [activeChatId]);
-  const onSelect = useOnSelect();
-  const items = useMenuItems();
-
-  return (
-    <>
-      {items && (
-        <Menu className="wxchtf-chat-list" selectedKeys={selected} onSelect={onSelect} items={items} />
-      )}
-    </>
-  );
-});

package/src/ui/ChatList/ChatListItemBox.tsx

@@ -1,22 +0,0 @@
-import { ChatListItem as ChatListItemModel } from '../../core';
-import { customize } from '../customize';
-import { ChatListItemName } from './ChatListItemName';
-import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
-import { ChatListItemLastMessage } from './ChatListItemLastMessage';
-
-export interface ChatListItemBoxProps {
-  chat: ChatListItemModel;
-}
-
-export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
-  const { message, lastReadMessageId } = props.chat;
-  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(message.id) >= 0;
-
-  return (
-    <div className={'wxchtf-chat' + (!read ? ' --unread' : '')}>
-      <ChatListItemName {...props} />
-      <ChatListItemUnreadCount {...props} />
-      <ChatListItemLastMessage {...props} />
-    </div>
-  );
-});

package/src/ui/ChatList/ChatListItemLastMessageAuthor.tsx

@@ -1,20 +0,0 @@
-import { Avatar } from '../Avatar';
-import { customize } from '../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageAuthor = customize(
-  'ChatListItemLastMessageAuthor',
-  (props: ChatListItemBoxProps) => {
-    const { message } = props.chat;
-
-    if (message.sentBy.id === 'chatify::system') {
-      return null;
-    }
-
-    return (
-      <div className="wxchtf-chat-last-author">
-        <Avatar account={message.sentBy} /> {message.sentBy.name}
-      </div>
-    );
-  },
-);

package/src/ui/ChatList/ChatListItemLastMessageContent.tsx

@@ -1,21 +0,0 @@
-import { useLocalizer } from '../localizer';
-import { formatSystemMessage } from '../SystemMessage/SystemMessageRow';
-import { FC } from 'react';
-import { customize } from '../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>>(
-  'ChatListItemLastMessageContent',
-  (props) => {
-    const { message } = props.chat;
-    const localizer = useLocalizer();
-
-    return (
-      <div className="wxchtf-chat-last-message">
-        {message.sentBy.id === 'chatify::system'
-          ? formatSystemMessage(localizer, message.text)
-          : message.text}
-      </div>
-    );
-  },
-);

package/src/ui/ChatList/ChatListItemName.tsx

@@ -1,13 +0,0 @@
-import { ChatName } from '../ChatName';
-import { customize } from '../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemName = customize('ChatListItemName', (props: ChatListItemBoxProps) => {
-  const { name } = props.chat;
-
-  return (
-    <div className="wxchtf-chat-name">
-      <ChatName name={name} />
-    </div>
-  );
-});

package/src/ui/ChatList/index.ts

@@ -1,8 +0,0 @@
-export * from './ChatList';
-export * from './ChatListItemBox';
-export * from './ChatListItemLastMessage';
-export * from './ChatListItemLastMessageAuthor';
-export * from './ChatListItemLastMessageContent';
-export * from './ChatListItemName';
-export * from './ChatListItemUnreadCount';
-export * from './ChatListItemLastMessageSentAt';

package/src/ui/ChatName.tsx

@@ -1,10 +0,0 @@
-import { customize } from './customize';
-
-export interface ChatNameProps {
-  name: string;
-}
-
-export const ChatName = customize('ChatName', (props: ChatNameProps) => {
-  const { name } = props;
-  return <>{name}</>;
-});