feat: 增加取消好友邀请的处理

src/shared/api/listener.ts

@@ -13,7 +13,11 @@ import {
   startWriting,
   stopWriting,
 } from '@shared/redux/actions/chat';
-import { addFriendInvite, loginWithToken } from '@shared/redux/actions/user';
+import {
+  addFriendInvite,
+  loginWithToken,
+  removeFriendInvite,
+} from '@shared/redux/actions/user';
 import {
   updateGroupStatus,
   addGroup,
@@ -75,6 +79,10 @@ export function bindEventFunc(
   api.on('player::invite', function(data) {
     store.dispatch(addFriendInvite(data));
   });
+  api.on('player::removeInvite', function(data) {
+    const { inviteUUID } = data;
+    store.dispatch(removeFriendInvite({ inviteUUID }));
+  });
   api.on('player::tick', function(data) {
     store.dispatch(showAlert(data.msg));
     store.dispatch({ type: RESET });

src/shared/redux/actions/user.ts

@@ -20,6 +20,8 @@ const {
   GET_FRIEND_INVITE_SUCCESS,
   REFUSE_FRIEND_INVITE_SUCCESS,
   ADD_FRIEND_INVITE,
+  REMOVE_FRIEND_INVITE,
+  REQUEST_REMOVE_FRIEND_INVITE,
 } = constants;
 import md5 from 'md5';
 import rnStorage from '@shared/api/rn-storage.api';
@@ -42,6 +44,7 @@ import { getGroupList, getGroupInvite } from './group';
 import { getNote, getNotes } from './note';
 import { loadLocalCache } from './cache';
 import { TRPGAction } from '../types/__all__';
+import { createAsyncThunk, createAction } from '@reduxjs/toolkit';
 
 const api = trpgApi.getInstance();
 
@@ -405,6 +408,30 @@ export const addFriendInvite = function(invite: any): TRPGAction {
   return { type: ADD_FRIEND_INVITE, payload: invite };
 };
 
+/**
+ * 移除好友请求
+ */
+export const removeFriendInvite = createAction<{
+  inviteUUID: string;
+}>(REMOVE_FRIEND_INVITE);
+
+/**
+ * 发送请求移除好友请求
+ */
+export const requestRemoveFriendInvite = createAsyncThunk<
+  void,
+  { inviteUUID: string }
+>(REQUEST_REMOVE_FRIEND_INVITE, async ({ inviteUUID }, { dispatch }) => {
+  try {
+    await api.emitP('player::removeFriendInvite', { inviteUUID });
+
+    dispatch(removeFriendInvite({ inviteUUID }));
+  } catch (err) {
+    // TODO: 需要处理 showToast 的类型
+    dispatch(showToast('取消好友邀请失败:' + String(err)) as any);
+  }
+});
+
 export const saveSettings = function(): TRPGAction {
   return function(dispatch, getState) {
     const settings = getState().settings;

src/shared/redux/constants/user.ts

@@ -19,4 +19,6 @@ export default {
   GET_FRIEND_INVITE_SUCCESS: 'GET_FRIEND_INVITE_SUCCESS',
   REFUSE_FRIEND_INVITE_SUCCESS: 'REFUSE_FRIEND_INVITE_SUCCESS',
   ADD_FRIEND_INVITE: 'ADD_FRIEND_INVITE',
+  REMOVE_FRIEND_INVITE: 'REMOVE_FRIEND_INVITE',
+  REQUEST_REMOVE_FRIEND_INVITE: 'REQUEST_REMOVE_FRIEND_INVITE',
 };

src/shared/redux/reducers/user.ts

@@ -2,6 +2,7 @@ import constants from '@redux/constants';
 import { UserState } from '@redux/types/user';
 import _remove from 'lodash/remove';
 import { createReducer } from '@reduxjs/toolkit';
+import { removeFriendInvite } from '@redux/actions/user';
 
 const {
   RESET,
@@ -117,5 +118,10 @@ export default createReducer(initialState, (builder) => {
     })
     .addCase(ADD_FRIEND_INVITE, (state, action: any) => {
       state.friendRequests.push(action.payload);
+    })
+    .addCase(removeFriendInvite, (state, action) => {
+      const { inviteUUID } = action.payload;
+      _remove(state.friendInvite, (item) => item.uuid === inviteUUID);
+      _remove(state.friendRequests, (item) => item.uuid === inviteUUID);
     });
 });

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

@@ -13,6 +13,7 @@ import { AddFriend } from './AddFriend';
 import { t } from '@shared/i18n';
 import { useHistory } from 'react-router';
 import { addUserConverse } from '@redux/actions/chat';
+import { requestRemoveFriendInvite } from '@redux/actions/user';
 const { TabPane } = Tabs;
 
 const PaneContainer = styled.div`
@@ -35,6 +36,15 @@ export const FriendPanel: React.FC = TMemo(() => {
     history.push(`/main/personal/converse/${userUUID}`);
   };
 
+  // 取消好友邀请
+  const handleCancelFriendInvite = (inviteUUID: string) => {
+    dispatch(
+      requestRemoveFriendInvite({
+        inviteUUID,
+      })
+    );
+  };
+
   const friendListPane = useMemo(
     () => (
       <TabPane tab={t('全部')} key="1">
@@ -65,7 +75,7 @@ export const FriendPanel: React.FC = TMemo(() => {
       <TabPane
         tab={
           <Badge count={friendInvite.length}>
-            <span>好友邀请</span>
+            <span>已发送</span>
           </Badge>
         }
         key="2"
@@ -77,7 +87,11 @@ export const FriendPanel: React.FC = TMemo(() => {
               userUUID={inv.to_uuid}
               actions={[
                 <Tooltip title="取消" key="cancel">
-                  <Button shape="circle" icon={<CloseOutlined />} />
+                  <Button
+                    shape="circle"
+                    icon={<CloseOutlined />}
+                    onClick={() => handleCancelFriendInvite(inv.uuid)}
+                  />
                 </Tooltip>,
               ]}
             />