[migrate] replace Forum Timeline component with latest Idea React

[fix] Activity Forum entry [fix] ESLint 9 compatibility of Next.js 15 (vercel/next.js#64114 (comment))
kaiyuanshe · Oct 26, 2024 · d10ae63 · d10ae63 · github-actions · Oct 26, 2024
1 parent bca8589
commit d10ae63
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 214 deletions.
diff --git a/components/Activity/Forum/Timeline.module.less b/components/Activity/Forum/Timeline.module.less
diff --git a/components/Activity/Forum/Timeline.tsx b/components/Activity/Forum/Timeline.tsx
diff --git a/components/Base/TimeRange.tsx b/components/Base/TimeRange.tsx
@@ -1,6 +1,6 @@
+import { Time } from 'idea-react';
 import { TableCellValue } from 'mobx-lark';
 import { FC } from 'react';
-import { formatDate } from 'web-utility';
 
 export const TimeRange: FC<Record<'startTime' | 'endTime', TableCellValue>> = ({
   startTime,
@@ -9,7 +9,7 @@ export const TimeRange: FC<Record<'startTime' | 'endTime', TableCellValue>> = ({
   startTime &&
   endTime && (
     <>
-      🕒 {formatDate(+startTime!, 'YYYY-MM-DD HH:mm')} ~{' '}
-      {formatDate(+endTime!, 'YYYY-MM-DD HH:mm')}
+      🕒 <Time dateTime={+startTime!} format="YYYY-MM-DD HH:mm" /> ~{' '}
+      <Time dateTime={+endTime!} format="YYYY-MM-DD HH:mm" />
     </>
   );
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,5 +1,6 @@
 // @ts-check
-import { fixupPluginRules } from '@eslint/compat';
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
+import { FlatCompat } from '@eslint/eslintrc';
 import eslint from '@eslint/js';
 import eslintConfigPrettier from 'eslint-config-prettier';
 import reactPlugin from 'eslint-plugin-react';
@@ -8,7 +9,8 @@ import globals from 'globals';
 import tsEslint from 'typescript-eslint';
 import { fileURLToPath } from 'url';
 
-const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url));
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url)),
+  flatCompat = new FlatCompat();
 
 export default tsEslint.config(
   // register all of the plugins up-front
@@ -28,6 +30,7 @@ export default tsEslint.config(
   // extends ...
   eslint.configs.recommended,
   ...tsEslint.configs.recommended,
+  ...fixupConfigRules(flatCompat.extends('plugin:@next/next/core-web-vitals')),
 
   // base config
   {
@@ -43,6 +46,10 @@ export default tsEslint.config(
       'no-empty-pattern': 'warn',
       'simple-import-sort/exports': 'error',
       'simple-import-sort/imports': 'error',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unsafe-declaration-merging': 'warn',
       'react/jsx-no-target-blank': 'warn',
       'react/jsx-sort-props': [
         'error',
@@ -53,10 +60,7 @@ export default tsEslint.config(
           noSortAlphabetically: true,
         },
       ],
-      '@typescript-eslint/no-unused-vars': 'warn',
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-empty-object-type': 'off',
-      '@typescript-eslint/no-unsafe-declaration-merging': 'warn',
+      '@next/next/no-sync-scripts': 'warn',
     },
   },
   {

diff --git a/next.config.mjs → next.config.ts b/next.config.mjs → next.config.ts
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "echarts-jsx": "^0.5.4",
     "file-type": "^19.6.0",
-    "idea-react": "^2.0.0-rc.7",
+    "idea-react": "^2.0.0-rc.8",
     "koajax": "^3.0.2",
     "leaflet": "^1.9.4",
     "leaflet.chinatmsproviders": "^3.0.6",
@@ -55,6 +55,7 @@
     "@babel/plugin-transform-typescript": "^7.25.9",
     "@babel/preset-react": "^7.25.9",
     "@eslint/compat": "^1.2.1",
+    "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.13.0",
     "@kaiyuanshe/kys-service": "^1.0.0-rc.0",
     "@softonus/prettier-plugin-duplicate-remover": "^1.0.1",
@@ -65,7 +66,7 @@
     "@types/lodash": "^4.17.12",
     "@types/mdx": "^2.0.13",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^20.17.0",
+    "@types/node": "^20.17.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "eslint": "^9.13.0",

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -19,7 +19,7 @@ export default function Document() {
         />
         <link
           rel="stylesheet"
-          href="https://npm.onmicrosoft.cn/idea-react/dist/index.css"
+          href="https://npm.onmicrosoft.cn/idea-react@2.0.0-rc.8/dist/index.css"
         />
         <link
           rel="stylesheet"

diff --git a/pages/activity/[id]/forum/[forumId].tsx b/pages/activity/[id]/forum/[forumId].tsx
@@ -1,17 +1,16 @@
-import { ShareBox } from 'idea-react';
-import { TableCellLocation } from 'mobx-lark';
+import { ShareBox, Timeline, TimelineEvent } from 'idea-react';
+import { TableCellLocation, TableCellValue } from 'mobx-lark';
 import { observer } from 'mobx-react';
 import { cache, compose, errorLogger, router } from 'next-ssr-middleware';
 import { QRCodeSVG } from 'qrcode.react';
 import { Component } from 'react';
 import { Container } from 'react-bootstrap';
 
-import ForumTimeline from '../../../../components/Activity/Forum/Timeline';
 import { PageHead } from '../../../../components/Layout/PageHead';
 import { Activity, ActivityModel } from '../../../../models/Activity';
 import { Agenda } from '../../../../models/Activity/Agenda';
 import { Forum } from '../../../../models/Activity/Forum';
-import { API_Host } from '../../../../models/Base';
+import { API_Host, blobURLOf } from '../../../../models/Base';
 import { t } from '../../../../models/Base/Translation';
 import { fileURLOf } from '../../../api/lark/file/[id]';
 
@@ -47,6 +46,20 @@ export default class ForumPage extends Component<ForumPageProps> {
       { sharedURL } = this;
     const { id: activityId, name, city, location, image, cardImage } = activity,
       { name: forumName, location: room } = forum;
+    const events: TimelineEvent[] = agendas.map(
+      ({ id, title, startTime, endTime, summary, mentors, mentorAvatars }) => ({
+        title: title as string,
+        summary: summary as string,
+        time: [startTime as number, endTime as number],
+        link: `/activity/${activityId}/agenda/${id}`,
+        people: (mentors as string[]).map((name, index) => ({
+          name,
+          avatar: blobURLOf([
+            (mentorAvatars as TableCellValue[])![index]!,
+          ] as TableCellValue),
+        })),
+      }),
+    );
 
     return (
       <Container
@@ -67,7 +80,7 @@ export default class ForumPage extends Component<ForumPageProps> {
           </ul>
         </header>
         <section className="p-3">
-          <ForumTimeline {...{ activityId, agendas }} />
+          <Timeline events={events} timeFormat="YYYY-MM-DD HH:mm" />
         </section>
         <footer className="d-flex flex-column align-items-center gap-4">
           <QRCodeSVG value={sharedURL} />