@webinex/chatify 1.0.0-rc2 → 1.0.1-rc3

package/src/ui/Layout/index.ts

@@ -0,0 +1,5 @@
+export * from './Aside';
+export * from './Header';
+export * from './Footer';
+export * from './Main';
+export * from './Body';

package/src/ui/Message/MessageAuthor.tsx

@@ -0,0 +1,13 @@
+import { customize } from '../customize';
+import { Avatar } from '../Avatar';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageAuthor = customize('MessageAuthor', (props: MessageBoxProps) => {
+  const { sentBy } = props.message;
+
+  return (
+    <div className="wxchtf-message-author">
+      <Avatar account={sentBy} />
+    </div>
+  );
+});

package/src/ui/Message/MessageBox.tsx

@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import { Message } from '../../core';
+import { customize } from '../customize';
+import { MessageReadObserver } from '../MessageReadObserver';
+import { MessageRow } from './MessageRow';
+
+export interface MessageBoxProps {
+  message: Message;
+}
+
+export const MessageBox = customize('MessageBox', (props: MessageBoxProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <MessageReadObserver messageRef={ref} {...props} />
+      <MessageRow containerRef={ref} {...props} />
+    </>
+  );
+});

package/src/ui/Message/MessageContent.tsx

@@ -0,0 +1,13 @@
+import { customize } from '../customize';
+import { MessageText } from './MessageText';
+import { MessageInfoBox } from './MessageInfoBox';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageContent = customize('MessageContent', (props: MessageBoxProps) => {
+  return (
+    <div className="wxchtf-message-content">
+      <MessageText {...props} />
+      <MessageInfoBox {...props} />
+    </div>
+  );
+});

package/src/ui/Message/MessageInfoBox.tsx

