@webinex/chatify 1.0.1-rc3 → 1.0.3-rc3

package/src/core/action.tsx

@@ -6,11 +6,12 @@ export const ACTIONS = {
     mutation(state);
   },
 
-  messages_fetch: (state: State, { chatId }: { chatId: string }) => {
+  messages_fetch: (state: State, { chatId, requestId }: { chatId: string; requestId: string }) => {
     state.query.messages[chatId] = {
       ...state.query.messages[chatId],
       uninitialized: false,
       isFetching: true,
+      requestId,
     };
   },
 
@@ -23,6 +24,7 @@ export const ACTIONS = {
     qState.error = undefined;
     qState.isFetching = false;
     qState.data = messages.map((x) => ({ type: 'message', ...x }));
+    qState.requestId = undefined;
 
     if (hasMore) {
       qState.data!.push({ type: 'next' });
@@ -33,6 +35,7 @@ export const ACTIONS = {
     const qState = state.query.messages[chatId];
     qState.error = error;
     qState.isFetching = false;
+    qState.requestId = undefined;
   },
 
   fetchNext_fetch: (state: State, { chatId }: { chatId: string }) => {
@@ -54,9 +57,10 @@ export const ACTIONS = {
     state.mutation.fetchNext = { isFetching: false, error };
   },
 
-  chatList_fetch: (state: State) => {
+  chatList_fetch: (state: State, { requestId }: { requestId: string }) => {
     state.query.chatList.isFetching = true;
     state.query.chatList.uninitialized = false;
+    state.query.chatList.requestId = requestId;
   },
 
   chatList_fulfilled: (state: State, { chats }: { chats: ChatListItem[] }) => {
@@ -65,6 +69,7 @@ export const ACTIONS = {
     state.query.chatList.isFetching = false;
     state.query.chatList.error = undefined;
     state.query.chatList.data = chats;
+    state.query.chatList.requestId = undefined;
 
     if (state.ui.chatId === undefined && chats.length > 0) {
       state.ui.view = 'chat';
@@ -75,6 +80,7 @@ export const ACTIONS = {
   chatList_rejected: (state: State, { error }: { error: any }) => {
     state.query.chatList.isFetching = false;
     state.query.chatList.error = error;
+    state.query.chatList.requestId = undefined;
   },
 
   removeMember_fetch: (state: State) => {
@@ -125,19 +131,21 @@ export const ACTIONS = {
     state.mutation.addChat = { isFetching: false, error };
   },
 
-  accounts_fetch: (state: State) => {
-    state.query.accounts = { isFetching: true, uninitialized: false };
+  accounts_fetch: (state: State, { requestId }: { requestId: string }) => {
+    state.query.accounts = { isFetching: true, uninitialized: false, requestId };
   },
 
   accounts_fulfilled: (state: State, { accounts }: { accounts: Account[] }) => {
     state.query.accounts.data = accounts;
     state.query.accounts.isFetching = false;
     state.query.accounts.error = undefined;
+    state.query.accounts.requestId = undefined;
   },
 
   accounts_rejected: (state: State, { error }: { error: any }) => {
     state.query.accounts.isFetching = false;
     state.query.accounts.error = error;
+    state.query.accounts.requestId = undefined;
   },
 
   chat_open: (state: State, { chatId }: { chatId: string }) => {
@@ -146,10 +154,20 @@ export const ACTIONS = {
   },
 
   new_chat_open: (state: State) => {
-    state.ui.chatId = undefined;
     state.ui.view = 'new-chat';
   },
 
+  new_chat_close: (state: State) => {
+    if (state.ui.chatId) {
+      state.ui.view = 'chat';
+    } else if (state.query.chatList.data?.length) {
+      state.ui.view = 'chat';
+      state.ui.chatId = state.query.chatList.data[0]?.id;
+    } else {
+      state.ui.view = undefined;
+    }
+  },
+
   toggle_members_view: (state: State) => {
     state.ui.showMembers = !state.ui.showMembers;
   },
@@ -327,8 +345,14 @@ export const ACTIONS = {
     }
   },
 
-  chat_fetch: (state: State, { chatId }: { chatId: string }) => {
-    state.query.chats[chatId] = { isFetching: true, uninitialized: false, data: undefined, error: undefined };
+  chat_fetch: (state: State, { chatId, requestId }: { chatId: string; requestId: string }) => {
+    state.query.chats[chatId] = {
+      isFetching: true,
+      uninitialized: false,
+      data: undefined,
+      error: undefined,
+      requestId,
+    };
   },
 
   chat_fulfilled: (state: State, { chat }: { chat: Chat }) => {
@@ -336,12 +360,14 @@ export const ACTIONS = {
     chatState.isFetching = false;
     chatState.error = undefined;
     chatState.data = chat;
+    chatState.requestId = undefined;
   },
 
   chat_rejected: (state: State, { chatId, error }: { chatId: string; error: any }) => {
     const chatState = state.query.chats[chatId];
     chatState.isFetching = false;
     chatState.error = error;
+    chatState.requestId = undefined;
   },
 
   send_fetch: (

package/src/core/state.ts

@@ -16,6 +16,7 @@ export interface QueryState<TData> {
   isFetching: boolean;
   error?: any;
   data?: TData;
+  requestId?: string;
 }
 
 export interface MutationState {
@@ -51,12 +52,12 @@ export interface State {
   };
 }
 
-export const INITIAL_QUERY_STATE: QueryState<any> = {
+export const FETCH_QUERY_STATE: QueryState<any> = Object.freeze({
   uninitialized: false,
   isFetching: true,
   data: undefined,
   error: undefined,
-};
+});
 
 export const INITIAL_STATE: State = {
   ui: {

package/src/core/useAddChatMutation.tsx

@@ -10,10 +10,16 @@ export function useAddChatMutation() {
 
   const invoke = useCallback((args: AddChatRequest) => {
     dispatch({ type: 'addChat_fetch', data: void 0 });
-    client
+    return client
       .addChat(args)
-      .then(() => dispatch({ type: 'addChat_fulfilled', data: void 0 }))
-      .catch((error) => dispatch({ type: 'addChat_rejected', data: { error } }));
+      .then((id) => {
+        dispatch({ type: 'addChat_fulfilled', data: void 0 });
+        return id;
+      })
+      .catch((error) => {
+        dispatch({ type: 'addChat_rejected', data: { error } });
+        throw error;
+      });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

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 === false) {
       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;
 }

package/src/styles/aside.scss

@@ -1,67 +1,98 @@
 .wxchtf-aside {
   flex: none;
-  width: 300px;
-  border-right: $border;
   display: flex;
   flex-flow: column nowrap;
+  background: #ffffff;
+  border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
+  padding-top: 15px;
+  width: 320px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    position: absolute;
+    content: '';
+    left: 0;
+    bottom: 0;
+    width: calc(100% - 10px);
+    height: 20px;
+    z-index: 1;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+  }
 
   .wxchtf-chat-list.ant-menu {
     flex: 1 1 auto;
     height: 100px;
     overflow-y: auto;
+    border-inline-end: none;
+    padding-bottom: 2rem;
 
     @include scrollbar();
 
+    .ant-menu-item + .ant-menu-item {
+      margin-top: 8px;
+    }
+
     .ant-menu-item {
       padding: 0;
       height: unset;
       margin: 0;
-      width: 100%;
-      border-radius: 0;
+      margin-left: 8px;
+      width: calc(100% - 16px);
+      border-radius: 8px;
       line-height: 1.5;
-      border-top: $border;
 
-      &:first-child {
-        border-top: none;
-      }
+      &.ant-menu-item-selected {
+        background-color: #e4f7f7;
 
-      &.ant-menu-item-selected .wxchtf-chat-name {
-        font-weight: 600;
+        .wxchtf-chat-name {
+          font-weight: 600;
+        }
       }
 
       .wxchtf-chat {
-        padding: 0.5rem 1rem;
+        padding-inline: 10px;
+        padding-block: 8.5px;
         position: relative;
 
         &.--unread {
           .wxchtf-chat-last {
             font-weight: bold;
           }
+
+          .wxchtf-chat-name {
+            font-weight: bold;
+            max-width: 100%;
+          }
         }
 
         .wxchtf-chat-name {
-          font-weight: bold;
           display: inline-block;
+          font-weight: 500;
         }
 
         .wxchtf-unread-count {
-          display: inline-block;
-          padding: 0.2rem;
-          min-width: 1rem;
-          height: 1.2rem;
-          line-height: 0.7rem;
-          margin-left: 0.5rem;
+          background-color: #ff4d4f;
           border-radius: 50%;
+          width: 16px;
+          height: 16px;
+          padding: 0;
+          font-size: 10px;
+          position: absolute;
+          top: 32px;
+          right: 13px;
+          color: white;
+          line-height: 16px;
+          font-weight: bold;
           text-align: center;
-          font-size: 0.7rem;
-          background: $unreadCountBackground;
         }
 
         .wxchtf-chat-last {
           $size: 25px;
+          color: #0e0f1799;
 
           font-style: italic;
-          opacity: 0.75;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -87,6 +118,13 @@
           .wxchtf-chat-last-message {
             display: inline;
           }
+
+          .wxchtf-chat-last-sent-at {
+            position: absolute;
+            top: 7px;
+            right: 13px;
+            font-size: 0.8em;
+          }
         }
       }
     }