feat: 好友请求的同意拒绝取消

shared/hooks/useAsyncFn.ts

@@ -1,5 +1,5 @@
 import { DependencyList, useCallback, useRef, useState } from 'react';
-import { FunctionReturningPromise, PromiseType } from '../types';
+import type { FunctionReturningPromise, PromiseType } from '../types';
 import { useMountedState } from './useMountedState';
 
 // Reference: https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts

shared/hooks/useAsyncRequest.ts

@@ -0,0 +1,19 @@
+import type { DependencyList } from 'react';
+import { showErrorToasts } from '../manager/ui';
+import type { FunctionReturningPromise } from '../types';
+import { useAsyncFn } from './useAsyncFn';
+
+export function useAsyncRequest<T extends FunctionReturningPromise>(
+  fn: T,
+  deps: DependencyList = []
+) {
+  const [{ loading }, call] = useAsyncFn(async (...args) => {
+    try {
+      await fn(...args);
+    } catch (err) {
+      showErrorToasts(err);
+    }
+  }, deps);
+
+  return [{ loading }, call] as const;
+}

shared/index.tsx

@@ -21,6 +21,7 @@ export { t, setLanguage, useTranslation } from './i18n';
 // hooks
 export { useAsync } from './hooks/useAsync';
 export { useAsyncFn } from './hooks/useAsyncFn';
+export { useAsyncRequest } from './hooks/useAsyncRequest';
 export { useMountedState } from './hooks/useMountedState';
 export { useRafState } from './hooks/useRafState';
 
@@ -37,7 +38,12 @@ export {
 } from './manager/ui';
 
 // model
-export { addFriendRequest } from './model/friend';
+export {
+  addFriendRequest,
+  cancelFriendRequest,
+  acceptFriendRequest,
+  denyFriendRequest,
+} from './model/friend';
 export type { FriendRequest } from './model/friend';
 export type { UserBaseInfo, UserLoginInfo } from './model/user';
 export {

shared/model/friend.ts

@@ -1,6 +1,7 @@
 import { request } from '../api/request';
 
 export interface FriendRequest {
+  _id: string;
   from: string;
   to: string;
   message: string;
@@ -19,3 +20,33 @@ export async function addFriendRequest(
 
   return data;
 }
+
+/**
+ * 同意好友请求
+ * @param requestId 好友请求ID
+ */
+export async function acceptFriendRequest(requestId: string): Promise<void> {
+  request.post('/api/friend/request/accept', {
+    requestId,
+  });
+}
+
+/**
+ * 拒绝好友请求
+ * @param requestId 好友请求ID
+ */
+export async function denyFriendRequest(requestId: string): Promise<void> {
+  request.post('/api/friend/request/deny', {
+    requestId,
+  });
+}
+
+/**
+ * 取消好友请求
+ * @param requestId 好友请求ID
+ */
+export async function cancelFriendRequest(requestId: string): Promise<void> {
+  request.post('/api/friend/request/cancel', {
+    requestId,
+  });
+}

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

@@ -1,29 +1,59 @@
 import { IconBtn } from '@/components/IconBtn';
 import { UserListItem } from '@/components/UserListItem';
 import { Tooltip } from 'antd';
-import { FriendRequest, t } from 'pawchat-shared';
+import {
+  FriendRequest,
+  t,
+  acceptFriendRequest,
+  denyFriendRequest,
+  useAsyncRequest,
+} from 'pawchat-shared';
 import React from 'react';
 
 export const RequestReceived: React.FC<{
   requests: FriendRequest[];
 }> = React.memo((props) => {
+  const [{ loading: acceptLoading }, handleAccept] = useAsyncRequest(
+    async (requestId) => {
+      await acceptFriendRequest(requestId);
+    },
+    []
+  );
+
+  const [{ loading: denyLoading }, handleDeny] = useAsyncRequest(
+    async (requestId) => {
+      await denyFriendRequest(requestId);
+    },
+    []
+  );
+
+  const loading = acceptLoading || denyLoading;
+
   return (
     <div className="py-2.5 px-5">
       <div>等待处理的好友请求</div>
       <div>
-        {props.requests.map(({ from }) => (
+        {props.requests.map(({ _id, from }) => (
           <UserListItem
             key={from}
             userId={from}
             actions={[
               <Tooltip key="accept" title={t('接受')}>
                 <div>
-                  <IconBtn icon="mdi-check" />
+                  <IconBtn
+                    icon="mdi-check"
+                    disabled={loading}
+                    onClick={() => handleAccept(_id)}
+                  />
                 </div>
               </Tooltip>,
               <Tooltip key="deny" title={t('拒绝')}>
                 <div>
-                  <IconBtn icon="mdi-close" />
+                  <IconBtn
+                    icon="mdi-close"
+                    disabled={loading}
+                    onClick={() => handleDeny(_id)}
+                  />
                 </div>
               </Tooltip>,
             ]}

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

@@ -1,24 +1,37 @@
 import { IconBtn } from '@/components/IconBtn';
 import { UserListItem } from '@/components/UserListItem';
 import { Tooltip } from 'antd';
-import { FriendRequest, t } from 'pawchat-shared';
+import {
+  cancelFriendRequest,
+  FriendRequest,
+  t,
+  useAsyncFn,
+} from 'pawchat-shared';
 import React from 'react';
 
 export const RequestSend: React.FC<{
   requests: FriendRequest[];
 }> = React.memo((props) => {
+  const [{ loading }, handleCancel] = useAsyncFn(async (requestId) => {
+    await cancelFriendRequest(requestId);
+  }, []);
+
   return (
     <div className="py-2.5 px-5">
       <div>等待对方处理的好友请求</div>
       <div>
-        {props.requests.map(({ to }) => (
+        {props.requests.map(({ _id, to }) => (
           <UserListItem
             key={to}
             userId={to}
             actions={[
               <Tooltip key="cancel" title={t('取消')}>
                 <div>
-                  <IconBtn icon="mdi-close" />
+                  <IconBtn
+                    icon="mdi-close"
+                    disabled={loading}
+                    onClick={() => handleCancel(_id)}
+                  />
                 </div>
               </Tooltip>,
             ]}