@@ -0,0 +1,25 @@
+import { useMe } from '../../ChatifyContext';
+import { useSelect } from '../../core';
+import { customize } from '../customize';
+import { useLocalizer } from '../localizer';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProps) => {
+  const { message } = props;
+  const { id, sentBy, sentAt } = message;
+  const me = useMe();
+  const my = sentBy.id === me;
+  const localizer = useLocalizer();
+  const reading = useSelect((x) => x.queue.read.queued.includes(id), []);
+
+  return (
+    <div className="wxchtf-message-info-box">
+      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
+      {!my && (
+        <div className="wxchtf-message-read-box">
+          {reading ? localizer.message.reading() : localizer.message.read()}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/ui/Message/MessageRow.tsx

@@ -0,0 +1,24 @@
+import { useMe } from '../../ChatifyContext';
+import { Ref } from 'react';
+import { customize } from '../customize';
+import { MessageAuthor } from './MessageAuthor';
+import { MessageContent } from './MessageContent';
+import { MessageBoxProps } from './MessageBox';
+
+export interface MessageRowProps extends MessageBoxProps {
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export const MessageRow = customize('MessageRow', (props: MessageRowProps) => {
+  const { message, containerRef } = props;
+  const { sentBy } = message;
+  const me = useMe();
+  const my = sentBy.id === me;
+
+  return (
+    <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
+      <MessageAuthor {...props} />
+      <MessageContent {...props} />
+    </div>
+  );
+});

package/src/ui/Message/MessageText.tsx

@@ -0,0 +1,7 @@
+import { customize } from '../customize';
+import { MessageBoxProps } from './MessageBox';
+
+export const MessageText = customize('MessageText', (props: MessageBoxProps) => {
+  const { text } = props.message;
+  return <div className="wxchtf-message-text">{text}</div>;
+});

package/src/ui/Message/index.ts

@@ -0,0 +1,6 @@
+export * from './MessageAuthor';
+export * from './MessageBox';
+export * from './MessageContent';
+export * from './MessageInfoBox';
+export * from './MessageRow';
+export * from './MessageText';

package/src/ui/MessageReadObserver.tsx

@@ -0,0 +1,45 @@
+import { FC, RefObject, useEffect, useMemo, useRef } from 'react';
+import { useDispatch, useSelect } from '../core';
+import { customize } from './customize';
+import { MessageBoxProps } from './Message/MessageBox';
+
+export interface MessageReadObserverProps extends MessageBoxProps {
+  messageRef: RefObject<HTMLDivElement | null>;
+}
+
+export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('MessageReadObserver', (props) => {
+  const { message, messageRef } = props;
+  const dispatch = useDispatch();
+  const isRead = useSelect((x) => {
+    const lastReadMessageId = x.query.chatList.data!.find((x) => x.id === message.chatId)!.lastReadMessageId;
+    return lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
+  }, []);
+
+  const readRef = useRef(isRead);
+
+  useEffect(() => {
+    readRef.current = readRef.current || isRead;
+  }, [isRead]);
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting && !readRef.current) {
+          readRef.current = true;
+          dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
+        }
+      }),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  useEffect(() => {
+    observer.observe(messageRef.current!);
+    return () => observer.disconnect();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [observer]);
+
+  return <></>;
+});

package/src/ui/MessageSkeleton.tsx

@@ -1,19 +1,19 @@
-import { Skeleton } from 'antd';
-
-export interface MessageSkeletonProps {
-  count?: number;
-}
-
-export function MessageSkeleton(props: MessageSkeletonProps) {
-  const { count = 1 } = props;
-  return (
-    <>
-      {Array.from(Array(count)).map((_, index) => (
-        <div className="wxchtf-message-skeleton" key={index}>
-          <Skeleton.Avatar className="wxchtf-avatar" active />
-          <Skeleton.Button active className="wxchtf-content" />
-        </div>
-      ))}
-    </>
-  );
-}
+import { Skeleton } from 'antd';
+
+export interface MessageSkeletonProps {
+  count?: number;
+}
+
+export function MessageSkeleton(props: MessageSkeletonProps) {
+  const { count = 1 } = props;
+  return (
+    <>
+      {Array.from(Array(count)).map((_, index) => (
+        <div className="wxchtf-message-skeleton" key={index}>
+          <Skeleton.Avatar className="wxchtf-avatar" active />
+          <Skeleton.Button active className="wxchtf-content" />
+        </div>
+      ))}
+    </>
+  );
+}

package/src/ui/Next.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useFetchNextMutation } from '../core';
+import { MessageSkeleton } from './MessageSkeleton';
+
+export interface NextProps {
+  chatId: string;
+}
+
+export function Next(props: NextProps) {
+  const { chatId } = props;
+  const [fetchNext, { isFetching }] = useFetchNextMutation({ chatId });
+  const [intersecting, setIntersecting] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const timerRef = useRef<NodeJS.Timer>();
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          timerRef.current = setTimeout(() => setIntersecting(true), 200);
+        } else {
+          clearTimeout(timerRef.current!);
+        }
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    observer.observe(ref.current!);
+    return () => observer.disconnect();
+  }, [observer]);
+
+  useEffect(() => {
+    if (!intersecting) {
+      return;
+    }
+
+    fetchNext();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [intersecting]);
+
+  if (isFetching || intersecting) {
+    return <MessageSkeleton count={4} />;
+  }
+
+  return <div className="wxchtf-next" ref={ref}></div>;
+}

package/src/ui/SendingMessage/SendingMessageBox.tsx

