@webinex/chatify 1.0.0-alpha00

package/src/core/state.ts

@@ -0,0 +1,38 @@
+export interface UIState {
+  view?: 'chat' | 'new-chat' | 'chat-settings';
+  chatId?: string;
+}
+
+export interface QueryState<TData> {
+  uninitialized: boolean;
+  isFetching: boolean;
+  error?: any;
+  data?: TData;
+}
+
+export interface MutationState {
+  isFetching: boolean;
+  error?: any;
+}
+
+export interface State {
+  ui: UIState;
+  query: Record<string, QueryState<any>>;
+  mutation: Record<string, MutationState>;
+  read: {
+    queued: string[];
+    sent: string[];
+    timestamp: number;
+  };
+}
+
+export const INITIAL_STATE: State = {
+  ui: {},
+  query: {},
+  mutation: {},
+  read: {
+    queued: [],
+    sent: [],
+    timestamp: 0,
+  },
+};

package/src/core/useAccounts.tsx

@@ -0,0 +1,11 @@
+import { useClient } from '../ChatifyContext';
+import { useQuery } from './useQuery';
+
+export function useAccounts() {
+  const client = useClient();
+
+  return useQuery({
+    key: 'accounts',
+    queryFn: () => client.accounts(),
+  });
+}

package/src/core/useAddChat.tsx

@@ -0,0 +1,12 @@
+import { useClient } from '../ChatifyContext';
+import { AddChatRequest } from './models';
+import { useMutation } from './useMutation';
+
+export function useAddChat() {
+  const client = useClient();
+
+  return useMutation({
+    key: 'add-chat',
+    queryFn: (args: AddChatRequest) => client.addChat(args),
+  });
+}

package/src/core/useAddMember.tsx

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

package/src/core/useAddMessage.tsx

@@ -0,0 +1,40 @@
+import { useClient } from '../ChatifyContext';
+import { SendMessageRequest } from './models';
+import { QueryState } from './state';
+import { MessageState } from './useMessages';
+import { useMutation } from './useMutation';
+
+export interface UseAddMessageArgs {
+  chatId: string;
+}
+
+export function useAddMessage(args: UseAddMessageArgs) {
+  const { chatId } = args;
+  const client = useClient();
+
+  return useMutation<unknown, Omit<SendMessageRequest, 'chatId'>>({
+    key: 'add.' + chatId,
+    queryFn: (args) => client.send({ chatId, ...args }),
+    onQueryStarted: async (args, { updateState }) => {
+      updateState((state) => {
+        state = {
+          ...state,
+          query: {
+            ...state.query,
+            ['messages.' + chatId]: {
+              ...state.query['messages.' + chatId],
+            },
+          },
+        };
+
+        const queryState: QueryState<MessageState[]> = state.query['messages.' + chatId];
+        queryState.data = [
+          { type: 'sending', text: args.text, requestId: args.requestId, files: args.files },
+          ...queryState.data!,
+        ];
+
+        return state;
+      });
+    },
+  });
+}

package/src/core/useChat.tsx

@@ -0,0 +1,12 @@
+import { useClient } from '../ChatifyContext';
+import { useQuery } from './useQuery';
+
+export function useChat(args: { chatId: string }) {
+  const { chatId } = args;
+  const client = useClient();
+
+  return useQuery({
+    key: 'chat.' + chatId,
+    queryFn: () => client.chat(chatId),
+  });
+}

package/src/core/useChatList.tsx

@@ -0,0 +1,10 @@
+import { useClient } from '../ChatifyContext';
+import { useQuery } from './useQuery';
+
+export function useChatList() {
+  const client = useClient();
+  return useQuery({
+    key: 'chat-list',
+    queryFn: () => client.chats(),
+  });
+}

package/src/core/useLoadMore.tsx

@@ -0,0 +1,42 @@
+import { useClient } from '../ChatifyContext';
+import { useMutation } from './useMutation';
+import { MessageState } from './useMessages';
+import { useStateRef } from './reducer';
+import { QueryState } from './state';
+
+export function useLoadMore({ chatId }: { chatId: string }) {
+  const state = useStateRef();
+  const client = useClient();
+
+  return useMutation({
+    key: 'more.' + chatId,
+    queryFn: () =>
+      client.messages({
+        chatId,
+        skip: state.current.query['messages.' + chatId].data.filter((x: MessageState) => x.type === 'message')
+          .length,
+        take: 15,
+      }),
+
+    onQueryStarted: async (_, { promise, updateState }) => {
+      const result = await promise;
+      updateState((state) => {
+        state = { ...state };
+        state.query = { ...state.query };
+        state.query['messages.' + chatId] = { ...state.query['messages.' + chatId] };
+        const value: QueryState<MessageState[]> = state.query['messages.' + chatId];
+        value.data = value.data?.filter((x) => x.type !== 'more');
+        value.data = [
+          ...value.data!,
+          ...result.map((x) => ({ type: 'message' as const, ...x, proceed: true })),
+        ];
+
+        if (result.length === 15) {
+          value.data = [...value.data!, { type: 'more' }];
+        }
+
+        return state;
+      });
+    },
+  });
+}

