Browse Source

feat: 添加 token/编辑器没有数据的时候,默认按钮 disabled

nodejh 5 years ago
parent
commit
3732a58deb
4 changed files with 27 additions and 11 deletions
  1. 1
    0
      README.md
  2. 22
    10
      src/App.js
  3. 1
    0
      src/axios.js
  4. 3
    1
      src/components/Editor/index.js

+ 1
- 0
README.md View File

@@ -22,6 +22,7 @@ import Comment, { Editor } from 'comment';
22 22
 | showList | boolean |   true  | false     | 是否显示评论列表|
23 23
 | showEditor | boolean |   true  | false     | 是否显示评论输入框|
24 24
 | showHeader | boolean |   true  | false     | 是否显示评论顶部的提示|
25
+| token | string |     | false     | token,用于身份认证,非必须。默认使用 cookie|
25 26
 
26 27
 
27 28
 

+ 22
- 10
src/App.js View File

@@ -1,7 +1,7 @@
1 1
 import React, { Component } from "react";
2 2
 import PropTypes from "prop-types";
3 3
 import { message, Tag } from "antd";
4
-import axios from "./axios";
4
+import axios from "axios";
5 5
 import { ERROR_DEFAULT, LIMIT } from "./constant";
6 6
 import { CommentContext } from "./Comment";
7 7
 import { isFunction } from "./helper";
@@ -37,6 +37,16 @@ class App extends Component {
37 37
     this.sOssSts = this.sOssSts.bind(this);
38 38
   }
39 39
 
40
+  componentWillMount() {
41
+    this.axios = axios;
42
+    this.axios.defaults.withCredentials = true;
43
+    if (this.props.token) {
44
+      this.axios.defaults.headers.common["Authorization"] = `Bearer ${
45
+        this.props.token
46
+      }`;
47
+    }
48
+  }
49
+
40 50
   componentDidMount() {}
41 51
 
42 52
   /**
@@ -56,7 +66,7 @@ class App extends Component {
56 66
   sGetComment({ page = 1 } = {}) {
57 67
     this.handleChangeLoading("sGetComment", true);
58 68
     const { API, type, businessId } = this.props;
59
-    axios
69
+    this.axios
60 70
       .get(
61 71
         `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${LIMIT}`
62 72
       )
@@ -100,7 +110,7 @@ class App extends Component {
100 110
   sGetReply({ commentId, page = 1 } = {}) {
101 111
     this.handleChangeLoading("sGetReply", true);
102 112
     const { API } = this.props;
103
-    axios
113
+    this.axios
104 114
       .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
105 115
       .then(response => {
106 116
         if (!response.data.list) {
@@ -150,7 +160,7 @@ class App extends Component {
150 160
     if (!content) return message.error("评论内容不能为空 ");
151 161
     this.handleChangeLoading("sCreateComment", true);
152 162
     const { API, type, businessId } = this.props;
153
-    axios(`${API}/comments`, {
163
+    this.axios(`${API}/comments`, {
154 164
       method: "post",
155 165
       data: {
156 166
         type,
@@ -189,12 +199,11 @@ class App extends Component {
189 199
    * @param {object} data { comment_id, content, [reply_id] }
190 200
    */
191 201
   sCreateReply(data, cb) {
192
-    console.log("list: ", this.state.list);
193
-
202
+    // console.log("list: ", this.state.list);
194 203
     if (!data.content) return message.error("回复内容不能为空 ");
195 204
     this.handleChangeLoading("sCreateReply", true);
196 205
     const { API } = this.props;
197
-    axios(`${API}/replies`, {
206
+    this.axios(`${API}/replies`, {
198 207
       method: "post",
199 208
       data,
200 209
       withCredentials: true
@@ -238,7 +247,7 @@ class App extends Component {
238 247
   sCommentFavor(commentId, favored) {
239 248
     this.handleChangeLoading("sCommentFavor", true);
240 249
     const { API } = this.props;
241
-    axios(`${API}/comments/${commentId}/favor`, {
250
+    this.axios(`${API}/comments/${commentId}/favor`, {
242 251
       method: favored ? "delete" : "put",
243 252
       withCredentials: true
244 253
     })
@@ -277,8 +286,11 @@ class App extends Component {
277 286
     console.log("replyId, commentId ", replyId, commentId);
278 287
 
279 288
     const { API } = this.props;
280
-    axios(`${API}/replies/${replyId}/favor`, {
289
+    this.axios(`${API}/replies/${replyId}/favor`, {
281 290
       method: favored ? "delete" : "put",
291
+      daa: {
292
+        comment_id: commentId
293
+      },
282 294
       withCredentials: true
283 295
     })
284 296
       .then(response => {
@@ -314,7 +326,7 @@ class App extends Component {
314 326
   sOssSts() {
315 327
     this.handleChangeLoading("sOssSts", true);
316 328
     const { API } = this.props;
317
-    axios
329
+    this.axios
318 330
       .get(`${API}/oss/sts`)
319 331
       .then(response => {
320 332
         this.setState({ oss: { ...response.data } });

+ 1
- 0
src/axios.js View File

@@ -1,5 +1,6 @@
1 1
 import axios from "axios";
2 2
 
3 3
 axios.defaults.withCredentials = true;
4
+axios.defaults.headers.common["Authorization"] = "Bearer ";
4 5
 
5 6
 export default axios;

+ 3
- 1
src/components/Editor/index.js View File

@@ -116,6 +116,8 @@ class Editor extends React.Component {
116 116
     } = this.props;
117 117
 
118 118
     const handleSubmit = this.handleSubmit;
119
+    const disabledSubmit =
120
+      btnDisabled || (!this.props.value && !this.state.value);
119 121
     return (
120 122
       <div className="comment-editor">
121 123
         <TextArea
@@ -208,7 +210,7 @@ class Editor extends React.Component {
208 210
                 onClick={() => this.handleSubmit()}
209 211
                 type="primary"
210 212
                 loading={btnLoading}
211
-                disabled={btnDisabled}
213
+                disabled={disabledSubmit}
212 214
               >
213 215
                 {btnSubmitText}
214 216
               </Button>