[add] Team Rank component

Signed-off-by: TechQuery <[email protected]>

Author: TechQuery

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';

components/Team/TeamList.tsx

@@ -1,17 +1,14 @@
-import { Team } from '@kaiyuanshe/openhackathon-service';
 import { ScrollListProps } from 'mobx-restful-table';
 import { Col, Row } from 'react-bootstrap';
 
-import { TeamModel } from '../../models/Activity/Team';
+import { Team, TeamModel } from '../../models/Activity/Team';
 import { TeamCard } from './TeamCard';
 
 export interface TeamListProps extends ScrollListProps<Team> {
   store: TeamModel;
 }
 
-export const TeamListLayout = ({
-  defaultData = [],
-}: Pick<TeamListProps, 'defaultData'>) => (
+export const TeamListLayout = ({ defaultData = [] }: Pick<TeamListProps, 'defaultData'>) => (
   <Row className="g-4" xs={1} md={2} lg={2} xxl={2}>
     {defaultData.map(item => (
       <Col key={item.id}>

components/Team/TeamRank.tsx

@@ -0,0 +1,47 @@
+import { UserRankView } from 'idea-react';
+import { observer } from 'mobx-react';
+import { ObservedComponent } from 'mobx-react-helper';
+
+import { TeamModel } from '../../models/Activity/Team';
+import { i18n, I18nContext } from '../../models/Base/Translation';
+
+export interface TeamRankProps {
+  activityName: string;
+  teamStore: TeamModel;
+}
+
+@observer
+export class TeamRank extends ObservedComponent<TeamRankProps, typeof i18n> {
+  static contextType = I18nContext;
+
+  componentDidMount() {
+    this.props.teamStore.getAll();
+  }
+
+  render() {
+    const { t } = this.observedContext,
+      { activityName, teamStore } = this.props;
+    const { allItems } = teamStore;
+
+    return (
+      <UserRankView
+        style={{
+          // @ts-expect-error remove in React 19
+          '--logo-image':
+            'url(https://hackathon-api.static.kaiyuanshe.cn/6342619375fa1817e0f56ce1/2022/10/09/logo22.jpg)',
+        }}
+        title={t('hacker_pavilion')}
+        rank={allItems.map(
+          ({ id, displayName: name, createdBy: { avatar, email }, score = 0 }) => ({
+            id,
+            name,
+            avatar,
+            email,
+            score,
+          }),
+        )}
+        linkOf={({ id }) => `/hackathon/${activityName}/team/${id}`}
+      />
+    );
+  }
+}

models/Activity/Team.ts

@@ -1,10 +1,11 @@
 import {
   BaseFilter,
-  Team,
+  Team as _Team,
   TeamMember,
   TeamMemberFilter,
   TeamWork,
   TeamWorkFilter,
+  Score,
 } from '@kaiyuanshe/openhackathon-service';
 import { action, computed, observable } from 'mobx';
 import { ListModel, persist, restore, Stream, toggle } from 'mobx-restful';
@@ -17,6 +18,12 @@ import sessionStore from '../User/Session';
 import { AwardAssignment } from './Award';
 import { EvaluationModel } from './Evaluation';
 
+export interface Team extends _Team {
+  scores?: Score[];
+  score?: number;
+  rank?: number;
+}
+
 export type TeamFilter = Filter<Team> & BaseFilter;
 
 export type MemberFilter = Filter<TeamMember> & TeamMemberFilter;

models/Activity/index.ts

@@ -88,6 +88,12 @@ export class ActivityModel extends TableModel<Hackathon, ActivityFilter> {
     return (this.currentOrganization = new OrganizerModel(`hackathon/${name}`));
   }
 
+  static isEvaluatable({ judgeStartedAt, judgeEndedAt }: Hackathon) {
+    const now = Date.now();
+
+    return +new Date(judgeStartedAt) <= now && now <= +new Date(judgeEndedAt);
+  }
+
   @toggle('uploading')
   async updateOne(data: InputData<Hackathon>, name?: string) {
     if (!name) {

pages/activity/[name]/index.tsx

@@ -18,13 +18,15 @@ import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { Button, Carousel, Col, Container, Image, Row, Tab, Tabs } from 'react-bootstrap';
 
 import { getActivityStatusText } from '../../../components/Activity/ActivityEntry';
+import { AwardList } from '../../../components/Activity/AwardList';
 import { CommentBox } from '../../../components/CommentBox';
 import { PageHead } from '../../../components/layout/PageHead';
 import { AnnouncementList } from '../../../components/Message/MessageList';
 import { OrganizationCard } from '../../../components/Organization/OrganizationCard';
 import { TeamCard } from '../../../components/Team/TeamCard';
 import { TeamCreateModal } from '../../../components/Team/TeamCreateModal';
 import { TeamListLayout } from '../../../components/Team/TeamList';
+import { TeamRank } from '../../../components/Team/TeamRank';
 import { isServer } from '../../../configuration';
 import activityStore, { ActivityModel } from '../../../models/Activity';
 import { i18n, I18nContext } from '../../../models/Base/Translation';
@@ -64,6 +66,7 @@ const StatusName = ({ t }: typeof i18n): Record<EnrollmentStatus, string> => ({
 export default class ActivityPage extends ObservedComponent<ActivityPageProps, typeof i18n> {
   static contextType = I18nContext;
 
+  awardStore = activityStore.awardOf(this.props.activity.name);
   logStore = activityStore.logOf(this.props.activity.id);
   enrollmentStore = activityStore.enrollmentOf(this.props.activity.name);
   teamStore = activityStore.teamOf(this.props.activity.name);
@@ -231,9 +234,9 @@ export default class ActivityPage extends ObservedComponent<ActivityPageProps, t
 
   render() {
     const { t } = this.observedContext,
-      { name, displayName, tags, banners, location, detail } = this.props.activity,
+      { activity, organizationList } = this.props;
+    const { name, displayName, tags, banners, location, detail } = activity,
       { showCreateTeam, loading } = this,
-      { organizationList } = this.props,
       myTeam = activityStore.currentTeam?.sessionOne,
       myMessage = this.messageStore;
 
@@ -302,6 +305,14 @@ export default class ActivityPage extends ObservedComponent<ActivityPageProps, t
                 />
               </Tab>
             </Tabs>
+            <Tab eventKey="award" title={t('award')} className="pt-2">
+              <AwardList store={this.awardStore} />
+            </Tab>
+            {ActivityModel.isEvaluatable(activity) && (
+              <Tab eventKey="team-rank" title={t('works_awards')} className="pt-2">
+                <TeamRank activityName={name} teamStore={this.teamStore} />
+              </Tab>
+            )}
           </Col>
           <Col className="d-flex flex-column">
             {organizationList.length > 0 && (

pages/activity/[name]/team/[tid]/index.tsx

@@ -92,14 +92,6 @@ export default class TeamPage extends ObservedComponent<TeamPageProps, typeof i1
     return activityStore.currentTeam?.sessionOne?.id === this.observedProps.team.id;
   }
 
-  @computed
-  get evaluatable() {
-    const now = Date.now(),
-      { judgeStartedAt, judgeEndedAt } = this.observedProps.activity;
-
-    return +new Date(judgeStartedAt) <= now && now <= +new Date(judgeEndedAt);
-  }
-
   async componentDidMount() {
     if (isServer()) return;
 
@@ -154,14 +146,9 @@ export default class TeamPage extends ObservedComponent<TeamPageProps, typeof i1
 
   render() {
     const { t } = this.observedContext,
-      { name, displayName: hackathonDisplayName } = this.props.activity,
-      {
-        id,
-        displayName,
-        description,
-        createdBy: { avatar },
-      } = this.props.team,
-      { teamMemberList, teamWorkList } = this.props,
+      { activity, team, teamMemberList, teamWorkList } = this.props;
+    const { name, displayName: hackathonDisplayName } = activity,
+      { id, displayName, description, createdBy } = team,
       {
         currentRoute,
         currentUserInThisTeam,
@@ -170,7 +157,6 @@ export default class TeamPage extends ObservedComponent<TeamPageProps, typeof i1
         handleJoinTeam,
         isShowJoinTeamBtn,
         isShowLeaveTeamBtn,
-        evaluatable,
       } = this;
 
     return (
@@ -185,7 +171,7 @@ export default class TeamPage extends ObservedComponent<TeamPageProps, typeof i1
               <Card.Header className="bg-white">
                 <Card.Img
                   variant="top"
-                  src={avatar}
+                  src={createdBy.avatar}
                   className="d-block m-auto"
                   style={{ maxWidth: '15rem' }}
                 />
@@ -241,8 +227,9 @@ export default class TeamPage extends ObservedComponent<TeamPageProps, typeof i1
             </Tabs>
           </Col>
         </Row>
-        {evaluatable && <EvaluationForm activityName={name} teamId={id} />}
-
+        {ActivityModel.isEvaluatable(activity) && (
+          <EvaluationForm activityName={name} teamId={id} />
+        )}
         <CommentBox />
 
         <JoinTeamModal