package/src/core/useMessages.tsx

@@ -0,0 +1,23 @@
+import { useClient } from '../ChatifyContext';
+import { File, Message } from './models';
+import { QueryState } from './state';
+import { useQuery } from './useQuery';
+
+export type MessageState =
+  | ({ type: 'message' } & Message)
+  | { type: 'more' }
+  | { type: 'sending'; text: string; files: File[]; requestId: string };
+
+export function useMessages(args: { chatId: string }): QueryState<MessageState[]> {
+  const { chatId } = args;
+  const client = useClient();
+
+  return useQuery({
+    key: 'messages.' + chatId,
+    queryFn: () =>
+      client.messages({ chatId, skip: 0, take: 15 }).then((x) => {
+        const result = x.map((message) => ({ type: 'message' as const, ...message, proceed: true }));
+        return x.length === 15 ? [...result, { type: 'more' as const }] : result;
+      }),
+  });
+}

package/src/core/useMutation.tsx

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,45 @@
+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/useReadMonitor.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect } from './reducer';
+
+export function useReadMonitor() {
+  const client = useClient();
+  const [queued, timestamp] = useSelect((x) => [x.read.queued, x.read.timestamp], []);
+  const dispatch = useDispatch();
+  const timer = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (queued.length === 0) {
+      return;
+    }
+
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+
+    timer.current = setTimeout(() => {
+      dispatch({ type: 'read_send', data: { ids: queued } });
+      client
+        .read({ ids: queued })
+        .catch(() =>
+          dispatch({ type: 'read_reject', data: { ids: queued, timestamp: new Date().getTime() } }),
+        );
+    }, 100);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timestamp]);
+}

package/src/core/useRemoveMember.tsx

@@ -0,0 +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),
+  });
+}

package/src/core/useSignalR.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { useDispatch } from './reducer';
+import { useClient, useMe } from '../ChatifyContext';
+import { Account, ChatListItem, Message, ReadEvent } from './models';
+
+export function useSignalR() {
+  const client = useClient();
+  const dispatch = useDispatch();
+  const me = useMe();
+
+  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, account]: [string, Account]) => {
+          dispatch({ type: 'member_added', data: { chatId, account } });
+        }),
+      );
+      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

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

package/src/ui/AddChat.tsx

@@ -0,0 +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>
+  );
+}

package/src/ui/Aside.tsx

@@ -0,0 +1,67 @@
+import { Avatar, Menu, MenuProps } from 'antd';
+import { useCallback, useEffect, useMemo } from 'react';
+import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
+import { useChatList, useDispatch, useSelect, ChatListItem } from '../core';
+import { useLocalizer } from './localizer';
+import { formatSystemMessage } from './SystemMessage';
+
+function Chat(props: { chat: ChatListItem }) {
+  const { chat } = props;
+  const { name, message, unreadCount } = chat;
+  const localizer = useLocalizer();
+
+  return (
+    <div className={'wxchtf-chat' + (!message.read ? ' --unread' : '')}>
+      <div className="wxchtf-chat-name">{name}</div>
+      {unreadCount > 0 && <div className="wxchtf-unread-count">{unreadCount}</div>}
+      <div className="wxchtf-chat-last">
+        {message.sentBy.id !== 'chatify::system' && (
+          <div className="wxchtf-chat-last-author">
+            <Avatar src={message.sentBy.avatar} /> {message.sentBy.name}
+          </div>
+        )}
+        <div className="wxchtf-chat-last-message">
+          {message.sentBy.id === 'chatify::system'
+            ? formatSystemMessage(localizer, message.text)
+            : message.text}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+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: <Chat 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

@@ -0,0 +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 />}
+    </>
+  );
+}

package/src/ui/ChatBody.tsx

@@ -0,0 +1,43 @@
+import { Message } 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 <Message 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

@@ -0,0 +1,47 @@
+import { useChat, useSelect, ChatListItem, useDispatch } from '../core';
+import { Avatar, Button, Col, Row, Space, Tooltip } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { useCallback } from 'react';
+
+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 dispatch = useDispatch();
+  const onSettingsClick = useCallback(
+    () => dispatch({ type: 'chat_settings_open', data: { chatId: id } }),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch],
+  );
+
+  return (
+    <div className="wxchtf-chat-header">
+      <Row justify="space-between" align="middle">
+        <Col className="wxchtf-chat-name">{chat?.name ?? chatListItem?.name}</Col>
+        <Col className="wxchtf-chat-members">
+          <Space align="center">
+            {chat?.members && (
+              <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>
+            )}
+            <Button onClick={onSettingsClick} type="link" icon={<SettingOutlined />} />
+          </Space>
+        </Col>
+      </Row>
+    </div>
+  );
+}