[refactor] simplify Organizer, Team & Team Member types & models based on Back-end v6 API

.github/workflows/docker.yml

@@ -20,22 +20,25 @@ jobs:
 
       - name: Docker meta
         id: docker_meta
-        uses: crazy-max/ghaction-docker-meta@v1
+        uses: docker/metadata-action@v5
         with:
-          images: openhackathon/oph-web,kysprodacr.azurecr.cn/oph-web # list of Docker images to use as base name for tags
-          tag-sha: true # add git short SHA as Docker tag
+          # list of Docker images to use as base name for tags
+          images: openhackathon/oph-web,kysprodacr.azurecr.cn/oph-web
+          # add Git short SHA as Docker tag
+          tags: |
+            type=sha
 
-      - uses: docker/setup-qemu-action@v2
+      - uses: docker/setup-qemu-action@v3
 
-      - uses: docker/setup-buildx-action@v2
+      - uses: docker/setup-buildx-action@v3
 
-      - uses: docker/login-action@v2
+      - uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_ACCESSTOKEN }}
 
       - name: Login to Azure Container Registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: kysprodacr.azurecr.cn
           username: ${{ secrets.REGISTRY_USERNAME }}
@@ -53,15 +56,15 @@ jobs:
           VERCEL_PROJECT_PRODUCTION_URL=hackathon.kaiyuanshe.cn
           EOF
       - name: Build and Push image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Dockerfile
           push: true
           tags: ${{ steps.docker_meta.outputs.tags }}
           labels: ${{ steps.docker_meta.outputs.labels }}
 
-      - uses: benjlevesque/short-sha@v1.2
+      - uses: benjlevesque/short-sha@v3.0
         id: short-sha
         with:
           length: 7

components/Activity/ActivityLogList.tsx

@@ -1,5 +1,6 @@
 import { ActivityLog } from '@kaiyuanshe/openhackathon-service';
 import { ScrollListProps } from 'mobx-restful-table';
+import { FC } from 'react';
 import { Badge, ListGroup } from 'react-bootstrap';
 import { formatDate } from 'web-utility';
 
@@ -15,9 +16,9 @@ export const OperationName = {
   delete: 'Delete',
 };
 
