@webinex/chatify 1.0.0-alpha07 → 1.0.0-rc1

package/src/ui/ChatHeaderMembers.tsx

@@ -1,30 +1,30 @@
-import { FC } from 'react';
-import { useChat } from '../core';
-import { Avatar, Tooltip } from 'antd';
-import { customize } from '../util';
-
-export interface ChatHeaderMembersProps {
-  id: string;
-}
-
-const _ChatHeaderMembers: FC<ChatHeaderMembersProps> = (props) => {
-  const { id } = props;
-  const { data: chat } = useChat({ 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>
-  );
-};
-
-_ChatHeaderMembers.displayName = 'ChatHeaderMembers';
-export const ChatHeaderMembers = customize('ChatHeaderMembers', _ChatHeaderMembers);
+import { FC } from 'react';
+import { useChat } from '../core';
+import { Avatar, Tooltip } from 'antd';
+import { customize } from '../util';
+
+export interface ChatHeaderMembersProps {
+  id: string;
+}
+
+const _ChatHeaderMembers: FC<ChatHeaderMembersProps> = (props) => {
+  const { id } = props;
+  const { data: chat } = useChat({ 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>
+  );
+};
+
+_ChatHeaderMembers.displayName = 'ChatHeaderMembers';
+export const ChatHeaderMembers = customize('ChatHeaderMembers', _ChatHeaderMembers);

package/src/ui/ChatHeaderSettingsButton.tsx

@@ -1,26 +1,26 @@
-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);
+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 +1,101 @@
-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);
+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/ChatName.tsx

@@ -1,15 +1,15 @@
-import { FC } from 'react';
-import { customize } from '../util';
-
-export interface ChatNameProps {
-  name: string;
-}
-
-const _ChatName: FC<ChatNameProps> = (props) => {
-  const { name } = props;
-  return <>{name}</>;
-};
-
-_ChatName.displayName = 'ChatName';
-
-export const ChatName = customize('ChatName', _ChatName);
+import { FC } from 'react';
+import { customize } from '../util';
+
+export interface ChatNameProps {
+  name: string;
+}
+
+const _ChatName: FC<ChatNameProps> = (props) => {
+  const { name } = props;
+  return <>{name}</>;
+};
+
+_ChatName.displayName = 'ChatName';
+
+export const ChatName = customize('ChatName', _ChatName);

package/src/ui/ChatSettings.tsx

@@ -1,59 +1,59 @@
-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: true }),
-    [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>
-  );
-}
+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>
+  );
+}