feat: add reply comment

Author: RyanLiu0235

src/actions/topics.js

@@ -45,6 +45,17 @@ export const likeComment = ({ id, accesstoken }) => dispatch => {
     })
 }
 
+export const submitReply = ({ accesstoken, topic_id, content }) => dispatch => {
+  return fetch(`${domain}topic/${topic_id}/replies`, {
+      method: 'POST',
+      body: JSON.stringify({ accesstoken, content }),
+      headers: new Headers({
+        'Content-Type': 'application/json'
+      })
+    })
+    .then(handleResponse)
+}
+
 const _fetchTopics = (page, tab, mutation, dispatch) => {
   fetch(`${domain}topics?page=${page}&tab=${tab}`)
     .then(handleResponse)

src/components/TopicDetail/index.jsx

@@ -13,6 +13,7 @@ import {
 import {
   fetchTopicDetail,
   collectTopic,
+  submitReply,
   likeComment
 } from 'actions/topics'
 import {
@@ -26,20 +27,29 @@ import 'highlight.js/styles/default.css'
 const format = raw => formatter(new Date(raw))
 
 class TopicDetail extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      reply: ''
+    }
+  }
   componentWillMount() {
-    const id = this.props.match.params.id
-
-    this.props.fetchTopicDetail({
-      id,
-      accesstoken: this.props.accesstoken
-    })
+    this._fetchTopicDetail()
   }
   componentDidMount() {
     const container = document.querySelector('.topic_body')
     new Zoomme({
       container
     })
   }
+  _fetchTopicDetail() {
+    const id = this.props.match.params.id
+
+    this.props.fetchTopicDetail({
+      id,
+      accesstoken: this.props.accesstoken
+    })
+  }
   collect() {
     const {
       topic,
@@ -72,6 +82,32 @@ class TopicDetail extends Component {
       id
     })
   }
+  handleInput(e) {
+    this.setState({
+      reply: e.target.value.trim()
+    })
+  }
+  submit() {
+    const {
+      accesstoken,
+      topic,
+      submitReply
+    } = this.props
+    if (!accesstoken) {
+      alert('请先登录！')
+      return
+    }
+
+    submitReply({
+      accesstoken,
+      topic_id: topic.id,
+      content: this.state.reply
+    }).then(res => {
+      if (res.success) {
+        this._fetchTopicDetail()
+      }
+    })
+  }
   render() {
     const {
       replies,
@@ -121,6 +157,13 @@ class TopicDetail extends Component {
           <div className="comment_header">{!!commentList ? '评论列表' : '暂无评论'}</div>
           <div className="comment_list">{ReplyList}</div>
         </div>
+        <div className="topic_reply">
+          <p>添加评论</p>
+          <div className="form">
+            <textarea onChange={this.handleInput.bind(this)}></textarea>
+            <button className="button button_info" onClick={this.submit.bind(this)}>提交</button>
+          </div>
+        </div>
       </div>
     )
   }
@@ -140,6 +183,7 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators({
     fetchTopicDetail,
     collectTopic,
+    submitReply,
     likeComment
   }, dispatch)
 }

src/components/TopicDetail/topicDetail.less

@@ -123,3 +123,25 @@
     }
   }
 }
+
+.topic_reply {
+  margin-top: 10px;
+  background-color: #fff;
+  p {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+    font-size: 16px;
+    color: #333;
+  }
+  .form {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  textarea {
+    display: block;
+    width: 100%;
+    height: 140px;
+    outline: none;
+  }
+}