@webinex/chatify 1.0.0-rc2 → 1.0.1-rc3

package/src/core/state.ts

@@ -1,38 +1,92 @@
-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,
-  },
-};
+import { Account, Chat, ChatListItem, Message, SendMessageRequest, File } from './models';
+
+export type MessageState =
+  | ({ type: 'message' } & Message)
+  | { type: 'next' }
+  | { type: 'sending'; text: string; files: File[]; requestId: string };
+
+export interface UIState {
+  view?: 'chat' | 'new-chat';
+  showMembers: boolean;
+  chatId?: string;
+}
+
+export interface QueryState<TData> {
+  uninitialized: boolean;
+  isFetching: boolean;
+  error?: any;
+  data?: TData;
+}
+
+export interface MutationState {
+  isFetching: boolean;
+  error?: any;
+}
+
+export interface QueueState<TValue> {
+  queued: TValue[];
+  processing: TValue[];
+  timestamp: number;
+}
+
+export interface State {
+  ui: UIState;
+  query: {
+    messages: Record<string, QueryState<MessageState[]>>;
+    chats: Record<string, QueryState<Chat>>;
+    chatList: QueryState<ChatListItem[]>;
+    accounts: QueryState<Account[]>;
+  };
+  mutation: {
+    fetchNext: MutationState;
+    removeMember: MutationState;
+    addMember: MutationState;
+    updateChatName: MutationState;
+    addChat: MutationState;
+    send: MutationState;
+  };
+  queue: {
+    read: QueueState<string>;
+    send: QueueState<SendMessageRequest>;
+  };
+}
+
+export const INITIAL_QUERY_STATE: QueryState<any> = {
+  uninitialized: false,
+  isFetching: true,
+  data: undefined,
+  error: undefined,
+};
+
+export const INITIAL_STATE: State = {
+  ui: {
+    showMembers: false,
+  },
+  query: {
+    messages: {},
+    chats: {},
+    chatList: { uninitialized: true, isFetching: false, data: undefined, error: undefined },
+    accounts: { uninitialized: true, isFetching: false, data: undefined, error: undefined },
+  },
+  mutation: {
+    fetchNext: { isFetching: false, error: undefined },
+    removeMember: { isFetching: false, error: undefined },
+    addMember: { isFetching: false, error: undefined },
+    updateChatName: { isFetching: false, error: undefined },
+    addChat: { isFetching: false, error: undefined },
+    send: { isFetching: false, error: undefined },
+  },
+  queue: {
+    read: {
+      queued: [],
+      processing: [],
+      timestamp: 0,
+    },
+
+    send: {
+      queued: [],
+      processing: [],
+      timestamp: 0,
+    },
+  },
+};

