@webinex/chatify 1.0.0-rc2 → 1.0.1-rc3

package/src/core/useMutation.tsx

@@ -1,48 +0,0 @@
-import { useCallback } from 'react';
-import { useDispatch, useSelect, useStateRef } from './reducer';
-import { MutationState, State } from './state';
-
-export interface MutationApi<TResult> {
-  promise: Promise<TResult>;
-  state: State;
-  updateState: (mutation: (state: State) => State) => void;
-}
-
-export interface UseMutationArgs<TResult = unknown, TArgs = void> {
-  key: string;
-  queryFn: (args: TArgs) => Promise<TResult>;
-  onQueryStarted?: (args: TArgs, api: MutationApi<TResult>) => void;
-}
-
-const INITIAL_MUTATION_STATE: MutationState = { isFetching: false, error: undefined };
-
-export function useMutation<TResult = unknown, TArgs = void>(args: UseMutationArgs<TResult, TArgs>) {
-  const { key, queryFn, onQueryStarted } = args;
-  const dispatch = useDispatch();
-  const state = useStateRef();
-  const mutationState = useSelect((x) => x.mutation[args.key], []);
-
-  const invoke = useCallback((args: TArgs) => {
-    dispatch({ type: 'mutation_fetch', data: { key } });
-    const promise = queryFn(args);
-
-    promise
-      .then(() => {
-        dispatch({ type: 'mutation_resolve', data: { key } });
-      })
-      .catch((error) => dispatch({ type: 'mutation_reject', data: { key, error } }));
-
-    onQueryStarted &&
-      onQueryStarted(args, {
-        promise,
-        state: state.current,
-        updateState: (mutation: (state: State) => State) => {
-          dispatch({ type: 'update', data: { mutation } });
-        },
-      });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return [invoke, mutationState ?? INITIAL_MUTATION_STATE] as const;
-}

package/src/core/useQuery.tsx

@@ -1,45 +0,0 @@
-import { useEffect } from 'react';
-import { useDispatch, useSelect, useStateRef } from './reducer';
-import { QueryState, State } from './state';
-
-interface UseQueryArgs<TData> {
-  key: string;
-  queryFn: () => Promise<TData>;
-}
-
-const INITIAL_QUERY_STATE: QueryState<any> = {
-  uninitialized: false,
-  isFetching: true,
-  data: undefined,
-  error: undefined,
-};
-
-function select<TData>(state: State, key: string): QueryState<TData> | undefined {
-  return (state.query as any)[key];
-}
-
-function useQueryState<TData>(key: string): QueryState<TData> | undefined {
-  return useSelect((x) => select<TData>(x, key), []);
-}
-
-export function useQuery<TData>(args: UseQueryArgs<TData>): QueryState<TData> {
-  const { key, queryFn } = args;
-  const state = useStateRef();
-  const dispatch = useDispatch();
-  const queryState = useQueryState<TData>(args.key);
-
-  useEffect(() => {
-    if (select(state.current, key)) {
-      return;
-    }
-
-    dispatch({ type: 'query_fetch', data: { key } });
-    queryFn()
-      .then((data) => dispatch({ type: 'query_resolve', data: { key, data: data as any } }))
-      .catch((error) => dispatch({ type: 'query_reject', data: { key, error } }));
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return queryState ?? INITIAL_QUERY_STATE;
-}

package/src/core/useRemoveMember.tsx

@@ -1,12 +0,0 @@
-import { useClient } from '../ChatifyContext';
-import { RemoveMemberRequest } from './models';
-import { useMutation } from './useMutation';
-
-export function useRemoveMember() {
-  const client = useClient();
-
-  return useMutation({
-    key: 'remove-member',
-    queryFn: (args: RemoveMemberRequest) => client.removeMember(args),
-  });
-}

package/src/ui/AddChat.tsx

@@ -1,55 +0,0 @@
-import { Button, Form, Input, Select } from 'antd';
-import { useAccounts, useAddChat } from '../core';
-import { useCallback, useMemo } from 'react';
-import { uniqId } from '../util';
-import { useLocalizer } from './localizer';
-
-type FormValue = {
-  name: string;
-  members: string[];
-};
-
-export function AddChat() {
-  const [add, { isFetching: adding }] = useAddChat();
-  const { data: accounts, isFetching } = useAccounts();
-  const localizer = useLocalizer();
-  const options = useMemo(() => accounts?.map((x) => ({ value: x.id, label: x.name })), [accounts]);
-
-  const onSubmit = useCallback(
-    (value: FormValue) =>
-      add({
-        name: value.name,
-        members: value.members,
-        requestId: uniqId(),
-      }),
-    [add],
-  );
-
-  return (
-    <div className="wxchtf-add-chat">
-      <h3>{localizer.addChat.title()}</h3>
-      <Form onFinish={onSubmit} layout="vertical" disabled={adding}>
-        <Form.Item
-          name="name"
-          label={localizer.addChat.name.label()}
-          rules={[
-            { required: true, message: localizer.addChat.name.required() },
-            { max: 250, message: localizer.addChat.name.max250() },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          name="members"
-          label={localizer.addChat.members.label()}
-          rules={[{ required: true, message: localizer.addChat.members.required() }]}
-        >
-          <Select mode="multiple" loading={isFetching} options={options} />
-        </Form.Item>
-        <Button loading={adding} type="primary" block htmlType="submit">
-          {localizer.addChat.submitBtn()}
-        </Button>
-      </Form>
-    </div>
-  );
-}

package/src/ui/Aside.tsx

@@ -1,41 +0,0 @@
-import { Menu, MenuProps } from 'antd';
-import { useCallback, useEffect, useMemo } from 'react';
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
-import { useChatList, useDispatch, useSelect } from '../core';
-import { ChatListItemBox } from './ChatListItem';
-
-export function Aside() {
-  const activeChatId = useSelect((x) => x.ui.chatId, []);
-  const dispatch = useDispatch();
-  const selected = useMemo(() => (activeChatId ? [activeChatId] : []), [activeChatId]);
-
-  const onSelect = useCallback(
-    (info: Parameters<NonNullable<MenuProps['onSelect']>>[0]) =>
-      dispatch({ type: 'chat_open', data: { chatId: info.selectedKeys[0] } }),
-    [dispatch],
-  );
-
-  const { data: chats } = useChatList();
-
-  const items = useMemo<MenuItemType[]>(() => {
-    if (!chats) {
-      return [];
-    }
-
-    return chats.map((x) => ({ key: x.id, label: <ChatListItemBox chat={x} /> }));
-  }, [chats]);
-
-  useEffect(() => {
-    if (!activeChatId && chats && chats.length > 0) {
-      dispatch({ type: 'chat_open', data: { chatId: chats[0].id } });
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chats, dispatch]);
-
-  return (
-    <div className="wxchtf-aside">
-      {chats && <Menu className="wxchtf-chats" selectedKeys={selected} onSelect={onSelect} items={items} />}
-    </div>
-  );
-}

package/src/ui/Chat.tsx

@@ -1,26 +0,0 @@
-import { ChatHeader } from './ChatHeader';
-import { ChatBody } from './ChatBody';
-import { InputForm } from './InputForm';
-import { useChat } from '../core';
-import { useMe } from '../ChatifyContext';
-
-export interface ChatProps {
-  id: string;
-}
-
-export function Chat(props: ChatProps) {
-  const { id } = props;
-  const me = useMe();
-  const { data: chat } = useChat({ chatId: id });
-  const isMember = chat?.members.map((x) => x.id).includes(me) === true;
-
-  return (
-    <>
-      <div className="wxchtf-chat">
-        <ChatHeader id={id} />
-        <ChatBody id={id} />
-      </div>
-      {isMember && <InputForm />}
-    </>
-  );
-}

package/src/ui/ChatBody.tsx

@@ -1,43 +0,0 @@
-import { MessageBox } from './Message';
-import { useMessages } from '../core';
-import { LoadMore } from './LoadMore';
-import { SendingMessage } from './SendingMessage';
-import { SystemMessage } from './SystemMessage';
-import { MessageSkeleton } from './MessageSkeleton';
-
-export interface ChatBodyProps {
-  id: string;
-}
-
-export function ChatBody(props: ChatBodyProps) {
-  const { id } = props;
-  const { data: messages } = useMessages({ 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 <SystemMessage text={x.text} sentAt={x.sentAt} />;
-        }
-
-        switch (x.type) {
-          case 'message': {
-            return <MessageBox message={x} key={x.id} />;
-          }
-
-          case 'sending': {
-            return <SendingMessage key={x.requestId} text={x.text} files={x.files} />;
-          }
-
-          case 'more': {
-            return <LoadMore key={index} chatId={id} />;
-          }
-
-          default:
-            return null;
-        }
-      })}
-    </div>
-  );
-}

package/src/ui/ChatHeader.tsx

@@ -1,33 +0,0 @@
-import { useChat, useSelect, ChatListItem } from '../core';
-import { Col, Row, Space } from 'antd';
-import { ChatHeaderMembers } from './ChatHeaderMembers';
-import { ChatSettingsButton } from './ChatHeaderSettingsButton';
-import { ChatName } from './ChatName';
-
-export interface ChatHeaderProps {
-  id: string;
-}
-
-export function ChatHeader(props: ChatHeaderProps) {
-  const { id } = props;
-  const { data: chat } = useChat({ chatId: id });
-  const chatListItem = useSelect(
-    (x) => x.query['chat-list'].data?.find((x: ChatListItem) => x.id === id),
-    [id],
-  );
-  const name = chat?.name ?? chatListItem?.name;
-
-  return (
-    <div className="wxchtf-chat-header">
-      <Row justify="space-between" align="middle">
-        <Col className="wxchtf-chat-name">{name && <ChatName name={name} />}</Col>
-        <Col className="wxchtf-chat-members">
-          <Space align="center">
-            <ChatHeaderMembers id={id} />
-            <ChatSettingsButton id={id} />
-          </Space>
-        </Col>
-      </Row>
-    </div>
-  );
-}

package/src/ui/ChatHeaderSettingsButton.tsx

@@ -1,26 +0,0 @@
-import { useDispatch } from '../core';
-import { Button } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
-import { FC, useCallback } from 'react';
-import { customize } from '../util';
-
-export interface ChatSettingsButtonProps {
-  id: string;
-}
-
-const _ChatSettingsButton: FC<ChatSettingsButtonProps> = (props) => {
-  const { id } = props;
-  const dispatch = useDispatch();
-  const onSettingsClick = useCallback(
-    () => dispatch({ type: 'chat_settings_open', data: { chatId: id } }),
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatch],
-  );
-
-  return <Button onClick={onSettingsClick} type="link" icon={<SettingOutlined />} />;
-};
-
-_ChatSettingsButton.displayName = 'ChatSettingsButton';
-
-export const ChatSettingsButton = customize('ChatSettingsButton', _ChatSettingsButton);

package/src/ui/ChatListItem.tsx

@@ -1,101 +0,0 @@
-import { useLocalizer } from './localizer';
-import { formatSystemMessage } from './SystemMessage';
-import { Avatar } from './Avatar';
-import { ChatName } from './ChatName';
-import { ChatListItem as ChatListItemModel } from '../core';
-import { FC } from 'react';
-import { customize } from '../util';
-
-export interface ChatListItemBoxProps {
-  chat: ChatListItemModel;
-}
-
-const _ChatListItemName: FC<ChatListItemBoxProps> = (props) => {
-  const { name } = props.chat;
-
-  return (
-    <div className="wxchtf-chat-name">
-      <ChatName name={name} />
-    </div>
-  );
-};
-
-_ChatListItemName.displayName = 'ChatListItemName';
-
-export const ChatListItemName = customize('ChatListItemName', _ChatListItemName);
-
-const _ChatListItemUnreadCount: FC<ChatListItemBoxProps> = (props) => {
-  const { unreadCount } = props.chat;
-
-  if (unreadCount <= 0) {
-    return null;
-  }
-
-  return <div className="wxchtf-unread-count">{unreadCount}</div>;
-};
-
-_ChatListItemUnreadCount.displayName = 'ChatListItemUnreadCount';
-
-export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', _ChatListItemUnreadCount);
-
-const _ChatListItemLastMessage: FC<ChatListItemBoxProps> = (props) => {
-  return (
-    <div className="wxchtf-chat-last">
-      <ChatListItemLastMessageAuthor {...props} />
-      <ChatListItemLastMessageContent {...props} />
-    </div>
-  );
-};
-
-_ChatListItemLastMessage.displayName = 'ChatListItemLastMessage';
-
-export const ChatListItemLastMessage = customize('ChatListItemLastMessage', _ChatListItemLastMessage);
-
-export const ChatListItemLastMessageAuthor = customize<FC<ChatListItemBoxProps>, string>(
-  'ChatListItemLastMessageAuthor',
-  (props) => {
-    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>
-    );
-  },
-);
-
-export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>, string>(
-  '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>
-    );
-  },
-);
-
-const _ChatListItemBox: FC<ChatListItemBoxProps> = (props) => {
-  const { message } = props.chat;
-
-  return (
-    <div className={'wxchtf-chat' + (!message.read ? ' --unread' : '')}>
-      <ChatListItemName {...props} />
-      <ChatListItemUnreadCount {...props} />
-      <ChatListItemLastMessage {...props} />
-    </div>
-  );
-};
-
-_ChatListItemBox.displayName = 'ChatListItemBox';
-
-export const ChatListItemBox = customize('ChatListItemBox', _ChatListItemBox);

