/
live-response.jsx
132 lines (123 loc) · 4.73 KB
/
live-response.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import React from "react"
import PropTypes from "prop-types"
import ImPropTypes from "react-immutable-proptypes"
const Headers = ( { headers } )=>{
return (
<div>
<h5>Response headers</h5>
<pre className="microlight">{headers}</pre>
</div>)
}
Headers.propTypes = {
headers: PropTypes.array.isRequired
}
const Duration = ( { duration } ) => {
return (
<div>
<h5>Request duration</h5>
<pre className="microlight">{duration} ms</pre>
</div>
)
}
Duration.propTypes = {
duration: PropTypes.number.isRequired
}
export default class LiveResponse extends React.Component {
static propTypes = {
response: ImPropTypes.map,
path: PropTypes.string.isRequired,
method: PropTypes.string.isRequired,
displayRequestDuration: PropTypes.bool.isRequired,
specSelectors: PropTypes.object.isRequired,
getComponent: PropTypes.func.isRequired,
getConfigs: PropTypes.func.isRequired
}
shouldComponentUpdate(nextProps) {
// BUG: props.response is always coming back as a new Immutable instance
// same issue as responses.jsx (tryItOutResponse)
return this.props.response !== nextProps.response
|| this.props.path !== nextProps.path
|| this.props.method !== nextProps.method
|| this.props.displayRequestDuration !== nextProps.displayRequestDuration
}
render() {
const { response, getComponent, getConfigs, displayRequestDuration, specSelectors, path, method } = this.props
const { showMutatedRequest, requestSnippetsEnabled } = getConfigs()
const curlRequest = showMutatedRequest ? specSelectors.mutatedRequestFor(path, method) : specSelectors.requestFor(path, method)
const status = response.get("status")
const url = curlRequest.get("url")
const headers = response.get("headers").toJS()
const notDocumented = response.get("notDocumented")
const isError = response.get("error")
const body = response.get("text")
const duration = response.get("duration")
const headersKeys = Object.keys(headers)
const contentType = headers["content-type"] || headers["Content-Type"]
const ResponseBody = getComponent("responseBody")
const returnObject = headersKeys.map(key => {
var joinedHeaders = Array.isArray(headers[key]) ? headers[key].join() : headers[key]
return <span className="headerline" key={key}> {key}: {joinedHeaders} </span>
})
const hasHeaders = returnObject.length !== 0
const Markdown = getComponent("Markdown", true)
const RequestSnippets = getComponent("RequestSnippets", true)
const Curl = getComponent("curl")
return (
<div>
{ curlRequest && (requestSnippetsEnabled === true || requestSnippetsEnabled === "true"
? <RequestSnippets request={ curlRequest }/>
: <Curl request={ curlRequest } getConfigs={ getConfigs } />) }
{ url && <div>
<div className="request-url">
<h4>Request URL</h4>
<pre className="microlight">{url}</pre>
</div>
</div>
}
<h4>Server response</h4>
<table className="responses-table live-responses-table">
<thead>
<tr className="responses-header">
<td className="col_header response-col_status">Code</td>
<td className="col_header response-col_description">Details</td>
</tr>
</thead>
<tbody>
<tr className="response">
<td className="response-col_status">
{ status }
{
notDocumented ? <div className="response-undocumented">
<i> Undocumented </i>
</div>
: null
}
</td>
<td className="response-col_description">
{
isError ? <Markdown source={`${response.get("name") !== "" ? `${response.get("name")}: ` : ""}${response.get("message")}`}/>
: null
}
{
body ? <ResponseBody content={ body }
contentType={ contentType }
url={ url }
headers={ headers }
getConfigs={ getConfigs }
getComponent={ getComponent }/>
: null
}
{
hasHeaders ? <Headers headers={ returnObject }/> : null
}
{
displayRequestDuration && duration ? <Duration duration={ duration } /> : null
}
</td>
</tr>
</tbody>
</table>
</div>
)
}
}