refactor: 好友列表与好友邀请列表

shared/model/user.ts

@@ -12,6 +12,12 @@ export interface UserLoginInfo extends UserBaseInfo {
   createdAt: string;
 }
 
+export interface FriendRequest {
+  from: string;
+  to: string;
+  message: string;
+}
+
 /**
  * 邮箱登录
  * @param email 邮箱

shared/redux/setup.ts

@@ -1,12 +1,21 @@
 import type { AppStore } from './store';
 import type { AppSocket } from '../api/socket';
+import { userActions } from './slices';
+import type { FriendRequest, UserBaseInfo } from '../model/user';
 
 /**
  * 初始化Redux 上下文
  */
 export function setupRedux(socket: AppSocket, store: AppStore) {
-  socket.request('friend.getAllFriends').then((resp) => {
-    // TODO
-    console.log('好友列表', resp);
+  // 获取好友列表
+  socket.request<UserBaseInfo[]>('friend.getAllFriends').then((data) => {
+    store.dispatch(userActions.setFriendList(data));
+  });
+
+  // 获取好友邀请列表
+  socket
+    .request<FriendRequest[]>('friend.request.allRelatived')
+    .then((data) => {
+      store.dispatch(userActions.setFriendRequests(data));
     });
 }

shared/redux/slices/user.ts

@@ -1,12 +1,17 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { UserBaseInfo, UserLoginInfo } from '../../model/user';
+import type {
+  FriendRequest,
+  UserBaseInfo,
+  UserLoginInfo,
+} from '../../model/user';
 
 interface UserState {
   info: UserLoginInfo | null;
   friends: UserBaseInfo[];
+  friendRequests: FriendRequest[];
 }
 
-const initialState: UserState = { info: null, friends: [] };
+const initialState: UserState = { info: null, friends: [], friendRequests: [] };
 
 const userSlice = createSlice({
   name: 'user',
@@ -15,6 +20,12 @@ const userSlice = createSlice({
     setUserInfo(state, action: PayloadAction<UserLoginInfo>) {
       state.info = action.payload;
     },
+    setFriendList(state, action: PayloadAction<UserBaseInfo[]>) {
+      state.friends = action.payload;
+    },
+    setFriendRequests(state, action: PayloadAction<FriendRequest[]>) {
+      state.friendRequests = action.payload;
+    },
   },
 });
 

web/src/routes/Main/Content.tsx

@@ -7,6 +7,8 @@ import { useAppSelector } from '../../hooks/useAppSelector';
  */
 export const Content: 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);
 
   return (
     <div className="flex-auto bg-gray-700">
@@ -17,6 +19,32 @@ export const Content: React.FC = React.memo(() => {
             <div>{JSON.stringify(friends)}</div>
           </div>
         </PillTabPane>
+        <PillTabPane tab={'已发送'} key="2">
+          <div className="py-2.5 px-5">
+            <div>发送的好友请求</div>
+            <div>
+              {JSON.stringify(
+                friendRequests.filter((item) => item.from === userId)
+              )}
+            </div>
+          </div>
+        </PillTabPane>
+        <PillTabPane tab={'待处理'} key="3">
+          <div className="py-2.5 px-5">
+            <div>接受的好友请求</div>
+            <div>
+              {JSON.stringify(
+                friendRequests.filter((item) => item.to === userId)
+              )}
+            </div>
+          </div>
+        </PillTabPane>
+        <PillTabPane
+          tab={<span className="text-green-400">添加好友</span>}
+          key="4"
+        >
+          添加好友
+        </PillTabPane>
       </PillTabs>
     </div>
   );