feat: topic edit (#25)

* feat: add edit to topic

* feat: add access control to topic edit

* refactor: headerConfig

* refactor: rename page component and service method

* refactor: rename topic create to edit

Author: JASONPANGGO

config/routes.ts

@@ -54,14 +54,19 @@ const routes: IRoute[] = [
         path: '/topic/create',
         exact: true,
         title: '新建话题',
-        component: '@/page/topic/create',
+        component: '@/page/topic/edit',
         access: 'canPostTopic',
       },
       {
         path: '/topic/:id',
         exact: true,
         component: '@/page/topic/detail',
       },
+      {
+        path: '/topic/:id/edit',
+        exact: true,
+        component: '@/page/topic/edit',
+      },
       {
         path: '/user/:loginname',
         exact: true,

src/layout/index.tsx

@@ -43,34 +43,44 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
     subTitle: currentRoute?.description,
   };
 
-  const detailRegx = /\/(topic|user)\/(.*)/g;
+  const detailPaths = location.pathname.match(/\/(topic|user)\/(\w+)(\/\w+)?/);
 
-  if (location.pathname.match(detailRegx)) {
-    const paths = location.pathname.split('/');
+  if (detailPaths) {
+    const [, category, id, status] = detailPaths;
 
-    const id = paths.pop();
-    const category = paths.pop();
+    const isEdit = status === '/edit';
+
+    const routes = [
+      {
+        path: '/',
+        breadcrumbName: '主页',
+      },
+      {
+        path: '/',
+        breadcrumbName: BREADCRUMB_NAME_MAP[category as 'user' | 'topic'],
+      },
+      {
+        path: isEdit
+          ? location.pathname.replace(status, '')
+          : location.pathname,
+        breadcrumbName: id,
+      },
+    ];
+
+    if (isEdit) {
+      routes.push({
+        path: location.pathname,
+        breadcrumbName: '编辑',
+      });
+    }
 
     headerConfig = {
       title: null,
       breadcrumb: {
         itemRender: (route: { path: string; breadcrumbName: string }) => {
           return <Link to={route.path}>{route.breadcrumbName}</Link>;
         },
-        routes: [
-          {
-            path: '/',
-            breadcrumbName: '主页',
-          },
-          {
-            path: '/',
-            breadcrumbName: BREADCRUMB_NAME_MAP[category as 'user' | 'topic'],
-          },
-          {
-            path: location.pathname,
-            breadcrumbName: id,
-          },
-        ],
+        routes,
       },
     };
   }

src/page/topic/component/SubTitle.tsx

@@ -1,11 +1,22 @@
 import React from 'react';
 import dayjs from 'dayjs';
 
-import { Avatar, Divider, Space, Button } from 'antd';
-import { Link } from 'umi';
+import { Avatar, Divider, Space } from 'antd';
+import { Link, useModel } from 'umi';
+import { FormOutlined } from '@ant-design/icons';
 
 const SubTitle: React.FC<Props> = (props) => {
-  const { author, create_at, visit_count, reply_count } = props;
+  const { author, create_at, visit_count, reply_count, author_id } = props;
+
+  const { user } = useModel('user');
+
+  const renderEdit = () =>
+    user?.id === author_id && (
+      <Link to={location.pathname + '/edit'}>
+        <FormOutlined />
+      </Link>
+    );
+
   return (
     <Space size={0} split={<Divider type="vertical"></Divider>}>
       <Link to={`/user/${author.loginname}`}>
@@ -14,6 +25,8 @@ const SubTitle: React.FC<Props> = (props) => {
       <span>发布：{dayjs(create_at).format('YYYY-MM-DD hh:mm:ss')}</span>
       <span>浏览：{visit_count}</span>
       <span>回复：{reply_count}</span>
+
+      {renderEdit()}
     </Space>
   );
 };
@@ -29,4 +42,6 @@ interface Props {
     loginname: string;
     avatar_url: string;
   };
+
+  author_id: string;
 }

src/page/topic/detail.tsx

@@ -31,7 +31,7 @@ const TopicDetailPage: React.FC<React.PropsWithChildren<Props>> = (props) => {
         return;
       }
 
-      const res = await API.queryTopicDetail({
+      const res = await API.readTopic({
         id: topicId,
         mdrender: false,
       });
@@ -58,7 +58,7 @@ const TopicDetailPage: React.FC<React.PropsWithChildren<Props>> = (props) => {
       return;
     }
 
-    await API.postReply(topicId, {
+    await API.createReply(topicId, {
       ...data,
       accesstoken: token,
     });
@@ -71,7 +71,7 @@ const TopicDetailPage: React.FC<React.PropsWithChildren<Props>> = (props) => {
       return;
     }
 
-    await API.postReplyUps(replyId, {
+    await API.updateReplyUps(replyId, {
       accesstoken: token,
     });
   };

src/page/topic/create/index.less src/page/topic/edit/index.less

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useModel, useHistory } from 'umi';
+import { useModel, useHistory, useParams, useRequest } from 'umi';
 import { Form, Input, Select, Button, Space } from 'antd';
 import { TABS_MAP } from '@/constants';
 
@@ -8,24 +8,59 @@ import Markdown from '@/component/Markdown';
 import * as API from '@/service/topic';
 import * as styles from './index.less';
 
-const CreateTopic: React.FC<Props> = (props) => {
+const TopicEditPage: React.FC<Props> = (props) => {
   const history = useHistory();
   const [form] = Form.useForm();
   const { initialState } = useModel('@@initialState');
+  const { user } = useModel('user');
 
   const token = initialState?.token;
 
+  const { id } = useParams<{ id?: string }>();
+
+  useRequest(
+    async () => {
+      if (!id) return;
+      const { data } = await API.readTopic({
+        id,
+        mdrender: false,
+      });
+
+      if (data.author_id !== user?.id) {
+        history.push(location.pathname.replace(/\/edit$/, ''));
+        return;
+      }
+
+      form.setFieldsValue({
+        title: data.title,
+        content: data.content,
+        tab: data.tab,
+      });
+    },
+    {
+      ready: !!id,
+    },
+  );
+
   const onFinish = async (values: any) => {
     console.debug('===create.values', values);
 
     if (!token) {
       return;
     }
 
-    await API.postTopic({
-      ...values,
-      accesstoken: token,
-    });
+    if (id) {
+      await API.updateTopic({
+        topic_id: id,
+        ...values,
+        accesstoken: token,
+      });
+    } else {
+      await API.createTopic({
+        ...values,
+        accesstoken: token,
+      });
+    }
 
     onReset();
 
@@ -88,6 +123,6 @@ const CreateTopic: React.FC<Props> = (props) => {
   );
 };
 
-export default CreateTopic;
+export default TopicEditPage;
 
 interface Props {}

src/page/topic/create/index.tsx src/page/topic/edit/index.tsx

@@ -36,7 +36,7 @@ const TopicListPage: React.FC<Props> = (props) => {
 
   const { loading, refresh } = useRequest(
     async () => {
-      const res = await API.queryTopicList({
+      const res = await API.listTopic({
         tab,
         page,
         limit,

src/page/topic/index.tsx

@@ -11,9 +11,9 @@ import { getUserInfo } from '@/service/user';
 
 import * as styles from './index.less';
 
-const { Text, Paragraph } = Typography;
+const { Text } = Typography;
 
-const UserDetail: React.FC<Props> = (props) => {
+const UserDetailPage: React.FC<Props> = (props) => {
   const params: Record<string, any> = useParams();
 
   const { data } = useRequest(async () => {
@@ -92,6 +92,6 @@ const UserDetail: React.FC<Props> = (props) => {
   );
 };
 
-export default UserDetail;
+export default UserDetailPage;
 
 interface Props {}

src/page/user/index.tsx

@@ -1,7 +1,7 @@
 import { request } from 'umi';
 import { BASE_URL } from '@/constants';
 
-export const queryTopicList = async (params: {
+export const listTopic = async (params: {
   tab?: string;
   page?: number;
   limit?: number;
@@ -25,7 +25,7 @@ export const queryTopicList = async (params: {
   return res;
 };
 
-export const postTopic = async (data: {
+export const createTopic = async (data: {
   title: string;
   tab: string;
   content: string;
@@ -39,7 +39,22 @@ export const postTopic = async (data: {
   return request(`${BASE_URL}/api/v1/topics`, options);
 };
 
-export const queryTopicDetail = async (params: {
+export const updateTopic = async (data: {
+  topic_id: string;
+  title: string;
+  tab: string;
+  content: string;
+  accesstoken: string;
+}) => {
+  const options: any = {
+    method: 'POST',
+    data,
+  };
+
+  return request(`${BASE_URL}/api/v1/topics/update`, options);
+};
+
+export const readTopic = async (params: {
   id: string;
   mdrender?: boolean;
   accesstoken?: boolean;
@@ -58,7 +73,7 @@ export const queryTopicDetail = async (params: {
   return request(`${BASE_URL}/api/v1/topic/${id}`, options);
 };
 
-export const postReply = async (
+export const createReply = async (
   topicId: string,
   data: {
     content: string;
@@ -74,7 +89,7 @@ export const postReply = async (
   return request(`${BASE_URL}/api/v1/topic/${topicId}/replies`, options);
 };
 
-export const postReplyUps = async (
+export const updateReplyUps = async (
   replyId: string,
   data: {
     accesstoken: string;