[migrate] upgrade to Next.js 15, ESLint 9 & other latest Upstream pac…

…kages [add] Prettier CSS plugins Signed-off-by: South Drifted <[email protected]>
kaiyuanshe · Dec 27, 2024 · caca01c · caca01c · github-actions · Dec 27, 2024
1 parent 9b5f090
commit caca01c
Show file tree

Hide file tree

Showing 37 changed files with 3,104 additions and 2,736 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Open-source [Hackathon][1] Platform with **Git-based Cloud Development Environme
 ## Technology stack
 
 - Language: [TypeScript v5][5]
-- Component engine: [Next.js v14][6]
+- Component engine: [Next.js v15][6]
 - Component suite: [Bootstrap v5][7]
 - State management: [MobX v6][8]
 - PWA framework: [Workbox v6][9]

diff --git a/components/Activity/ActivityEditor.tsx b/components/Activity/ActivityEditor.tsx
@@ -68,7 +68,7 @@ export class ActivityEditor extends Component<ActivityEditorProps> {
         uri: bannerUrl,
       };
     });
-    // @ts-ignore
+    // @ts-expect-error Type compatibility issue
     await activityStore.updateOne(data, name);
 
     if (!name && confirm(t('create_work_success'))) {
@@ -199,25 +199,25 @@ export class ActivityEditor extends Component<ActivityEditorProps> {
         </Form.Group>
 
         <DateTimeInput
+          key="enrollment"
           label={t('enrollment')}
           name="enrollment"
-          key="enrollment"
           startAt={enrollmentStartedAt}
           endAt={enrollmentEndedAt}
           required
         />
         <DateTimeInput
+          key="event"
           label={t('activity_time')}
           name="event"
-          key="event"
           startAt={eventStartedAt}
           endAt={eventEndedAt}
           required
         />
         <DateTimeInput
+          key="judge"
           label={t('judge_time')}
           name="judge"
-          key="judge"
           startAt={judgeStartedAt}
           endAt={judgeEndedAt}
           required

diff --git a/components/Activity/EnrollmentStatistic.tsx b/components/Activity/EnrollmentStatistic.tsx
@@ -94,7 +94,7 @@ export default class EnrollmentStatisticCharts extends Component<EnrollmentStati
           {Object.entries(answers).map(
             ([title, answers]) =>
               !isEmpty(answers) && (
-                <Col as="section" key={title}>
+                <Col key={title} as="section">
                   <SVGCharts>
                     <Title>{title}</Title>
                     <PieSeries

diff --git a/components/Activity/QuestionnairePreview.tsx b/components/Activity/QuestionnairePreview.tsx
@@ -13,23 +13,23 @@ export interface QuestionnaireFormProps {
 export class QuestionnaireForm extends Component<QuestionnaireFormProps> {
   renderField = ({ options, multiple, title, ...props }: Question) =>
     options ? (
-      <Form.Group as="li" className="mb-3" key={title}>
+      <Form.Group key={title} as="li" className="mb-3">
         {title}
         <Row xs={1} sm={3} lg={4} className="mt-2">
           {options.map(value => (
             <Form.Check
+              key={value}
               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}>
+      <Form.Group key={title} as="li" className="mb-3 mt-2" controlId={title}>
         {title}
         <Row>
           <Form.Label />

diff --git a/components/Git/Card.tsx b/components/Git/Card.tsx
@@ -54,7 +54,7 @@ export const GitCard: FC<GitCardProps> = observer(
         <Row as="ul" className="list-unstyled g-4" xs={4}>
           {languages &&
             Object.keys(languages).map(language => (
-              <Col as="li" key={language}>
+              <Col key={language} as="li">
                 <GitLogo name={language} />
               </Col>
             ))}

diff --git a/components/Git/CardList.tsx b/components/Git/CardList.tsx
@@ -22,7 +22,7 @@ export const CardList: FC<XScrollListProps<GitTemplate>> = ({
         description,
         name = html_url.replace('https://github.com/', ''),
       }) => (
-        <Col as="li" key={id}>
+        <Col key={id} as="li">
           <Card className="shadow-sm">
             <Card.Body className="d-flex flex-column gap-3">
               <Card.Title as="h3" className="h5">
@@ -48,7 +48,7 @@ export const CardList: FC<XScrollListProps<GitTemplate>> = ({
               <Row as="ul" className="list-unstyled g-4" xs={4}>
                 {languages &&
                   Object.keys(languages).map(language => (
-                    <Col as="li" key={language}>
+                    <Col key={language} as="li">
                       <GitLogo name={language} />
                     </Col>
                   ))}

diff --git a/components/Git/GitTeamCard.tsx b/components/Git/GitTeamCard.tsx
@@ -47,7 +47,7 @@ export const GitTeamCard: FC<GitTeamCardProps> = observer(
         </nav>
         <Row as="ul" className="list-unstyled g-4" xs={4}>
           {languages.map(language => (
-            <Col as="li" key={language}>
+            <Col key={language} as="li">
               <GitLogo name={language} />
             </Col>
           ))}

diff --git a/components/Git/List.tsx b/components/Git/List.tsx
@@ -17,7 +17,7 @@ export const GitListLayout: FC<GitListLayoutProps> = ({
 }) => (
   <Row as="ul" className="list-unstyled g-4" xs={1} sm={2}>
     {defaultData?.map(item => (
-      <Col as="li" key={item.id}>
+      <Col key={item.id} as="li">
         <GitCard
           className="h-100 shadow-sm"
           {...item}

diff --git a/components/Git/TeamGitList.tsx b/components/Git/TeamGitList.tsx
@@ -17,7 +17,7 @@ export const TeamGitListLayout: FC<TeamGitListLayoutProps> = ({
 }) => (
   <Row as="ul" className="list-unstyled g-4" xs={1} sm={2}>
     {defaultData?.map(item => (
-      <Col as="li" key={item.id}>
+      <Col key={item.id} as="li">
         <GitTeamCard
           className="h-100 shadow-sm"
           {...item}

diff --git a/components/Message/MessageList.tsx b/components/Message/MessageList.tsx
@@ -36,19 +36,19 @@ export const AnnouncementListLayout: FC<AnnouncementListLayoutProps> = observer(
         <tr>
           <th hidden={hideControls}>
             <Form.Check
+              ref={(input: HTMLInputElement | null) => {
+                if (input)
+                  input.indeterminate =
+                    !!selectedIds?.length &&
+                    selectedIds.length < defaultData.length;
+              }}
               inline
               type="checkbox"
               name="announcementId"
               checked={
                 selectedIds?.length > 0 &&
                 selectedIds?.length === defaultData?.length
               }
-              ref={(input: HTMLInputElement | null) => {
-                if (input)
-                  input.indeterminate =
-                    !!selectedIds?.length &&
-                    selectedIds.length < defaultData.length;
-              }}
               onChange={() =>
                 onSelect?.(
                   selectedIds.length === defaultData.length

diff --git a/components/Message/MessageModal.tsx b/components/Message/MessageModal.tsx
@@ -50,13 +50,13 @@ export class AnnouncementModal extends Component<AnnouncementModalProps> {
       loading = store.uploading > 0;
 
     return (
-      <Modal show={show} onHide={onHide} centered>
+      <Modal show={show} centered onHide={onHide}>
         <Modal.Header closeButton>
           <Modal.Title>{t('publish_announcement')}</Modal.Title>
         </Modal.Header>
         <Modal.Body
-          as="form"
           ref={this.form}
+          as="form"
           onSubmit={this.handleSubmit}
           onReset={this.handleReset}
         >

diff --git a/components/NotFoundCard.tsx b/components/NotFoundCard.tsx
@@ -7,7 +7,7 @@ export const NotFoundCard: FC<ErrorProps> = ({ title }) =>
   i18n.currentLanguage.startsWith('zh') ? (
     <script
       src="//cdn.dnpw.org/404/v1.min.js"
-      // @ts-ignore
+      // @ts-expect-error https://www.dnpw.org/cn/pa-notfound.html
       jumptarget="/"
       jumptime="-1"
       error={title}

diff --git a/components/Organization/ActivityOrganizationModal.tsx b/components/Organization/ActivityOrganizationModal.tsx
@@ -38,7 +38,7 @@ export class OrganizationModal extends Component<OrganizationModalProps> {
       name,
       description,
       type,
-      // @ts-ignore
+      // @ts-expect-error Type compatibility issue
       logo: { name, description, uri: logoURI },
       url: url,
     });
@@ -56,13 +56,13 @@ export class OrganizationModal extends Component<OrganizationModalProps> {
     const loading = store.uploading > 0;
 
     return (
-      <Modal show={show} onHide={onHide} centered>
+      <Modal show={show} centered onHide={onHide}>
         <Modal.Header closeButton>
           <Modal.Title>{t('add_sponsor_information')}</Modal.Title>
         </Modal.Header>
         <Modal.Body
-          as="form"
           ref={this.form}
+          as="form"
           onSubmit={this.handleSubmit}
           onReset={this.handleReset}
         >

diff --git a/components/Organization/OrganizationList.tsx b/components/Organization/OrganizationList.tsx
@@ -13,7 +13,7 @@ export const OrganizationListLayout: FC<XScrollListProps<Organizer>> = ({
 }) => (
   <ul className="list-unstyled">
     {defaultData.map(item => (
-      <li className="mb-2" key={item.id}>
+      <li key={item.id} className="mb-2">
         <OrganizationCard {...item} />
       </li>
     ))}
@@ -30,19 +30,19 @@ export const OrganizationTableLayout: FC<XScrollListProps<Organizer>> = ({
       <tr>
         <th>
           <Form.Check
+            ref={(input: HTMLInputElement | null) => {
+              if (input)
+                input.indeterminate =
+                  !!selectedIds?.length &&
+                  selectedIds.length < defaultData.length;
+            }}
             inline
             type="checkbox"
             name="organizationId"
             checked={
               selectedIds?.length > 0 &&
               selectedIds?.length === defaultData?.length
             }
-            ref={(input: HTMLInputElement | null) => {
-              if (input)
-                input.indeterminate =
-                  !!selectedIds?.length &&
-                  selectedIds.length < defaultData.length;
-            }}
             onChange={() =>
               onSelect?.(
                 selectedIds.length === defaultData.length

diff --git a/components/PlatformAdmin/PlatformAdminModal.tsx b/components/PlatformAdmin/PlatformAdminModal.tsx
@@ -43,7 +43,7 @@ export class PlatformAdminModal extends Component<PlatformAdminModalProps> {
     const loading = store.uploading > 0;
 
     return (
-      <Modal show={show} onHide={this.handleReset} centered>
+      <Modal show={show} centered onHide={this.handleReset}>
         <Modal.Header closeButton>
           <Modal.Title>{t('add_manager')}</Modal.Title>
         </Modal.Header>

diff --git a/components/Team/TeamAdministratorTable.tsx b/components/Team/TeamAdministratorTable.tsx
@@ -65,10 +65,10 @@ export const TeamAdministratorTableLayout: FC<TeamAdministratorTableLayoutProps>
                         as="select"
                         className={styles.form}
                         disabled={currentUserId === id}
+                        defaultValue={role}
                         onChange={({ currentTarget: { value } }) =>
                           onUpdateRole?.(id, value as TeamMemberRole)
                         }
-                        defaultValue={role}
                       >
                         {Object.entries(RoleName()).map(([key, value]) => (
                           <option key={key} value={key}>

diff --git a/components/Team/TeamParticipantTable.tsx b/components/Team/TeamParticipantTable.tsx
@@ -72,10 +72,10 @@ export const TeamParticipantTableLayout: FC<
                     as="select"
                     className={styles.form}
                     disabled={status === 'approved'}
+                    defaultValue={status}
                     onChange={({ currentTarget: { value } }) =>
                       onApprove?.(id, value as TeamMemberStatus)
                     }
-                    defaultValue={status}
                   >
                     {Object.entries(StatusName()).map(([key, value]) => (
                       <option key={key} value={key}>

diff --git a/components/Team/WorkEditor.tsx b/components/Team/WorkEditor.tsx
@@ -115,13 +115,13 @@ export class WorkEditor extends Component<WorkEditorProps> {
             <Col sm={10}>
               {workTypes.map(({ title, value }) => (
                 <Form.Check
+                  key={value}
                   type="radio"
                   inline
                   label={title}
                   name="type"
                   value={value}
                   id={value}
-                  key={value}
                   checked={currentType === value}
                   onClick={() => (this.currentType = value)}
                 />

diff --git a/components/User/ActivityAdministratorModal.tsx b/components/User/ActivityAdministratorModal.tsx
@@ -48,7 +48,7 @@ export class AdministratorModal extends Component<AdministratorModalProps> {
     const loading = store.uploading > 0;
 
     return (
-      <Modal show={show} onHide={this.handleReset} centered>
+      <Modal show={show} centered onHide={this.handleReset}>
         <Modal.Header closeButton>
           <Modal.Title>{t('add_manager')}</Modal.Title>
         </Modal.Header>

diff --git a/components/User/HackathonAdminList.tsx b/components/User/HackathonAdminList.tsx
@@ -33,18 +33,18 @@ export const HackathonAdminList: FC<
           ) : (
             <th key={data}>
               <Form.Check
-                inline
-                type="checkbox"
-                name="selectAll"
-                aria-label="selectAll"
-                checked={selectedIds.length === defaultData.length}
                 // https://github.com/facebook/react/issues/1798
                 ref={(input: HTMLInputElement | null) => {
                   if (input)
                     input.indeterminate =
                       !!selectedIds.length &&
                       selectedIds.length < defaultData.length;
                 }}
+                inline
+                type="checkbox"
+                name="selectAll"
+                aria-label="selectAll"
+                checked={selectedIds.length === defaultData.length}
                 onChange={() =>
                   onSelect?.(
                     selectedIds.length === defaultData.length

diff --git a/components/layout/MainBreadcrumb.tsx b/components/layout/MainBreadcrumb.tsx
@@ -11,8 +11,8 @@ export const MainBreadcrumb: FC<MainBreadcrumbProps> = ({ currentRoute }) => (
   <Breadcrumb className="p-1 bg-light rounded">
     {currentRoute.map(({ href, title }, index, { length }) => (
       <Breadcrumb.Item
-        className="mt-3"
         key={title}
+        className="mt-3"
         href={href}
         active={index + 1 === length}
       >