feat: 处理邀请码加入页面的邀请码过期按钮禁用

shared/i18n/langs/en-US/translation.json

@@ -225,6 +225,7 @@
   "keda14478": "You are the group manager, leaving the group will cause the group to be dissolved",
   "kee9108f1": "Modify success",
   "kef25594f": "Nickname#0000",
+  "kef3676e1": "The invitation code has expired",
   "kefaf9956": "Created",
   "kefc07278": "Back to login",
   "kf02c6db": "Friend List",

shared/i18n/langs/zh-CN/translation.json

@@ -225,6 +225,7 @@
   "keda14478": "您是群组管理者，退出群组会导致解散群组",
   "kee9108f1": "修改成功",
   "kef25594f": "用户昵称#0000",
+  "kef3676e1": "该邀请码已过期",
   "kefaf9956": "创建时间",
   "kefc07278": "返回登录",
   "kf02c6db": "好友列表",

web/src/components/InviteCodeExpiredAt.tsx

@@ -19,6 +19,10 @@ export const InviteCodeExpiredAt: React.FC<InviteCodeExpiredAtProps> =
       return t('该邀请码永不过期');
     }
 
+    if (new Date(invite.expiredAt).valueOf() < Date.now()) {
+      return t('该邀请码已过期');
+    }
+
     return (
       <Trans>
         该邀请将于{' '}

web/src/routes/Invite/InviteInfo.tsx

@@ -2,16 +2,16 @@ import { Avatar } from '@/components/Avatar';
 import { InviteCodeExpiredAt } from '@/components/InviteCodeExpiredAt';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { UserName } from '@/components/UserName';
+import { Divider } from 'antd';
 import React from 'react';
 import {
-  datetimeFromNow,
   getCachedGroupInviteInfo,
   getGroupBasicInfo,
   showErrorToasts,
   t,
-  Trans,
   useAsync,
 } from 'tailchat-shared';
+import { JoinBtn } from './JoinBtn';
 
 interface Props {
   inviteCode: string;
@@ -19,7 +19,7 @@ interface Props {
 export const InviteInfo: React.FC<Props> = React.memo((props) => {
   const { inviteCode } = props;
 
-  const { loading, value } = useAsync(async () => {
+  const { loading, value: inviteInfo } = useAsync(async () => {
     try {
       const invite = await getCachedGroupInviteInfo(inviteCode);
       if (invite === null) {
@@ -44,36 +44,42 @@ export const InviteInfo: React.FC<Props> = React.memo((props) => {
     return <LoadingSpinner />;
   }
 
-  if (!value) {
+  if (!inviteInfo) {
     return <div>{t('群组信息加载失败')}</div>;
   }
 
   return (
-    <div className="text-white">
-      <div>
-        <Avatar
-          className="mb-4"
-          size={64}
-          src={value.group.avatar}
-          name={value.group.name}
-        />
-      </div>
-      <div>
-        <UserName className="font-bold" userId={value.creator} />{' '}
-        {t('邀请您加入群组')}
-      </div>
-      <div className="text-xl my-2 font-bold">{value.group.name}</div>
-      <div>
-        {t('当前成员数')}: {value.group.memberCount}
-      </div>
-
-      {/* 永久邀请码不显示过期时间 */}
-      {value.expired && (
+    <>
+      <div className="text-white">
+        <div>
+          <Avatar
+            className="mb-4"
+            size={64}
+            src={inviteInfo.group.avatar}
+            name={inviteInfo.group.name}
+          />
+        </div>
         <div>
-          <InviteCodeExpiredAt invite={{ expiredAt: value.expired }} />
+          <UserName className="font-bold" userId={inviteInfo.creator} />{' '}
+          {t('邀请您加入群组')}
         </div>
-      )}
-    </div>
+        <div className="text-xl my-2 font-bold">{inviteInfo.group.name}</div>
+        <div>
+          {t('当前成员数')}: {inviteInfo.group.memberCount}
+        </div>
+
+        {/* 永久邀请码不显示过期时间 */}
+        {inviteInfo.expired && (
+          <div>
+            <InviteCodeExpiredAt invite={{ expiredAt: inviteInfo.expired }} />
+          </div>
+        )}
+      </div>
+
+      <Divider />
+
+      <JoinBtn inviteCode={inviteCode} expired={inviteInfo.expired} />
+    </>
   );
 });
 InviteInfo.displayName = 'InviteInfo';

web/src/routes/Invite/JoinBtn.tsx

@@ -7,7 +7,6 @@ import {
   applyGroupInvite,
   checkTokenValid,
   getCachedGroupInviteInfo,
-  showToasts,
   t,
   useAsync,
   useAsyncRequest,
@@ -16,6 +15,7 @@ import { SuccessModal } from './SuccessModal';
 
 interface Props {
   inviteCode: string;
+  expired?: string;
 }
 export const JoinBtn: React.FC<Props> = React.memo((props) => {
   const history = useHistory();
@@ -55,6 +55,14 @@ export const JoinBtn: React.FC<Props> = React.memo((props) => {
     );
   }
 
+  if (props.expired && new Date(props.expired).valueOf() < Date.now()) {
+    return (
+      <Button block={true} type="primary" size="large" disabled={true}>
+        {t('已过期')}
+      </Button>
+    );
+  }
+
   return isTokenValid ? (
     <Button
       block={true}

web/src/routes/Invite/index.tsx

@@ -1,8 +1,6 @@
-import { Divider } from 'antd';
 import React from 'react';
 import { useParams } from 'react-router';
 import { InviteInfo } from './InviteInfo';
-import { JoinBtn } from './JoinBtn';
 import { PortalHost } from '@/components/Portal';
 import { useRecordMeasure } from '@/utils/measure-helper';
 
@@ -18,10 +16,6 @@ const InviteRoute: React.FC = React.memo(() => {
       <div className="h-full w-full bg-gray-600 flex justify-center items-center tc-background">
         <div className="w-96 p-4 rounded-lg shadow-lg bg-black bg-opacity-60 text-center">
           <InviteInfo inviteCode={inviteCode} />
-
-          <Divider />
-
-          <JoinBtn inviteCode={inviteCode} />
         </div>
       </div>
     </PortalHost>