@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha10

package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatNameInput.tsx

@@ -1,25 +1,25 @@
-import { Form, Input } from 'antd';
-import { customize } from '../customize';
-import { useLocalizer } from '../localizer';
-
-export interface CreateChatNameInputProps {
-  name: string;
-}
-
-export const CreateChatNameInput = customize('CreateChatNameInput', (props: CreateChatNameInputProps) => {
-  const { name } = props;
-  const localizer = useLocalizer();
-
-  return (
-    <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>
-  );
-});
+import { Form, Input } from 'antd';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+
+export interface CreateChatNameInputProps {
+  name: string;
+}
+
+export const CreateChatNameInput = customize('CreateChatNameInput', (props: CreateChatNameInputProps) => {
+  const { name } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <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>
+  );
+});

package/src/ui/{CreateChatPanel → ChatGroup/Create}/CreateChatPanel.tsx

@@ -1,49 +1,45 @@
-import { useAddChatMutation, useDispatch } from '../../core';
-import { useCallback } from 'react';
-import { uniqId } from '../../util';
-import { useLocalizer } from '../localizer';
-import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
-import { customize } from '../customize';
-import { Button } from 'antd';
-import { Icon } from '../Icon';
-
-function useSubmit() {
-  const [add, { isFetching }] = useAddChatMutation();
-  const dispatch = useDispatch();
-
-  const onSubmit = useCallback(
-    (value: CreateChatFormValue) =>
-      add({
-        name: value.name,
-        members: value.members,
-        requestId: uniqId(),
-      }).then((id) => dispatch({ type: 'chat_open', data: { chatId: id } })),
-    [add, dispatch],
-  );
-
-  return [onSubmit, isFetching] as const;
-}
-
-function useOnClose() {
-  const dispatch = useDispatch();
-  return useCallback(() => dispatch({ type: 'new_chat_close', data: undefined }), [dispatch]);
-}
-
-export const CreateChatPanel = customize('CreateChatPanel', () => {
-  const localizer = useLocalizer();
-  const [onSubmit, submitting] = useSubmit();
-  const onClose = useOnClose();
-
-  return (
-    <div className="wxchtf-create-chat-panel">
-      <Button
-        onClick={onClose}
-        className="wxchtf-create-chat-panel-close"
-        type="link"
-        icon={<Icon type="close" />}
-      />
-      <h3>{localizer.addChat.title()}</h3>
-      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
-    </div>
-  );
-});
+import { chatifyApi } from '../../../core';
+import { useCallback } from 'react';
+import { useLocalizer } from '../../localizer';
+import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
+import { customize } from '../../customize';
+import { Button } from 'antd';
+import { Icon } from '../../common/Icon';
+import { useChatGroupContext } from '../ChatGroupContext';
+
+function useSubmit() {
+  const [add, { isLoading }] = chatifyApi.useAddChatMutation();
+  const { openChat } = useChatGroupContext();
+
+  const onSubmit = useCallback(
+    (value: CreateChatFormValue) =>
+      add({
+        name: value.name,
+        members: value.members,
+      })
+        .unwrap()
+        .then((id) => openChat(id)),
+    [add, openChat],
+  );
+
+  return [onSubmit, isLoading] as const;
+}
+
+export const CreateChatPanel = customize('CreateChatPanel', () => {
+  const localizer = useLocalizer();
+  const [onSubmit, submitting] = useSubmit();
+  const { toggleNewChat } = useChatGroupContext();
+
+  return (
+    <div className="wxchtf-create-chat-panel">
+      <Button
+        onClick={() => toggleNewChat()}
+        className="wxchtf-create-chat-panel-close"
+        type="link"
+        icon={<Icon type="close" />}
+      />
+      <h3>{localizer.addChat.title()}</h3>
+      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
+    </div>
+  );
+});

package/src/ui/ChatGroup/Create/index.ts

