feat: complete topic comment & reply

Author: thonatos

config/config.ts

@@ -5,7 +5,7 @@ import { defineConfig } from 'umi';
 export default defineConfig({
   singular: true,
   fastRefresh: {},
-  mfsu: {},
+  // mfsu: {},
 
   nodeModulesTransform: {
     type: 'none',

package.json

@@ -48,4 +48,4 @@
     "umi": "^3.5.20",
     "yorkie": "^2.0.0"
   }
-}
+}

src/access.ts

@@ -0,0 +1,7 @@
+export default function (initialState: InitialState) {
+  const { token } = initialState;
+
+  return {
+    canPostComment: !!token,
+  };
+}

src/component/Markdown/index.less

@@ -0,0 +1,13 @@
+.editor {
+  border: none;
+
+  :global {
+    .editor-container {
+      > .sec-html {
+        > .html-wrap {
+          padding: 0;
+        }
+      }
+    }
+  }
+}

src/component/Markdown/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import MarkdownIt from 'markdown-it';
+import MdEditor from 'react-markdown-editor-lite';
+import 'react-markdown-editor-lite/lib/index.css';
+
+import * as styles from './index.less';
+
+const mdParser = new MarkdownIt();
+
+const Markdown: React.FC<Props> = (props) => {
+  const { value, type, onChange } = props;
+
+  let view;
+
+  if (type === 'render') {
+    view = {
+      menu: false,
+      md: false,
+      html: true,
+    };
+  }
+
+  if (type === 'editor') {
+    view = {
+      menu: true,
+      md: true,
+      html: false,
+    };
+  }
+
+  return (
+    <MdEditor
+      className={styles.editor}
+      readOnly={type === 'render'}
+      view={view}
+      value={value}
+      renderHTML={(text) => mdParser.render(text)}
+      onChange={(data) => {
+        onChange && onChange(data.text);
+      }}
+    />
+  );
+};
+
+export default Markdown;
+
+interface Props {
+  type: 'editor' | 'render';
+  value: string;
+  onChange?: (text: string) => void;
+}

