refactor: 好友列表与会话创建

shared/index.tsx

@@ -43,6 +43,7 @@ export {
 } from './manager/ui';
 
 // model
+export { createDMConverse } from './model/converse';
 export {
   addFriendRequest,
   cancelFriendRequest,

shared/model/converse.ts

@@ -0,0 +1,22 @@
+import { request } from '../api/request';
+
+interface ConverseInfo {
+  _id: string;
+  name: string;
+  type: 'DM' | 'Group';
+  members: string[];
+}
+
+/**
+ * 尝试创建私聊会话
+ * 如果已创建则返回之前的
+ */
+export async function createDMConverse(
+  targetId: string
+): Promise<ConverseInfo> {
+  const { data } = await request.post('/api/chat/converse/createDMConverse', {
+    targetId,
+  });
+
+  return data;
+}

shared/redux/setup.ts

@@ -1,16 +1,14 @@
 import type { AppStore } from './store';
 import type { AppSocket } from '../api/socket';
 import { userActions } from './slices';
-import type { UserBaseInfo } from '../model/user';
 import type { FriendRequest } from '../model/friend';
-import { getCachedUserInfo } from '../cache/cache';
 
 /**
  * 初始化Redux 上下文
  */
 export function setupRedux(socket: AppSocket, store: AppStore) {
   // 获取好友列表
-  socket.request<UserBaseInfo[]>('friend.getAllFriends').then((data) => {
+  socket.request<string[]>('friend.getAllFriends').then((data) => {
     store.dispatch(userActions.setFriendList(data));
   });
 
@@ -24,8 +22,6 @@ export function setupRedux(socket: AppSocket, store: AppStore) {
       console.error('错误的信息', userId);
       return;
     }
-    getCachedUserInfo(userId).then((info) => {
-      store.dispatch(userActions.appendFriend(info));
-    });
+    store.dispatch(userActions.appendFriend(userId));
   });
 }

shared/redux/slices/user.ts

@@ -1,13 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type {
-  FriendRequest,
-  UserBaseInfo,
-  UserLoginInfo,
-} from '../../model/user';
+import type { UserLoginInfo } from '../../model/user';
+import type { FriendRequest } from '../../model/friend';
 
 interface UserState {
   info: UserLoginInfo | null;
-  friends: UserBaseInfo[];
+  friends: string[]; // 好友的id列表
   friendRequests: FriendRequest[];
 }
 
@@ -20,14 +17,14 @@ const userSlice = createSlice({
     setUserInfo(state, action: PayloadAction<UserLoginInfo>) {
       state.info = action.payload;
     },
-    setFriendList(state, action: PayloadAction<UserBaseInfo[]>) {
+    setFriendList(state, action: PayloadAction<string[]>) {
       state.friends = action.payload;
     },
     setFriendRequests(state, action: PayloadAction<FriendRequest[]>) {
       state.friendRequests = action.payload;
     },
-    appendFriend(state, action: PayloadAction<UserBaseInfo>) {
-      if (state.friends.some(({ _id }) => _id === action.payload._id)) {
+    appendFriend(state, action: PayloadAction<string>) {
+      if (state.friends.some((id) => id === action.payload)) {
         return;
       }
 

web/src/routes/Main/Content/Personal/Friends/FriendList.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react';
+import { createDMConverse, t, useAppSelector } from 'pawchat-shared';
+import { UserListItem } from '@/components/UserListItem';
+import { IconBtn } from '@/components/IconBtn';
+import { Tooltip } from 'antd';
+import { useHistory } from 'react-router';
+
+/**
+ * 好友列表
+ */
+export const FriendList: React.FC = React.memo(() => {
+  const friends = useAppSelector((state) => state.user.friends);
+  const history = useHistory();
+
+  const handleCreateConverse = useCallback(
+    (targetId: string) => {
+      createDMConverse(targetId).then((converse) => {
+        history.push(`/main/personal/converse/${converse._id}`);
+      });
+    },
+    [history]
+  );
+
+  return (
+    <div className="py-2.5 px-5">
+      <div>好友列表</div>
+      <div>
+        {friends.map((friendId) => (
+          <UserListItem
+            key={friendId}
+            userId={friendId}
+            actions={[
+              <Tooltip key="message" title={t('发送消息')}>
+                <div>
+                  <IconBtn
+                    icon="mdi-message-text-outline"
+                    onClick={() => handleCreateConverse(friendId)}
+                  />
+                </div>
+              </Tooltip>,
+            ]}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+FriendList.displayName = 'FriendList';

web/src/routes/Main/Content/Personal/Friends/index.tsx

@@ -4,12 +4,12 @@ import { AddFriend } from './AddFriend';
 import { t, useAppSelector } from 'pawchat-shared';
 import { RequestSend } from './RequestSend';
 import { RequestReceived } from './RequestReceived';
+import { FriendList } from './FriendList';
 
 /**
  * 主要内容组件
  */
 export const FriendPanel: React.FC = React.memo(() => {
-  const friends = useAppSelector((state) => state.user.friends);
   const friendRequests = useAppSelector((state) => state.user.friendRequests);
   const userId = useAppSelector((state) => state.user.info?._id);
 
@@ -17,10 +17,7 @@ export const FriendPanel: React.FC = React.memo(() => {
     <div className="w-full">
       <PillTabs>
         <PillTabPane tab={'全部'} key="1">
-          <div className="py-2.5 px-5">
-            <div>好友列表</div>
-            <div>{JSON.stringify(friends)}</div>
-          </div>
+          <FriendList />
         </PillTabPane>
         <PillTabPane tab={t('已发送')} key="2">
           <RequestSend