@@ -0,0 +1,19 @@
+import { CreateChatForm } from './CreateChatForm';
+import { CreateChatMemberInput } from './CreateChatMemberInput';
+import { CreateChatNameInput } from './CreateChatNameInput';
+import { CreateChatPanel } from './CreateChatPanel';
+import { CreateChatButton } from './CreateChatButton';
+
+export * from './CreateChatForm';
+export * from './CreateChatMemberInput';
+export * from './CreateChatNameInput';
+export * from './CreateChatPanel';
+export * from './CreateChatButton';
+
+export interface CreateChatPanelCustomizeValue {
+  CreateChatForm?: typeof CreateChatForm.Component | null;
+  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
+  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
+  CreateChatPanel?: typeof CreateChatPanel.Component | null;
+  CreateChatButton?: typeof CreateChatButton.Component | null;
+}

package/src/ui/ChatGroup/Layout/ChatGroupAside.tsx

@@ -0,0 +1,12 @@
+import { customize } from '../../customize';
+import { ChatListPanel } from '../List';
+import { CreateChatButton } from '../Create/CreateChatButton';
+
+export const ChatGroupAside = customize('ChatGroupAside', () => {
+  return (
+    <div className="wxchtf-aside">
+      <CreateChatButton />
+      <ChatListPanel />
+    </div>
+  );
+});

package/src/ui/ChatGroup/Layout/ChatGroupBody.tsx

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

package/src/ui/ChatGroup/Layout/ChatGroupFooter.tsx

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

package/src/ui/ChatGroup/Layout/ChatGroupHeader.tsx

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

package/src/ui/ChatGroup/Layout/ChatGroupMain.tsx

@@ -0,0 +1,17 @@
+import { customize } from '../../customize';
+import { CreateChatPanel } from '../Create';
+import { ChatView } from '../../Chat';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { chatifyApi } from '../../../core';
+
+export const ChatGroupMain = customize('ChatGroupMain', () => {
+  const { chatId, view } = useChatGroupContext();
+  const chat = chatifyApi.useChatListItem(chatId);
+
+  return (
+    <div className="wxchtf-main">
+      {view === 'chat' && chat && <ChatView value={chat} key={chatId} />}
+      {view === 'new-chat' && <CreateChatPanel />}
+    </div>
+  );
+});

package/src/ui/ChatGroup/Layout/index.ts

@@ -0,0 +1,19 @@
+import { ChatGroupAside } from './ChatGroupAside';
+import { ChatGroupHeader } from './ChatGroupHeader';
+import { ChatGroupFooter } from './ChatGroupFooter';
+import { ChatGroupMain } from './ChatGroupMain';
+import { ChatGroupBody } from './ChatGroupBody';
+
+export * from './ChatGroupAside';
+export * from './ChatGroupHeader';
+export * from './ChatGroupFooter';
+export * from './ChatGroupMain';
+export * from './ChatGroupBody';
+
+export interface ChatGroupLayoutCustomizeValue {
+  ChatGroupAside?: typeof ChatGroupAside.Component | null;
+  ChatGroupHeader?: typeof ChatGroupHeader.Component | null;
+  ChatGroupFooter?: typeof ChatGroupFooter.Component | null;
+  ChatGroupMain?: typeof ChatGroupMain.Component | null;
+  ChatGroupBody?: typeof ChatGroupBody.Component | null;
+}

package/src/ui/ChatGroup/List/ChatListPanel.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { ChatListValue, ChatList } from '../../common';
+
+function useData() {
+  const { data: chats } = chatifyApi.useGetChatListQuery();
+  return useMemo(
+    () =>
+      chats?.map(
+        (x): ChatListValue => ({
+          id: x.id,
+          name: x.name,
+          lastMessage: x.message,
+          lastReadMessageId: x.lastReadMessageId,
+        }),
+      ) ?? [],
+    [chats],
+  );
+}
+
+export const ChatListPanel = customize('ChatListPanel', () => {
+  const { chatId, openChat } = useChatGroupContext();
+  const data = useData();
+
+  return <ChatList items={data} selected={chatId} onSelect={openChat} />;
+});

package/src/ui/ChatGroup/List/index.ts

@@ -0,0 +1,8 @@
+import { ChatListCustomizeValue } from '../../common';
+import { ChatListPanel } from './ChatListPanel';
+
+export * from './ChatListPanel';
+
+export type ChatListPanelCustomizeValue = ChatListCustomizeValue & {
+  ChatListPanel?: typeof ChatListPanel.Component | null;
+};

package/src/ui/ChatGroup/index.ts

