@webinex/chatify 1.0.0-build2 → 1.0.0-rc2

package/src/core/useRemoveMember.tsx

@@ -1,12 +1,12 @@
-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),
-  });
-}
+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/core/useSignalRMonitor.tsx

@@ -1,52 +1,52 @@
-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 } });
-        }),
-      );
-      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]: [string, string, Account, Message]) => {
-            dispatch({ type: 'member_added', data: { chatId, chatName, account, me, message } });
-          },
-        ),
-      );
-      unsubscribes.push(
-        client.subscribe(
-          'chatify://member-removed',
-          ([chatId, accountId, deleteHistory]: [string, string, boolean]) => {
-            dispatch({ type: 'member_removed', data: { chatId, accountId, deleteHistory, me } });
-          },
-        ),
-      );
-    });
-
-    return () => {
-      unsubscribes.forEach((x) => x());
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-}
+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 } });
+        }),
+      );
+      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]: [string, string, Account, Message]) => {
+            dispatch({ type: 'member_added', data: { chatId, chatName, account, me, message } });
+          },
+        ),
+      );
+      unsubscribes.push(
+        client.subscribe(
+          'chatify://member-removed',
+          ([chatId, accountId, deleteHistory]: [string, string, boolean]) => {
+            dispatch({ type: 'member_removed', data: { chatId, accountId, deleteHistory, me } });
+          },
+        ),
+      );
+    });
+
+    return () => {
+      unsubscribes.forEach((x) => x());
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

package/src/index.ts

@@ -1,3 +1,3 @@
-export * from './ui';
-export * from './core';
-export * from './ChatifyContext';
+export * from './ui';
+export * from './core';
+export * from './ChatifyContext';

package/src/ui/AddChat.tsx

@@ -1,55 +1,55 @@
-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>
-  );
-}
+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/AddChatButton.tsx

@@ -1,19 +1,19 @@
-import { Button } from 'antd';
-import { useDispatch } from '../core';
-import { FC, useCallback } from 'react';
-import { customize } from '../util';
-
-const _AddChatButton: FC = () => {
-  const dispatch = useDispatch();
-  const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
-
-  return (
-    <Button onClick={onAddChat} icon={'+'} type="link">
-      Add chat
-    </Button>
-  );
-};
-
-_AddChatButton.displayName = 'AddChatButton';
-
-export const AddChatButton = customize('AddChatButton', _AddChatButton);
+import { Button } from 'antd';
+import { useDispatch } from '../core';
+import { FC, useCallback } from 'react';
+import { customize } from '../util';
+
+const _AddChatButton: FC = () => {
+  const dispatch = useDispatch();
+  const onAddChat = useCallback(() => dispatch({ type: 'new_chat_open', data: undefined }), [dispatch]);
+
+  return (
+    <Button onClick={onAddChat} icon={'+'} type="link">
+      Add chat
+    </Button>
+  );
+};
+
+_AddChatButton.displayName = 'AddChatButton';
+
+export const AddChatButton = customize('AddChatButton', _AddChatButton);

package/src/ui/Aside.tsx

@@ -1,41 +1,41 @@
-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>
-  );
-}
+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/Avatar.tsx

@@ -1,18 +1,18 @@
-import { FC } from 'react';
-import { Account } from '../core';
-import { Avatar as AntdAvatar } from 'antd';
-import { customize } from '../util';
-
-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);
+import { FC } from 'react';
+import { Account } from '../core';
+import { Avatar as AntdAvatar } from 'antd';
+import { customize } from '../util';
+
+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/Chat.tsx

@@ -1,26 +1,26 @@
-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 />}
-    </>
-  );
-}
+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 +1,43 @@
-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>
-  );
-}
+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 +1,33 @@
-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>
-  );
-}
+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>
+  );
+}