@@ -0,0 +1,16 @@
+import { File } from '../../core';
+import { customize } from '../customize';
+import { SendingMessageContent } from './SendingMessageContent';
+
+export interface SendingMessageBoxProps {
+  text: string;
+  files: File[];
+}
+
+export const SendingMessageBox = customize('SendingMessageBox', (props: SendingMessageBoxProps) => {
+  return (
+    <div className="wxchtf-sending-message">
+      <SendingMessageContent {...props} />
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageContent.tsx

@@ -0,0 +1,13 @@
+import { customize } from '../customize';
+import { SendingMessageText } from './SendingMessageText';
+import { SendingMessageInfoBox } from './SendingMessageInfoBox';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageContent = customize('SendingMessageContent', (props: SendingMessageBoxProps) => {
+  return (
+    <div className="wxchtf-sending-message-content">
+      <SendingMessageText {...props} />
+      <SendingMessageInfoBox {...props} />
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageInfoBox.tsx

@@ -0,0 +1,13 @@
+import { customize } from '../customize';
+import { useLocalizer } from '../localizer';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageInfoBox = customize('SendingMessageInfoBox', (_: SendingMessageBoxProps) => {
+  const localizer = useLocalizer();
+
+  return (
+    <div className="wxchtf-sending-message-info-box">
+      <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageText.tsx

@@ -0,0 +1,7 @@
+import { customize } from '../customize';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageText = customize('SendingMessageText', (props: SendingMessageBoxProps) => {
+  const { text } = props;
+  return <div className="wxchtf-sending-message-text">{text}</div>;
+});

package/src/ui/SendingMessage/index.ts

@@ -0,0 +1,4 @@
+export * from './SendingMessageBox';
+export * from './SendingMessageContent';
+export * from './SendingMessageInfoBox';
+export * from './SendingMessageText';

package/src/ui/SystemMessage/SystemMessageBox.tsx

@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import { customize } from '../customize';
+import { Message } from '../../core';
+import { MessageReadObserver } from '../MessageReadObserver';
+import { SystemMessageRow } from './SystemMessageRow';
+
+export interface SystemMessageBoxProps {
+  message: Message;
+}
+
+export const SystemMessageBox = customize('SystemMessageBox', (props: SystemMessageBoxProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <MessageReadObserver messageRef={ref} {...props} />
+      <SystemMessageRow containerRef={ref} {...props} />
+    </>
+  );
+});

package/src/ui/SystemMessage/SystemMessageRow.tsx

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

@@ -0,0 +1,2 @@
+export * from './SystemMessageBox';
+export * from './SystemMessageRow';

package/src/{util → ui}/customize.tsx

@@ -1,45 +1,45 @@
-import React, { FC, PropsWithChildren, useContext } from 'react';
-
-export type Customizable<TComponent extends React.ComponentType<any>, TKey extends string> = TComponent & {
-  Component: TComponent;
-  key: TKey;
-};
-
-const CustomizeContext = React.createContext<CustomizeProviderValue>(null!);
-
-export interface CustomizeProviderValue {
-  [key: string]: React.ComponentType<any> | null;
-}
-
-export function CustomizeProvider(props: PropsWithChildren<{ value: CustomizeProviderValue }>) {
-  const { children, value } = props;
-  return <CustomizeContext.Provider value={value}>{children}</CustomizeContext.Provider>;
-}
-
-function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
-  const value = useContext(CustomizeContext);
-  return value[key] as TComponent | null | undefined;
-}
-
-export function customize<TComponent extends React.ComponentType<any>, TKey extends string>(
-  key: TKey,
-  Component: TComponent,
-): Customizable<TComponent, TKey> {
-  const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
-    const Custom = useCustom(key);
-
-    if (Custom === null) {
-      return null;
-    }
-
-    if (Custom) {
-      return <Custom {...props} ref={forwardRef} />;
-    }
-
-    return <Component {...props} ref={forwardRef} />;
-  });
-
-  Result.displayName = 'Customizable.' + Component.displayName;
-
-  return Object.assign(Result, { key, Component }) as any;
-}
+import React, { FC, PropsWithChildren, useContext } from 'react';
+
+export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
+  Component: TComponent;
+};
+
+const CustomizeContext = React.createContext<CustomizeProviderValue>(null!);
+
+export interface CustomizeProviderValue {
+  [key: string]: React.ComponentType<any> | null;
+}
+
+export function CustomizeProvider(props: PropsWithChildren<{ value: CustomizeProviderValue }>) {
+  const { children, value } = props;
+  return <CustomizeContext.Provider value={value}>{children}</CustomizeContext.Provider>;
+}
+
+function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
+  const value = useContext(CustomizeContext);
+  return value[key] as TComponent | null | undefined;
+}
+
+export function customize<TComponent extends React.ComponentType<any>>(
+  key: string,
+  Component: TComponent,
+): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never {
+  const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
+    const Custom = useCustom(key);
+
+    if (Custom === null) {
+      return null;
+    }
+
+    if (Custom) {
+      return <Custom {...props} ref={forwardRef} />;
+    }
+
+    return <Component {...props} ref={forwardRef} />;
+  });
+
+  Component.displayName = Component.displayName || key;
+  Result.displayName = 'Customizable.' + Component.displayName;
+
+  return Object.assign(Result, { key, Component }) as any;
+}

package/src/ui/index.ts

@@ -1,11 +1,11 @@
-export * from './Chatify';
-export * from './Avatar';
-export * from './localizer';
-export * from './AddChatButton';
-export * from './Header';
-export * from './ChatHeader';
-export * from './ChatHeaderMembers';
-export * from './ChatListItem';
-export * from './Message';
-export * from './SystemMessage';
-export * from './Icon';
+export * from './Chatify';
+export * from './Avatar';
+export * from './localizer';
+export * from './AddChatButton';
+export * from './Layout/Header';
+export * from './ChatPanel/ChatHeader';
+export * from './ChatPanel/ChatHeaderMembers';
+export * from './ChatList/ChatListItemBox';
+export * from './Message/MessageBox';
+export * from './SystemMessage/SystemMessageBox';
+export * from './Icon';

package/src/ui/localizer.tsx

@@ -1,68 +1,80 @@
-import dayjs from 'dayjs';
-import React, { useContext } from 'react';
-
-export interface Localizer {
-  timestamp: (value: string) => string;
-  system: {
-    chatCreated: () => string;
-    memberAdded: () => string;
-  };
-  message: {
-    read: () => React.ReactNode;
-    reading: () => React.ReactNode;
-    sending: () => React.ReactNode;
-  };
-  addChat: {
-    title: () => React.ReactNode;
-    name: {
-      label: () => React.ReactNode;
-      required: () => string;
-      max250: () => string;
-    };
-    members: {
-      label: () => React.ReactNode;
-      required: () => string;
-    };
-    submitBtn: () => React.ReactNode;
-  };
-
-  input: {
-    placeholder: () => string;
-  };
-}
-
-export const LocalizerContext = React.createContext<Localizer>(null!);
-
-export function useLocalizer() {
-  return useContext(LocalizerContext);
-}
-
-export const defaultLocalizer: Localizer = {
-  timestamp: (value: string) => dayjs(value).format('HH:mm'),
-  message: {
-    read: () => 'Read',
-    reading: () => 'Reading...',
-    sending: () => 'Sending...',
-  },
-  addChat: {
-    title: () => 'Add chat',
-    name: {
-      label: () => 'Name',
-      required: () => `Name is required`,
-      max250: () => 'Max 250 characters allowed',
-    },
-    members: {
-      label: () => 'Members',
-      required: () => 'Members is required',
-    },
-    submitBtn: () => 'Submit',
-  },
-  system: {
-    chatCreated: () => 'Chat created',
-    memberAdded: () => 'New member added',
-  },
-
-  input: {
-    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
-  },
-};
+import dayjs from 'dayjs';
+import React, { useContext } from 'react';
+
+export interface Localizer {
+  timestamp: (value: string) => string;
+  system: {
+    chatCreated: () => string;
+    memberAdded: () => string;
+    memberRemoved: () => string;
+    chatNameChanged: (newName: string) => string;
+  };
+  message: {
+    read: () => React.ReactNode;
+    reading: () => React.ReactNode;
+    sending: () => React.ReactNode;
+  };
+  addChat: {
+    title: () => React.ReactNode;
+    name: {
+      label: () => React.ReactNode;
+      required: () => string;
+      max250: () => string;
+    };
+    members: {
+      label: () => React.ReactNode;
+      required: () => string;
+    };
+    submitBtn: () => React.ReactNode;
+  };
+
+  input: {
+    placeholder: () => string;
+  };
+
+  settings: {
+    members: () => string;
+  };
+}
+
+export const LocalizerContext = React.createContext<Localizer>(null!);
+
+export function useLocalizer() {
+  return useContext(LocalizerContext);
+}
+
+export const defaultLocalizer: Localizer = {
+  timestamp: (value: string) => dayjs(value).format('HH:mm'),
+  message: {
+    read: () => 'Read',
+    reading: () => 'Reading...',
+    sending: () => 'Sending...',
+  },
+  addChat: {
+    title: () => 'Add chat',
+    name: {
+      label: () => 'Name',
+      required: () => `Name is required`,
+      max250: () => 'Max 250 characters allowed',
+    },
+    members: {
+      label: () => 'Members',
+      required: () => 'Members is required',
+    },
+    submitBtn: () => 'Submit',
+  },
+  system: {
+    chatCreated: () => 'Chat created',
+    memberAdded: () => 'New member added',
+    memberRemoved: () => 'Member removed',
+    chatNameChanged: (newName: string) => `Chat name changed to '${newName}'`,
+  },
+
+  input: {
+    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
+  },
+
+  settings: {
+    members: () => 'Members',
+  },
+};