package/src/core/useAddChatMutation.tsx

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { AddChatRequest } from './models';
+import { useDispatch, useStateRef } from './reducer';
+
+export function useAddChatMutation() {
+  const client = useClient();
+  const dispatch = useDispatch();
+  const stateRef = useStateRef();
+
+  const invoke = useCallback((args: AddChatRequest) => {
+    dispatch({ type: 'addChat_fetch', data: void 0 });
+    client
+      .addChat(args)
+      .then(() => dispatch({ type: 'addChat_fulfilled', data: void 0 }))
+      .catch((error) => dispatch({ type: 'addChat_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [invoke, stateRef.current.mutation.addChat] as const;
+}

package/src/core/useAddMemberMutation.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useClient } from '../ChatifyContext';
+import { AddMemberRequest } from './models';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useAddMemberMutation() {
+  const client = useClient();
+  const dispatch = useDispatch();
+  const state = useStateRef();
+  useSelect((x) => x.mutation.addMember, []);
+
+  const invoke = useCallback(
+    (args: AddMemberRequest) => {
+      dispatch({ type: 'addMember_fetch', data: void 0 });
+      client
+        .addMember(args)
+        .then(() => dispatch({ type: 'addMember_fulfilled', data: void 0 }))
+        .catch((error) => dispatch({ type: 'addMember_rejected', data: { error } }));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch],
+  );
+
+  return [invoke, state.current.mutation.addMember] as const;
+}

package/src/core/useFetchNextMutation.tsx

@@ -0,0 +1,28 @@
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+import { useCallback } from 'react';
+
+export function useFetchNextMutation({ chatId }: { chatId: string }) {
+  const state = useStateRef();
+  useSelect((x) => x.mutation.fetchNext, []);
+  const dispatch = useDispatch();
+  const client = useClient();
+
+  const fetchNext = useCallback(() => {
+    const skip = state.current.query.messages[chatId].data?.filter((x) => x.type === 'message').length;
+    dispatch({ type: 'fetchNext_fetch', data: { chatId } });
+    client
+      .messages({ chatId, skip, take: 16 })
+      .then((messages) =>
+        dispatch({
+          type: 'fetchNext_fulfilled',
+          data: { chatId, messages: messages.slice(0, 15), hasMore: messages.length === 16 },
+        }),
+      )
+      .catch((error) => dispatch({ type: 'fetchNext_rejected', data: { chatId, error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatId]);
+
+  return [fetchNext, state.current.mutation.fetchNext] as const;
+}

package/src/core/useGetAccountsQuery.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useGetAccountsQuery() {
+  const client = useClient();
+  const stateRef = useStateRef();
+  useSelect((x) => x.query.accounts, []);
+  const dispatch = useDispatch();
+
+  const uninitialized = useMemo(() => {
+    const uninitialized = stateRef.current.query.accounts.uninitialized !== false;
+    if (uninitialized) dispatch({ type: 'accounts_fetch', data: undefined });
+    return uninitialized;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!uninitialized) {
+      return;
+    }
+
+    client
+      .accounts()
+      .then((accounts) => dispatch({ type: 'accounts_fulfilled', data: { accounts } }))
+      .catch((error) => dispatch({ type: 'accounts_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uninitialized]);
+
+  return stateRef.current.query.accounts;
+}

package/src/core/useGetChatListQuery.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useGetChatListQuery() {
+  const stateRef = useStateRef();
+  const client = useClient();
+  useSelect((x) => x.query.chatList, []);
+  const dispatch = useDispatch();
+
+  const uninitialized = useMemo(() => {
+    const uninitialized = stateRef.current.query.chatList.uninitialized !== false;
+    if (uninitialized) dispatch({ type: 'chatList_fetch', data: undefined });
+    return uninitialized;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!uninitialized) {
+      return;
+    }
+
+    client
+      .chats()
+      .then((chats) => dispatch({ type: 'chatList_fulfilled', data: { chats } }))
+      .catch((error) => dispatch({ type: 'chatList_rejected', data: { error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return stateRef.current.query.chatList;
+}

package/src/core/useGetChatQuery.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useMemo } from 'react';
+import { useClient } from '../ChatifyContext';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useGetChatQuery(args: { chatId: string }) {
+  const { chatId } = args;
+  const client = useClient();
+  const stateRef = useStateRef();
+  useSelect((x) => x.query.chats[chatId], [chatId]);
+  const dispatch = useDispatch();
+
+  const uninitialized = useMemo(() => {
+    const uninitialized = stateRef.current.query.chats[chatId]?.uninitialized !== false;
+    if (uninitialized) dispatch({ type: 'chat_fetch', data: { chatId } });
+    return uninitialized;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatId]);
+
+  useEffect(() => {
+    if (!uninitialized) {
+      return;
+    }
+
+    client
+      .chat(chatId)
+      .then((chat) => dispatch({ type: 'chat_fulfilled', data: { chat } }))
+      .catch((error) => dispatch({ type: 'chat_rejected', data: { chatId, error } }));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uninitialized, chatId]);
+
+  return stateRef.current.query.chats[chatId];
+}

package/src/core/useGetMessagesQuery.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useMemo } from 'react';
+import { useClient } from '../ChatifyContext';
+import { MessageState, QueryState } from './state';
+import { useDispatch, useSelect, useStateRef } from './reducer';
+
+export function useGetMessagesQuery(args: { chatId: string }): QueryState<MessageState[]> {
+  const { chatId } = args;
+  const stateRef = useStateRef();
+  const dispatch = useDispatch();
+  useSelect((x) => x.query.messages[chatId], [chatId]);
+  const client = useClient();
+
+  const uninitialized = useMemo(() => {
+    const uninitialized = stateRef.current.query.messages[chatId]?.uninitialized !== false;
+    if (uninitialized) dispatch({ type: 'messages_fetch', data: { chatId } });
+    return uninitialized;
+  }, [chatId, dispatch, stateRef]);
+
+  useEffect(() => {
+    if (!uninitialized) {
+      return;
+    }
+
+    client.messages({ chatId, skip: 0, take: 16 }).then((messages) =>
+      dispatch({
+        type: 'messages_fulfilled',
+        data: { chatId, messages: messages.slice(0, 15), hasMore: messages.length === 16 },
+      }),
+    );
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatId]);
+
+  return stateRef.current.query.messages[chatId];
+}

package/src/core/useReadMonitor.tsx

@@ -1,31 +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.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]);
-}
+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

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

package/src/core/useSendMutation.tsx

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

package/src/core/useSignalRMonitor.tsx

@@ -1,52 +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 } });
-        }),
-      );
-      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]: [string, string, Account, Message]) => {
-            dispatch({ type: 'member_added', data: { chatId, chatName, account, me, message } });
-          },
-        ),
-      );
-      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
-  }, []);
-}
+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

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

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';