package/src/ui/ChatSettings.tsx

@@ -1,59 +0,0 @@
-import { Button, Col, List, Row, Select } from 'antd';
-import { Account, useAccounts, useAddMember, useChat, useSelect } from '../core';
-import { CloseOutlined } from '@ant-design/icons';
-import { useRemoveMember } from '../core';
-import { useCallback, useMemo } from 'react';
-
-function Member(props: { account: Account; chatId: string }) {
-  const { account, chatId } = props;
-  const [remove] = useRemoveMember();
-
-  const onRemoveClick = useCallback(
-    () => remove({ chatId, accountId: account.id, deleteHistory: false }),
-    [remove, chatId, account.id],
-  );
-
-  return (
-    <List.Item>
-      {account.name} <Button onClick={onRemoveClick} type="link" icon={<CloseOutlined />} />
-    </List.Item>
-  );
-}
-
-export function ChatSettings() {
-  const [chatId] = useSelect((x) => [x.ui.chatId], []);
-  const { data: chat } = useChat({ chatId: chatId! });
-  const [add] = useAddMember();
-  const { data: accounts } = useAccounts();
-  const accountOptions = useMemo(() => accounts?.map((x) => ({ value: x.id, label: x.name })), [accounts]);
-
-  const onAdd = useCallback(
-    (id: string) => add({ chatId: chatId!, accountId: id, withHistory: true }),
-    [add, chatId],
-  );
-
-  if (!chat) {
-    return null;
-  }
-
-  return (
-    <div className="wxchtf-chat-settings">
-      <Row justify="space-between">
-        <Col>
-          <h3 className="wxchtf-title">{chat.name}</h3>
-        </Col>
-        <Col>
-          <Button type="link" icon={<CloseOutlined />} />
-        </Col>
-      </Row>
-      <h4>Members</h4>
-      <List
-        dataSource={chat.members}
-        rowKey="id"
-        renderItem={(account) => <Member account={account} chatId={chatId!} />}
-      />
-
-      <Select<string> style={{ width: '350px' }} options={accountOptions} value={null} onSelect={onAdd} />
-    </div>
-  );
-}

