refactor: 添加好友

shared/index.tsx

@@ -37,6 +37,7 @@ export {
 } from './manager/ui';
 
 // model
+export { addFriendRequest } from './model/friend';
 export type { UserBaseInfo } from './model/user';
 export {
   loginWithEmail,

shared/model/friend.ts

@@ -0,0 +1,21 @@
+import { request } from '../api/request';
+
+export interface FriendRequest {
+  from: string;
+  to: string;
+  message: string;
+}
+
+/**
+ * 发送好友请求
+ * @param targetId 目标用户id
+ */
+export async function addFriendRequest(
+  targetId: string
+): Promise<FriendRequest> {
+  const { data } = await request.post('/api/friend/request/add', {
+    to: targetId,
+  });
+
+  return data;
+}

shared/model/user.ts

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

shared/redux/setup.ts

@@ -1,7 +1,8 @@
 import type { AppStore } from './store';
 import type { AppSocket } from '../api/socket';
 import { userActions } from './slices';
-import type { FriendRequest, UserBaseInfo } from '../model/user';
+import type { UserBaseInfo } from '../model/user';
+import type { FriendRequest } from '../model/friend';
 
 /**
  * 初始化Redux 上下文

web/src/init.tsx

@@ -25,7 +25,7 @@ if (window.localStorage.getItem('serviceUrl')) {
 setToasts((msg, type = 'info') => {
   message.open({
     type,
-    duration: 30000,
+    duration: 3,
     content: String(msg),
   });
 });

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

@@ -2,8 +2,11 @@ import { Avatar } from '@/components/Avatar';
 import { Highlight } from '@/components/Highlight';
 import { Button, Divider, Empty } from 'antd';
 import {
+  addFriendRequest,
   searchUserWithUniqueName,
   showErrorToasts,
+  showToasts,
+  t,
   useAsyncFn,
   UserBaseInfo,
 } from 'pawchat-shared';
@@ -12,8 +15,15 @@ import React, { useCallback, useState } from 'react';
 const SearchFriendResult: React.FC<{
   result: UserBaseInfo | undefined | null;
 }> = React.memo(({ result }) => {
-  const handleAddFriend = useCallback((userId: string) => {
-    console.log(userId);
+  const [hasSentUserId, setHasSentUserId] = useState(''); // 记录已发送的
+  const handleAddFriend = useCallback(async (userId: string) => {
+    try {
+      await addFriendRequest(userId);
+      setHasSentUserId(userId);
+      showToasts(t('已发送申请'), 'success');
+    } catch (err) {
+      showErrorToasts(err);
+    }
   }, []);
 
   if (result === undefined) {
@@ -24,6 +34,8 @@ const SearchFriendResult: React.FC<{
     return <Empty />;
   }
 
+  const hasSent = hasSentUserId === result._id;
+
   return (
     <div>
       <Divider />
@@ -47,9 +59,10 @@ const SearchFriendResult: React.FC<{
         <Button
           type="primary"
           className="bg-green-600 border-0"
+          disabled={hasSent}
           onClick={() => handleAddFriend(result._id)}
         >
-          申请好友
+          {hasSent ? t('已申请') : t('申请好友')}
         </Button>
       </div>
     </div>