-export const ActivityLogListLayout = ({
-  defaultData = [],
-}: Pick<ActivityLogListProps, 'defaultData'>) => (
+export const ActivityLogListLayout: FC<
+  Pick<ActivityLogListProps, 'defaultData'>
+> = ({ defaultData = [] }) => (
   <ListGroup as="ol" numbered>
     {defaultData.map(
       ({ id, createdAt, createdBy, operation, tableName, recordId }) => (

components/Organization/ActivityOrganizationModal.tsx

@@ -1,29 +1,29 @@
+import { Organizer } from '@kaiyuanshe/openhackathon-service';
 import { observer } from 'mobx-react';
-import { createRef, FormEvent, PureComponent } from 'react';
+import { Component, createRef, FormEvent } from 'react';
 import { Button, Form, Modal, ModalProps } from 'react-bootstrap';
 import { formToJSON } from 'web-utility';
 
 import {
-  Organization,
-  OrganizationModel,
-  OrganizationTypeName,
+  OrganizerModel,
+  OrganizerTypeName,
 } from '../../models/Activity/Organization';
 import { i18n } from '../../models/Base/Translation';
 
 const { t } = i18n;
 
 export interface OrganizationModalProps
   extends Pick<ModalProps, 'show' | 'onHide'> {
-  store: OrganizationModel;
+  store: OrganizerModel;
   onSave?: () => any;
 }
 
-interface OrganizationForm extends Organization {
+interface OrganizerForm extends Organizer {
   logoURI: string;
 }
 
 @observer
-export class OrganizationModal extends PureComponent<OrganizationModalProps> {
+export class OrganizationModal extends Component<OrganizationModalProps> {
   private form = createRef<HTMLFormElement>();
 
   handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
@@ -33,10 +33,7 @@ export class OrganizationModal extends PureComponent<OrganizationModalProps> {
     const { store, onSave } = this.props;
 
     const { name, description, type, logoURI, url } = formToJSON<
-      Pick<
-        OrganizationForm,
-        'name' | 'description' | 'type' | 'logoURI' | 'url'
-      >
+      Pick<OrganizerForm, 'name' | 'description' | 'type' | 'logoURI' | 'url'>
     >(event.currentTarget);
 
     await store.updateOne({
@@ -90,7 +87,7 @@ export class OrganizationModal extends PureComponent<OrganizationModalProps> {
           <Form.Group className="mt-2" controlId="type">
             <Form.Label>{t('type')}</Form.Label>
             <Form.Select name="type">
-              {Object.entries(OrganizationTypeName).map(([key, value]) => (
+              {Object.entries(OrganizerTypeName).map(([key, value]) => (
                 <option key={key} value={key}>
                   {value}
                 </option>

components/Organization/OrganizationCard.tsx

@@ -1,17 +1,16 @@
+import { Organizer } from '@kaiyuanshe/openhackathon-service';
+import { FC } from 'react';
 import { Card } from 'react-bootstrap';
 
-import {
-  Organization,
-  OrganizationTypeName,
-} from '../../models/Activity/Organization';
+import { OrganizerTypeName } from '../../models/Activity/Organization';
 
-export const OrganizationCard = ({
+export const OrganizationCard: FC<Organizer> = ({
   name,
   description,
   type,
   logo,
   url,
-}: Organization) => (
+}) => (
   <Card>
     <Card.Img
       className="p-3"
@@ -21,7 +20,7 @@ export const OrganizationCard = ({
     />
     <Card.Body>
       <Card.Title>{name}</Card.Title>
-      <Card.Subtitle>{OrganizationTypeName[type]}</Card.Subtitle>
+      <Card.Subtitle>{OrganizerTypeName[type]}</Card.Subtitle>
       <Card.Text className="border-top my-2 pt-2">{description}</Card.Text>
       {url && <a className="stretched-link" href={url} />}
     </Card.Body>

components/Organization/OrganizationList.tsx

@@ -1,18 +1,16 @@
+import { Organizer } from '@kaiyuanshe/openhackathon-service';
 import { FC } from 'react';
 import { Form, Image, Table } from 'react-bootstrap';
 
-import {
-  Organization,
-  OrganizationTypeName,
-} from '../../models/Activity/Organization';
+import { OrganizerTypeName } from '../../models/Activity/Organization';
 import { i18n } from '../../models/Base/Translation';
 import styles from '../../styles/Table.module.less';
 import { XScrollListProps } from '../layout/ScrollList';
 import { OrganizationCard } from './OrganizationCard';
 
 const { t } = i18n;
 
-export const OrganizationListLayout: FC<XScrollListProps<Organization>> = ({
+export const OrganizationListLayout: FC<XScrollListProps<Organizer>> = ({
   defaultData = [],
 }) => (
   <ul className="list-unstyled">
@@ -24,7 +22,7 @@ export const OrganizationListLayout: FC<XScrollListProps<Organization>> = ({
   </ul>
 );
 
-export const OrganizationTableLayout: FC<XScrollListProps<Organization>> = ({
+export const OrganizationTableLayout: FC<XScrollListProps<Organizer>> = ({
   defaultData = [],
   selectedIds = [],
   onSelect,
@@ -88,7 +86,7 @@ export const OrganizationTableLayout: FC<XScrollListProps<Organization>> = ({
           </td>
           <td>{name}</td>
           <td>{description}</td>
-          <td>{OrganizationTypeName[type]}</td>
+          <td>{OrganizerTypeName[type]}</td>
           <td>
             {logo! && (
               <Image

components/Team/TeamAdministratorTable.tsx

@@ -1,8 +1,8 @@
+import { TeamMember, TeamMemberRole } from '@kaiyuanshe/openhackathon-service';
 import { observer } from 'mobx-react';
 import { FC } from 'react';
 import { Form, Table } from 'react-bootstrap';
 
-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';
@@ -12,7 +12,7 @@ const { t } = i18n;
 
 export interface TeamAdministratorTableLayoutProps
   extends XScrollListProps<TeamMember> {
-  onUpdateRole?: (userId: number, role: 'admin' | 'member') => any;
+  onUpdateRole?: (userId: number, role: TeamMemberRole) => any;
   onPopUpUpdateRoleModal?: (userId: number) => any;
 }
 
@@ -47,10 +47,10 @@ export const TeamAdministratorTableLayout: FC<TeamAdministratorTableLayoutProps>
         <tbody>
           {defaultData.map(
             (
-              { userId, user: { email, mobilePhone, name }, role, description },
+              { user: { id, email, mobilePhone, name }, role, description },
               index,
             ) => (
-              <tr key={userId}>
+              <tr key={id}>
                 {[
                   index + 1,
                   name || email || mobilePhone || '--',
@@ -59,16 +59,16 @@ export const TeamAdministratorTableLayout: FC<TeamAdministratorTableLayoutProps>
                   // address || '--',
                   // convertDatetime(lastLogin),
                   description,
-                  userId,
+                  id,
                 ].map((data, idx, { length }) =>
                   idx + 1 === length ? (
-                    <td key={idx + userId}>
+                    <td key={idx + id}>
                       <Form.Control
                         as="select"
                         className={styles.form}
-                        disabled={currentUserId === userId}
+                        disabled={currentUserId === id}
                         onChange={({ currentTarget: { value } }) =>
-                          onUpdateRole?.(userId, value as TeamMember['role'])
+                          onUpdateRole?.(id, value as TeamMemberRole)
                         }
                         defaultValue={role}
                       >
@@ -80,7 +80,7 @@ export const TeamAdministratorTableLayout: FC<TeamAdministratorTableLayoutProps>
                       </Form.Control>
                     </td>
                   ) : (
-                    <td key={idx + userId} title={data + ''}>
+                    <td key={idx + id} title={data + ''}>
                       {data}
                     </td>
                   ),

components/Team/TeamAwardCard.tsx

@@ -1,13 +1,13 @@
 import { faAward } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Base, Team } from '@kaiyuanshe/openhackathon-service';
 import classNames from 'classnames';
 import { Avatar } from 'idea-react';
 import { ScrollList } from 'mobx-restful-table';
 import { PureComponent } from 'react';
 import { Accordion, Button } from 'react-bootstrap';
 
 import activityStore from '../../models/Activity';
-import { Team } from '../../models/Activity/Team';
 import { i18n } from '../../models/Base/Translation';
 import { TeamAwardAssignmentLayout } from './TeamAwardAssignment';
 import { TeamMemberListLayout } from './TeamMemberList';
@@ -16,35 +16,27 @@ import { SimpleTeamWorkListLayout } from './TeamWork';
 const { t } = i18n;
 
 export interface TeamAwardCardProps
-  extends Pick<
-    Team,
-    | 'hackathonName'
-    | 'displayName'
-    | 'creatorId'
-    | 'creator'
-    | 'membersCount'
-    | 'id'
-  > {
+  extends Omit<Team, Exclude<keyof Base, 'id'>> {
   className?: string;
   onAssign: (id: number) => any;
   onDelete?: (id: number) => any;
 }
 
 export class TeamAwardCard extends PureComponent<TeamAwardCardProps> {
   memberStore = activityStore
-    .teamOf(this.props.hackathonName)
+    .teamOf(this.props.hackathon.name)
     .memberOf(this.props.id);
 
   workStore = activityStore
-    .teamOf(this.props.hackathonName)
+    .teamOf(this.props.hackathon.name)
     .workOf(this.props.id);
 
   assignmentStore = activityStore
-    .teamOf(this.props.hackathonName)
+    .teamOf(this.props.hackathon.name)
     .assignmentOf(this.props.id);
 
   renderDetail() {
-    const { id, hackathonName, membersCount } = this.props;
+    const { membersCount } = this.props;
 
     return (
       <Accordion className="my-3" flush>
@@ -100,27 +92,26 @@ export class TeamAwardCard extends PureComponent<TeamAwardCardProps> {
     const {
       className,
       id,
-      hackathonName,
+      hackathon: { name },
       displayName,
-      creatorId,
-      creator,
+      createdBy,
       onAssign,
     } = this.props;
 
     return (
       <div className={classNames('border p-2', className)}>
         <a
           className="fs-4 text-primary text-truncate"
-          href={`/activity/${hackathonName}/team/${id}/`}
+          href={`/activity/${name}/team/${id}/`}
         >
           {displayName}
         </a>
-        <a className="d-flex my-3" href={`/user/${creatorId}`}>
+        <a className="d-flex my-3" href={`/user/${createdBy.id}`}>
           <span className="pe-2">{t('team_leader')}</span>
 
           <span className="text-primary">
-            <Avatar className="me-3" size={1.5} src={creator.avatar} />
-            {creator.name}
+            <Avatar className="me-3" size={1.5} src={createdBy.avatar} />
+            {createdBy.name}
           </span>
         </a>
         {this.renderDetail()}

components/Team/TeamAwardList.tsx

@@ -1,8 +1,8 @@
+import { Team } from '@kaiyuanshe/openhackathon-service';
 import { ScrollList, ScrollListProps } from 'mobx-restful-table';
 import { FC, PureComponent } from 'react';
 import { Col, Row } from 'react-bootstrap';
 
-import { Team } from '../../models/Activity/Team';
 import { i18n } from '../../models/Base/Translation';
 import { XScrollListProps } from '../layout/ScrollList';
 import { TeamAwardCard } from './TeamAwardCard';