@@ -0,0 +1,5 @@
+export * from './Create';
+export * from './Layout';
+export * from './List';
+export * from './ChatGroupContext';
+export * from './ChatGroupPanel';

package/src/ui/Chatify.tsx

@@ -1,154 +1,15 @@
-import { CSSProperties, FC, useMemo } from 'react';
-import { useReadMonitor } from '../core';
-import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
-import { Avatar } from './Avatar';
-import { CustomizeProvider, CustomizeProviderValue } from './customize';
-import { ChatHeaderMembers } from './ChatPanel/ChatHeaderMembers';
-import { ChatMembersButton } from './ChatPanel/ChatMembersButton';
-import { AddChatButton } from './AddChatButton';
-import { ChatName } from './ChatName';
-
-import { Aside, Main, Body, Footer, Header } from './Layout';
-
-import {
-  ChatListItemBox,
-  ChatListItemLastMessageContent,
-  ChatListItemLastMessageAuthor,
-  ChatListItemLastMessage,
-  ChatListItemUnreadCount,
-  ChatListItemName,
-  ChatListItemLastMessageSentAt,
-} from './ChatList';
-
-import {
-  SendingMessageBox,
-  SendingMessageContent,
-  SendingMessageInfoBox,
-  SendingMessageText,
-} from './SendingMessage';
-
-import {
-  MessageBox,
-  MessageRow,
-  MessageContent,
-  MessageText,
-  MessageAuthor,
-  MessageInfoBox,
-} from './Message';
-
-import { MessageReadObserver } from './MessageReadObserver';
-import { Icon } from './Icon';
-import { SystemMessageRow } from './SystemMessage/SystemMessageRow';
-import { ChatList } from './ChatList';
-import { ChatBody, ChatHeader, ChatHeaderName, ChatPanel } from './ChatPanel';
-import { InputBox, InputFilesBox, InputSubmitButtonBox, InputTextBox } from './InputBox';
-import { SystemMessageBox } from './SystemMessage';
-import {
-  CreateChatForm,
-  CreateChatMemberInput,
-  CreateChatNameInput,
-  CreateChatPanel,
-} from './CreateChatPanel';
-
-export interface ChatifyCustomizeValue {
-  // ./ChatList
-  ChatList?: typeof ChatList.Component | null;
-  ChatListItemBox?: typeof ChatListItemBox.Component | null;
-  ChatListItemName?: typeof ChatListItemName.Component | null;
-  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
-  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
-  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
-  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
-  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
-
-  // ./Layout
-  Header?: typeof Header.Component | null;
-  Footer?: typeof Footer.Component | null;
-  Body?: typeof Body.Component | null;
-  Main?: typeof Main.Component | null;
-  Aside?: typeof Aside.Component | null;
-
-  // ./Message
-  MessageAuthor?: typeof MessageAuthor.Component | null;
-  MessageBox?: typeof MessageBox.Component | null;
-  MessageContent?: typeof MessageContent.Component | null;
-  MessageInfoBox?: typeof MessageInfoBox.Component | null;
-  MessageRow?: typeof MessageRow.Component | null;
-  MessageText?: typeof MessageText.Component | null;
-
-  // ./SendingMessage
-  SendingMessageBox?: typeof SendingMessageBox.Component | null;
-  SendingMessageContent?: typeof SendingMessageContent.Component | null;
-  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
-  SendingMessageText?: typeof SendingMessageText.Component | null;
-
-  // ./ChatPanel
-  ChatBody?: typeof ChatBody.Component | null;
-  ChatHeader?: typeof ChatHeader.Component | null;
-  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
-  ChatHeaderName?: typeof ChatHeaderName.Component | null;
-  ChatPanel?: typeof ChatPanel.Component | null;
-  ChatMembersButton?: typeof ChatMembersButton.Component | null;
-
-  // ./InputBox
-  InputBox?: typeof InputBox.Component | null;
-  InputFilesBox?: typeof InputFilesBox.Component | null;
-  InputSubmitButtonBox?: typeof InputSubmitButtonBox.Component | null;
-  InputTextBox?: typeof InputTextBox.Component | null;
-
-  // ./SystemMessage
-  SystemMessageBox?: typeof SystemMessageBox.Component | null;
-  SystemMessageRow?: typeof SystemMessageRow.Component | null;
-
-  // ./CreateChatPanel
-  CreateChatForm?: typeof CreateChatForm.Component | null;
-  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
-  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
-  CreateChatPanel?: typeof CreateChatPanel.Component | null;
-
-  MessageReadObserver?: typeof MessageReadObserver.Component | null;
-  Avatar?: typeof Avatar.Component | null;
-  AddChatButton?: typeof AddChatButton.Component | null;
-  ChatName?: typeof ChatName.Component | null;
-  Icon?: typeof Icon.Component | null;
-}
-
-export interface ChatifyProps {
-  className?: string;
-  style?: CSSProperties;
-  localizer?: Localizer;
-  customize?: ChatifyCustomizeValue;
-}
-
-function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
-  const { className = '', style } = props;
-  useReadMonitor();
-
-  return (
-    <div className={className + ' wxchtf-chatify'} style={style}>
-      <Header />
-      <Body />
-      <Footer />
-    </div>
-  );
-}
-
-const DEFAULT_CUSTOMIZE: ChatifyCustomizeValue = {
-  Header: null,
-  Footer: null,
-};
-
-export const Chatify: FC<ChatifyProps> = (props) => {
-  const { localizer = defaultLocalizer, customize = DEFAULT_CUSTOMIZE } = props;
-  const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE, customize), [customize]);
-
-  return (
-    <LocalizerContext.Provider value={localizer}>
-      <CustomizeProvider value={customizeValue as CustomizeProviderValue}>
-        <Content {...props} />
-      </CustomizeProvider>
-    </LocalizerContext.Provider>
-  );
-};
-
-Chatify.displayName = 'Chatify';
+import { ChatPanel } from './Chat';
+import { ChatGroupPanel } from './ChatGroup';
+import { ThreadPanel } from './Thread';
+
+export interface ChatifyType {
+  Thread: typeof ThreadPanel;
+  ChatGroup: typeof ChatGroupPanel;
+  Chat: typeof ChatPanel;
+}
+
+export const Chatify = {
+  Thread: ThreadPanel,
+  ChatGroup: ChatGroupPanel,
+  Chat: ChatPanel,
+} as unknown as ChatifyType;

