[optimize] render Wiki list as a Tree view

[optimize] upgrade to Koa Router 14 & other latest Upstream packages

Author: TechQuery

components/Navigator/MainNavigator.tsx

@@ -28,6 +28,8 @@ export const MainNavigator: FC = observer(() => {
           <Nav className="me-auto">
             <Nav.Link href="/article">{t('article')}</Nav.Link>
 
+            <Nav.Link href="/wiki">{t('wiki')}</Nav.Link>
+
             <Nav.Link href="/component">{t('component')}</Nav.Link>
 
             <Nav.Link href="/pagination">{t('pagination')}</Nav.Link>

models/Document.ts

@@ -1,9 +1,10 @@
 import { DocumentModel } from 'mobx-lark';
 
 import { lark } from '../pages/api/Lark/core';
+import { LarkWikiDomain } from './configuration';
 
 export class MyDocumentModel extends DocumentModel {
   client = lark.client;
 }
 
-export default new MyDocumentModel();
+export default new MyDocumentModel(LarkWikiDomain);

package.json

@@ -15,13 +15,13 @@
     "@editorjs/list": "^2.0.8",
     "@editorjs/paragraph": "^2.11.7",
     "@editorjs/quote": "^2.7.6",
-    "@koa/router": "^13.1.1",
+    "@koa/router": "^14.0.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.4.5",
-    "@sentry/nextjs": "^10.0.0",
+    "@sentry/nextjs": "^10.1.0",
     "copy-webpack-plugin": "^13.0.0",
-    "core-js": "^3.44.0",
+    "core-js": "^3.45.0",
     "editorjs-html": "^4.0.5",
     "file-type": "^21.0.0",
     "formidable": "^3.5.4",
@@ -32,12 +32,12 @@
     "less": "^4.4.0",
     "less-loader": "^12.3.0",
     "lodash": "^4.17.21",
-    "marked": "^16.1.1",
+    "marked": "^16.1.2",
     "mime": "^4.0.7",
     "mobx": "^6.13.7",
     "mobx-github": "^0.3.11",
     "mobx-i18n": "^0.7.1",
-    "mobx-lark": "^2.4.0-rc.10",
+    "mobx-lark": "^2.4.0",
     "mobx-react": "^9.2.0",
     "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.0",
@@ -56,7 +56,7 @@
     "remark-gfm": "^4.0.1",
     "remark-mdx-frontmatter": "^5.2.0",
     "undici": "^7.13.0",
-    "web-utility": "^4.4.3",
+    "web-utility": "^4.5.1",
     "webpack": "^5.101.0",
     "yaml": "^2.8.0"
   },
@@ -87,11 +87,11 @@
     "globals": "^16.3.0",
     "husky": "^9.1.7",
     "jiti": "^2.5.1",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.1.4",
     "prettier": "^3.6.2",
     "prettier-plugin-css-order": "^2.1.2",
     "typescript": "~5.9.2",
-    "typescript-eslint": "^8.38.0"
+    "typescript-eslint": "^8.39.0"
   },
   "resolutions": {
     "next": "$next"

pages/wiki/index.tsx

@@ -1,9 +1,12 @@
 import { WikiNode } from 'mobx-lark';
+import { observer } from 'mobx-react';
 import { GetStaticProps } from 'next';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { Container } from 'react-bootstrap';
+import { treeFrom } from 'web-utility';
 
 import { PageHead } from '../../components/Layout/PageHead';
+import { I18nContext } from '../../models/Translation';
 import wikiStore from '../../models/Wiki';
 import { lark } from '../api/Lark/core';
 
@@ -15,20 +18,38 @@ export const getStaticProps: GetStaticProps = async () => {
   return { props: { nodes } };
 };
 
-const WikiIndexPage: FC<{ nodes: WikiNode[] }> = ({ nodes }) => (
-  <Container>
-    <PageHead title="Wiki" />
-
-    <h1>Wiki</h1>
+interface XWikiNode extends WikiNode {
+  // eslint-disable-next-line no-restricted-syntax
+  children?: XWikiNode[];
+}
 
+const renderTree = (children?: XWikiNode[]) =>
+  children && (
     <ol>
-      {nodes.map(({ node_token, title }) => (
+      {children.map(({ node_token, title, children }) => (
         <li key={node_token}>
           <a href={`/wiki/${node_token}`}>{title}</a>
+
+          {renderTree(children)}
         </li>
       ))}
     </ol>
-  </Container>
-);
+  );
+
+const WikiIndexPage: FC<{ nodes: XWikiNode[] }> = observer(({ nodes }) => {
+  const { t } = useContext(I18nContext);
+
+  return (
+    <Container>
+      <PageHead title={t('wiki')} />
+
+      <h1>{t('wiki')}</h1>
+
+      {renderTree(
+        treeFrom(nodes, 'node_token', 'parent_node_token', 'children'),
+      )}
+    </Container>
+  );
+});
 
 export default WikiIndexPage;