import React from 'react' import Button from 'react-bootstrap/Button' import FormCheck from 'react-bootstrap/FormCheck' import fetchToCurl from 'fetch-to-curl' import copy from 'copy-to-clipboard' import JSONPretty from 'react-json-pretty' import { Flow, IResponse } from '../message' import { isTextBody } from '../utils' import EditFlow from './EditFlow' interface Iprops { flow: Flow | null onClose: () => void onReRenderFlows: () => void onMessage: (msg: ArrayBufferLike) => void } interface IState { flowTab: 'Headers' | 'Preview' | 'Response' | 'Hexview' copied: boolean requestBodyViewTab: 'Raw' | 'Preview' responseBodyLineBreak: boolean } class ViewFlow extends React.Component { constructor(props: Iprops) { super(props) this.state = { flowTab: 'Headers', copied: false, requestBodyViewTab: 'Raw', responseBodyLineBreak: false, } } preview() { const { flow } = this.props if (!flow) return null const response = flow.response if (!response) return null if (!(response.body && response.body.byteLength)) { return
No response
} const pv = flow.previewResponseBody() if (!pv) return
Not support preview
if (pv.type === 'image') { return } else if (pv.type === 'json') { return
} return
Not support preview
} requestBodyPreview() { const { flow } = this.props if (!flow) return null const pv = flow.previewRequestBody() if (!pv) return
Not support preview
if (pv.type === 'json') { return
} else if (pv.type === 'binary') { return
{pv.data}
} return
Not support preview
} hexview() { const { flow } = this.props if (!flow) return null const response = flow.response if (!response) return null if (!(response.body && response.body.byteLength)) { return
No response
} return
{flow.hexviewResponseBody()}
} render() { if (!this.props.flow) return null const flow = this.props.flow const flowTab = this.state.flowTab const request = flow.request const response: IResponse = (flow.response || {}) as any // Query String Parameters const searchItems: Array<{ key: string; value: string }> = [] if (flow.url && flow.url.search) { flow.url.searchParams.forEach((value, key) => { searchItems.push({ key, value }) }) } return (
{ this.props.onClose() }}>x { this.setState({ flowTab: 'Headers' }) }}>Headers { this.setState({ flowTab: 'Preview' }) }}>Preview { this.setState({ flowTab: 'Response' }) }}>Response { this.setState({ flowTab: 'Hexview' }) }}>Hexview { flow.request.method = request.method flow.request.url = request.url flow.request.header = request.header if (isTextBody(flow.request)) flow.request.body = request.body this.props.onReRenderFlows() }} onChangeResponse={response => { if (!flow.response) flow.response = {} as IResponse flow.response.statusCode = response.statusCode flow.response.header = response.header if (isTextBody(flow.response)) flow.response.body = response.body this.props.onReRenderFlows() }} onMessage={msg => { this.props.onMessage(msg) flow.waitIntercept = false this.props.onReRenderFlows() }} />
{ !(flowTab === 'Headers') ? null :

General

Request URL: {request.url}

Request Method: {request.method}

Status Code: {`${response.statusCode || '(pending)'}`}

{ !(response.header) ? null :

Response Headers

{ Object.keys(response.header).map(key => { return (

{key}: {response.header[key].join(' ')}

) }) }
}

Request Headers

{ !(request.header) ? null : Object.keys(request.header).map(key => { return (

{key}: {request.header[key].join(' ')}

) }) }
{ !(searchItems.length) ? null :

Query String Parameters

{ searchItems.map(({ key, value }) => { return (

{key}: {value}

) }) }
} { !(request.body && request.body.byteLength) ? null :

Request Body

{ this.setState({ requestBodyViewTab: 'Raw' }) }}>Raw { this.setState({ requestBodyViewTab: 'Preview' }) }}>Preview
{ !(this.state.requestBodyViewTab === 'Raw') ? null :
{ !(flow.isTextRequest()) ? Not text Request : flow.requestBody() }
} { !(this.state.requestBodyViewTab === 'Preview') ? null :
{this.requestBodyPreview()}
}
}
} { !(flowTab === 'Response') ? null : !(response.body && response.body.byteLength) ?
No response
: !(flow.isTextResponse()) ?
Not text response
:
{ this.setState({ responseBodyLineBreak: e.target.checked }) }} label="自动换行">
{flow.responseBody()}
} { !(flowTab === 'Preview') ? null :
{this.preview()}
} { !(flowTab === 'Hexview') ? null :
{this.hexview()}
}
) } } export default ViewFlow