[refactor] simplify Announcement types & model

[add] GitHub PR badges

.github/pr-badge.yml

@@ -0,0 +1,17 @@
+- icon: visualstudio
+  label: 'GitHub.dev'
+  message: 'PR-$prNumber'
+  color: 'blue'
+  url: 'https://github.dev/$owner/$repo/pull/$prNumber'
+
+- icon: github
+  label: 'GitHub codespaces'
+  message: 'PR-$prNumber'
+  color: 'black'
+  url: 'https://codespaces.new/$owner/$repo/pull/$prNumber'
+
+- icon: git
+  label: 'GitPod.io'
+  message: 'PR-$prNumber'
+  color: 'orange'
+  url: 'https://gitpod.io/?autostart=true#https://github.com/$owner/$repo/pull/$prNumber'

components/Message/MessageList.tsx

@@ -1,29 +1,30 @@
 import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Announcement } from '@kaiyuanshe/openhackathon-service';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ScrollList, ScrollListProps } from 'mobx-restful-table';
-import { FC, PureComponent } from 'react';
+import { Component, FC, PureComponent } from 'react';
 import { Button, Form, Table } from 'react-bootstrap';
 
 import {
-  Message,
-  MessageType,
-  MessageTypeName,
+  AnnouncementType,
+  AnnouncementTypeName,
 } from '../../models/Activity/Message';
 import { i18n } from '../../models/Base/Translation';
 import styles from '../../styles/participant.module.less';
 import { XScrollListProps } from '../layout/ScrollList';
 
 const { t } = i18n;
 
