feat: display username for bound matataki; change invitation page styles

Meta-Network · Dec 17, 2021 · 58d55c1 · 58d55c1
1 parent 454241b
commit 58d55c1
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 172 deletions.
diff --git a/src/components/Guide/StoreSetting.tsx b/src/components/Guide/StoreSetting.tsx
@@ -56,8 +56,12 @@ export default () => {
       return Promise.resolve();
     };
   const updateRepoSettings = async (values: { storeRepo: string; publishRepo: string }) => {
-    setStoreSetting((prev) => ({ ...prev, repos: values }));
-    message.success(intl.formatMessage({ id: 'messages.store.setRepoName' }, values));
+    if (values.storeRepo !== values.publishRepo) {
+      setStoreSetting((prev) => ({ ...prev, repos: values }));
+      message.success(intl.formatMessage({ id: 'messages.store.setRepoName' }, values));
+    } else {
+      message.error(intl.formatMessage({ id: 'messages.store.form.sameRepoName' }, values));
+    }
   };
 
   return (

diff --git a/src/locales/en-US/component.ts b/src/locales/en-US/component.ts
@@ -22,7 +22,6 @@ export default {
   'component.button.regenerate': 'regenerate',
   'component.status.alreadyBound': 'Already bound',
   'component.status.notBound': 'Not bound',
-  'component.badge.invitationAvailable': 'Invitation code available',
-  'component.badge.invitationUsed': 'Used invitation code',
+  'component.status.used': 'Used',
   'component.full.tip': 'If the page does not respond, you can manually close it!',
 };
diff --git a/src/locales/en-US/messages.ts b/src/locales/en-US/messages.ts
@@ -49,14 +49,16 @@ export default {
     'The storage repository already exists, please set a new name',
   'messages.store.form.repoName': 'Please set the name of the storage repository',
   'messages.store.form.repoNameAvailable': 'This name is available!',
+  'messages.store.form.sameRepoName':
+    'The names of the repositories should not be the same, please set a new name',
   'messages.invitation.title': 'Invitation code management',
   'messages.invitation.description':
     'Manage the invitation codes you have here.\nYou can edit the invitation information below to customize the information that the other party will accept after sending.',
-  'messages.invitation.cardTitle': 'Invitation code #{id}',
+  'messages.invitation.inviteMessage':
+    'Hi, Meta Network Natives are inviting you to be their neighbors!，visit https://home.metanetwork.online，join us with your invitation code! ',
   'messages.info.updateSuccess': 'Information update completed',
   'messages.info.updateFailed': 'Information update failed',
   'messages.info.copySuccess': 'Copy successfully',
-  'messages.invitation.cardLabel': 'Invitation code',
   'messages.invitation.editInfoHere': 'You can edit the information here',
   'messages.invitation.inviteeLabel': 'Invited people',
   'messages.invitation.inviteeName': 'The name of the invitee',
@@ -180,7 +182,6 @@ export default {
   'messages.editor.submit.generateKey.fail': 'Generated failed',
   'messages.editor.submit.bindStorage': 'Please bind GitHub',
   'messages.editor.submit.uploadMetadata.fail': 'Failed to upload metadata, please try again!',
-  'messages.invitation.card.title': 'Invitation code #{codeId}',
   'messages.delete.success': 'deleted successfully',
   'messages.delete.fail': 'delete failed',
   'messages.dashboard.lastPublishDate': 'Last publish date: {time, time, ::yyyyMMddHHmmss}',

diff --git a/src/locales/zh-CN/component.ts b/src/locales/zh-CN/component.ts
@@ -22,7 +22,6 @@ export default {
   'component.button.regenerate': '重新生成',
   'component.status.alreadyBound': '已绑定',
   'component.status.notBound': '未绑定',
-  'component.badge.invitationAvailable': '邀请码可用',
-  'component.badge.invitationUsed': '邀请码已使用',
+  'component.status.used': '已使用',
   'component.full.tip': '如遇到页面失去反馈，可手动关闭！',
 };
diff --git a/src/locales/zh-CN/messages.ts b/src/locales/zh-CN/messages.ts
@@ -39,14 +39,13 @@ export default {
   'messages.store.repoNameAlreadyExists': '该存储仓库已存在，请设定一个新的名称',
   'messages.store.form.repoName': '请设定存储仓库的名称',
   'messages.store.form.repoNameAvailable': '可以使用该名称！',
+  'messages.store.form.sameRepoName': '仓库名称不可以重复，请重新设定名称',
   'messages.invitation.title': '邀请码管理',
   'messages.invitation.description':
     '在这里管理你拥有的邀请码。\n你可以在下方编辑邀请信息，定制发送后对方会接受的信息。',
-  'messages.invitation.cardTitle': '邀请码 #{id}',
   'messages.info.updateSuccess': '信息更新完成',
   'messages.info.updateFailed': '信息更新失败',
   'messages.info.copySuccess': '复制成功',
-  'messages.invitation.cardLabel': '邀请代码',
   'messages.invitation.editInfoHere': '可以在此处编辑信息',
   'messages.invitation.inviteeLabel': '受邀人',
   'messages.invitation.inviteeName': '受邀人的称呼',
@@ -161,7 +160,6 @@ export default {
   'messages.editor.submit.generateKey.fail': '生成失败',
   'messages.editor.submit.bindStorage': '请绑定 GitHub',
   'messages.editor.submit.uploadMetadata.fail': '上传 metadata 失败, 请重试！',
-  'messages.invitation.card.title': '邀请码 #{codeId}',
   'messages.delete.success': '删除成功',
   'messages.delete.fail': '删除失败',
   'messages.dashboard.lastPublishDate': '上次发布时间：{time, time, ::yyyyMMddHHmmss}',
@@ -170,4 +168,6 @@ export default {
   'messages.dashboard.publishing': '正在发布中...',
   'messages.dashboard.submitted': '已提交',
   'messages.dashboard.settings': '设置项',
+  'messages.invitation.inviteMessage':
+    'Hi，Meta Network原住民正在邀请您来做邻居，快去 https://home.metanetwork.online，通过您的邀请码来入驻吧！',
 };
diff --git a/src/pages/Invitation.less b/src/pages/Invitation.less
@@ -0,0 +1,7 @@
+.lessMargin > form > div {
+  margin: 1vh 0;
+}
+
+.flexedListElement {
+  margin: 0 1vw;
+}
diff --git a/src/pages/Invitation.tsx b/src/pages/Invitation.tsx
@@ -1,14 +1,16 @@
 import { useIntl, useRequest } from 'umi';
+import { List, notification } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-layout';
-import { List, Badge, Card, Divider, notification } from 'antd';
-import ProForm, { ProFormText } from '@ant-design/pro-form';
+import ProFrom, { ProFormText } from '@ant-design/pro-form';
+import { queryInvitations } from '@/services/api/meta-ucenter';
 import FormattedDescription from '@/components/FormattedDescription';
-import { queryInvitations, updateInvitation } from '@/services/api/meta-ucenter';
+
+import styles from './Invitation.less';
 
 export default () => {
-  const intl = useIntl();
   const { data, loading } = useRequest(() => queryInvitations());
+  const intl = useIntl();
   const list = data || [];
 
   return (
@@ -18,110 +20,48 @@ export default () => {
       content={<FormattedDescription id="messages.invitation.description" />}
     >
       <List
+        size="small"
         rowKey="id"
         loading={loading}
-        grid={{
-          gutter: 30,
-          column: 2,
-        }}
         dataSource={list}
         renderItem={(item) => {
-          const isUnused: boolean = item.invitee_user_id === 0;
-
           return (
-            <List.Item key={item.id}>
-              <Badge.Ribbon
-                text={
-                  isUnused
-                    ? intl.formatMessage({ id: 'component.badge.invitationAvailable' })
-                    : intl.formatMessage({ id: 'component.badge.invitationUsed' })
-                }
-                color={isUnused ? 'green' : 'blue'}
+            <List.Item style={{ justifyContent: 'flex-start' }} className={styles.lessMargin}>
+              <ProFrom
+                submitter={{
+                  render: () => null,
+                }}
               >
-                <Card
-                  title={intl.formatMessage(
-                    { id: 'messages.invitation.card.title' },
-                    { codeId: item.id },
-                  )}
-                  hoverable
-                  bordered={false}
-                  style={{ marginTop: 16 }}
-                >
-                  <ProForm
-                    initialValues={{
-                      sub: item.sub,
-                      message: item.message,
-                    }}
-                    labelAlign="left"
-                    layout="vertical"
-                    onFinish={async (values) => {
-                      const body = {
-                        sub: values.sub,
-                        message: values.message,
-                      } as GLOBAL.InvitationInfo;
-                      const result = await updateInvitation(item.signature, body);
-                      if (result.message === 'ok') {
-                        notification.success({
-                          message: intl.formatMessage({ id: 'messages.info.updateSuccess' }),
-                        });
-                      } else {
-                        notification.error({
-                          message: intl.formatMessage({ id: 'messages.info.updateFailed' }),
-                          description: result.message,
-                        });
-                      }
-                    }}
-                  >
-                    <ProFormText
-                      fieldProps={{
-                        id: `signature_${item.id}`,
-                        readOnly: true,
-                        suffix: isUnused ? (
-                          <a
-                            onClick={() => {
-                              const sigArea = document.querySelector(
-                                `#signature_${item.id}`,
-                              ) as HTMLInputElement;
-                              sigArea?.select();
-                              document.execCommand('copy');
-                              notification.success({
-                                message: intl.formatMessage({ id: 'messages.info.copySuccess' }),
-                              });
-                            }}
-                          >
-                            <CopyOutlined />
-                          </a>
-                        ) : (
-                          <CopyOutlined />
-                        ),
-                      }}
-                      initialValue={item.signature}
-                      label={intl.formatMessage({ id: 'messages.invitation.cardLabel' })}
-                      width="md"
-                      name="signature"
-                      disabled={!isUnused}
-                    />
-                    <Divider />
-                    <p>{intl.formatMessage({ id: 'messages.invitation.editInfoHere' })}</p>
-                    <ProFormText
-                      fieldProps={{ id: `sub_${item.id}` }}
-                      label={intl.formatMessage({ id: 'messages.invitation.inviteeLabel' })}
-                      width="md"
-                      name="sub"
-                      placeholder={intl.formatMessage({ id: 'messages.invitation.inviteeName' })}
-                    />
-                    <ProFormText
-                      fieldProps={{ id: `${item.id}_message` }}
-                      label={intl.formatMessage({ id: 'messages.invitation.inviteInfo' })}
-                      width="md"
-                      name="message"
-                      placeholder={intl.formatMessage({
-                        id: 'messages.invitation.messageToInvitee',
-                      })}
-                    />
-                  </ProForm>
-                </Card>
-              </Badge.Ribbon>
+                <ProFormText
+                  fieldProps={{
+                    id: `signature_${item.id}`,
+                    readOnly: true,
+                    suffix: (
+                      <a
+                        onClick={async () => {
+                          await navigator.clipboard.writeText(
+                            intl.formatMessage({ id: 'messages.invitation.inviteMessage' }) +
+                              item.signature,
+                          );
+                          notification.success({
+                            message: intl.formatMessage({ id: 'messages.info.copySuccess' }),
+                          });
+                        }}
+                      >
+                        <CopyOutlined />
+                      </a>
+                    ),
+                  }}
+                  initialValue={item.signature}
+                  wrapperCol={{ span: 24 }}
+                  width="md"
+                  name="signature"
+                  disabled={item.invitee_user_id !== 0} // invitation code used
+                />
+              </ProFrom>
+              <span className={styles.flexedListElement}>
+                {intl.formatMessage({ id: 'component.status.used' })}
+              </span>
             </List.Item>
           );
         }}

diff --git a/src/pages/content/PublishedPosts.tsx b/src/pages/content/PublishedPosts.tsx
@@ -116,7 +116,7 @@ export default () => {
   return (
     <PageContainer
       breadcrumb={{}}
-      title={intl.formatMessage({ id: 'messages.published.table.title' })}
+      title={intl.formatMessage({ id: 'messages.published.title' })}
       content={<FormattedDescription id="messages.published.description" />}
     >
       <ProTable<CMS.Post>