package/src/ui/Conversation/Conversation.tsx

@@ -0,0 +1,92 @@
+import { ConversationHeader } from './ConversationHeader';
+import { ConversationBody } from './ConversationBody';
+import { customize } from '../customize';
+import { ConversationName } from './ConversationName';
+import { ConversationContext, ConversationContextValue, ConversationValue } from './ConversationContext';
+import { useMemo } from 'react';
+import { InputBox, InputBoxCustomizeValue } from './InputBox';
+import { ConversationActions } from './ConversationActions';
+import { MessageCustomizeValue } from './Message';
+import { SendingMessageCustomizeValue } from './SendingMessage';
+import { SystemMessageCustomizeValue } from './SystemMessage';
+import { CommonCustomizeValue } from '../common';
+import type { Flippo } from '@webinex/flippo';
+
+export interface ConversationProps extends Omit<ConversationContextValue, keyof ConversationValue> {
+  value: ConversationValue;
+}
+
+export interface ConversationCustomizeValue
+  extends InputBoxCustomizeValue,
+    MessageCustomizeValue,
+    SendingMessageCustomizeValue,
+    SystemMessageCustomizeValue,
+    CommonCustomizeValue {
+  ConversationActions?: typeof ConversationActions.Component | null;
+  ConversationBody?: typeof ConversationBody.Component | null;
+  ConversationHeader?: typeof ConversationHeader.Component | null;
+  ConversationName?: typeof ConversationName.Component | null;
+  flippo?: Flippo;
+}
+
+export const Conversation = customize('Conversation', (props: ConversationProps) => {
+  const {
+    value,
+    hasMore,
+    messages,
+    nextLoading,
+    onNext,
+    onRead,
+    onSend,
+    isReading,
+    noReadTracking,
+    onClose,
+  } = props;
+
+  const { id, active, name, lastReadMessageId } = value;
+
+  const context = useMemo<ConversationContextValue>(
+    () => ({
+      id,
+      name,
+      active,
+      lastReadMessageId,
+      hasMore,
+      messages,
+      nextLoading,
+      onNext,
+      onRead,
+      onSend,
+      isReading,
+      noReadTracking,
+      onClose,
+    }),
+    [
+      id,
+      name,
+      active,
+      onNext,
+      onRead,
+      onSend,
+      hasMore,
+      messages,
+      nextLoading,
+      lastReadMessageId,
+      isReading,
+      noReadTracking,
+      onClose,
+    ],
+  );
+
+  return (
+    <ConversationContext.Provider value={context}>
+      <div className="wxchtf-conversation">
+        <div className="wxchtf-conversation-main">
+          <ConversationHeader />
+          <ConversationBody />
+          {active && <InputBox />}
+        </div>
+      </div>
+    </ConversationContext.Provider>
+  );
+});