package/src/ui/Footer.tsx

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { customize } from '../util';
-
-const _Footer: FC = () => <div className="wxchtf-footer"></div>;
-_Footer.displayName = 'Footer';
-
-export const Footer = customize('Footer', _Footer);

package/src/ui/Header.tsx

@@ -1,14 +0,0 @@
-import { FC } from 'react';
-import { AddChatButton } from './AddChatButton';
-import { customize } from '../util';
-
-const _Header: FC = () => {
-  return (
-    <div className="wxchtf-header">
-      <AddChatButton />
-    </div>
-  );
-};
-
-_Header.displayName = 'Header';
-export const Header = customize('Header', _Header);

package/src/ui/InputForm.tsx

@@ -1,51 +0,0 @@
-import { Button, Input } from 'antd';
-import { useCallback, useState } from 'react';
-import isHotkey from 'is-hotkey';
-import { useAddMessage } from '../core/useAddMessage';
-import { uniqId } from '../util';
-import { useSelect } from '../core';
-import { useLocalizer } from './localizer';
-import { Icon } from './Icon';
-
-const isSend = isHotkey('ctrl+enter');
-
-export function InputForm() {
-  const chatId = useSelect((x) => x.ui.chatId!, []);
-  const [add] = useAddMessage({ chatId });
-  const [text, setText] = useState('');
-  const localizer = useLocalizer();
-
-  const onSend = useCallback(() => {
-    setText('');
-    add({ text: text, files: [], requestId: uniqId() });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatId, text]);
-
-  return (
-    <div className="wxchtf-input-form">
-      <div className="wxchtf-input-box">
-        <div className="wxchtf-add-files-box">
-          <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
-        </div>
-        <div className="wxchtf-text-input-box">
-          <Input.TextArea
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            autoSize={{ maxRows: 5 }}
-            className="wxchtf-text-input-textarea"
-            placeholder={localizer.input.placeholder()}
-            onKeyDown={(event) => {
-              if (isSend(event)) {
-                onSend();
-              }
-            }}
-          />
-        </div>
-        <div className="wxchtf-submit-btn-box">
-          <Button onClick={onSend} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/ui/LoadMore.tsx

@@ -1,40 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useLoadMore } from '../core';
-import { MessageSkeleton } from './MessageSkeleton';
-
-export interface LoadMoreProps {
-  chatId: string;
-}
-
-export function LoadMore(props: LoadMoreProps) {
-  const { chatId } = props;
-  const [loadMore, { isFetching }] = useLoadMore({ chatId });
-  const [intersecting, setIntersecting] = useState(false);
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const observer = useMemo(
-    () => new IntersectionObserver(([entry]) => setIntersecting((prev) => prev || entry.isIntersecting)),
-    [],
-  );
-
-  useEffect(() => {
-    observer.observe(ref.current!);
-    return () => observer.disconnect();
-  }, [observer]);
-
-  useEffect(() => {
-    if (!intersecting) {
-      return;
-    }
-
-    loadMore();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [intersecting]);
-
-  if (isFetching) {
-    return <MessageSkeleton count={4} />;
-  }
-
-  return <div ref={ref} />;
-}

package/src/ui/Main.tsx

@@ -1,16 +0,0 @@
-import { useSelect } from '../core';
-import { AddChat } from './AddChat';
-import { Chat } from './Chat';
-import { ChatSettings } from './ChatSettings';
-
-export function Main() {
-  const { view, chatId } = useSelect((x) => ({ view: x.ui.view, chatId: x.ui.chatId }), []);
-
-  return (
-    <div className="wxchtf-main">
-      {view === 'chat' && chatId && <Chat id={chatId} key={chatId} />}
-      {view === 'new-chat' && <AddChat />}
-      {view === 'chat-settings' && <ChatSettings />}
-    </div>
-  );
-}