feat: 应用群组邀请与弹出成功模态框

shared/index.tsx

@@ -60,6 +60,7 @@ export {
   createGroup,
   createGroupInviteCode,
   getGroupBasicInfo,
+  applyGroupInvite,
 } from './model/group';
 export type { GroupPanel, GroupInfo, GroupBasicInfo } from './model/group';
 export type { ChatMessage } from './model/message';

shared/model/group.ts

@@ -106,3 +106,13 @@ export async function findGroupInviteByCode(
 
   return data;
 }
+
+/**
+ * 使用群组邀请
+ * 即通过群组邀请加入群组
+ */
+export async function applyGroupInvite(inviteCode: string): Promise<void> {
+  await request.post('/api/group/invite/applyInvite', {
+    code: inviteCode,
+  });
+}

web/src/App.tsx

@@ -4,6 +4,7 @@ import { TcProvider, useStorage } from 'tailchat-shared';
 import clsx from 'clsx';
 import { Loadable } from './components/Loadable';
 import { ConfigProvider as AntdProvider } from 'antd';
+import { PortalHost } from './components/Portal';
 
 const MainRoute = Loadable(() =>
   import('./routes/Main').then((module) => module.MainRoute)
@@ -34,7 +35,7 @@ const AppProvider: React.FC = React.memo((props) => {
     <BrowserRouter>
       <TcProvider>
         <AntdProvider getPopupContainer={getPopupContainer}>
-          {props.children}
+          <PortalHost>{props.children}</PortalHost>
         </AntdProvider>
       </TcProvider>
     </BrowserRouter>

web/src/components/Modal.tsx

@@ -50,13 +50,17 @@ export const Modal: React.FC<ModalProps> = React.memo((props) => {
   } = props;
   const [showing, setShowing] = useState(true);
 
+  const closeModal = useCallback(() => {
+    setShowing(false);
+  }, []);
+
   const handleClose = useCallback(() => {
     if (maskClosable === false) {
       return;
     }
 
-    setShowing(false);
-  }, [maskClosable]);
+    closeModal();
+  }, [maskClosable, closeModal]);
 
   const stopPropagation = useCallback((e: React.BaseSyntheticEvent) => {
     e.stopPropagation();
@@ -83,7 +87,7 @@ export const Modal: React.FC<ModalProps> = React.memo((props) => {
         className="absolute left-0 right-0 top-0 bottom-0 bg-black bg-opacity-60 flex justify-center items-center"
         onClick={handleClose}
       >
-        <ModalContext.Provider value={{ closeModal: handleClose }}>
+        <ModalContext.Provider value={{ closeModal }}>
           {/* Inner */}
           <div
             className="modal-inner bg-gray-700 rounded overflow-auto relative"
@@ -128,7 +132,7 @@ export function closeModal(key?: number): void {
  */
 export function openModal(
   content: React.ReactNode,
-  props?: Pick<ModalProps, 'closable'>
+  props?: Pick<ModalProps, 'closable' | 'maskClosable'>
 ): number {
   const key = PortalAdd(
     <Modal

web/src/routes/Invite/InviteInfo.tsx

@@ -43,7 +43,7 @@ export const InviteInfo: React.FC<Props> = React.memo((props) => {
   }
 
   if (!value) {
-    return <div>群组信息加载失败</div>;
+    return <div>{t('群组信息加载失败')}</div>;
   }
 
   return (

web/src/routes/Invite/JoinBtn.tsx

@@ -1,11 +1,21 @@
+import { openModal } from '@/components/Modal';
 import { getUserJWT } from '@/utils/jwt-helper';
 import { Button } from 'antd';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useHistory } from 'react-router';
-import { checkTokenValid, t, useAsync } from 'tailchat-shared';
+import {
+  applyGroupInvite,
+  checkTokenValid,
+  getCachedGroupInviteInfo,
+  showToasts,
+  t,
+  useAsync,
+  useAsyncRequest,
+} from 'tailchat-shared';
+import { SuccessModal } from './SuccessModal';
 
 interface Props {
-  onJoinGroup: () => void;
+  inviteCode: string;
 }
 export const JoinBtn: React.FC<Props> = React.memo((props) => {
   const history = useHistory();
@@ -14,6 +24,7 @@ export const JoinBtn: React.FC<Props> = React.memo((props) => {
     const isTokenValid = await checkTokenValid(token);
     return isTokenValid;
   });
+  const [isJoined, setIsJoined] = useState(false);
 
   const handleRegister = useCallback(() => {
     history.push(
@@ -21,16 +32,36 @@ export const JoinBtn: React.FC<Props> = React.memo((props) => {
     );
   }, []);
 
+  const [{ loading: joinLoading }, handleJoinGroup] =
+    useAsyncRequest(async () => {
+      await applyGroupInvite(props.inviteCode);
+
+      const invite = await getCachedGroupInviteInfo(props.inviteCode);
+      openModal(<SuccessModal groupId={invite?.groupId ?? ''} />, {
+        maskClosable: false,
+      });
+      setIsJoined(true);
+    }, [props.inviteCode]);
+
   if (loading) {
     return null;
   }
 
+  if (isJoined) {
+    return (
+      <Button block={true} type="primary" size="large" disabled={true}>
+        {t('已加入')}
+      </Button>
+    );
+  }
+
   return isTokenValid ? (
     <Button
       block={true}
       type="primary"
       size="large"
-      onClick={props.onJoinGroup}
+      loading={joinLoading}
+      onClick={handleJoinGroup}
     >
       {t('加入群组')}
     </Button>

web/src/routes/Invite/SuccessModal.tsx

@@ -0,0 +1,28 @@
+import { ModalWrapper, useModalContext } from '@/components/Modal';
+import { Button } from 'antd';
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router';
+import { t } from 'tailchat-shared';
+
+interface Props {
+  groupId: string;
+}
+export const SuccessModal: React.FC<Props> = React.memo((props) => {
+  const { closeModal } = useModalContext();
+  const history = useHistory();
+  const handleNav = useCallback(() => {
+    closeModal();
+    history.push(`/main/group/${props.groupId}`);
+  }, [closeModal, props.groupId]);
+
+  return (
+    <ModalWrapper title="加入群组成功!">
+      <div>
+        <Button block={true} type="primary" size="large" onClick={handleNav}>
+          {t('跳转到群组')}
+        </Button>
+      </div>
+    </ModalWrapper>
+  );
+});
+SuccessModal.displayName = 'SuccessModal';

web/src/routes/Invite/index.tsx

@@ -11,11 +11,6 @@ import { JoinBtn } from './JoinBtn';
 export const InviteRoute: React.FC = React.memo(() => {
   const { inviteCode } = useParams<{ inviteCode: string }>();
 
-  const handleJoinGroup = useCallback(() => {
-    // TODO
-    console.log('TODO');
-  }, []);
-
   return (
     <div
       className="h-full w-full bg-gray-600 flex justify-center items-center bg-center bg-cover bg-no-repeat"
@@ -26,7 +21,7 @@ export const InviteRoute: React.FC = React.memo(() => {
 
         <Divider />
 
-        <JoinBtn onJoinGroup={handleJoinGroup} />
+        <JoinBtn inviteCode={inviteCode} />
       </div>
     </div>
   );

web/src/routes/Main/Provider.tsx

@@ -14,7 +14,6 @@ import _isNil from 'lodash/isNil';
 import { getUserJWT } from '../../utils/jwt-helper';
 import { useHistory } from 'react-router';
 import { SidebarContextProvider } from './SidebarContext';
-import { PortalHost } from '@/components/Portal';
 
 /**
  * 应用状态管理hooks
@@ -80,9 +79,7 @@ export const MainProvider: React.FC = React.memo((props) => {
 
   return (
     <ReduxProvider store={store}>
-      <PortalHost>
-        <SidebarContextProvider>{props.children}</SidebarContextProvider>
-      </PortalHost>
+      <SidebarContextProvider>{props.children}</SidebarContextProvider>
     </ReduxProvider>
   );
 });