@webinex/chatify 1.0.2-rc3 → 2.0.0-alpha1

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 === true) {
-      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/styles/settings.scss

@@ -1,5 +0,0 @@
-.wxchtf-chatify {
-  .wxchtf-chat-settings {
-    padding-inline: 1rem;
-  }
-}

package/src/ui/AddChatButton.tsx

@@ -1,15 +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 (
-    <Button onClick={onAddChat} icon={'+'} type="link">
-      Add chat
-    </Button>
-  );
-});

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/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,7 +0,0 @@
-export * from './ChatList';
-export * from './ChatListItemBox';
-export * from './ChatListItemLastMessage';
-export * from './ChatListItemLastMessageAuthor';
-export * from './ChatListItemLastMessageContent';
-export * from './ChatListItemName';
-export * from './ChatListItemUnreadCount';

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}</>;
-});

package/src/ui/ChatPanel/ChatBody.tsx

@@ -1,44 +0,0 @@
-import { MessageBox } from '../Message';
-import { useGetMessagesQuery } from '../../core';
-import { Next } from '../Next';
-import { SendingMessageBox } from '../SendingMessage';
-import { SystemMessageBox } from '../SystemMessage/SystemMessageBox';
-import { MessageSkeleton } from '../MessageSkeleton';
-import { customize } from '../customize';
-
-export interface ChatBodyProps {
-  id: string;
-}
-
-export const ChatBody = customize('ChatBody', (props: ChatBodyProps) => {
-  const { id } = props;
-  const { data: messages } = useGetMessagesQuery({ chatId: id });
-
-  return (
-    <div className="wxchtf-chat-body">
-      {!messages && <MessageSkeleton count={5} />}
-      {messages?.map((x, index) => {
-        if (x.type === 'message' && x.sentBy.id === 'chatify::system') {
-          return <SystemMessageBox key={x.id} message={x} />;
-        }
-
-        switch (x.type) {
-          case 'message': {
-            return <MessageBox message={x} key={x.id} />;
-          }
-
-          case 'sending': {
-            return <SendingMessageBox key={x.requestId} text={x.text} files={x.files} />;
-          }
-
-          case 'next': {
-            return <Next key={'next-' + messages.length + '-' + index} chatId={id} />;
-          }
-
-          default:
-            return null;
-        }
-      })}
-    </div>
-  );
-});

package/src/ui/ChatPanel/ChatHeader.tsx

@@ -1,33 +0,0 @@
-import { Col, Row, Space } from 'antd';
-import { ChatHeaderMembers } from './ChatHeaderMembers';
-import { ChatMembersButton } from './ChatMembersButton';
-import { customize } from '../customize';
-import { ChatHeaderName } from './ChatHeaderName';
-import { useSelect } from '../../core';
-
-export interface ChatHeaderProps {
-  id: string;
-}
-
-export const ChatHeader = customize('ChatHeader', (props: ChatHeaderProps) => {
-  const { id } = props;
-  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
-
-  return (
-    <div className="wxchtf-chat-header">
-      <Row justify="space-between" align="middle">
-        <Col>
-          <ChatHeaderName id={id} />
-        </Col>
-        {chat.active && (
-          <Col className="wxchtf-chat-members">
-            <Space align="center">
-              <ChatHeaderMembers id={id} />
-              <ChatMembersButton id={id} />
-            </Space>
-          </Col>
-        )}
-      </Row>
-    </div>
-  );
-});

package/src/ui/ChatPanel/ChatHeaderMembers.tsx

@@ -1,26 +0,0 @@
-import { useGetChatQuery } from '../../core';
-import { Avatar, Tooltip } from 'antd';
-import { customize } from '../customize';
-
-export interface ChatHeaderMembersProps {
-  id: string;
-}
-
-export const ChatHeaderMembers = customize('ChatHeaderMembers', (props: ChatHeaderMembersProps) => {
-  const { id } = props;
-  const { data: chat } = useGetChatQuery({ chatId: id });
-
-  if (!chat?.members) {
-    return null;
-  }
-
-  return (
-    <Avatar.Group maxCount={5}>
-      {chat.members.map((x) => (
-        <Tooltip key={x.id} title={x.name}>
-          <Avatar src={x.avatar}>{x.name}</Avatar>
-        </Tooltip>
-      ))}
-    </Avatar.Group>
-  );
-});

