[refactor] add Sign In pages for multiple OAuth platforms

biome.json

@@ -72,7 +72,8 @@
         "noAccumulatingSpread": "warn"
       },
       "security": {
-        "noGlobalEval": "error"
+        "noGlobalEval": "error",
+        "noDangerouslySetInnerHtml": "warn"
       },
       "complexity": {
         "noCommaOperator": "error"

components/Activity/ActivityList.tsx

@@ -13,6 +13,7 @@ import { ActivityCard, ActivityCardProps } from './ActivityCard';
 export interface ActivityListLayoutProps
   extends XScrollListProps<Hackathon>,
     Pick<ActivityCardProps, 'onPublish' | 'onDelete'> {
+  store?: ActivityModel;
   type?: ActivityListType;
   size?: 'sm' | 'lg';
   userId?: number;
@@ -29,7 +30,7 @@ export const ActivityListLayout: FC<ActivityListLayoutProps> = ({
     className="g-4"
     xs={1}
     sm={2}
-    {...(size === 'sm' ? {} : !size ? { lg: 3, xxl: 4 } : { lg: 4, xxl: 6 })}
+    {...(size === 'sm' ? {} : size ? { lg: 4, xxl: 6 } : { lg: 3, xxl: 4 })}
   >
     {defaultData.map(item => (
       <Col key={item.name + item.id}>
@@ -49,7 +50,7 @@ export const ActivityListLayout: FC<ActivityListLayoutProps> = ({
 export type ActivityListProps = ActivityListLayoutProps;
 
 export default class ActivityList extends PureComponent<ActivityListProps> {
-  store = new ActivityModel();
+  store = this.props.store || new ActivityModel();
 
   componentDidMount() {
     if (this.props.type === 'admin' && !platformAdmin.isPlatformAdmin)

components/Activity/AwardList.tsx

@@ -5,12 +5,12 @@ import { ObservedComponent } from 'mobx-react-helper';
 import { Column, RestTable } from 'mobx-restful-table';
 import { Image } from 'react-bootstrap';
 
-import { Award, AwardModel } from '../../models/Activity/Award';
+import { Award, AwardModel, AwardTarget } from '../../models/Activity/Award';
 import { i18n, I18nContext } from '../../models/Base/Translation';
 
 export const AwardTargetName = ({ t }: typeof i18n) => ({
-  individual: t('personal'),
-  team: t('team'),
+  [AwardTarget.Individual]: t('personal'),
+  [AwardTarget.Team]: t('team'),
 });
 
 @observer
@@ -27,7 +27,7 @@ export class AwardList extends ObservedComponent<{ store: AwardModel }, typeof i
       {
         key: 'target',
         renderHead: t('type'),
-        renderBody: ({ target }) => AwardTargetName(i18n)[target],
+        renderBody: ({ target }) => target && AwardTargetName(i18n)[target],
       },
       {
         key: 'pictures',

components/Team/TeamAwardAssignment.tsx

@@ -13,7 +13,7 @@ export const TeamAwardAssignmentLayout: FC<TeamAwardAssignmentLayoutProps> = ({
 }) => (
   <>
     <ol>
-      {defaultData.map(({ updatedAt, id, description, award: { name } }) => (
+      {defaultData.map(({ id, award: { name } }) => (
         <li key={id} className="list-unstyled">
           {name}
         </li>

models/Activity/Award.ts

@@ -1,24 +1,14 @@
-import { User, Base, Media, Team } from '@freecodecamp-chengdu/hop-service';
+import {
+  Award,
+  AwardAssignment,
+  AwardTarget,
+} from '@freecodecamp-chengdu/hop-service';
 import { ListModel, Stream, toggle } from 'mobx-restful';
 
 import { createListStream, InputData, TableModel } from '../Base';
 import sessionStore from '../User/Session';
 
-export interface Award extends Record<'hackathonName' | 'name' | 'description', string>, Base {
-  quantity: number;
-  target: 'team' | 'individual';
-  pictures: Media[];
-}
-
-export interface AwardAssignment
-  extends
-    Omit<Base, 'id'>,
-    Omit<Award, 'name' | 'quantity' | 'target' | 'pictures'>,
-    Record<'assignmentId' | 'assigneeId' | 'awardId', number> {
-  user?: User;
-  team?: Team;
-  award: Award;
-}
+export { Award, AwardAssignment, AwardTarget };
 
 export class AwardModel extends TableModel<Award> {
   client = sessionStore.client;

models/Activity/index.ts

@@ -1,13 +1,15 @@
 import {
   Enrollment,
   Hackathon,
+  HackathonFilter,
   HackathonStatus,
+  ListChunk,
   Question,
   Questionnaire,
 } from '@freecodecamp-chengdu/hop-service';
 import { action, observable } from 'mobx';
 import { persist, restore, toggle } from 'mobx-restful';
-
+import { buildURLData } from 'web-utility';
 import { isServer } from '../../configuration';
 import { Filter, InputData, TableModel } from '../Base';
 import { GitModel } from '../Git';
@@ -158,10 +160,26 @@ export class ActivityModel extends TableModel<Hackathon, ActivityFilter> {
 
   @toggle('uploading')
   async signOne(name: string, form: Enrollment['form'] = []) {
-    await this.client.put(`${this.baseURI}/${name}/enrollment`, { form });
+    await this.client.post(`${this.baseURI}/${name}/enrollment`, { form });
 
     return this.currentEnrollment?.getSessionOne();
   }
 }
 
+export class UserActivityModel extends ActivityModel {
+  constructor(
+    public userId: number,
+    public role: 'creator' | 'staff' | 'enrollee',
+  ) {
+    super();
+  }
+
+  async loadPage(pageIndex: number, pageSize: number, filter: HackathonFilter) {
+    const { body } = await this.client.get<ListChunk<Hackathon>>(
+      `user/${this.userId}/hackathon/${this.role}?${buildURLData({ ...filter, pageIndex, pageSize })}`,
+    );
+    return { pageData: body!.list, totalCount: body!.count };
+  }
+}
+
 export default new ActivityModel();

models/User/index.ts

@@ -10,7 +10,7 @@ export class UserModel extends TableModel<User, UserFilter> {
   baseURI = 'user';
 
   async getUserTopList() {
-    const { body } = await this.client.get<UserRankListChunk>(`activity-log/user-rank`);
+    const { body } = await this.client.get<UserRankListChunk>('activity-log/user-rank');
     return body!.list;
   }
 }

pages/activity/[name]/index.tsx

@@ -29,11 +29,13 @@ 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';
+import { I18nContext, i18n } from '../../../models/Base/Translation';
 import sessionStore from '../../../models/User/Session';
 import { convertDatetime } from '../../../utils/time';
 
-const ChinaMap = dynamic(() => import('../../../components/ChinaMap'), { ssr: false });
+const ChinaMap = dynamic(() => import('../../../components/ChinaMap'), {
+  ssr: false,
+});
 
 interface ActivityPageProps {
   activity: Hackathon;
@@ -51,7 +53,9 @@ export const getServerSideProps = compose<{ name?: string }, ActivityPageProps>(
       activityStore.organizationOf(name).getList(),
     ]);
 
-    return { props: JSON.parse(JSON.stringify({ activity, organizationList })) };
+    return {
+      props: JSON.parse(JSON.stringify({ activity, organizationList })),
+    };
   },
 );
 
@@ -273,14 +277,8 @@ export default class ActivityPage extends ObservedComponent<ActivityPageProps, t
         <Row className="mt-3">
           <Col lg={9} md={12} sm={12} className="mb-3">
             <Tabs defaultActiveKey="detail" id="activity-detail-tabs">
-              <Tab
-                as="article"
-                className="pt-2"
-                eventKey="detail"
-                title={t('hackathon_detail')}
-                dangerouslySetInnerHTML={{ __html: detail }}
-              >
-                {/*todo update no data*/}
+              <Tab className="pt-2" eventKey="detail" title={t('hackathon_detail')}>
+                <article dangerouslySetInnerHTML={{ __html: detail }} />
               </Tab>
               <Tab className="pt-2" eventKey="log" title={t('latest_news')}>
                 <AnnouncementList store={myMessage} />
@@ -304,15 +302,15 @@ export default class ActivityPage extends ObservedComponent<ActivityPageProps, t
                   renderList={allItems => <TeamListLayout defaultData={allItems} />}
                 />
               </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 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>
+              )}
+            </Tabs>
           </Col>
           <Col className="d-flex flex-column">
             {organizationList.length > 0 && (

pages/activity/[name]/manage/evaluation.tsx

@@ -1,6 +1,5 @@
 import { observer } from 'mobx-react';
 import { ObservedComponent } from 'mobx-react-helper';
-import { NewData } from 'mobx-restful';
 import { compose, RouteProps, router } from 'next-ssr-middleware';
 import { FC, FormEvent, useContext } from 'react';
 import { Button, Col, Form, InputGroup, Row } from 'react-bootstrap';
@@ -9,7 +8,7 @@ import { formToJSON } from 'web-utility';
 import { ActivityManageFrame } from '../../../../components/Activity/ActivityManageFrame';
 import { TeamAwardList } from '../../../../components/Team/TeamAwardList';
 import activityStore from '../../../../models/Activity';
-import { AwardAssignment } from '../../../../models/Activity/Award';
+import { AwardTarget } from '../../../../models/Activity/Award';
 import { i18n, I18nContext } from '../../../../models/Base/Translation';
 import { sessionGuard } from '../../../api/core';
 
@@ -53,14 +52,13 @@ class EvalationEditor extends ObservedComponent<EvaluationPageProps, typeof i18n
 
     const { awardStore, store } = this,
       form = event.currentTarget,
-      data = formToJSON<NewData<AwardAssignment>>(form);
+      { award: awardId } = formToJSON<{ award: number }>(form);
 
-    await awardStore.getOne(data.awardId!);
+    await awardStore.getOne(awardId);
 
-    const assignmentStore = awardStore.assignmentOf(data.awardId!),
-      assigneeId = store.currentOne.id;
+    const assignmentStore = awardStore.assignmentOf(awardId);
 
-    await assignmentStore.updateOne({ assigneeId });
+    await assignmentStore.updateOne({ team: store.currentOne });
     await store.refreshList();
 
     store.clearCurrent();
@@ -93,14 +91,14 @@ class EvalationEditor extends ObservedComponent<EvaluationPageProps, typeof i18n
         <ul className="list-unstyled">
           {allItems.map(
             ({ id, name, quantity, target }) =>
-              target === 'team' && (
+              target === AwardTarget.Team && (
                 <li key={id} className="d-flex mx-2 my-3">
                   {awardTeamId ? (
                     <Form.Check
                       key={id}
                       type="radio"
                       label={name}
-                      name="awardId"
+                      name="award"
                       value={id}
                       required
                     />

pages/index.tsx

@@ -10,7 +10,7 @@ import { Badge, Button, Card, Carousel, Col, Container, Image, Row } from 'react
 import { ActivityListLayout } from '../components/Activity/ActivityList';
 import { PageHead } from '../components/layout/PageHead';
 import { ActivityModel } from '../models/Activity';
-import { i18n, I18nContext } from '../models/Base/Translation';
+import { I18nContext, i18n } from '../models/Base/Translation';
 import { UserModel } from '../models/User';
 import styles from './index.module.less';
 
@@ -143,7 +143,7 @@ export default class HomePage extends ObservedComponent<HomePageProps, typeof i1
                   {this.renderPrimaryActions()}
                 </nav>
 
-                <ul className="d-flex flex-wrap gap-4 mt-5">
+                <ul className="list-unstyled d-flex flex-wrap gap-4 mt-5">
                   {this.stats.map(({ label, value }) => (
                     <li key={label}>
                       <div className="display-6 fw-semibold">{value}</div>

pages/user/[id].tsx

@@ -8,9 +8,10 @@ import { FC, useContext, useEffect, useState } from 'react';
 import { Badge, Button, Card, Col, Container, Image, Nav, Row, Tab } from 'react-bootstrap';
 
 import { PageHead } from '../../components/layout/PageHead';
+import { UserActivityModel } from '../../models/Activity';
 import { I18nContext } from '../../models/Base/Translation';
-import sessionStore from '../../models/User/Session';
 import userStore from '../../models/User';
+import sessionStore from '../../models/User/Session';
 import styles from './[id].module.less';
 
 const ActivityList = dynamic(() => import('../../components/Activity/ActivityList'), {
@@ -40,6 +41,7 @@ const UserDetailPage: FC<PublicUser> = observer(({ id, name, avatar }) => {
   const { user } = sessionStore;
   const [isOwner, setIsOwner] = useState(false);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: user?.id is redundant when id is already listed
   useEffect(() => {
     setIsOwner(user?.id === id);
   }, [id, user?.id]);
@@ -154,13 +156,13 @@ const UserDetailPage: FC<PublicUser> = observer(({ id, name, avatar }) => {
 
                   <Tab.Content>
                     <Tab.Pane eventKey="enrolled">
-                      <ActivityList type="enrolled" userId={id} />
+                      <ActivityList store={new UserActivityModel(id, 'enrollee')} />
                     </Tab.Pane>
                     <Tab.Pane eventKey="created">
-                      <ActivityList type="created" userId={id} />
+                      <ActivityList store={new UserActivityModel(id, 'creator')} />
                     </Tab.Pane>
                     <Tab.Pane eventKey="admin">
-                      <ActivityList type="admin" userId={id} />
+                      <ActivityList store={new UserActivityModel(id, 'staff')} />
                     </Tab.Pane>
                   </Tab.Content>
                 </Tab.Container>