@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha10

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,31 +0,0 @@
-import { Col, Row } 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">
-            <ChatHeaderMembers id={id} />
-            <ChatMembersButton id={id} />
-          </Col>
-        )}
-      </Row>
-    </div>
-  );
-});

package/src/ui/ChatPanel/ChatHeaderMembers.tsx

@@ -1,28 +0,0 @@
-import { useGetChatQuery } from '../../core';
-import { Tooltip } from 'antd';
-import { customize } from '../customize';
-import { Avatar as AntdAvatar } from 'antd';
-import { Avatar } from '../Avatar';
-
-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 (
-    <AntdAvatar.Group maxCount={5}>
-      {chat.members.map((x) => (
-        <Tooltip key={x.id} title={x.name}>
-          <Avatar account={x} />
-        </Tooltip>
-      ))}
-    </AntdAvatar.Group>
-  );
-});

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

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';

package/src/ui/CreateChatPanel/index.ts

@@ -1,4 +0,0 @@
-export * from './CreateChatForm';
-export * from './CreateChatMemberInput';
-export * from './CreateChatNameInput';
-export * from './CreateChatPanel';

package/src/ui/Icon.tsx

@@ -1,35 +0,0 @@
-import { FC } from 'react';
-import { customize } from './customize';
-import SendOutlined from '@ant-design/icons/SendOutlined';
-import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
-import UserAddOutlined from '@ant-design/icons/UserAddOutlined';
-import UsergroupAddOutlined from '@ant-design/icons/UsergroupAddOutlined';
-import UserDeleteOutlined from '@ant-design/icons/UserDeleteOutlined';
-import UsergroupDeleteOutlined from '@ant-design/icons/UsergroupDeleteOutlined';
-import TeamOutlined from '@ant-design/icons/TeamOutlined';
-import EditOutlined from '@ant-design/icons/EditOutlined';
-import CloseOutlined from '@ant-design/icons/CloseOutlined';
-
-export type IconType = keyof typeof ICONS;
-
-export interface IconProps {
-  type: IconType;
-}
-
-export const ICONS = {
-  attach: PaperClipOutlined,
-  send: SendOutlined,
-  'remove-member': UserDeleteOutlined,
-  'remove-member-delete-history': UsergroupDeleteOutlined,
-  'add-member': UserAddOutlined,
-  'add-member-with-history': UsergroupAddOutlined,
-  members: TeamOutlined,
-  edit: EditOutlined,
-  close: CloseOutlined,
-};
-
-export const Icon = customize<FC<IconProps>>('Icon', (props) => {
-  const { type } = props;
-  const IconComponent = ICONS[type];
-  return IconComponent ? <IconComponent /> : null;
-});

package/src/ui/InputBox/InputBox.tsx

@@ -1,38 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useSelect, useSendMutation } from '../../core';
-import { uniqId } from '../../util';
-import { InputFilesBox } from './InputFilesBox';
-import { InputTextBox } from './InputTextBox';
-import { customize } from '../customize';
-import { InputSubmitButtonBox } from './InputSubmitButtonBox';
-
-function useSend(text: string, setText: (value: string) => void) {
-  const chatId = useSelect((x) => x.ui.chatId!, []);
-  const [add] = useSendMutation();
-
-  return useCallback(() => {
-    if (text.length === 0) {
-      return;
-    }
-
-    setText('');
-    add({ chatId, text: text, files: [], requestId: uniqId() });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chatId, text]);
-}
-
-export const InputBox = customize('InputBox', () => {
-  const [text, setText] = useState('');
-  const onSend = useSend(text, setText);
-
-  return (
-    <div className="wxchtf-input-form">
-      <div className="wxchtf-input-box">
-        <InputFilesBox />
-        <InputTextBox value={text} onSend={onSend} onChange={setText} />
-        <InputSubmitButtonBox onSubmit={onSend} />
-      </div>
-    </div>
-  );
-});

package/src/ui/InputBox/InputFilesBox.tsx

@@ -1,9 +0,0 @@
-import { Button } from 'antd';
-import { customize } from '../customize';
-import { Icon } from '../Icon';
-
-export const InputFilesBox = customize('InputFilesBox', () => (
-  <div className="wxchtf-add-files-box">
-    <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
-  </div>
-));

package/src/ui/InputBox/InputSubmitButtonBox.tsx

@@ -1,17 +0,0 @@
-import { Button } from 'antd';
-import { customize } from '../customize';
-import { Icon } from '../Icon';
-
-export interface InputSubmitButtonBoxProps {
-  onSubmit: () => void;
-}
-
-export const InputSubmitButtonBox = customize('InputSubmitButtonBox', (props: InputSubmitButtonBoxProps) => {
-  const { onSubmit } = props;
-
-  return (
-    <div className="wxchtf-submit-btn-box">
-      <Button onClick={onSubmit} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
-    </div>
-  );
-});

