refactor: split component & update doc (#22)

* feat: update about page

* feat: update title length limit

* refactor: split component

Author: thonatos

src/page/topic/component/CommentForm.tsx src/component/CommentForm/index.tsxsrc/page/topic/component/CommentForm.tsx renamed to src/component/CommentForm/index.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import dayjs from 'dayjs';
+import { Link } from 'umi';
 import Markdown from '@/component/Markdown';
 
 import { Comment, Avatar, Divider } from 'antd';
@@ -38,6 +39,7 @@ const CommentList: React.FC<Props> = (props) => {
     data: Node;
   }> = ({ data }) => {
     const { id, author, content, create_at, children } = data;
+    const { loginname, avatar_url } = author;
 
     return (
       <Fragment key={`fragment-${id}`}>
@@ -63,7 +65,11 @@ const CommentList: React.FC<Props> = (props) => {
           datetime={
             <span>{dayjs(create_at).format('YYYY-MM-DD hh:mm:ss')}</span>
           }
-          avatar={<Avatar src={author.avatar_url} alt={author.loginname} />}
+          avatar={
+            <Link to={`/user/${loginname}`}>
+              <Avatar src={avatar_url} alt={loginname} />
+            </Link>
+          }
           content={
             <div className={styles.detail}>
               <Markdown type="render" value={content} />

…e/topic/component/CommentList/index.less src/component/CommentList/index.lesssrc/page/topic/component/CommentList/index.less renamed to src/component/CommentList/index.less src/page/topic/component/CommentList/index.less renamed to src/component/CommentList/index.less

@@ -1,6 +1,6 @@
 import React from 'react';
 import dayjs from 'dayjs';
-import { useHistory } from 'umi';
+import { useHistory, Link } from 'umi';
 import { Space, Avatar, Tag } from 'antd';
 import { ListToolBarProps } from '@ant-design/pro-table';
 import ProList, { ProListMetas } from '@ant-design/pro-list';
@@ -10,14 +10,13 @@ import { MESSAGE_TYPE_MAP, MessageType } from '@/constants';
 import * as styles from './index.less';
 
 const MessageList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
-  const history = useHistory();
-
   const metas: ProListMetas = {
     avatar: {
       dataIndex: 'author.avatar_url',
       render: (_, entity: MessageModel) => {
         const { type: _type, author } = entity;
         const type = MESSAGE_TYPE_MAP[_type as MessageType];
+        const { loginname, avatar_url } = author;
 
         return (
           <Space size={16}>
@@ -26,10 +25,12 @@ const MessageList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
                 width: '200px',
               }}
             >
-              <Space size={8}>
-                <Avatar size="small" src={author.avatar_url} />
-                <span>{author.loginname}</span>
-              </Space>
+              <Link to={`/user/${loginname}`}>
+                <Space size={8}>
+                  <Avatar size="small" src={avatar_url} />
+                  <span>{loginname}</span>
+                </Space>
+              </Link>
             </div>
 
             <Tag color={type.color}>{type.name}</Tag>
@@ -41,7 +42,10 @@ const MessageList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
       dataIndex: 'title',
       valueType: 'text',
       render: (_, entity: MessageModel) => {
-        return entity.topic.title;
+        const {
+          topic: { id, title },
+        } = entity;
+        return <Link to={`/topic/${id}`}>{title}</Link>;
       },
     },
     actions: {
@@ -60,13 +64,6 @@ const MessageList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
       metas={metas}
       className={styles.list}
       toolbar={toolbar}
-      onRow={(record: MessageModel) => {
-        return {
-          onClick: () => {
-            history.push(`/topic/${record.topic.id}`);
-          },
-        };
-      }}
     />
   );
 };

…ge/topic/component/CommentList/index.tsx src/component/CommentList/index.tsxsrc/page/topic/component/CommentList/index.tsx renamed to src/component/CommentList/index.tsx src/page/topic/component/CommentList/index.tsx renamed to src/component/CommentList/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import dayjs from 'dayjs';
-import { useHistory } from 'umi';
+import { Link } from 'umi';
 import { Space, Avatar, Tag } from 'antd';
 import { ListToolBarProps } from '@ant-design/pro-table';
 import ProList, { ProListMetas } from '@ant-design/pro-list';
@@ -10,15 +10,14 @@ import { TABS_MAP, TabType } from '@/constants';
 import * as styles from './index.less';
 
 const TopicList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
-  const history = useHistory();
-
   const metas: ProListMetas = {
     avatar: {
       dataIndex: 'author.avatar_url',
       render: (_, entity: TopicModel) => {
         const { tab: _tab, author, reply_count, visit_count, top } = entity;
 
         const category = TABS_MAP[_tab as TabType];
+        const { loginname, avatar_url } = author;
 
         const renderReplyVisit = () =>
           typeof visit_count === 'number' && (
@@ -41,7 +40,9 @@ const TopicList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
 
         return (
           <Space>
-            <Avatar size="small" src={author.avatar_url} />
+            <Link to={`/user/${loginname}`}>
+              <Avatar size="small" src={avatar_url} />
+            </Link>
             {renderReplyVisit()}
             {top ? (
               <Tag color="#5BD8A6">置顶</Tag>
@@ -55,6 +56,10 @@ const TopicList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
     title: {
       dataIndex: 'title',
       valueType: 'text',
+      render: (_, entity: TopicModel) => {
+        const { id, title } = entity;
+        return <Link to={`/topic/${id}`}>{title}</Link>;
+      },
     },
     actions: {
       render: (_, entity: TopicModel) => {
@@ -73,13 +78,6 @@ const TopicList: React.FC<Props> = ({ dataSource, loading, toolbar }) => {
       metas={metas}
       className={styles.list}
       toolbar={toolbar}
-      onRow={(record) => {
-        return {
-          onClick: () => {
-            history.push(`/topic/${record.id}`);
-          },
-        };
-      }}
     />
   );
 };

src/component/MessageList/index.tsx

@@ -4,25 +4,33 @@ import Markdown from '@/component/Markdown';
 const content = `
 ## 关于
 
-- CNode 社区为国内最大最具影响力的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
+CNode 社区为国内最大最具影响力的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
 
-- CNode 社区由一批热爱 Node.js 技术的工程师发起，目前已经吸引了互联网各个公司的专业技术人员加入，我们非常欢迎更多对 Node.js 感兴趣的朋友。
+CNode 社区由一批热爱 Node.js 技术的工程师发起，目前已经吸引了互联网各个公司的专业技术人员加入，我们非常欢迎更多对 Node.js 感兴趣的朋友。
 
-- CNode 的 SLA 保证是，一个9，即 90.000000%。
+CNode 的 SLA 保证是，一个9，即 90.000000%。
 
 社区目前由 [@alsotang](http://cnodejs.org/user/alsotang) 在维护，有问题请联系：[https://github.com/alsotang](https://github.com/alsotang)
 
 请关注我们的官方微博：[http://weibo.com/cnodejs](http://weibo.com/cnodejs)
 
+
 ## 客户端
 
-- 客户端由 [@soliury](https://cnodejs.org/user/soliury) 开发维护。
+客户端由 [@soliury](https://cnodejs.org/user/soliury) 开发维护。
 
-- 源码地址： [https://github.com/soliury/noder-react-native](https://github.com/soliury/noder-react-native) 。
+源码地址： [https://github.com/soliury/noder-react-native](https://github.com/soliury/noder-react-native) 。
 
 立即体验 CNode 客户端，直接扫描页面右侧二维码。
 
 另，安卓用户同时可选择：[https://github.com/TakWolf/CNode-Material-Design](https://github.com/TakWolf/CNode-Material-Design) ，这是 Java 原生开发的安卓客户端。
+
+
+## 贡献者
+
+> egg-cnode
+    
+[![contributors](https://ergatejs.implements.io/badges/contributors/cnodejs/egg-cnode.svg?owner=cnodejs&repo=egg-cnode&type=svg&width=1232&size=64&padding=8)](https://github.com/cnodejs/egg-cnode/graphs/contributors)
 `;
 
 const AboutPage: React.FC<Props> = (props) => {

src/component/TopicList/index.tsx

@@ -55,7 +55,7 @@ const CreateTopic: React.FC<Props> = (props) => {
         <Form.Item
           label="标题"
           name="title"
-          rules={[{ required: true }, { min: 8 }]}
+          rules={[{ required: true }, { min: 10 }]}
         >
           <Input allowClear />
         </Form.Item>

src/page/about/index.tsx

@@ -5,12 +5,12 @@ import { useRequest } from 'ahooks';
 import { PageHeader, Divider } from 'antd';
 import * as API from '@/service/topic';
 
-import SubTitle from './component/SubTitle';
 import Markdown from '@/component/Markdown';
-import CommentForm from './component/CommentForm';
-import CommentList from './component/CommentList';
+import CommentList from '@/component/CommentList';
+import CommentForm from '@/component/CommentForm';
+import SubTitle from './component/SubTitle';
 
-const TopicDetail: React.FC<React.PropsWithChildren<Props>> = (props) => {
+const TopicDetailPage: React.FC<React.PropsWithChildren<Props>> = (props) => {
   const params: Record<string, any> = useParams();
   const topicId = params?.id;
 
@@ -174,6 +174,6 @@ const TopicDetail: React.FC<React.PropsWithChildren<Props>> = (props) => {
   );
 };
 
-export default TopicDetail;
+export default TopicDetailPage;
 
 interface Props {}