feat: add create invite code edited data update. now can review changed info

Author: moonrailgun

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

@@ -44,6 +44,7 @@
   "k250e392c": "System is busy, please try again later",
   "k263bff41": "Edit invite link",
   "k267cc491": "Me",
+  "k29498d11": "Can be used <2>{{num}}</2> times",
   "k2a1422d2": "Configuration",
   "k2a8031e": "Homepage",
   "k2b411a11": "Component can only work in the group panel",

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

@@ -44,6 +44,7 @@
   "k250e392c": "系统忙, 请稍后再试",
   "k263bff41": "编辑邀请链接",
   "k267cc491": "我",
+  "k29498d11": "可使用 <2>{{num}}</2> 次",
   "k2a1422d2": "配置",
   "k2a8031e": "个人主页",
   "k2b411a11": "组件只能在群组面板中才能正常显示",

client/web/src/components/InviteCodeExpiredAt.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd';
+import { Divider, Tooltip } from 'antd';
 import React from 'react';
 import {
   datetimeFromNow,
@@ -9,30 +9,46 @@ import {
 } from 'tailchat-shared';
 
 interface InviteCodeExpiredAtProps {
-  invite: Pick<GroupInvite, 'expiredAt'>;
+  invite: Pick<GroupInvite, 'expiredAt' | 'usageLimit'>;
 }
 export const InviteCodeExpiredAt: React.FC<InviteCodeExpiredAtProps> =
   React.memo((props) => {
     const { invite } = props;
 
-    if (!invite.expiredAt) {
-      return <span>{t('该邀请码永不过期')}</span>;
-    }
-
-    if (new Date(invite.expiredAt).valueOf() < Date.now()) {
+    if (invite.expiredAt && new Date(invite.expiredAt).valueOf() < Date.now()) {
       return <span>{t('该邀请码已过期')}</span>;
     }
 
     return (
-      <Trans>
-        该邀请将于{' '}
-        <Tooltip title={formatFullTime(invite.expiredAt)}>
-          <span className="font-bold">
-            {{ date: datetimeFromNow(invite.expiredAt) } as any}
-          </span>
-        </Tooltip>{' '}
-        过期
-      </Trans>
+      <>
+        {!invite.expiredAt ? (
+          <span>{t('该邀请码永不过期')}</span>
+        ) : (
+          <Trans>
+            该邀请将于{' '}
+            <Tooltip title={formatFullTime(invite.expiredAt)}>
+              <span className="font-bold">
+                {{ date: datetimeFromNow(invite.expiredAt) } as any}
+              </span>
+            </Tooltip>{' '}
+            过期
+          </Trans>
+        )}
+
+        {invite.usageLimit && (
+          <>
+            <Divider type="vertical" />
+
+            <Trans>
+              可使用{' '}
+              <span className="font-bold">
+                {{ num: invite.usageLimit } as any}
+              </span>{' '}
+              次
+            </Trans>
+          </>
+        )}
+      </>
     );
   });
 InviteCodeExpiredAt.displayName = 'InviteCodeExpiredAt';

client/web/src/components/modals/CreateGroupInvite/CreateInviteCode.tsx

@@ -51,8 +51,18 @@ export const CreateInviteCode: React.FC<CreateInviteCodeProps> = React.memo(
         <EditGroupInvite
           groupId={groupId}
           code={createdInvite.code}
-          onEditSuccess={() => {
+          onEditSuccess={({ expiredAt, usageLimit }) => {
             showToasts(t('邀请设置修改成功'), 'success');
+            setCreateInvite(
+              (state) =>
+                ({
+                  ...state,
+                  expiredAt: expiredAt
+                    ? new Date(expiredAt).toISOString()
+                    : undefined,
+                  usageLimit: usageLimit,
+                } as any)
+            );
             closeModal(key);
           }}
         />

client/web/src/components/modals/EditGroupInvite/index.tsx

@@ -90,21 +90,30 @@ const fields: MetaFormFieldMeta[] = [
 interface EditGroupInviteProps {
   groupId: string;
   code: string;
-  onEditSuccess: () => void;
+  onEditSuccess: (info: {
+    expiredAt: number | undefined;
+    usageLimit: number | undefined;
+  }) => void;
 }
 export const EditGroupInvite: React.FC<EditGroupInviteProps> = React.memo(
   (props) => {
     const handleEditGroupInvite = useEvent(async (values: MetaFormValues) => {
+      const expiredAt =
+        values.expiredAt === -1
+          ? undefined
+          : Date.now() + values.expiredAt * 1000;
+
+      const usageLimit =
+        values.usageLimit === -1 ? undefined : values.usageLimit;
+
       await model.group.editGroupInvite(
         props.groupId,
         props.code,
-        values.expiredAt === -1
-          ? undefined
-          : Date.now() + values.expiredAt * 1000,
-        values.usageLimit === -1 ? undefined : values.usageLimit
+        expiredAt,
+        usageLimit
       );
 
-      props.onEditSuccess();
+      props.onEditSuccess({ expiredAt, usageLimit });
     });
 
     return (