From 2754544ccbd845113a9ad96c33d3f3c025885d55 Mon Sep 17 00:00:00 2001 From: GoForceX Date: Tue, 15 Aug 2023 16:15:16 +0800 Subject: [PATCH] feat(comment): Add length check on comment --- packages/core/handler/discuss.ts | 25 +++++--- packages/ui/src/pages/discuss.tsx | 95 ++++++++++++++++++------------- 2 files changed, 71 insertions(+), 49 deletions(-) diff --git a/packages/core/handler/discuss.ts b/packages/core/handler/discuss.ts index 61b6ebc..479c888 100644 --- a/packages/core/handler/discuss.ts +++ b/packages/core/handler/discuss.ts @@ -1,11 +1,11 @@ -import { perm } from '../declare/perm'; -import { DefaultType } from '../declare/type'; -import { Handler, Route } from '../handle'; -import { DiscussSchema, RespondProps, discuss } from '../model/discuss'; -import { param } from '../utils/decorate'; -import { token as tokenModel } from '../model/token'; -import { CommentSchema, comment } from '../model/comment'; -import { user } from '../model/user'; +import {perm} from '../declare/perm'; +import {DefaultType} from '../declare/type'; +import {Handler, Route} from '../handle'; +import {DiscussSchema, RespondProps, discuss} from '../model/discuss'; +import {param} from '../utils/decorate'; +import {token as tokenModel} from '../model/token'; +import {CommentSchema, comment} from '../model/comment'; +import {user} from '../model/user'; interface CommentSchemaExtra { authorName: string; @@ -225,6 +225,15 @@ class DiscussHandler extends Handler { @param('did', DefaultType.Number) @param('content', DefaultType.String) async postCreateComment(token: string, did: number, content: string) { + if (content.length > 1000 || content.length <= 10) { + this.ctx.body = { + status: 'error', + type: 'validation', + param: 'content', + }; + return; + } + try { const authorId = await tokenModel.stripId(token); const data = await comment.create({ diff --git a/packages/ui/src/pages/discuss.tsx b/packages/ui/src/pages/discuss.tsx index 122fcee..4f0715f 100644 --- a/packages/ui/src/pages/discuss.tsx +++ b/packages/ui/src/pages/discuss.tsx @@ -19,26 +19,26 @@ import { Select, Input, } from '@mantine/core'; -import React, { useEffect, useState } from 'react'; -import { StandardCard } from '../components/card'; -import { NoStyleCard } from '../components/card'; -import { useForm } from '@mantine/form'; -import { VditorProvider, VditorThemeChangeProvider } from '../components/editor'; -import { IconCheck, IconDiscountCheck, IconX } from '@tabler/icons-react'; -import { handleCreateComment, createError } from '../handlers/discussHandler'; +import React, {useEffect, useState} from 'react'; +import {StandardCard} from '../components/card'; +import {NoStyleCard} from '../components/card'; +import {useForm} from '@mantine/form'; +import {VditorProvider, VditorThemeChangeProvider} from '../components/editor'; +import {IconCheck, IconDiscountCheck, IconX} from '@tabler/icons-react'; +import {handleCreateComment, createError} from '../handlers/discussHandler'; // import { noBorderAlarm } from '../styles/alarm'; import data from '@emoji-mart/data/sets/14/twitter.json'; import Picker from '@emoji-mart/react'; // import { BlockSuitEditor } from '../components/editor'; -import { DiscussSchema, fetchDiscussError, handleInfo } from '../handlers/discussHandler'; -import { useParams } from 'react-router-dom'; -import { Discuss } from '../components/discuss'; -import { InfoLoad } from '../components/load'; -import { useDisclosure, useToggle } from '@mantine/hooks'; -import { standardSelect } from '../styles/select'; +import {DiscussSchema, fetchDiscussError, handleInfo} from '../handlers/discussHandler'; +import {useParams} from 'react-router-dom'; +import {Discuss} from '../components/discuss'; +import {InfoLoad} from '../components/load'; +import {useDisclosure, useToggle} from '@mantine/hooks'; +import {standardSelect} from '../styles/select'; import Vditor from 'vditor'; -import { notifications } from '@mantine/notifications'; -import { alarm } from '../styles/alarm'; +import {notifications} from '@mantine/notifications'; +import {alarm} from '../styles/alarm'; const useStyles = createStyles((theme) => ({})); @@ -57,7 +57,7 @@ const useStyles = createStyles((theme) => ({})); // } const righticon = ( - + 18 ); @@ -75,12 +75,13 @@ interface EmojiData { export default function DiscussPage() { const [contentVditor, setContentVditor] = useState({}); + function onEmojiSelected(emoji: EmojiData) { // TODO: Emoji Selection alert(emoji.native); } - const { classes, cx, theme } = useStyles(); + const {classes, cx, theme} = useStyles(); const [opened, setOpened] = useState(false); // init({ data }); const [replyVditor, setReplyVditor] = useState({}); @@ -123,7 +124,7 @@ export default function DiscussPage() { setErrorMsg('帖子不存在'); return; } - handleInfo({ did: did, limit: 10, page: nowPage }).then((response) => { + handleInfo({did: did, limit: 10, page: nowPage}).then((response) => { if (response.status === 'success') { if (response.data) { setDiscuss(response.data); @@ -138,7 +139,7 @@ export default function DiscussPage() { }); }, [did]); const getCommentWithPage = (value: number) => { - handleInfo({ did: did, limit: 10, page: value }).then((response) => { + handleInfo({did: did, limit: 10, page: value}).then((response) => { if (response.status === 'success') { if (response.data) { setNowPage(value); @@ -156,9 +157,9 @@ export default function DiscussPage() { status ? ( -
+
{/*预加载*/} - +
, + icon: , color: theme.colors.green[8], }} Comments={discuss.comments.map((comment) => { @@ -206,13 +207,24 @@ export default function DiscussPage() { }), }} > - +
{ + const content = (contentVditor as Vditor).getValue(); + if (content.length <= 10 || content.length > 1000) { + notifications.show({ + title: '评论失败', + message: '评论内容不能过短或过长', + color: 'red', + icon: , + styles: alarm('error'), + }); + return; + } const response = await handleCreateComment({ ...data, - content: (contentVditor as Vditor).getValue(), + content, token: localStorage.getItem('token') || '', }); notifications.show({ @@ -222,20 +234,20 @@ export default function DiscussPage() { {response.status === 'success' ? '评论成功' : `错误！${createError[response.type || ''] || '未知错误'}${createError[ - response.param || 'default' - ] || ''}。`} - {response.status === 'error' ?
: <>} + response.param || 'default' + ] || ''}。`} + {response.status === 'error' ?
: <>} {response.status === 'error' ? '若您还需要知道更多信息请查看控制台。' : ''} ), color: response.status === 'error' ? 'red' : 'green', - icon: response.status === 'error' ? : , + icon: response.status === 'error' ? : , withCloseButton: false, styles: alarm(response.status), }); console.info('技术参数'); console.info(response); - handleInfo({ did: did, limit: 10, page: nowPage }).then((response) => { + handleInfo({did: did, limit: 10, page: nowPage}).then((response) => { if (response.status === 'success') { if (response.data) { setDiscuss(response.data); @@ -250,31 +262,32 @@ export default function DiscussPage() { 发表评论 - - - {} + + + {} - -
- - + + 回复 {discuss.commentCount} - + 讨论ID @@ -285,12 +298,12 @@ export default function DiscussPage() { ) : ( - 加载讨论失败，错误信息：{errorMsg} + 加载讨论失败，错误信息：{errorMsg} ) ) : ( - + )}