From 44c9bda9f092cc4546edd0eaab95c3a1b38a90cb Mon Sep 17 00:00:00 2001 From: TechQuery Date: Sun, 9 Jul 2023 23:15:13 +0800 Subject: [PATCH] [fix] State updating of Activity Detail page [fix] some Style & Logic detail bugs [optimize] simplify Questionnaire Form of Register page [optimize] update Upstream packages --- components/Activity/ActivityEditor.tsx | 2 + components/Activity/ActivityManageFrame.tsx | 2 + components/Activity/QuestionnairePreview.tsx | 72 +- components/Team/TeamCreateModal.tsx | 1 - components/Team/TeamEditor.tsx | 1 + components/Team/WorkEdit.tsx | 4 +- configuration/menu.ts | 2 +- models/Activity.ts | 12 +- models/Team.ts | 9 +- package.json | 4 +- pages/_document.tsx | 3 +- pages/activity/[name]/index.tsx | 10 +- .../activity/[name]/manage/questionnaire.tsx | 5 +- pages/activity/[name]/register.tsx | 40 +- pnpm-lock.yaml | 1158 ++++++++--------- 15 files changed, 640 insertions(+), 685 deletions(-) diff --git a/components/Activity/ActivityEditor.tsx b/components/Activity/ActivityEditor.tsx index 5dffa30a..3452ef45 100644 --- a/components/Activity/ActivityEditor.tsx +++ b/components/Activity/ActivityEditor.tsx @@ -56,6 +56,8 @@ export class ActivityEditor extends PureComponent { const { name } = this.props, data = formToJSON(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 index a3ffe00e..97385147 100644 --- 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 index ddb76764..d2436a11 100644 --- a/components/Activity/QuestionnairePreview.tsx +++ b/components/Activity/QuestionnairePreview.tsx @@ -1,6 +1,6 @@ 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'; @@ -8,37 +8,41 @@ import { i18n } from '../../models/Translation'; const { t } = i18n; -export interface QuestionnairePreviewProps { - questionnaire: Question[]; +export interface QuestionnaireFormProps { + fields: Question[]; } -export const QuestionnairePreview: FC = observer( - ({ questionnaire }) => { - const renderField = ({ options, multiple, title, ...props }: Question) => - options ? ( - - {title} - - {options.map(value => ( - - ))} - - - ) : ( - - {title} - - - - - - ); +@observer +export class QuestionnaireForm extends PureComponent { + renderField = ({ options, multiple, title, ...props }: Question) => + options ? ( + + {title} + + {options.map(value => ( + + ))} + + + ) : ( + + {title} + + + + + + ); + + render() { + const { fields } = this.props; return ( @@ -50,10 +54,8 @@ export const QuestionnairePreview: FC = observer( {t('personal_profile')} -
    {questionnaire.map(renderField)}
+
    {fields.map(this.renderField)}
 ); - }, -); - -QuestionnairePreview.displayName = 'QuestionnairePreview'; + } +} diff --git a/components/Team/TeamCreateModal.tsx b/components/Team/TeamCreateModal.tsx index 7069e66f..53f16ae5 100644 --- a/components/Team/TeamCreateModal.tsx +++ b/components/Team/TeamCreateModal.tsx @@ -31,7 +31,6 @@ export const TeamCreateModal: FC = ({ 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 index 941795b6..5e3fdb25 100644 --- a/components/Team/TeamEditor.tsx +++ b/components/Team/TeamEditor.tsx @@ -33,6 +33,7 @@ export const TeamEditor: FC = ({ team, onSubmit }) => ( {t('team_introduction')} + * { {t('work_type')} - {workTypes.map(({ value }) => ( + {workTypes.map(({ title, value }) => ( 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 index e9899684..a5cd2c74 100644 --- a/models/Activity.ts +++ b/models/Activity.ts @@ -82,11 +82,15 @@ export class ActivityModel extends Stream(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(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(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 index c0364895..adf73926 100644 --- a/models/Team.ts +++ b/models/Team.ts @@ -151,16 +151,21 @@ export class TeamModel extends Stream(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(`${this.baseURI}/${id}`, data) : this.client.put(this.baseURI, data)); + await this.getSessionOne(); + return (this.currentOne = body!); } catch (error: any) { throw integrateError(error); diff --git a/package.json b/package.json index b8b64e9f..039daeea 100644 --- 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 index a8aff69e..2dded51b 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -10,7 +10,6 @@ export default function Document() { /> - { 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< )} - {displayName && location && ( <>

{t('competition_location')}

diff --git a/pages/activity/[name]/manage/questionnaire.tsx b/pages/activity/[name]/manage/questionnaire.tsx index 3d5e36f1..6e1860ed 100644 --- 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<
{t('preview_questionnaire')}
- + + diff --git a/pages/activity/[name]/register.tsx b/pages/activity/[name]/register.tsx index 120837f0..122cd8e0 100644 --- 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 > { handleSubmit = async (event: FormEvent) => { @@ -58,33 +60,6 @@ class RegisterPage extends PureComponent< location.href = `/activity/${activity}`; }; - renderField = ({ options, multiple, title, ...props }: Question) => - options ? ( - - {title} - - {options.map(value => ( - - ))} - - - ) : ( - - {title} - - - - - - ); - render() { const { activity, questionnaire } = this.props, { uploading } = activityStore; @@ -94,7 +69,8 @@ class RegisterPage extends PureComponent<
- + +