[fix] State updating of Activity Detail page

[fix] some Style & Logic detail bugs [optimize] simplify Questionnaire Form of Register page [optimize] update Upstream packages
kaiyuanshe · Jul 9, 2023 · 44c9bda · 44c9bda · github-actions · Jul 9, 2023
1 parent f750c1c
commit 44c9bda
Show file tree

Hide file tree

Showing 15 changed files with 640 additions and 685 deletions.
diff --git a/components/Activity/ActivityEditor.tsx b/components/Activity/ActivityEditor.tsx
@@ -56,6 +56,8 @@ export class ActivityEditor extends PureComponent<ActivityEditorProps> {
     const { name } = this.props,
       data = formToJSON<ActivityFormData>(form);
 
+    data.detail = data.detail + '';
+
     data.banners = [data.bannerUrls ?? []].flat().map(bannerUrl => {
       const name = bannerUrl.split('/').slice(-1)[0];
 

diff --git a/components/Activity/ActivityManageFrame.tsx b/components/Activity/ActivityManageFrame.tsx
@@ -4,6 +4,7 @@ import {
   faCloud,
   faDesktop,
   faEdit,
+  faFilePen,
   faMessage,
   faPeopleGroup,
   faSitemap,
@@ -36,6 +37,7 @@ library.add(
   faCloud,
   faDesktop,
   faEdit,
+  faFilePen,
   faMessage,
   faPeopleGroup,
   faSitemap,

diff --git a/components/Activity/QuestionnairePreview.tsx b/components/Activity/QuestionnairePreview.tsx
@@ -1,44 +1,48 @@
 import { observer } from 'mobx-react';
 import Link from 'next/link';
-import { FC } from 'react';
+import { PureComponent } from 'react';
 import { Container, Form, Row } from 'react-bootstrap';
 
 import { Question } from '../../models/Question';
 import { i18n } from '../../models/Translation';
 
 const { t } = i18n;
 
-export interface QuestionnairePreviewProps {
-  questionnaire: Question[];
+export interface QuestionnaireFormProps {
+  fields: Question[];
 }
 
-export const QuestionnairePreview: FC<QuestionnairePreviewProps> = observer(
-  ({ questionnaire }) => {
-    const renderField = ({ options, multiple, title, ...props }: Question) =>
-      options ? (
-        <Form.Group as="li" className="mb-3" key={title}>
-          {title}
-          <Row xs={1} sm={3} lg={4} className="mt-2">
-            {options.map(value => (
-              <Form.Check
-                type={multiple ? 'checkbox' : 'radio'}
-                label={value}
-                name={title}
-                value={value}
-                key={value}
-              />
-            ))}
-          </Row>
-        </Form.Group>
-      ) : (
-        <Form.Group as="li" className="mb-3 mt-2" key={title} controlId={title}>
-          {title}
-          <Row>
-            <Form.Label />
-            <Form.Control name={title} {...props} />
-          </Row>
-        </Form.Group>
-      );
+@observer
+export class QuestionnaireForm extends PureComponent<QuestionnaireFormProps> {
+  renderField = ({ options, multiple, title, ...props }: Question) =>
+    options ? (
+      <Form.Group as="li" className="mb-3" key={title}>
+        {title}
+        <Row xs={1} sm={3} lg={4} className="mt-2">
+          {options.map(value => (
+            <Form.Check
+              type={multiple ? 'checkbox' : 'radio'}
+              label={value}
+              name={title}
+              value={value}
+              id={value}
+              key={value}
+            />
+          ))}
+        </Row>
+      </Form.Group>
+    ) : (
+      <Form.Group as="li" className="mb-3 mt-2" key={title} controlId={title}>
+        {title}
+        <Row>
+          <Form.Label />
+          <Form.Control name={title} {...props} />
+        </Row>
+      </Form.Group>
+    );
+
+  render() {
+    const { fields } = this.props;
 
     return (
       <Container fluid as="fieldset">
@@ -50,10 +54,8 @@ export const QuestionnairePreview: FC<QuestionnairePreviewProps> = observer(
             <a className="text-primary ms-2">{t('personal_profile')}</a>
           </Link>
         </small>
-        <ol className="my-3 px-3">{questionnaire.map(renderField)}</ol>
+        <ol className="my-3 px-3">{fields.map(this.renderField)}</ol>
       </Container>
     );
-  },
-);
-
-QuestionnairePreview.displayName = 'QuestionnairePreview';
+  }
+}
diff --git a/components/Team/TeamCreateModal.tsx b/components/Team/TeamCreateModal.tsx
@@ -31,7 +31,6 @@ export const TeamCreateModal: FC<TeamCreateModalProps> = ({
     await activityStore
       .teamOf(hackathonName)
       .updateOne({ ...data, autoApprove: !!autoApprove });
-    await activityStore.currentTeam?.getSessionOne();
 
     alert(t('create_team_success'));
     onClose();

diff --git a/components/Team/TeamEditor.tsx b/components/Team/TeamEditor.tsx
@@ -33,6 +33,7 @@ export const TeamEditor: FC<TeamEditorProps> = ({ team, onSubmit }) => (
     <Form.Group as={Row} className="mb-3" controlId="description">
       <Form.Label column sm={3}>
         {t('team_introduction')}
+        <span className="text-danger"> *</span>
       </Form.Label>
       <Col sm={9}>
         <Form.Control

diff --git a/components/Team/WorkEdit.tsx b/components/Team/WorkEdit.tsx
@@ -93,11 +93,11 @@ export class WorkEdit extends PureComponent<WorkEditProps> {
               {t('work_type')}
             </Form.Label>
             <Col sm={10}>
-              {workTypes.map(({ value }) => (
+              {workTypes.map(({ title, value }) => (
                 <Form.Check
                   type="radio"
                   inline
-                  label={value}
+                  label={title}
                   name="type"
                   value={value}
                   id={value}

diff --git a/configuration/menu.ts b/configuration/menu.ts
@@ -25,7 +25,7 @@ export const menus: () => MenuItem[] = () => [
       {
         title: t('edit_questionnaire'),
         href: 'questionnaire',
-        icon: 'edit',
+        icon: 'file-pen',
       },
       {
         title: t('sign_up_user'),

diff --git a/models/Activity.ts b/models/Activity.ts
@@ -82,11 +82,15 @@ export class ActivityModel extends Stream<Activity, ActivityFilter>(ListModel) {
   currentStaff?: StaffModel;
   currentGit = new GitModel();
   currentAward?: AwardModel;
+
   @observable
   currentEnrollment?: EnrollmentModel;
+
   currentMessage?: MessageModel;
+
   @observable
   currentTeam?: TeamModel;
+
   currentLog?: LogModel;
   currentOrganization?: OrganizationModel;
   currentTemplate?: GitTemplateModal;
@@ -194,7 +198,7 @@ export class ActivityModel extends Stream<Activity, ActivityFilter>(ListModel) {
         ({
           ...JSON.parse(v.value),
           id: v.name,
-        } as Question),
+        }) as Question,
     );
 
     return (this.questionnaire = questionnaire);
@@ -238,10 +242,12 @@ export class ActivityModel extends Stream<Activity, ActivityFilter>(ListModel) {
   }
 
   @toggle('uploading')
-  signOne(name: string, extensions: Enrollment['extensions']) {
-    return this.client.put(`${this.baseURI}/${name}/enrollment`, {
+  async signOne(name: string, extensions: Enrollment['extensions'] = []) {
+    await this.client.put(`${this.baseURI}/${name}/enrollment`, {
       extensions,
     });
+
+    return this.currentEnrollment?.getSessionOne();
   }
 }
 

diff --git a/models/Team.ts b/models/Team.ts
@@ -151,16 +151,21 @@ export class TeamModel extends Stream<Team, TeamFilter>(ListModel) {
         throw integrateError(error);
       }
       const { nameAvailable, reason, message } = checkNameAvailabilityBody!;
+
       if (!nameAvailable) {
-        const errMsg = message.replace('{0}', data.displayName || '');
-        throw new ReferenceError(`${reason}\n${errMsg}`);
+        const text = message.replace('{0}', data.displayName || '');
+
+        throw new ReferenceError(`${reason}\n${text}`);
       }
     }
+
     try {
       const { body } = await (id
         ? this.client.patch<Team>(`${this.baseURI}/${id}`, data)
         : this.client.put<Team>(this.baseURI, data));
 
+      await this.getSessionOne();
+
       return (this.currentOne = body!);
     } catch (error: any) {
       throw integrateError(error);

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "web-utility": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.6",
+    "@babel/core": "^7.22.8",
     "@octokit/openapi-types": "^18.0.0",
     "@types/leaflet": "^1.9.3",
     "@types/lodash": "^4.14.195",
@@ -57,7 +57,7 @@
     "lint-staged": "^13.2.3",
     "next-pwa": "^5.6.0",
     "next-with-less": "^2.0.5",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.0",
     "ts-node": "^10.9.1",
     "typescript": "~5.1.6",
     "webpack": "^5.88.1"

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -10,15 +10,14 @@ export default function Document() {
         />
         <link rel="manifest" href="/manifest.json" />
         <script src="https://polyfill.kaiyuanshe.cn/feature/PWAManifest.js"></script>
-        <script src="https://polyfill.kaiyuanshe.cn/feature/EventSubmitter.js"></script>
 
         <link
           rel="stylesheet"
           href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
         />
         <link
           rel="stylesheet"
-          href="https://unpkg.com/[email protected].4/font/bootstrap-icons.css"
+          href="https://unpkg.com/[email protected].5/font/bootstrap-icons.css"
         />
         <link
           rel="stylesheet"

diff --git a/pages/activity/[name]/index.tsx b/pages/activity/[name]/index.tsx
@@ -117,16 +117,15 @@ export default class ActivityPage extends PureComponent<
   registerNow = async () => {
     const { name } = this.props.activity;
 
-    await activityStore.signOne(name, []);
+    await activityStore.signOne(name);
 
     self.alert(textJoin(t('hackathons'), name, t('registration_needs_review')));
-    self.location.reload();
   };
 
   renderMeta() {
     const { github } = sessionStore.metaOAuth,
-      { status } = this.enrollmentStore.sessionOne || {},
-      { sessionOne: myTeam } = this.teamStore || {},
+      { status } = activityStore.currentEnrollment?.sessionOne || {},
+      myTeam = activityStore.currentTeam?.sessionOne,
       { questionnaire } = activityStore,
       {
         name,
@@ -261,7 +260,7 @@ export default class ActivityPage extends PureComponent<
         this.props.activity,
       { showCreateTeam, loading } = this,
       { organizationList } = this.props,
-      myTeam = this.teamStore.sessionOne,
+      myTeam = activityStore.currentTeam?.sessionOne,
       myMessage = this.messageStore;
 
     return (
@@ -330,7 +329,6 @@ export default class ActivityPage extends PureComponent<
                 <OrganizationListLayout defaultData={organizationList} />
               </>
             )}
-
             {displayName && location && (
               <>
                 <h2 className="mt-3">{t('competition_location')}</h2>

diff --git a/pages/activity/[name]/manage/questionnaire.tsx b/pages/activity/[name]/manage/questionnaire.tsx
@@ -6,7 +6,7 @@ import { Button, Col, Row } from 'react-bootstrap';
 
 import { ActivityManageFrame } from '../../../../components/Activity/ActivityManageFrame';
 import { QuestionnaireCreate } from '../../../../components/Activity/QuestionnaireCreate';
-import { QuestionnairePreview } from '../../../../components/Activity/QuestionnairePreview';
+import { QuestionnaireForm } from '../../../../components/Activity/QuestionnairePreview';
 import { QuestionnaireTable } from '../../../../components/Activity/QuestionnaireTable';
 import activityStore from '../../../../models/Activity';
 import { isServer } from '../../../../models/Base';
@@ -142,7 +142,8 @@ class ActivityQuestionnairePage extends PureComponent<
           </Col>
           <Col sm={12} className="p-2">
             <h5 className="mx-2">{t('preview_questionnaire')}</h5>
-            <QuestionnairePreview questionnaire={questionnaire} />
+
+            <QuestionnaireForm fields={questionnaire} />
           </Col>
         </Row>
       </ActivityManageFrame>

diff --git a/pages/activity/[name]/register.tsx b/pages/activity/[name]/register.tsx
@@ -1,10 +1,11 @@
 import { textJoin } from 'mobx-i18n';
+import { observer } from 'mobx-react';
 import { InferGetServerSidePropsType } from 'next';
 import { FormEvent, PureComponent } from 'react';
-import { Button, Form, Row } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
 import { formToJSON } from 'web-utility';
 
-import { QuestionnairePreview } from '../../../components/Activity/QuestionnairePreview';
+import { QuestionnaireForm } from '../../../components/Activity/QuestionnairePreview';
 import PageHead from '../../../components/layout/PageHead';
 import { SessionBox } from '../../../components/User/SessionBox';
 import activityStore, { ActivityModel } from '../../../models/Activity';
@@ -30,7 +31,8 @@ export const getServerSideProps = withErrorLog<
   }),
 );
 
-class RegisterPage extends PureComponent<
+@observer
+export default class RegisterPage extends PureComponent<
   InferGetServerSidePropsType<typeof getServerSideProps>
 > {
   handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
@@ -58,33 +60,6 @@ class RegisterPage extends PureComponent<
     location.href = `/activity/${activity}`;
   };
 
-  renderField = ({ options, multiple, title, ...props }: Question) =>
-    options ? (
-      <Form.Group as="li" className="mb-3" key={title}>
-        {title}
-        <Row xs={1} sm={3} lg={4} className="mt-2">
-          {options.map(value => (
-            <Form.Check
-              type={multiple ? 'checkbox' : 'radio'}
-              label={value}
-              name={title}
-              value={value}
-              id={value}
-              key={value}
-            />
-          ))}
-        </Row>
-      </Form.Group>
-    ) : (
-      <Form.Group as="li" className="mb-3 " key={title} controlId={title}>
-        {title}
-        <Row className="mt-2">
-          <Form.Label></Form.Label>
-          <Form.Control name={title} {...props} />
-        </Row>
-      </Form.Group>
-    );
-
   render() {
     const { activity, questionnaire } = this.props,
       { uploading } = activityStore;
@@ -94,7 +69,8 @@ class RegisterPage extends PureComponent<
         <PageHead title={`${activity} ${t('questionnaire')}`} />
 
         <Form onSubmit={this.handleSubmit}>
-          <QuestionnairePreview questionnaire={questionnaire} />
+          <QuestionnaireForm fields={questionnaire} />
+
           <footer className="text-center my-2">
             <Button
               className="px-5"
@@ -110,5 +86,3 @@ class RegisterPage extends PureComponent<
     );
   }
 }
-
-export default RegisterPage;