From ad1e8949a9bd9f7ca08c0dd14699b4e3f2ae339a Mon Sep 17 00:00:00 2001 From: Hydrogen Date: Wed, 19 Dec 2018 22:43:52 +0800 Subject: [PATCH 1/2] fix: Editor prevent resend --- src/pages/Editor/Editor/EditorContainer.ts | 5 + src/pages/Editor/Editor/ToolBox/SendBtn.tsx | 19 +-- src/pages/Editor/Editor/ToolBox/index.tsx | 9 +- src/pages/Editor/Editor/index.tsx | 2 +- src/pages/Editor/index.tsx | 131 +++++++++++--------- src/pages/Editor/useInit.ts | 10 ++ src/pages/Topic/PostItem/Judge.tsx | 3 +- src/pages/Topic/PostItem/Manage.tsx | 16 +-- src/utils/snackbar/index.tsx | 2 +- src/version.ts | 2 +- 10 files changed, 113 insertions(+), 86 deletions(-) diff --git a/src/pages/Editor/Editor/EditorContainer.ts b/src/pages/Editor/Editor/EditorContainer.ts index 7804a7d..17f72ce 100644 --- a/src/pages/Editor/Editor/EditorContainer.ts +++ b/src/pages/Editor/Editor/EditorContainer.ts @@ -9,6 +9,10 @@ interface State { * 追加区 */ attachments: string[] + /** + * 正在发布 + */ + isSending: boolean } /** @@ -21,6 +25,7 @@ export class EditorContainer extends Container { this.state = { mainContent: initContent || '', attachments: [], + isSending: false, } } diff --git a/src/pages/Editor/Editor/ToolBox/SendBtn.tsx b/src/pages/Editor/Editor/ToolBox/SendBtn.tsx index d8705be..83a65a2 100644 --- a/src/pages/Editor/Editor/ToolBox/SendBtn.tsx +++ b/src/pages/Editor/Editor/ToolBox/SendBtn.tsx @@ -1,24 +1,25 @@ -import React, { useState } from 'react' +import React from 'react' -import { IconButton } from '@material-ui/core' +import { IconButton, CircularProgress } from '@material-ui/core' import SendIcon from '@material-ui/icons/Send' -import CircularProgress from '@material-ui/core/CircularProgress' + +import { EditorContainer } from '../EditorContainer' interface Props { + editor: EditorContainer onSendCallback: () => void } -export default ({ onSendCallback }: Props) => { - const [buttonDisable, setDisable] = useState(false) +export default ({ editor, onSendCallback }: Props) => { function clickHandler() { - setDisable(true) + editor.setState({ isSending: true }) onSendCallback() } return ( - - {!buttonDisable && } - {buttonDisable && } + + {!editor.state.isSending && } + {editor.state.isSending && } ) } diff --git a/src/pages/Editor/Editor/ToolBox/index.tsx b/src/pages/Editor/Editor/ToolBox/index.tsx index 1b3a287..e8d3be3 100644 --- a/src/pages/Editor/Editor/ToolBox/index.tsx +++ b/src/pages/Editor/Editor/ToolBox/index.tsx @@ -19,7 +19,7 @@ const WrapperToolBox = styled.div` ` interface Props { editor: EditorContainer - onSendCallback: () => Promise + onSendCallback: () => void } export default ({ editor, onSendCallback }: Props) => ( @@ -32,12 +32,7 @@ export default ({ editor, onSendCallback }: Props) => (
- { - await onSendCallback() - editor.clearAll() - }} - /> +
diff --git a/src/pages/Editor/Editor/index.tsx b/src/pages/Editor/Editor/index.tsx index 1b5c321..9158599 100644 --- a/src/pages/Editor/Editor/index.tsx +++ b/src/pages/Editor/Editor/index.tsx @@ -19,7 +19,7 @@ export { EditorContainer } interface Props { editor: EditorContainer - onSendCallback: () => Promise + onSendCallback: () => void } const Editor: React.FunctionComponent = ({ editor, onSendCallback }) => { diff --git a/src/pages/Editor/index.tsx b/src/pages/Editor/index.tsx index f16f11b..8d3373c 100644 --- a/src/pages/Editor/index.tsx +++ b/src/pages/Editor/index.tsx @@ -8,7 +8,7 @@ import useInit from './useInit' import { ITopicParams, IPostParams, postTopic, replyTopic, editorPost } from '@/services/editor' -import { goback, navigate } from '@/utils/history' +import { goback } from '@/utils/history' import snackbar from '@/utils/snackbar' const WrapperDiv = styled.div` @@ -37,15 +37,14 @@ export interface Props { postId?: string } -// hack -interface MutableRefObject { - current: T -} - export default (props: Props) => { const init = useInit(props) const isContainerInit = useRef(false) + + interface MutableRefObject { + current: T + } // 此处 @types/react 类型有误 const editor = useRef(null) as MutableRefObject const metaContainer = useRef(null) as MutableRefObject @@ -64,7 +63,7 @@ export default (props: Props) => { const onSendCallback = useMemo( () => - chooseSendCallback(props, init.boardId !== undefined, editor.current, metaContainer.current), + chooseSendCallback(editor.current, metaContainer.current, props, init.boardId !== undefined), [] ) @@ -80,86 +79,102 @@ export default (props: Props) => { * 选择合适的回调 */ function chooseSendCallback( - props: Props, - isFirstFloor: boolean, editor: EditorContainer, - metaInfo: MetaInfoContainer -): () => Promise { + metaInfo: MetaInfoContainer, + props: Props, + isEditorTopic: boolean +): () => void { const { boardId, topicId, postId } = props + const stopLoading = () => { + editor.setState({ isSending: false }) + } + + /** + * for test + */ // return () => { - // alert(editor.fullContent) + // setTimeout(() => { + // stopLoading() + // }, 2000) // } // 发布帖子 if (boardId) { - return async () => { + return () => { const topicParams: ITopicParams = { ...metaInfo.state, content: editor.fullContent, contentType: 0, } - const res = await postTopic(boardId, topicParams) - res.fail().succeed(() => { - snackbar.success('发布成功') - goback() - }) + + postTopic(boardId, topicParams).then(res => + res + .fail(() => { + snackbar.error('发布失败') + stopLoading() + }) + .succeed(() => { + // TODO: 刷新帖子，下同 + snackbar.success('发布成功') + goback() + }) + ) } } // 回复帖子 if (topicId) { - return async () => { + return () => { const postParams: IPostParams = { title: '', content: editor.fullContent, contentType: 0, } - const res = await replyTopic(topicId, postParams) - res.fail().succeed(() => { - snackbar.success('回复成功') - // TODO: 刷新帖子 - navigate(`/topic/${topicId}`, { - replace: true, - }) - }) - } - } - - // 编辑主题帖子 - if (postId && isFirstFloor) { - return async () => { - const topicParams: ITopicParams = { - ...metaInfo.state, - content: editor.fullContent, - contentType: 0, - } - - const res = await editorPost(postId, topicParams) - res.fail().succeed(() => { - snackbar.success('编辑成功') - goback() - }) + replyTopic(topicId, postParams).then(res => + res + .fail(() => { + snackbar.error('回复失败') + stopLoading() + }) + .succeed(() => { + snackbar.success('回复成功') + goback() + }) + ) } } - // 编辑普通帖子 + // 编辑帖子 if (postId) { - return async () => { - const postParams: IPostParams = { - title: '', - content: editor.fullContent, - contentType: 0, - } - - const res = await editorPost(postId, postParams) - res.fail().succeed(() => { - snackbar.success('编辑成功') - goback() - }) + return () => { + const params: ITopicParams | IPostParams = isEditorTopic + ? { + ...metaInfo.state, + content: editor.fullContent, + contentType: 0, + } + : { + title: '', + content: editor.fullContent, + contentType: 0, + } + + editorPost(postId, params).then(res => + res + .fail(() => { + snackbar.error('编辑失败') + stopLoading() + }) + .succeed(() => { + snackbar.success('编辑成功') + goback() + }) + ) } } - return async () => undefined + // default callback + return () => undefined } diff --git a/src/pages/Editor/useInit.ts b/src/pages/Editor/useInit.ts index 057bfc8..546e50c 100644 --- a/src/pages/Editor/useInit.ts +++ b/src/pages/Editor/useInit.ts @@ -6,15 +6,25 @@ import { getTopicInfo } from '@/services/topic' import dayjs from 'dayjs' interface Init { + /** + * MetaInfo Container 初始值 + */ metaInfo: { title: string type: number tag1?: number tag2?: number } + /** + * Editor Container 初始值 + */ editor: { initContent: string } + /** + * MetaInfo 的 props 之一 + * 同时 boardId 有值意味着是 发布/修改主题 + */ boardId: number | undefined } diff --git a/src/pages/Topic/PostItem/Judge.tsx b/src/pages/Topic/PostItem/Judge.tsx index 7c9961c..76048e7 100644 --- a/src/pages/Topic/PostItem/Judge.tsx +++ b/src/pages/Topic/PostItem/Judge.tsx @@ -25,7 +25,6 @@ const TabS = styled(Tab)` ` const TextFieldS = styled(TextField).attrs({ - autoFocus: true, fullWidth: true, })` && { @@ -72,7 +71,7 @@ const Judge: React.FunctionComponent = ({ postInfo, handleClose, refreshP 评分 - 评分需要发帖数达到500以上，您每天有一次评分机会。 + 评分需要发帖数达到500以上，您每天有一次评分机会 diff --git a/src/pages/Topic/PostItem/Manage.tsx b/src/pages/Topic/PostItem/Manage.tsx index 1916286..a6e1f3f 100644 --- a/src/pages/Topic/PostItem/Manage.tsx +++ b/src/pages/Topic/PostItem/Manage.tsx @@ -24,7 +24,6 @@ const TabS = styled(Tab)` ` const TextFieldS = styled(TextField).attrs({ - autoFocus: true, fullWidth: true, })` && { @@ -83,12 +82,15 @@ const Manage: React.FunctionComponent = ({ postInfo, handleClose, refresh break } - res && - res.fail(manageHandler).succeed(() => { - snackbar.success('操作成功') - handleClose() - refreshPost() - }) + if (!res) { + return + } + + res.fail(manageHandler).succeed(() => { + snackbar.success('操作成功') + handleClose() + refreshPost() + }) } return ( diff --git a/src/utils/snackbar/index.tsx b/src/utils/snackbar/index.tsx index 96d8614..57d577e 100644 --- a/src/utils/snackbar/index.tsx +++ b/src/utils/snackbar/index.tsx @@ -41,7 +41,7 @@ const MySnackBar: React.FunctionComponent = () => { vertical: 'top', horizontal: 'right', }} - // autoHideDuration={2000} + autoHideDuration={snackBarProps.autoHideDuration || 4000} message={snackBarProps.message} > Date: Wed, 19 Dec 2018 23:06:35 +0800 Subject: [PATCH 2/2] release: v1.0.0-beta --- package.json | 2 +- src/version.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1447c39..3e8c86d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cc98-pwa", - "version": "0.98.0-alpha", + "version": "1.0.0", "description": "CC98 Forum PWA version.", "author": "Hydrogen", "license": "MIT", diff --git a/src/version.ts b/src/version.ts index 5fe3381..d4c4f87 100644 --- a/src/version.ts +++ b/src/version.ts @@ -2,4 +2,4 @@ * 版本号 */ -export default 'v0.18.15-alpha' +export default 'v1.0.0-beta'