-export interface MessageListLayoutProps extends XScrollListProps<Message> {
+export interface AnnouncementListLayoutProps
+  extends XScrollListProps<Announcement> {
   hideControls?: boolean;
   onEdit?: (id: number) => any;
   onDelete?: (id: number) => any;
 }
 
-export const MessageListLayout: FC<MessageListLayoutProps> = ({
+export const AnnouncementListLayout: FC<AnnouncementListLayoutProps> = ({
   defaultData = [],
   selectedIds = [],
   hideControls,
@@ -90,7 +91,7 @@ export const MessageListLayout: FC<MessageListLayoutProps> = ({
           </td>
           <td>{title}</td>
           <td>{content}</td>
-          <td>{MessageTypeName()[MessageType.Hackathon]}</td>
+          <td>{AnnouncementTypeName()[AnnouncementType.Hackathon]}</td>
           <td hidden={hideControls}>
             <Button
               className="me-2"
@@ -110,11 +111,14 @@ export const MessageListLayout: FC<MessageListLayoutProps> = ({
   </Table>
 );
 
-export type MessageListProps = Pick<ScrollListProps<Message>, 'store'> &
-  MessageListLayoutProps;
+export type AnnouncementListProps = Pick<
+  ScrollListProps<Announcement>,
+  'store'
+> &
+  AnnouncementListLayoutProps;
 
 @observer
-export class MessageList extends PureComponent<MessageListProps> {
+export class AnnouncementList extends Component<AnnouncementListProps> {
   @observable
   accessor selectedIds: number[] = [];
 
@@ -141,7 +145,7 @@ export class MessageList extends PureComponent<MessageListProps> {
         translator={i18n}
         store={this.props.store}
         renderList={allItems => (
-          <MessageListLayout
+          <AnnouncementListLayout
             {...{ ...props, ...this }}
             defaultData={allItems}
           />

components/Message/MessageModal.tsx

@@ -1,25 +1,26 @@
+import { Announcement } from '@kaiyuanshe/openhackathon-service';
 import { observer } from 'mobx-react';
 import { NewData } from 'mobx-restful';
-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 {
-  Message,
-  MessageModel,
-  MessageTypeName,
+  AnnouncementModel,
+  AnnouncementTypeName,
 } from '../../models/Activity/Message';
 import { i18n } from '../../models/Base/Translation';
 
 const { t } = i18n;
 
-export interface MessageModalProps extends Pick<ModalProps, 'show' | 'onHide'> {
-  store: MessageModel;
+export interface AnnouncementModalProps
+  extends Pick<ModalProps, 'show' | 'onHide'> {
+  store: AnnouncementModel;
   onSave?: () => any;
 }
 
 @observer
-export class MessageModal extends PureComponent<MessageModalProps> {
+export class AnnouncementModal extends Component<AnnouncementModalProps> {
   private form = createRef<HTMLFormElement>();
 
   handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
@@ -31,7 +32,7 @@ export class MessageModal extends PureComponent<MessageModalProps> {
 
     if (!store || !form) return;
 
-    const data = formToJSON<NewData<Message>>(form);
+    const data = formToJSON<NewData<Announcement>>(form);
 
     await store.updateOne(data, store.currentOne.id);
     await store.refreshList();
@@ -77,7 +78,7 @@ export class MessageModal extends PureComponent<MessageModalProps> {
           <Form.Group className="mt-2" controlId="type">
             <Form.Label>{t('type')}</Form.Label>
             <Form.Select name="type">
-              {Object.entries(MessageTypeName()).map(([key, value]) => (
+              {Object.entries(AnnouncementTypeName()).map(([key, value]) => (
                 <option key={key} value={key}>
                   {value}
                 </option>

configuration/menu.ts

@@ -66,7 +66,7 @@ export const menus: () => MenuItem[] = () => [
       },
       {
         title: t('announcement'),
-        href: 'message',
+        href: 'announcement',
         icon: 'bullhorn',
       },
       {

models/Activity/Message.ts

@@ -1,49 +1,26 @@
-import { Base } from '@kaiyuanshe/openhackathon-service';
-import { IDType, ListModel, Stream, toggle } from 'mobx-restful';
-import { buildURLData } from 'web-utility';
+import { Announcement, BaseFilter } from '@kaiyuanshe/openhackathon-service';
 
-import { createListStream, Filter, InputData } from '../Base';
+import { Filter, TableModel } from '../Base';
 import { i18n } from '../Base/Translation';
-import sessionStore from '../User/Session';
 
 const { t } = i18n;
 
-export enum MessageType {
+export enum AnnouncementType {
   Hackathon = 'hackathon',
 }
 
-export const MessageTypeName = () => ({
-  [MessageType.Hackathon]: t('hackathon_message'),
+export const AnnouncementTypeName = () => ({
+  [AnnouncementType.Hackathon]: t('hackathon_message'),
 });
 
-export interface Message extends Base {
-  title: string;
-  content: string;
-}
-
-export type MessageFilter = Filter<Message>;
+export type AnnouncementFilter = Filter<Announcement> & BaseFilter;
 
-export class MessageModel extends Stream<Message, MessageFilter>(ListModel) {
-  client = sessionStore.client;
-
-  constructor(baseURI: string) {
+export class AnnouncementModel extends TableModel<
+  Announcement,
+  AnnouncementFilter
+> {
+  constructor(public baseURI: string) {
     super();
     this.baseURI = `${baseURI}/announcement`;
   }
-
-  openStream(filter: MessageFilter) {
-    return createListStream<Message>(
-      `${this.baseURI}s?${buildURLData(filter)}`,
-      this.client,
-      count => (this.totalCount = count),
-    );
-  }
-
-  @toggle('uploading')
-  async updateOne(data: InputData<Message>, id?: IDType) {
-    const { body } = await (id
-      ? this.client.patch<Message>(`${this.baseURI}/${id}`, data)
-      : this.client.put<Message>(this.baseURI, data));
-    return (this.currentOne = body!);
-  }
 }

models/Activity/index.ts

@@ -15,7 +15,7 @@ import platformAdmin from '../User/PlatformAdmin';
 import { AwardModel } from './Award';
 import { EnrollmentModel } from './Enrollment';
 import { LogModel } from './Log';
-import { MessageModel } from './Message';
+import { AnnouncementModel } from './Message';
 import { OrganizerModel } from './Organization';
 import { Extensions, Question } from './Question';
 import { StaffModel } from './Staff';
@@ -61,7 +61,7 @@ export class ActivityModel extends TableModel<Hackathon, ActivityFilter> {
   @observable
   accessor currentEnrollment: EnrollmentModel | undefined;
 
-  currentMessage?: MessageModel;
+  currentAnnouncement?: AnnouncementModel;
 
   @observable
   accessor currentTeam: TeamModel | undefined;
@@ -89,8 +89,10 @@ export class ActivityModel extends TableModel<Hackathon, ActivityFilter> {
     return (this.currentEnrollment = new EnrollmentModel(`hackathon/${name}`));
   }
 
-  messageOf(name = this.currentOne.name) {
-    return (this.currentMessage = new MessageModel(`hackathon/${name}`));
+  announcementOf(name = this.currentOne.name) {
+    return (this.currentAnnouncement = new AnnouncementModel(
+      `hackathon/${name}`,
+    ));
   }
 
   teamOf(name = this.currentOne.name) {
@@ -137,7 +139,7 @@ export class ActivityModel extends TableModel<Hackathon, ActivityFilter> {
     this.enrollmentOf(name);
     this.teamOf(name);
     this.organizationOf(name);
-    this.messageOf(name);
+    this.announcementOf(name);
     this.templateOf(name);
 
     return (this.currentOne = {

package.json

@@ -45,7 +45,7 @@
     "@babel/plugin-proposal-decorators": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@kaiyuanshe/openhackathon-service": "^0.17.0",
+    "@kaiyuanshe/openhackathon-service": "^0.18.0",
     "@octokit/openapi-types": "^22.2.0",
     "@types/jsonwebtoken": "^9.0.6",
     "@types/leaflet": "^1.9.12",

pages/activity/[name]/index.tsx

@@ -34,7 +34,7 @@ import {
 import { getActivityStatusText } from '../../../components/Activity/ActivityEntry';
 import { CommentBox } from '../../../components/CommentBox';
 import { PageHead } from '../../../components/layout/PageHead';
-import { MessageList } from '../../../components/Message/MessageList';
+import { AnnouncementList } from '../../../components/Message/MessageList';
 import { OrganizationListLayout } from '../../../components/Organization/OrganizationList';
 import { TeamCard } from '../../../components/Team/TeamCard';
 import { TeamCreateModal } from '../../../components/Team/TeamCreateModal';
@@ -84,7 +84,7 @@ export default class ActivityPage extends PureComponent<ActivityPageProps> {
   logStore = activityStore.logOf(this.props.activity.id);
   enrollmentStore = activityStore.enrollmentOf(this.props.activity.name);
   teamStore = activityStore.teamOf(this.props.activity.name);
-  messageStore = activityStore.messageOf(this.props.activity.name);
+  messageStore = activityStore.announcementOf(this.props.activity.name);
 
   @observable
   accessor showCreateTeam = false;
@@ -314,7 +314,7 @@ export default class ActivityPage extends PureComponent<ActivityPageProps> {
                 {/*todo update no data*/}
               </Tab>
               <Tab className="pt-2" eventKey="log" title={t('latest_news')}>
-                <MessageList store={myMessage} hideControls />
+                <AnnouncementList store={myMessage} hideControls />
               </Tab>
               <Tab eventKey="team" title={t('all_teams')} className="pt-2">
                 <h3>{t('my_team')}</h3>

pages/activity/[name]/manage/message.tsx → pages/activity/[name]/manage/announcement.tsx

@@ -13,8 +13,8 @@ import { createRef, FC, FormEvent, PureComponent } from 'react';
 import { Button, Container, Form } from 'react-bootstrap';
 
 import { ActivityManageFrame } from '../../../../components/Activity/ActivityManageFrame';
-import { MessageList } from '../../../../components/Message/MessageList';
-import { MessageModal } from '../../../../components/Message/MessageModal';
+import { AnnouncementList } from '../../../../components/Message/MessageList';
+import { AnnouncementModal } from '../../../../components/Message/MessageModal';
 import { ServerSessionBox } from '../../../../components/User/ServerSessionBox';
 import activityStore from '../../../../models/Activity';
 import { i18n } from '../../../../models/Base/Translation';
@@ -45,7 +45,7 @@ export default MessageListPage;
 
 @observer
 class MessageListEditor extends PureComponent<MessageListPageProps> {
-  store = activityStore.messageOf(this.props.route.params!.name);
+  store = activityStore.announcementOf(this.props.route.params!.name);
 
   form = createRef<HTMLFormElement>();
 
@@ -96,14 +96,14 @@ class MessageListEditor extends PureComponent<MessageListPageProps> {
           </Button>
         </Form>
 
-        <MessageList
+        <AnnouncementList
           store={store}
           hideControls={false}
           onSelect={list => (this.selectedIds = list)}
           onEdit={() => (this.show = true)}
           onDelete={this.handleReset}
         />
-        <MessageModal
+        <AnnouncementModal
           store={store}
           show={show}
           onHide={() => (this.show = false)}