Merge branch 'dev' of https://github.com/ZJU-CC98/CC98-PWA into dev

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",

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<State> {
     this.state = {
       mainContent: initContent || '',
       attachments: [],
+      isSending: false,
     }
   }
 

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<boolean>(false)
+export default ({ editor, onSendCallback }: Props) => {
   function clickHandler() {
-    setDisable(true)
+    editor.setState({ isSending: true })
     onSendCallback()
   }
 
   return (
-    <IconButton disabled={buttonDisable}>
-      {!buttonDisable && <SendIcon onClick={clickHandler} />}
-      {buttonDisable && <CircularProgress size={30} />}
+    <IconButton>
+      {!editor.state.isSending && <SendIcon onClick={clickHandler} />}
+      {editor.state.isSending && <CircularProgress size={24} />}
     </IconButton>
   )
 }

src/pages/Editor/Editor/ToolBox/index.tsx

@@ -19,7 +19,7 @@ const WrapperToolBox = styled.div`
 `
 interface Props {
   editor: EditorContainer
-  onSendCallback: () => Promise<void>
+  onSendCallback: () => void
 }
 
 export default ({ editor, onSendCallback }: Props) => (
@@ -32,12 +32,7 @@ export default ({ editor, onSendCallback }: Props) => (
       <div>
         <ClearBtn editor={editor} />
         <PreviewBtn editor={editor} />
-        <SendBtn
-          onSendCallback={async () => {
-            await onSendCallback()
-            editor.clearAll()
-          }}
-        />
+        <SendBtn editor={editor} onSendCallback={onSendCallback} />
       </div>
     </WrapperDiv>
   </WrapperToolBox>

src/pages/Editor/Editor/index.tsx

@@ -19,7 +19,7 @@ export { EditorContainer }
 
 interface Props {
   editor: EditorContainer
-  onSendCallback: () => Promise<void>
+  onSendCallback: () => void
 }
 
 const Editor: React.FunctionComponent<Props> = ({ editor, onSendCallback }) => {

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<T> {
-  current: T
-}
-
 export default (props: Props) => {
   const init = useInit(props)
 
   const isContainerInit = useRef(false)
+
+  interface MutableRefObject<T> {
+    current: T
+  }
   // 此处 @types/react 类型有误
   const editor = useRef<EditorContainer>(null) as MutableRefObject<EditorContainer>
   const metaContainer = useRef<MetaInfoContainer>(null) as MutableRefObject<MetaInfoContainer>
@@ -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<void> {
+  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
 }

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
 }
 

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<Props> = ({ postInfo, handleClose, refreshP
     <Dialog open={true} onClose={handleClose} style={{ zIndex: 1010 }}>
       <DialogTitle>评分</DialogTitle>
       <DialogContent>
-        <DialogContentText>评分需要发帖数达到500以上，您每天有一次评分机会。</DialogContentText>
+        <DialogContentText>评分需要发帖数达到500以上，您每天有一次评分机会</DialogContentText>
         <Tabs value={point} onChange={handlePointChange}>
           <TabS label="+1" value={1} />
           <TabS label="-1" value={-1} />

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<Props> = ({ 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 (

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}
     >
       <MySnackbarContent

src/version.ts

@@ -2,4 +2,4 @@
  * 版本号
  */
 
-export default 'v0.18.14-alpha'
+export default 'v1.0.0-beta'