package/src/ui/ChatPanel/ChatHeaderName.tsx

@@ -1,67 +0,0 @@
-import { Input, Tooltip } from 'antd';
-import { useSelect, useUpdateChatNameMutation } from '../../core';
-import { ChatName } from '../ChatName';
-import { customize } from '../customize';
-import { useEffect, useState } from 'react';
-import isHotkey from 'is-hotkey';
-
-export interface ChatHeaderNameProps {
-  id: string;
-}
-
-const isEscape = isHotkey('escape');
-const isEnter = isHotkey('enter');
-
-function useUpdateChatName(id: string, value: string) {
-  const [updateChatName] = useUpdateChatNameMutation();
-  return () => updateChatName({ id, name: value });
-}
-
-export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderNameProps) => {
-  const { id } = props;
-  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
-  const name = chat.name;
-  const [editNameValue, setEditNameValue] = useState('');
-  const [edit, setEdit] = useState(false);
-  const updateChatName = useUpdateChatName(id, editNameValue);
-
-  useEffect(() => {
-    if (edit) {
-      setEditNameValue(name);
-    }
-  }, [edit, name]);
-
-  if (!chat.active) {
-    return <span className="wxchtf-chat-name">{name}</span>;
-  }
-
-  if (edit) {
-    return (
-      <Input
-        value={editNameValue}
-        onChange={(e) => setEditNameValue(e.target.value)}
-        onBlur={() => setEdit(false)}
-        onKeyDown={(e) => {
-          if (isEscape(e)) {
-            setEdit(false);
-          } else if (isEnter(e)) {
-            setEdit(false);
-
-            if (editNameValue !== name) {
-              updateChatName();
-            }
-          }
-        }}
-        autoFocus
-      />
-    );
-  }
-
-  return (
-    <Tooltip title="Click to edit name...">
-      <span className="wxchtf-chat-name --editable" onClick={() => setEdit(true)}>
-        <ChatName name={name} />
-      </span>
-    </Tooltip>
-  );
-});

package/src/ui/ChatPanel/ChatMembersButton.tsx

@@ -1,21 +0,0 @@
-import { useDispatch } from '../../core';
-import { Button } from 'antd';
-import { useCallback } from 'react';
-import { customize } from '../customize';
-import { Icon } from '../Icon';
-
-export interface ChatMembersButtonProps {
-  id: string;
-}
-
-export const ChatMembersButton = customize('ChatMembersButton', (_: ChatMembersButtonProps) => {
-  const dispatch = useDispatch();
-  const onSettingsClick = useCallback(
-    () => dispatch({ type: 'toggle_members_view', data: void 0 }),
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatch],
-  );
-
-  return <Button onClick={onSettingsClick} type="link" icon={<Icon type="team" />} />;
-});

package/src/ui/ChatPanel/ChatPanel.tsx

@@ -1,27 +0,0 @@
-import { ChatHeader } from './ChatHeader';
-import { ChatBody } from './ChatBody';
-import { InputBox } from '../InputBox/InputBox';
-import { useSelect } from '../../core';
-import { customize } from '../customize';
-import { ChatMembersPanel } from './ChatMembersPanel';
-
-export interface ChatPanelProps {
-  id: string;
-}
-
-export const ChatPanel = customize('ChatPanel', (props: ChatPanelProps) => {
-  const { id } = props;
-  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
-  const chatMembersOpen = useSelect((x) => x.ui.showMembers, []);
-
-  return (
-    <div className="wxchtf-chat-panel">
-      <div className="wxchtf-chat-main">
-        <ChatHeader id={id} />
-        <ChatBody id={id} />
-        {chat.active && <InputBox />}
-      </div>
-      {chatMembersOpen && <ChatMembersPanel id={id} />}
-    </div>
-  );
-});

package/src/ui/ChatPanel/index.ts

@@ -1,6 +0,0 @@
-export * from './ChatBody';
-export * from './ChatHeader';
-export * from './ChatHeaderMembers';
-export * from './ChatHeaderName';
-export * from './ChatPanel';
-export * from './ChatMembersButton';