package/src/ui/InputBox/index.ts

@@ -1,4 +0,0 @@
-export * from './InputBox';
-export * from './InputFilesBox';
-export * from './InputSubmitButtonBox';
-export * from './InputTextBox';

package/src/ui/Layout/Aside.tsx

@@ -1,12 +0,0 @@
-import { customize } from '../customize';
-import { ChatList } from '../ChatList';
-import { AddChatButton } from '../AddChatButton';
-
-export const Aside = customize('Aside', () => {
-  return (
-    <div className="wxchtf-aside">
-      <AddChatButton />
-      <ChatList />
-    </div>
-  );
-});

package/src/ui/Layout/Body.tsx

@@ -1,10 +0,0 @@
-import { customize } from '../customize';
-import { Aside } from './Aside';
-import { Main } from './Main';
-
-export const Body = customize('Body', () => (
-  <div className="wxchtf-body">
-    <Aside />
-    <Main />
-  </div>
-));

package/src/ui/Layout/Footer.tsx

@@ -1,3 +0,0 @@
-import { customize } from '../customize';
-
-export const Footer = customize('Footer', () => <div className="wxchtf-footer"></div>);

package/src/ui/Layout/Header.tsx

@@ -1,5 +0,0 @@
-import { customize } from '../customize';
-
-export const Header = customize('Header', () => {
-  return <div className="wxchtf-header"></div>;
-});

package/src/ui/Layout/Main.tsx

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

package/src/ui/Layout/index.ts

@@ -1,5 +0,0 @@
-export * from './Aside';
-export * from './Header';
-export * from './Footer';
-export * from './Main';
-export * from './Body';

package/src/ui/Message/index.ts

@@ -1,6 +0,0 @@
-export * from './MessageAuthor';
-export * from './MessageBox';
-export * from './MessageContent';
-export * from './MessageInfoBox';
-export * from './MessageRow';
-export * from './MessageText';

package/src/ui/SendingMessage/index.ts

@@ -1,4 +0,0 @@
-export * from './SendingMessageBox';
-export * from './SendingMessageContent';
-export * from './SendingMessageInfoBox';
-export * from './SendingMessageText';

package/src/ui/SystemMessage/SystemMessageRow.tsx

@@ -1,43 +0,0 @@
-import { Ref } from 'react';
-import { customize } from '../customize';
-import { Localizer, useLocalizer } from '../localizer';
-import { Message } from '../../core';
-
-export interface SystemMessageRowProps {
-  message: Message;
-  containerRef?: Ref<HTMLDivElement>;
-}
-
-export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
-  if (text === 'chatify://chat-created') {
-    return localizer.system.chatCreated();
-  }
-
-  if (text.startsWith('chatify://member-added')) {
-    return localizer.system.memberAdded();
-  }
-
-  if (text.startsWith('chatify://member-removed')) {
-    return localizer.system.memberRemoved();
-  }
-
-  if (text.startsWith('chatify://chat-name-changed::')) {
-    const data = JSON.parse(text.substring('chatify://chat-name-changed::'.length));
-    return localizer.system.chatNameChanged(data.newName);
-  }
-
-  return text;
-}
-
-export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
-  const { message, containerRef } = props;
-  const { text, sentAt } = message;
-  const localizer = useLocalizer();
-
-  return (
-    <div ref={containerRef} className="wxchtf-system-message">
-      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
-      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
-    </div>
-  );
-});

package/src/ui/SystemMessage/index.ts

@@ -1,2 +0,0 @@
-export * from './SystemMessageBox';
-export * from './SystemMessageRow';

package/src/util/index.ts

@@ -1,2 +0,0 @@
-export * from './uniqBy';
-export * from './uniqId';

package/src/util/uniqBy.tsx

@@ -1,17 +0,0 @@
-export function uniqBy<T, TKey extends string | number | symbol>(items: T[], selector: (x: T) => TKey) {
-  const keys = {} as Record<TKey, null>;
-  const result: T[] = [];
-
-  items.forEach((x) => {
-    const key = selector(x);
-
-    if (keys.hasOwnProperty(key)) {
-      return;
-    }
-
-    keys[key] = null;
-    result.push(x);
-  });
-
-  return result;
-}

package/src/util/uniqId.tsx

@@ -1,3 +0,0 @@
-export function uniqId() {
-  return Date.now().toString(36) + Math.random().toString(36).substring(2);
-}