From a0596a234eb6825ada1747084b9fcd436f623af4 Mon Sep 17 00:00:00 2001 From: JASONPANGGO Date: Sun, 2 Jan 2022 00:37:19 +0800 Subject: [PATCH 01/35] fix: typo --- src/page/topic/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/page/topic/index.tsx b/src/page/topic/index.tsx index d370dd9..d33c70e 100644 --- a/src/page/topic/index.tsx +++ b/src/page/topic/index.tsx @@ -37,7 +37,7 @@ const TopicList: React.FC = (props) => { limit, }); - if (res.data.lenght < limit) { + if (res.data.length < limit) { state.hasNext = false; } From f84afb57f844df5129f83cd5150d7528b0eb0894 Mon Sep 17 00:00:00 2001 From: Suyi Date: Sun, 2 Jan 2022 10:39:10 +0800 Subject: [PATCH 02/35] feat: filter deleted topic --- src/page/topic/index.tsx | 2 +- src/service/topic.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/page/topic/index.tsx b/src/page/topic/index.tsx index d33c70e..aa92154 100644 --- a/src/page/topic/index.tsx +++ b/src/page/topic/index.tsx @@ -171,7 +171,7 @@ const TopicList: React.FC = (props) => { item?.author?.loginname)} loading={loading} metas={metas} className={styles.list} diff --git a/src/service/topic.ts b/src/service/topic.ts index d774407..92f6ea0 100644 --- a/src/service/topic.ts +++ b/src/service/topic.ts @@ -18,9 +18,7 @@ export const queryTopicList = async (params: { }, }; - const res = await request(`${BASE_URL}/api/v1/topics`, options); - res.data = res.data.filter((item: any) => item?.author?.loginname); - return res; + return request(`${BASE_URL}/api/v1/topics`, options); }; export const queryTopicDetail = async (params: { From f45c6563cb103283600afdaae13a22760b17fa4a Mon Sep 17 00:00:00 2001 From: Suyi Date: Sun, 2 Jan 2022 12:37:13 +0800 Subject: [PATCH 03/35] feat: add create page --- config/routes.ts | 7 +++ src/access.ts | 1 + src/app.tsx | 2 +- src/component/Markdown/index.tsx | 9 +++- src/constants/index.ts | 8 +-- src/layout.tsx | 2 + src/layout/index.tsx | 9 ++-- src/page/topic/create/index.less | 3 ++ src/page/topic/create/index.tsx | 93 ++++++++++++++++++++++++++++++++ src/page/topic/index.tsx | 57 ++++++++++---------- src/service/topic.ts | 14 +++++ 11 files changed, 166 insertions(+), 39 deletions(-) create mode 100644 src/page/topic/create/index.less create mode 100644 src/page/topic/create/index.tsx diff --git a/config/routes.ts b/config/routes.ts index a8ce1fb..cdcf949 100644 --- a/config/routes.ts +++ b/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, diff --git a/src/access.ts b/src/access.ts index 8233b3c..bede563 100644 --- a/src/access.ts +++ b/src/access.ts @@ -2,6 +2,7 @@ export default function (initialState: InitialState) { const { token } = initialState; return { + canPostTopic: !!token, canPostComment: !!token, }; } diff --git a/src/app.tsx b/src/app.tsx index 1cd9b31..bf1ff5e 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -71,7 +71,7 @@ export const patchRoutes = ({ routes }: { routes: Array }) => { }; export const request: RequestConfig = { - timeout: 1000, + timeout: 6 * 1000, errorConfig: {}, middlewares: [], requestInterceptors: [], diff --git a/src/component/Markdown/index.tsx b/src/component/Markdown/index.tsx index 98467f9..fec2caa 100644 --- a/src/component/Markdown/index.tsx +++ b/src/component/Markdown/index.tsx @@ -8,7 +8,7 @@ import * as styles from './index.less'; const mdParser = new MarkdownIt(); const Markdown: React.FC = (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) => { classname += ` ${styles.markdown_editor}`; } + if (customClassName) { + classname += ` ${customClassName}`; + } + return ( void; } diff --git a/src/constants/index.ts b/src/constants/index.ts index 540faa1..1022613 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -3,11 +3,11 @@ 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: '问答', @@ -15,11 +15,11 @@ export const TABS_MAP = { }, job: { name: '招聘', - color: '#5BD8A6', + color: '#108ee9', }, dev: { name: '客户端测试', - color: '#5BD8A6', + color: 'green', }, }; diff --git a/src/layout.tsx b/src/layout.tsx index 5675bd3..abf0812 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -99,6 +99,8 @@ const layoutConfig = ({ copyright={`${new Date().getFullYear()} - CNodejs.org`} /> ), + + onPageChange: () => {}, }; }; diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 4a28c4d..08b4a3b 100644 --- a/src/layout/index.tsx +++ b/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> = (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> = (props) => { @@ -91,6 +93,7 @@ const Layout: React.FC> = (props) => { window.scrollTo(0, 0); }} > + 回到顶部 diff --git a/src/page/topic/create/index.less b/src/page/topic/create/index.less new file mode 100644 index 0000000..244f6d7 --- /dev/null +++ b/src/page/topic/create/index.less @@ -0,0 +1,3 @@ +.editor_create { + min-height: 600px; +} diff --git a/src/page/topic/create/index.tsx b/src/page/topic/create/index.tsx new file mode 100644 index 0000000..5ab332d --- /dev/null +++ b/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) => { + 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 ( +
+
+ + + + + diff --git a/src/page/topic/detail.tsx b/src/page/topic/detail.tsx index bb3aad0..4066dd1 100644 --- a/src/page/topic/detail.tsx +++ b/src/page/topic/detail.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> = (props) => { +const TopicDetailPage: React.FC> = (props) => { const params: Record = useParams(); const topicId = params?.id; @@ -174,6 +174,6 @@ const TopicDetail: React.FC> = (props) => { ); }; -export default TopicDetail; +export default TopicDetailPage; interface Props {} From 916575d67570498c5c90d19bdd2e2f212d31ddda Mon Sep 17 00:00:00 2001 From: JASONPANGGO Date: Fri, 7 Jan 2022 13:52:20 +0800 Subject: [PATCH 26/35] feat: edit topics --- config/routes.ts | 5 ++++ src/layout/index.tsx | 41 ++++++++++++++++++--------- src/page/topic/component/SubTitle.tsx | 5 ++++ src/page/topic/create/index.tsx | 40 ++++++++++++++++++++++---- src/service/topic.ts | 15 ++++++++++ 5 files changed, 87 insertions(+), 19 deletions(-) diff --git a/config/routes.ts b/config/routes.ts index e423b0a..e885962 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -62,6 +62,11 @@ const routes: IRoute[] = [ exact: true, component: '@/page/topic/detail', }, + { + path: '/topic/:id/edit', + exact: true, + component: '@/page/topic/create', + }, { path: '/user/:loginname', exact: true, diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 3ccd2dc..5a56b54 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -45,32 +45,45 @@ const Layout: React.FC> = (props) => { const detailRegx = /\/(topic|user)\/(.*)/g; + const isEdit = location.pathname.endsWith('/edit'); + if (location.pathname.match(detailRegx)) { const paths = location.pathname.split('/'); + if (isEdit) paths.pop(); + const id = paths.pop(); const category = paths.pop(); + const routes = [ + { + path: '/', + breadcrumbName: '主页', + }, + { + path: '/', + breadcrumbName: BREADCRUMB_NAME_MAP[category as 'user' | 'topic'], + }, + { + path: isEdit ? location.pathname.slice(0, -5) : location.pathname, + breadcrumbName: id, + }, + ]; + + if (isEdit) { + routes.push({ + path: location.pathname, + breadcrumbName: '编辑', + }); + } + headerConfig = { title: null, breadcrumb: { itemRender: (route: { path: string; breadcrumbName: string }) => { return {route.breadcrumbName}; }, - routes: [ - { - path: '/', - breadcrumbName: '主页', - }, - { - path: '/', - breadcrumbName: BREADCRUMB_NAME_MAP[category as 'user' | 'topic'], - }, - { - path: location.pathname, - breadcrumbName: id, - }, - ], + routes, }, }; } diff --git a/src/page/topic/component/SubTitle.tsx b/src/page/topic/component/SubTitle.tsx index 7f3fc9e..e490cd6 100644 --- a/src/page/topic/component/SubTitle.tsx +++ b/src/page/topic/component/SubTitle.tsx @@ -3,6 +3,7 @@ import dayjs from 'dayjs'; import { Avatar, Divider, Space, Button } from 'antd'; import { Link } from 'umi'; +import { FormOutlined } from '@ant-design/icons'; const SubTitle: React.FC = (props) => { const { author, create_at, visit_count, reply_count } = props; @@ -14,6 +15,10 @@ const SubTitle: React.FC = (props) => { 发布：{dayjs(create_at).format('YYYY-MM-DD hh:mm:ss')} 浏览：{visit_count} 回复：{reply_count} + + + + ); }; diff --git a/src/page/topic/create/index.tsx b/src/page/topic/create/index.tsx index c0161ae..9459383 100644 --- a/src/page/topic/create/index.tsx +++ b/src/page/topic/create/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useModel, useHistory } from 'umi'; +import { useModel, useHistory, useParams } from 'umi'; import { Form, Input, Select, Button, Space } from 'antd'; import { TABS_MAP } from '@/constants'; @@ -7,6 +7,7 @@ import Markdown from '@/component/Markdown'; import * as API from '@/service/topic'; import * as styles from './index.less'; +import { useRequest } from 'ahooks'; const CreateTopic: React.FC = (props) => { const history = useHistory(); @@ -15,6 +16,27 @@ const CreateTopic: React.FC = (props) => { const token = initialState?.token; + const { id } = useParams<{ id?: string }>(); + + useRequest( + async () => { + if (!id) return; + const { data } = await API.queryTopicDetail({ + id, + mdrender: false, + }); + + form.setFieldsValue({ + title: data.title, + content: data.content, + tab: data.tab, + }); + }, + { + ready: !!id, + }, + ); + const onFinish = async (values: any) => { console.debug('===create.values', values); @@ -22,10 +44,18 @@ const CreateTopic: React.FC = (props) => { return; } - await API.postTopic({ - ...values, - accesstoken: token, - }); + if (id) { + await API.updateTopic({ + topic_id: id, + ...values, + accesstoken: token, + }); + } else { + await API.postTopic({ + ...values, + accesstoken: token, + }); + } onReset(); diff --git a/src/service/topic.ts b/src/service/topic.ts index 38ec0a4..8dd9079 100644 --- a/src/service/topic.ts +++ b/src/service/topic.ts @@ -39,6 +39,21 @@ export const postTopic = async (data: { return request(`${BASE_URL}/api/v1/topics`, options); }; +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 queryTopicDetail = async (params: { id: string; mdrender?: boolean; From 6655a4267fe28c654f53431ca72a53599ce411db Mon Sep 17 00:00:00 2001 From: JASONPANGGO Date: Fri, 7 Jan 2022 23:18:54 +0800 Subject: [PATCH 27/35] refactor: rename service method in a CURD way --- src/page/topic/create/index.tsx | 4 ++-- src/page/topic/detail.tsx | 6 +++--- src/page/topic/index.tsx | 2 +- src/service/topic.ts | 10 +++++----- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/page/topic/create/index.tsx b/src/page/topic/create/index.tsx index 9459383..fbdad5f 100644 --- a/src/page/topic/create/index.tsx +++ b/src/page/topic/create/index.tsx @@ -21,7 +21,7 @@ const CreateTopic: React.FC = (props) => { useRequest( async () => { if (!id) return; - const { data } = await API.queryTopicDetail({ + const { data } = await API.readTopic({ id, mdrender: false, }); @@ -51,7 +51,7 @@ const CreateTopic: React.FC = (props) => { accesstoken: token, }); } else { - await API.postTopic({ + await API.createTopic({ ...values, accesstoken: token, }); diff --git a/src/page/topic/detail.tsx b/src/page/topic/detail.tsx index 4066dd1..e4bf917 100644 --- a/src/page/topic/detail.tsx +++ b/src/page/topic/detail.tsx @@ -31,7 +31,7 @@ const TopicDetailPage: React.FC> = (props) => { return; } - const res = await API.queryTopicDetail({ + const res = await API.readTopic({ id: topicId, mdrender: false, }); @@ -58,7 +58,7 @@ const TopicDetailPage: React.FC> = (props) => { return; } - await API.postReply(topicId, { + await API.createReply(topicId, { ...data, accesstoken: token, }); @@ -71,7 +71,7 @@ const TopicDetailPage: React.FC> = (props) => { return; } - await API.postReplyUps(replyId, { + await API.updateReplyUps(replyId, { accesstoken: token, }); }; diff --git a/src/page/topic/index.tsx b/src/page/topic/index.tsx index 36f7792..2407743 100644 --- a/src/page/topic/index.tsx +++ b/src/page/topic/index.tsx @@ -36,7 +36,7 @@ const TopicListPage: React.FC = (props) => { const { loading, refresh } = useRequest( async () => { - const res = await API.queryTopicList({ + const res = await API.listTopic({ tab, page, limit, diff --git a/src/service/topic.ts b/src/service/topic.ts index 8dd9079..816a5dc 100644 --- a/src/service/topic.ts +++ b/src/service/topic.ts @@ -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; @@ -54,7 +54,7 @@ export const updateTopic = async (data: { return request(`${BASE_URL}/api/v1/topics/update`, options); }; -export const queryTopicDetail = async (params: { +export const readTopic = async (params: { id: string; mdrender?: boolean; accesstoken?: boolean; @@ -73,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; @@ -89,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; From 77f85a669a858c6d2409760997ac9413f1babcb8 Mon Sep 17 00:00:00 2001 From: JASONPANGGO Date: Fri, 7 Jan 2022 23:35:26 +0800 Subject: [PATCH 28/35] refactor: headerConfig --- src/layout/index.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 5a56b54..7800d89 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -43,17 +43,12 @@ const Layout: React.FC> = (props) => { subTitle: currentRoute?.description, }; - const detailRegx = /\/(topic|user)\/(.*)/g; + const detailPaths = location.pathname.match(/\/(topic|user)\/(\w+)(\/\w+)?/); - const isEdit = location.pathname.endsWith('/edit'); + if (detailPaths) { + const [, category, id, status] = detailPaths; - if (location.pathname.match(detailRegx)) { - const paths = location.pathname.split('/'); - - if (isEdit) paths.pop(); - - const id = paths.pop(); - const category = paths.pop(); + const isEdit = status === '/edit'; const routes = [ { @@ -65,7 +60,9 @@ const Layout: React.FC> = (props) => { breadcrumbName: BREADCRUMB_NAME_MAP[category as 'user' | 'topic'], }, { - path: isEdit ? location.pathname.slice(0, -5) : location.pathname, + path: isEdit + ? location.pathname.replace(status, '') + : location.pathname, breadcrumbName: id, }, ]; From a735fbcf0a9e859bcdf2438e2c72e02d09dd247a Mon Sep 17 00:00:00 2001 From: JASONPANGGO Date: Fri, 7 Jan 2022 23:55:24 +0800 Subject: [PATCH 29/35] feat: add access control to edit topic --- src/page/topic/component/SubTitle.tsx | 20 +++++++++++++++----- src/page/topic/create/index.tsx | 6 ++++++ 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/page/topic/component/SubTitle.tsx b/src/page/topic/component/SubTitle.tsx index e490cd6..88caa0f 100644 --- a/src/page/topic/component/SubTitle.tsx +++ b/src/page/topic/component/SubTitle.tsx @@ -2,11 +2,21 @@ import React from 'react'; import dayjs from 'dayjs'; import { Avatar, Divider, Space, Button } from 'antd'; -import { Link } from 'umi'; +import { Link, useModel } from 'umi'; import { FormOutlined } from '@ant-design/icons'; const SubTitle: React.FC = (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 && ( + + + + ); + return ( }> @@ -16,9 +26,7 @@ const SubTitle: React.FC = (props) => { 浏览：{visit_count} 回复：{reply_count} - - - + {renderEdit()} ); }; @@ -34,4 +42,6 @@ interface Props { loginname: string; avatar_url: string; }; + + author_id: string; } diff --git a/src/page/topic/create/index.tsx b/src/page/topic/create/index.tsx index fbdad5f..1bcf405 100644 --- a/src/page/topic/create/index.tsx +++ b/src/page/topic/create/index.tsx @@ -13,6 +13,7 @@ const CreateTopic: React.FC = (props) => { const history = useHistory(); const [form] = Form.useForm(); const { initialState } = useModel('@@initialState'); + const { user } = useModel('user'); const token = initialState?.token; @@ -26,6 +27,11 @@ const CreateTopic: React.FC = (props) => { mdrender: false, }); + if (data.author_id !== user?.id) { + history.push(location.pathname.replace(/\/edit$/, '')); + return; + } + form.setFieldsValue({ title: data.title, content: data.content, From 6f664f2ca6a2682479c6d9c2c50d30f8e5acee88 Mon Sep 17 00:00:00 2001 From: JASONPANGGO Date: Sat, 8 Jan 2022 01:34:49 +0800 Subject: [PATCH 30/35] refactor: rename page components --- src/page/topic/create/index.tsx | 4 ++-- src/page/user/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/page/topic/create/index.tsx b/src/page/topic/create/index.tsx index 1bcf405..1f38f54 100644 --- a/src/page/topic/create/index.tsx +++ b/src/page/topic/create/index.tsx @@ -9,7 +9,7 @@ import * as API from '@/service/topic'; import * as styles from './index.less'; import { useRequest } from 'ahooks'; -const CreateTopic: React.FC = (props) => { +const TopicEditPage: React.FC = (props) => { const history = useHistory(); const [form] = Form.useForm(); const { initialState } = useModel('@@initialState'); @@ -124,6 +124,6 @@ const CreateTopic: React.FC = (props) => { ); }; -export default CreateTopic; +export default TopicEditPage; interface Props {} diff --git a/src/page/user/index.tsx b/src/page/user/index.tsx index 9143d42..a1b18c5 100644 --- a/src/page/user/index.tsx +++ b/src/page/user/index.tsx @@ -13,7 +13,7 @@ import * as styles from './index.less'; const { Text, Paragraph } = Typography; -const UserDetail: React.FC = (props) => { +const UserDetailPage: React.FC = (props) => { const params: Record = useParams(); const { data } = useRequest(async () => { @@ -92,6 +92,6 @@ const UserDetail: React.FC = (props) => { ); }; -export default UserDetail; +export default UserDetailPage; interface Props {} From b86ee90e9283ffa1b6a0885f5c667328a53933b5 Mon Sep 17 00:00:00 2001 From: Suyi Date: Wed, 5 Jan 2022 20:42:03 +0800 Subject: [PATCH 31/35] feat: add pkgs to externals (#11) From a60f66422a273f3a6a2314df21c9f97272b5f0d0 Mon Sep 17 00:00:00 2001 From: Suyi Date: Wed, 5 Jan 2022 20:43:09 +0800 Subject: [PATCH 32/35] Revert "feat: add pkgs to externals (#11)" (#12) This reverts commit 1a0e0a0ba063aae129a53dce35d0b7be713d559f. From 104180f99e7e2f814fb4ff07646eadc2d7c99879 Mon Sep 17 00:00:00 2001 From: Suyi Date: Fri, 7 Jan 2022 23:43:32 +0800 Subject: [PATCH 33/35] feat: mark one or all message (#24) --- src/component/MessageList/index.less | 10 +++++++++ src/component/MessageList/index.tsx | 23 ++++++++++++++++++--- src/component/TopicList/index.less | 10 +++++++++ src/component/TopicList/index.tsx | 6 +++++- src/model/message.ts | 31 +++++++++++++++++++++++++++- src/page/message/index.tsx | 26 +++++++++++++++++++---- src/service/message.ts | 31 ++++++++++++++++++++++++++++ 7 files changed, 128 insertions(+), 9 deletions(-) diff --git a/src/component/MessageList/index.less b/src/component/MessageList/index.less index 2532459..2655d9e 100644 --- a/src/component/MessageList/index.less +++ b/src/component/MessageList/index.less @@ -1,3 +1,5 @@ +@import '~antd/dist/antd.less'; + .list { :global { .ant-card { @@ -8,3 +10,11 @@ } } } + +.link { + color: @text-color; + + &:hover { + color: @primary-color; + } +} diff --git a/src/component/MessageList/index.tsx b/src/component/MessageList/index.tsx index 5418f99..6847eae 100644 --- a/src/component/MessageList/index.tsx +++ b/src/component/MessageList/index.tsx @@ -9,7 +9,12 @@ import { MESSAGE_TYPE_MAP, MessageType } from '@/constants'; import * as styles from './index.less'; -const MessageList: React.FC = ({ dataSource, loading, toolbar }) => { +const MessageList: React.FC = ({ + dataSource, + loading, + toolbar, + onClick, +}) => { const metas: ProListMetas = { avatar: { dataIndex: 'author.avatar_url', @@ -25,7 +30,7 @@ const MessageList: React.FC = ({ dataSource, loading, toolbar }) => { width: '200px', }} > - + {loginname} @@ -43,9 +48,20 @@ const MessageList: React.FC = ({ dataSource, loading, toolbar }) => { valueType: 'text', render: (_, entity: MessageModel) => { const { + id: messageId, topic: { id, title }, } = entity; - return {title}; + return ( + { + onClick && onClick(messageId); + }} + > + {title} + + ); }, }, actions: { @@ -74,4 +90,5 @@ interface Props { dataSource?: MessageModel[]; loading?: boolean; toolbar?: ListToolBarProps; + onClick?: (id: string) => void; } diff --git a/src/component/TopicList/index.less b/src/component/TopicList/index.less index 2532459..2655d9e 100644 --- a/src/component/TopicList/index.less +++ b/src/component/TopicList/index.less @@ -1,3 +1,5 @@ +@import '~antd/dist/antd.less'; + .list { :global { .ant-card { @@ -8,3 +10,11 @@ } } } + +.link { + color: @text-color; + + &:hover { + color: @primary-color; + } +} diff --git a/src/component/TopicList/index.tsx b/src/component/TopicList/index.tsx index 6dfaa6c..c6c6692 100644 --- a/src/component/TopicList/index.tsx +++ b/src/component/TopicList/index.tsx @@ -58,7 +58,11 @@ const TopicList: React.FC = ({ dataSource, loading, toolbar }) => { valueType: 'text', render: (_, entity: TopicModel) => { const { id, title } = entity; - return {title}; + return ( + + {title} + + ); }, }, actions: { diff --git a/src/model/message.ts b/src/model/message.ts index e09a8dc..888a641 100644 --- a/src/model/message.ts +++ b/src/model/message.ts @@ -45,5 +45,34 @@ export default () => { setUnreadMessage(data.hasnot_read_messages); }, [token]); - return { count, message, unreadMessage, load, fetch }; + const mark = useCallback( + async (id: string) => { + if (!token) { + return; + } + + await API.markMessage(id, { + accesstoken: token, + }); + + load(); + fetch(); + }, + [token], + ); + + const markAll = useCallback(async () => { + if (!token) { + return; + } + + await API.markAllMessage({ + accesstoken: token, + }); + + load(); + fetch(); + }, [token]); + + return { count, message, unreadMessage, load, fetch, mark, markAll }; }; diff --git a/src/page/message/index.tsx b/src/page/message/index.tsx index d304b4d..ae36802 100644 --- a/src/page/message/index.tsx +++ b/src/page/message/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { useModel } from 'umi'; -import { Divider } from 'antd'; +import { Divider, Button } from 'antd'; import ProCard from '@ant-design/pro-card'; import MessageList from '@/component/MessageList'; const MessagePage: React.FC = (props) => { - const { message, unreadMessage } = useModel('message'); + const { message, unreadMessage, mark, markAll } = useModel('message'); console.debug('===message', message); console.debug('===unreadMessage', unreadMessage); @@ -15,12 +15,30 @@ const MessagePage: React.FC = (props) => { return 暂无新消息; } - return ; + return ( + mark(id)} /> + ); }; return (
- {renderUnreadMessage()} + { + markAll(); + }} + > + 标记全部 + + } + > + {renderUnreadMessage()} + diff --git a/src/service/message.ts b/src/service/message.ts index d6b373e..c81a753 100644 --- a/src/service/message.ts +++ b/src/service/message.ts @@ -29,6 +29,37 @@ export const getMessages = async (params: { return res; }; +export const markMessage = async ( + id: string, + data: { + accesstoken: string; + }, +) => { + const options: any = { + method: 'POST', + data, + }; + const res: any = await request( + `${BASE_URL}/api/v1/message/mark_one/${id}`, + options, + ); + + return res; +}; + +export const markAllMessage = async (data: { accesstoken: string }) => { + const options: any = { + method: 'POST', + data, + }; + const res: any = await request( + `${BASE_URL}/api/v1/message/mark_all`, + options, + ); + + return res; +}; + interface MessageCollection { has_read_messages: MessageModel[]; hasnot_read_messages: MessageModel[]; From 49159028458a3780754202055218545647a6c938 Mon Sep 17 00:00:00 2001 From: Suyi Date: Wed, 5 Jan 2022 20:42:03 +0800 Subject: [PATCH 34/35] feat: add pkgs to externals (#11) From 8fc15aaeb827e315c3981b90c5eff3bcb2d8e5dc Mon Sep 17 00:00:00 2001 From: Suyi Date: Wed, 5 Jan 2022 20:43:09 +0800 Subject: [PATCH 35/35] Revert "feat: add pkgs to externals (#11)" (#12) This reverts commit 1a0e0a0ba063aae129a53dce35d0b7be713d559f.