src/layout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, history } from 'umi';
-import { Avatar, Tooltip } from 'antd';
+import { Avatar, Tooltip, Button } from 'antd';
 
 import {
   DefaultFooter,
@@ -17,7 +17,18 @@ const RightContent: React.FC<{
   const user = props?.user;
 
   if (!user) {
-    return null;
+    return (
+      <div className="cnode-header-right">
+        <Button
+          type="link"
+          onClick={() => {
+            history.push('/auth');
+          }}
+        >
+          登录
+        </Button>
+      </div>
+    );
   }
 
   const { loginname, avatar_url } = user;
@@ -36,8 +47,8 @@ const layoutConfig = ({
   initialState: InitialState;
 }): BasicLayoutProps => {
   const { title, logo, description } = config;
+
   return {
-    // common
     navTheme: 'light',
     layout: 'top',
     headerHeight: 64,
@@ -47,15 +58,10 @@ const layoutConfig = ({
     logo,
     title,
 
-    // waterMarkProps: {
-    //   content: config.title,
-    // },
-
     menuHeaderRender: () => {
       return <Brand title={title} description={description} logo={logo} />;
     },
 
-    // heander
     menuDataRender: (menuData: MenuDataItem[]) => {
       let menus: MenuDataItem[] = [];
       const apps: MenuDataItem[] = [];
@@ -83,29 +89,16 @@ const layoutConfig = ({
     menuItemRender: (item) =>
       item.path && <Link to={item.path}>{item.name}</Link>,
 
-    // right
     rightContentRender: () => {
       return <RightContent user={initialState.user} />;
     },
 
-    // footer
     footerRender: () => (
       <DefaultFooter
         links={false}
         copyright={`${new Date().getFullYear()} - CNodejs.org`}
       />
     ),
-
-    onPageChange: () => {
-      const { user, token } = initialState || {};
-
-      // 非登录页面
-      if (history.location.pathname !== '/auth') {
-        if (!user || !token) {
-          history.push('/auth');
-        }
-      }
-    },
   };
 };
 

src/layout/index.tsx

@@ -62,9 +62,9 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
       <ProCard gutter={16} bordered={false} ghost>
         <ProCard bordered={false}>{props.children}</ProCard>
         <ProCard
-          title=""
           layout="center"
           bordered={false}
+          ghost
           colSpan={{
             xs: '50px',
             sm: '100px',

src/page/topic/component/CommentForm.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import { Comment, Avatar, Button } from 'antd';
+import Markdown from '@/component/Markdown';
+
+const CommentForm: React.FC<Props> = (props) => {
+  const { data, user, onSubmit, onSubmitText = '提交评论' } = props;
+  const { loginname, avatar_url } = user;
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+    setValue(data);
+  }, [data]);
+
+  return (
+    <Comment
+      author={<span>{loginname}</span>}
+      avatar={<Avatar src={avatar_url} alt={loginname} />}
+      actions={[
+        <Button
+          type="primary"
+          size="small"
+          onClick={async () => {
+            if (!value) {
+              return;
+            }
+
+            await onSubmit(value);
+          }}
+        >
+          {onSubmitText}
+        </Button>,
+      ]}
+      content={<Markdown type="editor" value={value} onChange={setValue} />}
+    />
+  );
+};
+
+export default CommentForm;
+
+interface Props {
+  data?: string;
+  user: {
+    loginname: string;
+    avatar_url: string;
+  };
+  onSubmit: (value: string) => Promise<void>;
+  onSubmitText?: string;
+}

src/page/topic/component/CommentList/index.less

@@ -0,0 +1,12 @@
+.list {
+  img {
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
+.detail {
+  * {
+    overflow: hidden;
+  }
+}

src/page/topic/component/CommentList/index.tsx

@@ -0,0 +1,99 @@
+import React, { Fragment } from 'react';
+import dayjs from 'dayjs';
+import Markdown from '@/component/Markdown';
+
+import { Comment, Avatar, Divider } from 'antd';
+import {
+  LikeFilled,
+  EditFilled,
+  DeleteFilled,
+  CommentOutlined,
+} from '@ant-design/icons';
+
+import * as styles from './index.less';
+
+const unflatten = (array: Node[], parent?: Node, tree?: Node[]) => {
+  let _parent = parent || { id: null, children: [] };
+  let _tree = tree || [];
+
+  const children = array.filter((child) => child.reply_id === _parent.id);
+
+  if (children.length > 0) {
+    if (!_parent.id) {
+      _tree = children;
+    } else {
+      _parent.children = children;
+    }
+    children.forEach((child) => unflatten(array, child));
+  }
+
+  return _tree;
+};
+
+const CommentList: React.FC<Props> = (props) => {
+  const { list, onReply, replyRender } = props;
+  const tree = unflatten(list);
+
+  const ComentDetail: React.FC<{
+    data: Node;
+  }> = ({ data }) => {
+    const { id, author, content, create_at, children } = data;
+
+    return (
+      <Fragment key={`fragment-${id}`}>
+        <Divider type="horizontal" key={`divider-${id}`} />
+
+        <Comment
+          key={id}
+          actions={[
+            <LikeFilled />,
+            <EditFilled />,
+            <DeleteFilled />,
+            <CommentOutlined
+              onClick={() => {
+                onReply(data);
+              }}
+            />,
+          ]}
+          author={<span>{author.loginname}</span>}
+          datetime={
+            <span>{dayjs(create_at).format('YYYY-MM-DD hh:mm:ss')}</span>
+          }
+          avatar={<Avatar src={author.avatar_url} alt={author.loginname} />}
+          content={
+            <div className={styles.detail}>
+              <Markdown type="render" value={content} />
+            </div>
+          }
+        >
+          {replyRender(id)}
+
+          {children?.map((item) => (
+            <ComentDetail key={`detail-${id}-${item.id}`} data={item} />
+          ))}
+        </Comment>
+      </Fragment>
+    );
+  };
+
+  return (
+    <div className={styles.list}>
+      {tree.map((item) => (
+        <ComentDetail key={`list-${item.id}`} data={item} />
+      ))}
+    </div>
+  );
+};
+
+export default CommentList;
+
+interface Props {
+  list: ReplyModel[];
+
+  onReply: (record: Node) => void;
+  replyRender: (id: string) => React.ReactNode;
+}
+
+interface Node extends ReplyModel {
+  children?: Node[];
+}