Explorar el Código

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

nodejh hace 5 años
padre
commit
3732a58deb
Se han modificado 4 ficheros con 27 adiciones y 11 borrados
  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 Ver fichero

22
 | showList | boolean |   true  | false     | 是否显示评论列表|
22
 | showList | boolean |   true  | false     | 是否显示评论列表|
23
 | showEditor | boolean |   true  | false     | 是否显示评论输入框|
23
 | showEditor | boolean |   true  | false     | 是否显示评论输入框|
24
 | showHeader | boolean |   true  | false     | 是否显示评论顶部的提示|
24
 | showHeader | boolean |   true  | false     | 是否显示评论顶部的提示|
25
+| token | string |     | false     | token,用于身份认证,非必须。默认使用 cookie|
25
 
26
 
26
 
27
 
27
 
28
 

+ 22
- 10
src/App.js Ver fichero

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

+ 1
- 0
src/axios.js Ver fichero

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

+ 3
- 1
src/components/Editor/index.js Ver fichero

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