package/src/ui/Conversation/ConversationActions.tsx

@@ -0,0 +1,12 @@
+import { Button } from 'antd';
+import { customize } from '../customize';
+import { useConversation } from './ConversationContext';
+import { Icon } from '../common';
+
+export const ConversationActions = customize('ConversationActions', () => {
+  const { onClose } = useConversation();
+
+  if (!onClose) return null;
+
+  return <Button onClick={onClose} type="link" icon={<Icon type="close" />} />;
+});

package/src/ui/Conversation/ConversationBody.tsx

@@ -0,0 +1,28 @@
+import { MessageBox } from './Message';
+import { NextMessagesObserver } from './NextObserver';
+import { SystemMessageBox } from './SystemMessage';
+import { MessageSkeleton } from '../common/MessageSkeleton';
+import { customize } from '../customize';
+import { SYSTEM_ID } from '../../core';
+import { useConversation } from './ConversationContext';
+
+// TODO: Add sending message box
+export const ConversationBody = customize('ConversationBody', () => {
+  const { id, messages = [], hasMore, onNext, nextLoading } = useConversation();
+
+  return (
+    <div className="wxchtf-conversation-body">
+      {!messages && <MessageSkeleton count={5} />}
+
+      {messages?.map((x) => {
+        if (x.sentBy.id === SYSTEM_ID) {
+          return <SystemMessageBox key={x.id} message={x} />;
+        }
+
+        return <MessageBox message={x} key={x.id} />;
+      })}
+
+      {hasMore && <NextMessagesObserver key={messages.length + id} onLoad={onNext} loading={nextLoading} />}
+    </div>
+  );
+});

package/src/ui/Conversation/ConversationContext.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { MessageBase, MessageBody } from '../../core';
+import type { Flippo } from '@webinex/flippo';
+
+export interface ConversationValue {
+  id: string;
+  name: string;
+  active: boolean;
+  lastReadMessageId: string | null;
+}
+
+export interface ConversationContextValue extends ConversationValue {
+  messages?: MessageBase[];
+  hasMore?: boolean;
+  nextLoading: boolean;
+  noReadTracking?: boolean;
+
+  isReading?: (id: string) => boolean;
+  onNext: () => void;
+  onSend?: (message: MessageBody) => void;
+  onRead?: (id: string) => void;
+  flippo?: Flippo;
+  onClose?: () => void;
+}
+
+export const ConversationContext = React.createContext<ConversationContextValue>(undefined!);
+
+export function useConversation() {
+  return React.useContext(ConversationContext);
+}

package/src/ui/Conversation/ConversationHeader.tsx

@@ -0,0 +1,19 @@
+import { Col, Row } from 'antd';
+import { customize } from '../customize';
+import { ConversationName } from './ConversationName';
+import { ConversationActions } from './ConversationActions';
+
+export const ConversationHeader = customize('ConversationHeader', () => {
+  return (
+    <div className="wxchtf-conversation-header">
+      <Row justify="space-between" align="middle">
+        <Col>
+          <ConversationName />
+        </Col>
+        <Col className="wxchtf-conversation-actions">
+          <ConversationActions />
+        </Col>
+      </Row>
+    </div>
+  );
+});

package/src/ui/Conversation/ConversationName.tsx

@@ -0,0 +1,7 @@
+import { customize } from '../customize';
+import { useConversation } from './ConversationContext';
+
+export const ConversationName = customize('ConversationName', () => {
+  const { name } = useConversation();
+  return <span className="wxchtf-conversation-name">{name}</span>;
+});