[refactor] simplify User, Staff, Admin, Log & Enrollment types & mode…

…ls based on Back-end API v6 (#214)

.github/workflows/docker.yml

@@ -50,7 +50,7 @@ jobs:
           EOF
           cat > .env.local <<EOF
           ${{ secrets.ENV_FILE }}
-          VERCEL_URL=hackathon.kaiyuanshe.cn
+          VERCEL_PROJECT_PRODUCTION_URL=hackathon.kaiyuanshe.cn
           EOF
       - name: Build and Push image
         uses: docker/build-push-action@v3

components/Activity/ActivityLogList.tsx

@@ -1,25 +1,38 @@
+import { ActivityLog } from '@kaiyuanshe/openhackathon-service';
 import { ScrollListProps } from 'mobx-restful-table';
 import { Badge, ListGroup } from 'react-bootstrap';
+import { formatDate } from 'web-utility';
 
-import { Log, LogModel } from '../../models/Activity/Log';
+import { LogModel } from '../../models/Activity/Log';
 
-export interface ActivityLogListProps extends ScrollListProps<Log> {
+export interface ActivityLogListProps extends ScrollListProps<ActivityLog> {
   store: LogModel;
 }
 
+export const OperationName = {
+  create: 'Create',
+  update: 'Update',
+  delete: 'Delete',
+};
+
 export const ActivityLogListLayout = ({
   defaultData = [],
 }: Pick<ActivityLogListProps, 'defaultData'>) => (
   <ListGroup as="ol" numbered>
-    {defaultData.map(({ id, message, activityLogType }) => (
-      <ListGroup.Item
-        key={id}
-        as="li"
-        className="d-flex justify-content-between align-items-center"
-      >
-        <div className="ms-2 me-auto">{message}</div>
-        <Badge>{activityLogType}</Badge>
-      </ListGroup.Item>
-    ))}
+    {defaultData.map(
+      ({ id, createdAt, createdBy, operation, tableName, recordId }) => (
+        <ListGroup.Item
+          key={id}
+          as="li"
+          className="d-flex justify-content-between align-items-center gap-2"
+        >
+          <time dateTime={createdAt}>{formatDate(createdAt)}</time>
+          {createdBy.name}
+          <Badge>{OperationName[operation]}</Badge>
+          <code>{tableName}</code>
+          {recordId}
+        </ListGroup.Item>
+      ),
+    )}
   </ListGroup>
 );

components/Activity/ActivityManageFrame.tsx

@@ -15,6 +15,7 @@ import {
   faUserSecret,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { StaffType } from '@kaiyuanshe/openhackathon-service';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { Fragment, PureComponent } from 'react';
@@ -27,7 +28,6 @@ import { findDeep } from '../../utils/data';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
 import { PageHead } from '../layout/PageHead';
 import { PlatformAdminFrameProps } from '../PlatformAdmin/PlatformAdminFrame';
-import { ServerSessionBox } from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
@@ -77,7 +77,8 @@ export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps>
 
     return (
       role?.isAdmin ||
-      (role?.isJudge && currentRoute.at(-1)?.roles?.includes('judge'))
+      (role?.isJudge &&
+        currentRoute.at(-1)?.roles?.includes('judge' as StaffType.Judge))
     );
   }
 
@@ -100,7 +101,8 @@ export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps>
               const active = location.pathname === path;
 
               return (
-                (role?.isAdmin || roles?.includes('judge')) && (
+                (role?.isAdmin ||
+                  roles?.includes('judge' as StaffType.Judge)) && (
                   <Nav.Link
                     key={title}
                     className="text-nowrap"

components/Activity/EnrollmentList.tsx

@@ -1,9 +1,10 @@
+import { Enrollment } from '@kaiyuanshe/openhackathon-service';
 import { ScrollList } from 'mobx-restful-table';
 import { FC, PureComponent } from 'react';
 import { Button, Form, Table } from 'react-bootstrap';
 
 import activityStore from '../../models/Activity';
-import { Enrollment, statusName } from '../../models/Activity/Enrollment';
+import { statusName } from '../../models/Activity/Enrollment';
 import { i18n } from '../../models/Base/Translation';
 import styles from '../../styles/participant.module.less';
 import { XScrollListProps } from '../layout/ScrollList';
@@ -27,9 +28,8 @@ export const EnrollmentListLayout: FC<EnrollmentListLayoutProps> = ({
         <th>#</th>
         <th>{t('user_name')}</th>
         <th>{t('mail')}</th>
-        <th>{t('login_way')}</th>
         <th>{t('phone_number')}</th>
-        <th>{t('contact_address')}</th>
+        {/* <th>{t('contact_address')}</th> */}
         <th>{t('enrollment')}</th>
         <th>{t('status')}</th>
       </tr>
@@ -38,14 +38,12 @@ export const EnrollmentListLayout: FC<EnrollmentListLayoutProps> = ({
       {defaultData.map(
         (
           {
-            user: {
+            createdBy: {
               id,
-              address,
+              // address,
               email,
-              nickname,
-              phone,
-              username,
-              registerSource,
+              mobilePhone,
+              name,
             },
             status,
             extensions,
@@ -57,13 +55,12 @@ export const EnrollmentListLayout: FC<EnrollmentListLayoutProps> = ({
             <td>{index + 1}</td>
             <td>
               <Button variant="link" onClick={() => onPopUp?.(extensions)}>
-                {nickname || username || email || phone}
+                {name || email || mobilePhone}
               </Button>
             </td>
             <td>{email}</td>
-            <td>{registerSource[0].split(':')[1]}</td>
-            <td>{phone}</td>
-            <td>{address}</td>
+            <td>{mobilePhone}</td>
+            {/* <td>{address}</td> */}
             <td>{createdAt.split('T')[0]}</td>
             <td>
               <Form.Control

components/Activity/EnrollmentStatistic.tsx

@@ -54,7 +54,7 @@ export default class EnrollmentStatisticCharts extends PureComponent<EnrollmentS
 
   render() {
     const {
-      city = {},
+      // city = {},
       status = {},
       extensions = {},
     } = this.props.store.statistic;
@@ -69,12 +69,12 @@ export default class EnrollmentStatisticCharts extends PureComponent<EnrollmentS
           <Col>
             <SVGCharts>
               <Title>{t('city_distribution')}</Title>
-              <PieSeries
+              {/* <PieSeries
                 data={Object.entries(city).map(([name, value]) => ({
                   name,
                   value,
                 }))}
-              />
+              /> */}
             </SVGCharts>
           </Col>
           <Col>

components/Team/TeamAdministratorTable.tsx

@@ -6,7 +6,6 @@ import { TeamMember } from '../../models/Activity/Team';
 import { i18n } from '../../models/Base/Translation';
 import sessionStore from '../../models/User/Session';
 import styles from '../../styles/Table.module.less';
-import { convertDatetime } from '../../utils/time';
 import { XScrollListProps } from '../layout/ScrollList';
 
 const { t } = i18n;
@@ -19,11 +18,10 @@ export interface TeamAdministratorTableLayoutProps
 
 const TableHeads = () => [
   '#',
-  t('nick_name'),
   t('mail'),
   t('phone_number'),
-  t('contact_address'),
-  t('last_login_time'),
+  // t('contact_address'),
+  // t('last_login_time'),
   t('remark'),
   t('role_type'),
 ];
@@ -49,22 +47,17 @@ export const TeamAdministratorTableLayout: FC<TeamAdministratorTableLayoutProps>
         <tbody>
           {defaultData.map(
             (
-              {
-                userId,
-                user: { address, email, lastLogin, nickname, phone, username },
-                role,
-                description,
-              },
+              { userId, user: { email, mobilePhone, name }, role, description },
               index,
             ) => (
               <tr key={userId}>
                 {[
                   index + 1,
-                  nickname || username || email || phone || '--',
+                  name || email || mobilePhone || '--',
                   email || '--',
-                  phone || '--',
-                  address || '--',
-                  convertDatetime(lastLogin),
+                  mobilePhone || '--',
+                  // address || '--',
+                  // convertDatetime(lastLogin),
                   description,
                   userId,
                 ].map((data, idx, { length }) =>

components/Team/TeamAwardCard.tsx

@@ -119,8 +119,8 @@ export class TeamAwardCard extends PureComponent<TeamAwardCardProps> {
           <span className="pe-2">{t('team_leader')}</span>
 
           <span className="text-primary">
-            <Avatar className="me-3" size={1.5} src={creator.photo} />
-            {creator.nickname}
+            <Avatar className="me-3" size={1.5} src={creator.avatar} />
+            {creator.name}
           </span>
         </a>
         {this.renderDetail()}

components/Team/TeamCard.tsx

@@ -43,8 +43,8 @@ export const TeamCard: FC<TeamCardProps> = ({
       <span className="pe-2">{t('team_leader')}</span>
 
       <span className="text-primary">
-        <Avatar className="me-3" size={1.5} src={creator.photo} />
-        {creator.nickname}
+        <Avatar className="me-3" size={1.5} src={creator.avatar} />
+        {creator.name}
       </span>
     </a>
   </div>

components/Team/TeamManageFrame.tsx

@@ -6,6 +6,7 @@ import {
   faUserSecret,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { StaffType } from '@kaiyuanshe/openhackathon-service';
 import { Loading } from 'idea-react';
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -15,7 +16,6 @@ import { Col, Nav } from 'react-bootstrap';
 
 import { activityTeamMenus } from '../../configuration/menu';
 import activityStore from '../../models/Activity';
-import { Staff } from '../../models/Activity/Staff';
 import { ErrorBaseData } from '../../models/Base';
 import { i18n } from '../../models/Base/Translation';
 import sessionStore from '../../models/User/Session';
@@ -82,7 +82,7 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
               ({ title, href, icon = 'home', roles }) =>
                 (teamMemberRole === 'admin' ||
                   (teamMemberRole &&
-                    roles?.includes(teamMemberRole as Staff['type']))) && (
+                    roles?.includes(teamMemberRole as StaffType))) && (
                   <Nav.Link
                     key={title}
                     href={`/activity/${name}/team/${tid}/manage/${href}`}
@@ -118,7 +118,7 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
     return (
       teamMemberRole === 'admin' ||
       (teamMemberRole === 'menber' &&
-        currentRoute.at(-1)?.roles?.includes('member'))
+        currentRoute.at(-1)?.roles?.includes('member' as StaffType.Member))
     );
   }
 

components/Team/TeamMemberList.tsx

@@ -12,12 +12,12 @@ export const TeamMemberListLayout = ({
   defaultData = [],
 }: Pick<TeamMemberListProps, 'defaultData'>) => (
   <ul className="list-unstyled">
-    {defaultData.map(({ userId, user: { photo, nickname } }) => (
+    {defaultData.map(({ userId, user: { avatar, name } }) => (
       <li key={userId} className="my-3">
-        <Avatar className="me-3" size={1} src={photo} />
+        <Avatar className="me-3" size={1} src={avatar} />
 
         <a href={`/user/${userId}`} className="ms-2 text-primary">
-          {nickname}
+          {name}
         </a>
       </li>
     ))}

components/Team/TeamParticipantTable.tsx

@@ -21,10 +21,9 @@ const StatusName: () => Record<TeamMember['status'], string> = () => ({
 
 const TableHeads = () => [
   '#',
-  t('nick_name'),
   t('mail'),
   t('phone_number'),
-  t('contact_address'),
+  // t('contact_address'),
   t('apply_time'),
   t('apply_role'),
   t('remark'),
@@ -50,31 +49,30 @@ export const TeamParticipantTableLayout: FC<
             description,
             role,
             status,
-            user: { address, email, nickname, phone, username },
-            userId,
+            user: { id, email, mobilePhone, name },
           },
           index,
         ) => (
-          <tr key={userId}>
+          <tr key={id}>
             {[
               index + 1,
-              nickname || username || email || phone || '--',
+              name || email || mobilePhone || '--',
               email || '--',
-              phone || '--',
-              address || '--',
+              mobilePhone || '--',
+              // address || '--',
               convertDatetime(createdAt),
               role === 'admin' ? t('admin') : t('member'),
               description,
               status,
             ].map((data, idx, { length }) =>
               idx + 1 === length ? (
-                <td key={idx + userId}>
+                <td key={id}>
                   <Form.Control
                     as="select"
                     className={styles.form}
                     disabled={status === MembershipStatus.APPROVED}
                     onChange={({ currentTarget: { value } }) =>
-                      onApprove?.(userId, value as MembershipStatus)
+                      onApprove?.(id, value as MembershipStatus)
                     }
                     defaultValue={status}
                   >
@@ -86,7 +84,7 @@ export const TeamParticipantTableLayout: FC<
                   </Form.Control>
                 </td>
               ) : (
-                <td key={idx + userId} title={data + ''}>
+                <td key={id} title={data + ''}>
                   {data}
                 </td>
               ),

components/User/ActivityAdministratorModal.tsx

@@ -1,10 +1,11 @@
+import { Staff } from '@kaiyuanshe/openhackathon-service';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FormEvent, PureComponent } from 'react';
 import { Button, Col, Form, Modal, ModalProps, Row } from 'react-bootstrap';
 import { formToJSON } from 'web-utility';
 
-import { Staff, StaffModel } from '../../models/Activity/Staff';
+import { StaffModel } from '../../models/Activity/Staff';
 import { i18n } from '../../models/Base/Translation';
 import userStore from '../../models/User';
 import { UserList } from './UserList';