@webinex/chatify 1.0.0-rc3 → 1.0.2-rc3

package/src/core/useReadMonitor.tsx

@@ -1,32 +1,32 @@
-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.queue.read.queued, x.queue.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(() => {
-      for (const id of queued) {
-        dispatch({ type: 'read_send', data: { id } });
-
-        client
-          .read({ id })
-          .catch(() => dispatch({ type: 'read_reject', data: { id, timestamp: new Date().getTime() } }));
-      }
-    }, 100);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timestamp]);
-}
+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.queue.read.queued, x.queue.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(() => {
+      for (const id of queued) {
+        dispatch({ type: 'read_send', data: { id } });
+
+        client
+          .read({ id })
+          .catch(() => dispatch({ type: 'read_reject', data: { id, timestamp: new Date().getTime() } }));
+      }
+    }, 100);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timestamp]);
+}

package/src/core/useRemoveMemberMutation.tsx

@@ -1,23 +1,23 @@
-import { useCallback } from 'react';
-import { useClient } from '../ChatifyContext';
-import { RemoveMemberRequest } from './models';
-import { useDispatch, useSelect, useStateRef } from './reducer';
-
-export function useRemoveMemberMutation() {
-  const stateRef = useStateRef();
-  useSelect((x) => x.mutation.removeMember, []);
-  const dispatch = useDispatch();
-  const client = useClient();
-
-  const invoke = useCallback((args: RemoveMemberRequest) => {
-    dispatch({ type: 'removeMember_fetch', data: void 0 });
-    client
-      .removeMember(args)
-      .then(() => dispatch({ type: 'removeMember_fulfilled', data: void 0 }))
-      .catch((error) => dispatch({ type: 'removeMember_rejected', data: { error } }));
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return [invoke, stateRef.current.mutation.removeMember] as const;
-}
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { RemoveMemberRequest } from './models';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useRemoveMemberMutation() {
+  const stateRef = useStateRef();
+  useSelect((x) => x.mutation.removeMember, []);
+  const dispatch = useDispatch();
+  const client = useClient();
+
+  const invoke = useCallback((args: RemoveMemberRequest) => {
+    dispatch({ type: 'removeMember_fetch', data: void 0 });
+    client
+      .removeMember(args)
+      .then(() => dispatch({ type: 'removeMember_fulfilled', data: void 0 }))
+      .catch((error) => dispatch({ type: 'removeMember_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [invoke, stateRef.current.mutation.removeMember] as const;
+}

package/src/core/useSendMutation.tsx

@@ -1,24 +1,24 @@
-import { useCallback } from 'react';
-import { useClient } from '../ChatifyContext';
-import { SendMessageRequest } from './models';
-import { useDispatch, useSelect, useStateRef } from './reducer';
-
-export function useSendMutation() {
-  const stateRef = useStateRef();
-  useSelect((x) => x.mutation.send, []);
-  const dispatch = useDispatch();
-  const client = useClient();
-
-  const invoke = useCallback((args: SendMessageRequest) => {
-    const { chatId, requestId, files, text } = args;
-    dispatch({ type: 'send_fetch', data: { chatId, requestId, files, text } });
-    client
-      .send(args)
-      .then(() => dispatch({ type: 'send_fulfilled', data: { chatId, requestId } }))
-      .catch((error) => dispatch({ type: 'send_rejected', data: { chatId, requestId, error } }));
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return [invoke, stateRef.current.mutation.send] as const;
-}
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { SendMessageRequest } from './models';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useSendMutation() {
+  const stateRef = useStateRef();
+  useSelect((x) => x.mutation.send, []);
+  const dispatch = useDispatch();
+  const client = useClient();
+
+  const invoke = useCallback((args: SendMessageRequest) => {
+    const { chatId, requestId, files, text } = args;
+    dispatch({ type: 'send_fetch', data: { chatId, requestId, files, text } });
+    client
+      .send(args)
+      .then(() => dispatch({ type: 'send_fulfilled', data: { chatId, requestId } }))
+      .catch((error) => dispatch({ type: 'send_rejected', data: { chatId, requestId, error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [invoke, stateRef.current.mutation.send] as const;
+}

package/src/core/useSignalRMonitor.tsx

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

package/src/core/useUpdateChatNameMutation.tsx

@@ -1,23 +1,23 @@
-import { useCallback } from 'react';
-import { useClient } from '../ChatifyContext';
-import { UpdateChatNameRequest } from './models';
-import { useDispatch, useSelect, useStateRef } from './reducer';
-
-export function useUpdateChatNameMutation() {
-  const stateRef = useStateRef();
-  useSelect((x) => x.mutation.updateChatName, []);
-  const dispatch = useDispatch();
-  const client = useClient();
-
-  const invoke = useCallback((args: UpdateChatNameRequest) => {
-    dispatch({ type: 'updateChatName_fetch', data: void 0 });
-    client
-      .updateChatName(args)
-      .then(() => dispatch({ type: 'updateChatName_fulfilled', data: void 0 }))
-      .catch((error) => dispatch({ type: 'updateChatName_rejected', data: { error } }));
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return [invoke, stateRef.current.mutation.updateChatName] as const;
-}
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { UpdateChatNameRequest } from './models';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useUpdateChatNameMutation() {
+  const stateRef = useStateRef();
+  useSelect((x) => x.mutation.updateChatName, []);
+  const dispatch = useDispatch();
+  const client = useClient();
+
+  const invoke = useCallback((args: UpdateChatNameRequest) => {
+    dispatch({ type: 'updateChatName_fetch', data: void 0 });
+    client
+      .updateChatName(args)
+      .then(() => dispatch({ type: 'updateChatName_fulfilled', data: void 0 }))
+      .catch((error) => dispatch({ type: 'updateChatName_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [invoke, stateRef.current.mutation.updateChatName] as const;
+}

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/styles/aside.scss

@@ -1,94 +1,94 @@
-.wxchtf-aside {
-  flex: none;
-  width: 300px;
-  border-right: $border;
-  display: flex;
-  flex-flow: column nowrap;
-
-  .wxchtf-chat-list.ant-menu {
-    flex: 1 1 auto;
-    height: 100px;
-    overflow-y: auto;
-
-    @include scrollbar();
-
-    .ant-menu-item {
-      padding: 0;
-      height: unset;
-      margin: 0;
-      width: 100%;
-      border-radius: 0;
-      line-height: 1.5;
-      border-top: $border;
-
-      &:first-child {
-        border-top: none;
-      }
-
-      &.ant-menu-item-selected .wxchtf-chat-name {
-        font-weight: 600;
-      }
-
-      .wxchtf-chat {
-        padding: 0.5rem 1rem;
-        position: relative;
-
-        &.--unread {
-          .wxchtf-chat-last {
-            font-weight: bold;
-          }
-        }
-
-        .wxchtf-chat-name {
-          font-weight: bold;
-          display: inline-block;
-        }
-
-        .wxchtf-unread-count {
-          display: inline-block;
-          padding: 0.2rem;
-          min-width: 1rem;
-          height: 1.2rem;
-          line-height: 0.7rem;
-          margin-left: 0.5rem;
-          border-radius: 50%;
-          text-align: center;
-          font-size: 0.7rem;
-          background: $unreadCountBackground;
-        }
-
-        .wxchtf-chat-last {
-          $size: 25px;
-
-          font-style: italic;
-          opacity: 0.75;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          line-height: $size;
-
-          .wxchtf-chat-last-author {
-            display: inline-block;
-            margin-right: 0.5rem;
-
-            .ant-avatar {
-              display: inline-block;
-              border: none;
-              margin-right: 5px;
-
-              @include avatarSize($size);
-            }
-
-            &::after {
-              content: ':';
-            }
-          }
-
-          .wxchtf-chat-last-message {
-            display: inline;
-          }
-        }
-      }
-    }
-  }
-}
+.wxchtf-aside {
+  flex: none;
+  width: 300px;
+  border-right: $border;
+  display: flex;
+  flex-flow: column nowrap;
+
+  .wxchtf-chat-list.ant-menu {
+    flex: 1 1 auto;
+    height: 100px;
+    overflow-y: auto;
+
+    @include scrollbar();
+
+    .ant-menu-item {
+      padding: 0;
+      height: unset;
+      margin: 0;
+      width: 100%;
+      border-radius: 0;
+      line-height: 1.5;
+      border-top: $border;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &.ant-menu-item-selected .wxchtf-chat-name {
+        font-weight: 600;
+      }
+
+      .wxchtf-chat {
+        padding: 0.5rem 1rem;
+        position: relative;
+
+        &.--unread {
+          .wxchtf-chat-last {
+            font-weight: bold;
+          }
+        }
+
+        .wxchtf-chat-name {
+          font-weight: bold;
+          display: inline-block;
+        }
+
+        .wxchtf-unread-count {
+          display: inline-block;
+          padding: 0.2rem;
+          min-width: 1rem;
+          height: 1.2rem;
+          line-height: 0.7rem;
+          margin-left: 0.5rem;
+          border-radius: 50%;
+          text-align: center;
+          font-size: 0.7rem;
+          background: $unreadCountBackground;
+        }
+
+        .wxchtf-chat-last {
+          $size: 25px;
+
+          font-style: italic;
+          opacity: 0.75;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: $size;
+
+          .wxchtf-chat-last-author {
+            display: inline-block;
+            margin-right: 0.5rem;
+
+            .ant-avatar {
+              display: inline-block;
+              border: none;
+              margin-right: 5px;
+
+              @include avatarSize($size);
+            }
+
+            &::after {
+              content: ':';
+            }
+          }
+
+          .wxchtf-chat-last-message {
+            display: inline;
+          }
+        }
+      }
+    }
+  }
+}