feat: add create page

Author: thonatos

config/routes.ts

@@ -27,6 +27,13 @@ const routes: IRoute[] = [
         name: 'API',
         component: '@/page/api',
       },
+      {
+        path: '/topic/create',
+        exact: true,
+        title: '新建话题',
+        component: '@/page/topic/create',
+        access: 'canPostTopic',
+      },
       {
         path: '/topic/:id',
         exact: true,

src/access.ts

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

src/app.tsx

@@ -71,7 +71,7 @@ export const patchRoutes = ({ routes }: { routes: Array<IRoute> }) => {
 };
 
 export const request: RequestConfig = {
-  timeout: 1000,
+  timeout: 6 * 1000,
   errorConfig: {},
   middlewares: [],
   requestInterceptors: [],

src/component/Markdown/index.tsx

@@ -8,7 +8,7 @@ import * as styles from './index.less';
 const mdParser = new MarkdownIt();
 
 const Markdown: React.FC<Props> = (props) => {
-  const { value, type, onChange } = props;
+  const { value = '', type, onChange, customClassName = '' } = props;
 
   let view;
   let classname = styles.markdown;
@@ -33,6 +33,10 @@ const Markdown: React.FC<Props> = (props) => {
     classname += ` ${styles.markdown_editor}`;
   }
 
+  if (customClassName) {
+    classname += ` ${customClassName}`;
+  }
+
   return (
     <MdEditor
       className={classname}
@@ -51,6 +55,7 @@ export default Markdown;
 
 interface Props {
   type: 'editor' | 'render';
-  value: string;
+  value?: string;
+  customClassName?: '';
   onChange?: (text: string) => void;
 }

src/constants/index.ts

@@ -3,23 +3,23 @@ export const BASE_URL = 'https://cnodejs.org';
 export const TABS_MAP = {
   good: {
     name: '精华',
-    color: '#5BD8A6',
+    color: '#87d068',
   },
   share: {
     name: '分享',
-    color: '#5BD8A6',
+    color: '#2db7f5',
   },
   ask: {
     name: '问答',
     color: '#5BD8A6',
   },
   job: {
     name: '招聘',
-    color: '#5BD8A6',
+    color: '#108ee9',
   },
   dev: {
     name: '客户端测试',
-    color: '#5BD8A6',
+    color: 'green',
   },
 };
 

src/layout.tsx

@@ -99,6 +99,8 @@ const layoutConfig = ({
         copyright={`${new Date().getFullYear()} - CNodejs.org`}
       />
     ),
+
+    onPageChange: () => {},
   };
 };
 

src/layout/index.tsx

@@ -4,6 +4,7 @@ import ProCard from '@ant-design/pro-card';
 import { IRoute, Link } from 'umi';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Affix, Button } from 'antd';
+import { UpCircleOutlined } from '@ant-design/icons';
 
 import UserInfo from './component/UserInfo';
 
@@ -36,7 +37,9 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
     title: currentRoute?.title || currentRoute?.name,
   };
 
-  if (location.pathname.startsWith('/topic/')) {
+  const topicDetailRegx = /\/topic\/([a-f0-9]){24}/g;
+
+  if (location.pathname.match(topicDetailRegx)) {
     const topicBreadcrumbName = location.pathname.split('/').pop();
 
     headerConfig = {
@@ -79,10 +82,9 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
         </ProCard>
       </ProCard>
       <Affix
-        offsetBottom={200}
+        offsetBottom={50}
         style={{
           position: 'fixed',
-          bottom: '50px',
           right: '24px',
         }}
       >
@@ -91,6 +93,7 @@ const Layout: React.FC<React.PropsWithChildren<Props>> = (props) => {
             window.scrollTo(0, 0);
           }}
         >
+          <UpCircleOutlined />
           回到顶部
         </Button>
       </Affix>

src/page/topic/create/index.less

@@ -0,0 +1,3 @@
+.editor_create {
+  min-height: 600px;
+}

src/page/topic/create/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { useModel, useHistory } from 'umi';
+import { Form, Input, Select, Button, Space } from 'antd';
+import { TABS_MAP } from '@/constants';
+
+import Markdown from '@/component/Markdown';
+
+import * as API from '@/service/topic';
+import * as styles from './index.less';
+
+const CreateTopic: React.FC<Props> = (props) => {
+  const history = useHistory();
+  const [form] = Form.useForm();
+  const { initialState } = useModel('@@initialState');
+
+  const token = initialState?.token;
+
+  const onFinish = async (values: any) => {
+    console.debug('===create.values', values);
+
+    if (!token) {
+      return;
+    }
+
+    await API.postTopic({
+      ...values,
+      accesstoken: token,
+    });
+
+    onReset();
+
+    history.push('/');
+  };
+
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  const tabs = Object.entries(TABS_MAP).map(([value, info]) => {
+    return {
+      label: info.name,
+      value,
+    };
+  });
+
+  return (
+    <div>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        initialValues={{
+          tab: tabs[1].value,
+        }}
+      >
+        <Form.Item
+          label="标题"
+          name="title"
+          rules={[{ required: true }, { min: 8 }]}
+        >
+          <Input allowClear />
+        </Form.Item>
+        <Form.Item label="分类" name="tab" required>
+          <Select options={tabs} />
+        </Form.Item>
+        <Form.Item
+          label="内容"
+          name="content"
+          rules={[{ required: true }, { min: 10 }]}
+        >
+          <Markdown type="editor" customClassName={styles.editor_create} />
+        </Form.Item>
+        <Form.Item
+          style={{
+            textAlign: 'right',
+          }}
+        >
+          <Space>
+            <Button htmlType="button" onClick={onReset}>
+              重置
+            </Button>
+            <Button type="primary" htmlType="submit">
+              提交
+            </Button>
+          </Space>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+
+export default CreateTopic;
+
+interface Props {}

src/page/topic/index.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import dayjs from 'dayjs';
 
-import { useHistory } from 'umi';
+import { useHistory, useAccess } from 'umi';
 import { Avatar, Tag, Space, Divider, Button } from 'antd';
 import { useRequest, useReactive } from 'ahooks';
 import { ProListMetas } from '@ant-design/pro-list';
 import ProList from '@ant-design/pro-list';
-import { ReloadOutlined } from '@ant-design/icons';
+import { ReloadOutlined, EditOutlined } from '@ant-design/icons';
 
 import { TABS_MAP } from '@/constants';
 import type { TabType } from '@/constants';
@@ -17,6 +17,7 @@ import * as styles from './index.less';
 interface Props {}
 
 const TopicList: React.FC<Props> = (props) => {
+  const access = useAccess();
   const history = useHistory();
 
   const state = useReactive({
@@ -76,18 +77,12 @@ const TopicList: React.FC<Props> = (props) => {
       const offsetHeight = document.body.offsetHeight;
       const pageYOffset = window.pageYOffset;
 
-      console.debug('===pageYOffset', pageYOffset);
-      console.debug('===offsetHeight', offsetHeight);
-      console.debug('===scrollHeight', scrollHeight);
-
-      // if(pageYOffset) {
-      //   console.log('===onReachStart', hasNext, loading);
-      //   onReachStart();
-      //   return;
-      // }
+      // console.debug('===pageYOffset', pageYOffset);
+      // console.debug('===offsetHeight', offsetHeight);
+      // console.debug('===scrollHeight', scrollHeight);
 
       if (pageYOffset + offsetHeight === scrollHeight) {
-        console.log('===onReachEnd', hasNext, loading);
+        // console.log('===onReachEnd', hasNext, loading);
         onReachEnd();
       }
     };
@@ -166,6 +161,26 @@ const TopicList: React.FC<Props> = (props) => {
     refresh();
   };
 
+  const onCreate = () => {
+    history.push('/topic/create');
+  };
+
+  const actions = [
+    <Button key="refresh" type="default" size="small" onClick={onRefresh}>
+      <ReloadOutlined />
+      刷新
+    </Button>,
+  ];
+
+  if (access.canPostTopic) {
+    actions.push(
+      <Button key="create" type="primary" size="small" onClick={onCreate}>
+        <EditOutlined />
+        新建
+      </Button>,
+    );
+  }
+
   return (
     <div>
       <ProList
@@ -187,12 +202,7 @@ const TopicList: React.FC<Props> = (props) => {
             }),
             onChange: onChangeTabKey,
           },
-          actions: [
-            <Button key="refresh" type="primary" onClick={onRefresh}>
-              <ReloadOutlined />
-              刷新
-            </Button>,
-          ],
+          actions,
         }}
         onRow={(record) => {
           return {
@@ -202,17 +212,6 @@ const TopicList: React.FC<Props> = (props) => {
             },
           };
         }}
-        // request={async (params) => {
-        //   state.page = params.current || page;
-        //   state.limit = params.pageSize || limit;
-        //   return Promise.resolve({});
-        // }}
-        // pagination={{
-        //   total: 100,
-        //   current: page,
-        //   pageSize: limit,
-        //   responsive: true,
-        // }}
       />
       <Divider type="horizontal" />
       {renderFooter()}