@webinex/chatify 1.0.2-rc3 → 2.0.0-build1

package/src/ui/ChatPanel/ChatHeaderName.tsx

@@ -1,67 +0,0 @@
-import { Input, Tooltip } from 'antd';
-import { useSelect, useUpdateChatNameMutation } from '../../core';
-import { ChatName } from '../ChatName';
-import { customize } from '../customize';
-import { useEffect, useState } from 'react';
-import isHotkey from 'is-hotkey';
-
-export interface ChatHeaderNameProps {
-  id: string;
-}
-
-const isEscape = isHotkey('escape');
-const isEnter = isHotkey('enter');
-
-function useUpdateChatName(id: string, value: string) {
-  const [updateChatName] = useUpdateChatNameMutation();
-  return () => updateChatName({ id, name: value });
-}
-
-export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderNameProps) => {
-  const { id } = props;
-  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
-  const name = chat.name;
-  const [editNameValue, setEditNameValue] = useState('');
-  const [edit, setEdit] = useState(false);
-  const updateChatName = useUpdateChatName(id, editNameValue);
-
-  useEffect(() => {
-    if (edit) {
-      setEditNameValue(name);
-    }
-  }, [edit, name]);
-
-  if (!chat.active) {
-    return <span className="wxchtf-chat-name">{name}</span>;
-  }
-
-  if (edit) {
-    return (
-      <Input
-        value={editNameValue}
-        onChange={(e) => setEditNameValue(e.target.value)}
-        onBlur={() => setEdit(false)}
-        onKeyDown={(e) => {
-          if (isEscape(e)) {
-            setEdit(false);
-          } else if (isEnter(e)) {
-            setEdit(false);
-
-            if (editNameValue !== name) {
-              updateChatName();
-            }
-          }
-        }}
-        autoFocus
-      />
-    );
-  }
-
-  return (
-    <Tooltip title="Click to edit name...">
-      <span className="wxchtf-chat-name --editable" onClick={() => setEdit(true)}>
-        <ChatName name={name} />
-      </span>
-    </Tooltip>
-  );
-});

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

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/CreateChatPanel.tsx

@@ -1,33 +0,0 @@
-import { useAddChatMutation } from '../../core';
-import { useCallback } from 'react';
-import { uniqId } from '../../util';
-import { useLocalizer } from '../localizer';
-import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
-import { customize } from '../customize';
-
-function useSubmit() {
-  const [add, { isFetching }] = useAddChatMutation();
-  const onSubmit = useCallback(
-    (value: CreateChatFormValue) =>
-      add({
-        name: value.name,
-        members: value.members,
-        requestId: uniqId(),
-      }),
-    [add],
-  );
-
-  return [onSubmit, isFetching] as const;
-}
-
-export const CreateChatPanel = customize('CreateChatPanel', () => {
-  const localizer = useLocalizer();
-  const [onSubmit, submitting] = useSubmit();
-
-  return (
-    <div className="wxchtf-create-chat">
-      <h3>{localizer.addChat.title()}</h3>
-      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
-    </div>
-  );
-});

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/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/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,10 +0,0 @@
-import { customize } from '../customize';
-import { ChatList } from '../ChatList';
-
-export const Aside = customize('Aside', () => {
-  return (
-    <div className="wxchtf-aside">
-      <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,10 +0,0 @@
-import { AddChatButton } from '../AddChatButton';
-import { customize } from '../customize';
-
-export const Header = customize('Header', () => {
-  return (
-    <div className="wxchtf-header">
-      <AddChatButton />
-    </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);
-}