@webinex/chatify 1.0.1-rc3 → 1.0.2-rc3

package/src/core/useGetAccountsQuery.tsx

@@ -1,33 +1,30 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useRef } from 'react';
 import { useClient } from '../ChatifyContext';
 import { useDispatch, useSelect, useStateRef } from './reducer';
+import { FETCH_QUERY_STATE, QueryState } from './state';
+import { uniqId } from '../util';
+import { Account } from './models';
 
-export function useGetAccountsQuery() {
+export function useGetAccountsQuery(): QueryState<Account[]> {
+  const id = useRef(uniqId());
   const client = useClient();
   const stateRef = useStateRef();
-  useSelect((x) => x.query.accounts, []);
+  const queryState = useSelect((x) => x.query.accounts, []) ?? FETCH_QUERY_STATE;
   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) {
+    if (stateRef.current.query.accounts.uninitialized === false) {
       return;
     }
 
+    dispatch({ type: 'accounts_fetch', data: { requestId: id.current } });
     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;
+  return queryState ?? FETCH_QUERY_STATE;
 }

package/src/core/useGetChatListQuery.tsx

@@ -1,26 +1,23 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useRef } from 'react';
 import { useClient } from '../ChatifyContext';
 import { useDispatch, useSelect, useStateRef } from './reducer';
+import { uniqId } from '../util';
+import { FETCH_QUERY_STATE, QueryState } from './state';
+import { ChatListItem } from './models';
 
-export function useGetChatListQuery() {
+export function useGetChatListQuery(): QueryState<ChatListItem[]> {
+  const id = useRef(uniqId());
   const stateRef = useStateRef();
   const client = useClient();
-  useSelect((x) => x.query.chatList, []);
+  const queryState = useSelect((x) => x.query.chatList, []) ?? FETCH_QUERY_STATE;
   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) {
+    if (stateRef.current.query.chatList.uninitialized === false) {
       return;
     }
 
+    dispatch({ type: 'chatList_fetch', data: { requestId: id.current } });
     client
       .chats()
       .then((chats) => dispatch({ type: 'chatList_fulfilled', data: { chats } }))
@@ -29,5 +26,5 @@ export function useGetChatListQuery() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return stateRef.current.query.chatList;
+  return queryState ?? FETCH_QUERY_STATE;
 }

package/src/core/useGetChatQuery.tsx

@@ -1,34 +1,31 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useRef } from 'react';
 import { useClient } from '../ChatifyContext';
 import { useDispatch, useSelect, useStateRef } from './reducer';
+import { uniqId } from '../util';
+import { FETCH_QUERY_STATE, QueryState } from './state';
+import { Chat } from './models';
 
-export function useGetChatQuery(args: { chatId: string }) {
+export function useGetChatQuery(args: { chatId: string }): QueryState<Chat> {
+  const id = useRef(uniqId());
   const { chatId } = args;
   const client = useClient();
   const stateRef = useStateRef();
-  useSelect((x) => x.query.chats[chatId], [chatId]);
+  const queryState = useSelect((x) => x.query.chats[chatId], [chatId]) ?? FETCH_QUERY_STATE;
   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) {
+    if (stateRef.current.query.chats[chatId]?.uninitialized === true) {
       return;
     }
 
+    dispatch({ type: 'chat_fetch', data: { chatId, requestId: id.current } });
     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]);
+  }, [chatId]);
 
-  return stateRef.current.query.chats[chatId];
+  return queryState ?? FETCH_QUERY_STATE;
 }

package/src/core/useGetMessagesQuery.tsx

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