addon web ViewFlow

addon/web/client/src/App.tsx

@@ -6,12 +6,11 @@ import scrollMonitor from 'scrollmonitor'
 import './App.css'
 
 import BreakPoint from './components/BreakPoint'
-import EditFlow from './components/EditFlow'
 import FlowPreview from './components/FlowPreview'
+import ViewFlow from './components/ViewFlow'
 
 import { FlowManager } from './flow'
-import { isTextBody } from './utils'
-import { parseMessage, SendMessageType, buildMessageMeta, Flow, MessageType, IResponse } from './message'
+import { parseMessage, SendMessageType, buildMessageMeta, Flow, MessageType } from './message'
 
 interface IState {
   flows: Flow[]
@@ -116,122 +115,6 @@ class App extends React.Component<any, IState> {
     })
   }
 
-  renderFlow() {
-    const { flow, flowTab } = this.state
-    if (!flow) return null
-
-    const request = flow.request
-    const response: IResponse = (flow.response || {}) as any
-
-    return (
-      <div className="flow-detail">
-        <div className="header-tabs">
-          <span onClick={() => { this.setState({ flow: null }) }}>x</span>
-          <span className={flowTab === 'Headers' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Headers' }) }}>Headers</span>
-          <span className={flowTab === 'Preview' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Preview' }) }}>Preview</span>
-          <span className={flowTab === 'Response' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Response' }) }}>Response</span>
-
-          <EditFlow
-            flow={flow}
-            onChangeRequest={request => {
-              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.setState({ flows: this.state.flows })
-            }}
-            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.setState({ flows: this.state.flows })
-            }}
-            onMessage={msg => {
-              if (this.ws) this.ws.send(msg)
-              flow.waitIntercept = false
-              this.setState({ flows: this.state.flows })
-            }}
-          />
-
-        </div>
-
-        <div style={{ padding: '20px' }}>
-          {
-            !(flowTab === 'Headers') ? null :
-              <div>
-                <div className="header-block">
-                  <p>General</p>
-                  <div className="header-block-content">
-                    <p>Request URL: {request.url}</p>
-                    <p>Request Method: {request.method}</p>
-                    <p>Status Code: {`${response.statusCode || '(pending)'}`}</p>
-                  </div>
-                </div>
-
-                {
-                  !(response.header) ? null :
-                    <div className="header-block">
-                      <p>Response Headers</p>
-                      <div className="header-block-content">
-                        {
-                          Object.keys(response.header).map(key => {
-                            return (
-                              <p key={key}>{key}: {response.header[key].join(' ')}</p>
-                            )
-                          })
-                        }
-                      </div>
-                    </div>
-                }
-
-                <div className="header-block">
-                  <p>Request Headers</p>
-                  <div className="header-block-content">
-                    {
-                      !(request.header) ? null :
-                        Object.keys(request.header).map(key => {
-                          return (
-                            <p key={key}>{key}: {request.header[key].join(' ')}</p>
-                          )
-                        })
-                    }
-                  </div>
-                </div>
-
-                {
-                  !(request.body && request.body.byteLength) ? null :
-                    <div className="header-block">
-                      <p>Request Body</p>
-                      <div className="header-block-content">
-                        <p>
-                          {
-                            !(flow.isTextRequest()) ? <span style={{ color: 'gray' }}>Not text</span> :
-                              flow.requestBody()
-                          }
-                        </p>
-                      </div>
-                    </div>
-                }
-
-              </div>
-          }
-
-          {
-            !(flowTab === 'Response') ? null :
-              !(response.body && response.body.byteLength) ? <div style={{ color: 'gray' }}>No response</div> :
-                !(flow.isTextResponse()) ? <div style={{ color: 'gray' }}>Not text response</div> :
-                  <div>
-                    {flow.responseBody()}
-                  </div>
-          }
-        </div>
-
-      </div>
-    )
-  }
-
   render() {
     const { flows } = this.state
     return (
@@ -292,7 +175,12 @@ class App extends React.Component<any, IState> {
           </tbody>
         </Table>
 
-        {this.renderFlow()}
+        <ViewFlow
+          flow={this.state.flow}
+          onClose={() => { this.setState({ flow: null }) }}
+          onReRenderFlows={() => { this.setState({ flows: this.state.flows }) }}
+          onMessage={msg => { if (this.ws) this.ws.send(msg) }}
+        />
 
         <div ref={el => {
           if (this.pageBottom) return

addon/web/client/src/components/ViewFlow.tsx

@@ -0,0 +1,146 @@
+import React from 'react'
+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'
+}
+
+class ViewFlow extends React.Component<Iprops, IState> {
+  constructor(props: Iprops) {
+    super(props)
+
+    this.state = {
+      flowTab: 'Headers',
+    }
+  }
+
+  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
+
+    return (
+      <div className="flow-detail">
+        <div className="header-tabs">
+          <span onClick={() => { this.props.onClose() }}>x</span>
+          <span className={flowTab === 'Headers' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Headers' }) }}>Headers</span>
+          <span className={flowTab === 'Preview' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Preview' }) }}>Preview</span>
+          <span className={flowTab === 'Response' ? 'selected' : undefined} onClick={() => { this.setState({ flowTab: 'Response' }) }}>Response</span>
+
+          <EditFlow
+            flow={flow}
+            onChangeRequest={request => {
+              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()
+            }}
+          />
+
+        </div>
+
+        <div style={{ padding: '20px' }}>
+          {
+            !(flowTab === 'Headers') ? null :
+              <div>
+                <div className="header-block">
+                  <p>General</p>
+                  <div className="header-block-content">
+                    <p>Request URL: {request.url}</p>
+                    <p>Request Method: {request.method}</p>
+                    <p>Status Code: {`${response.statusCode || '(pending)'}`}</p>
+                  </div>
+                </div>
+
+                {
+                  !(response.header) ? null :
+                    <div className="header-block">
+                      <p>Response Headers</p>
+                      <div className="header-block-content">
+                        {
+                          Object.keys(response.header).map(key => {
+                            return (
+                              <p key={key}>{key}: {response.header[key].join(' ')}</p>
+                            )
+                          })
+                        }
+                      </div>
+                    </div>
+                }
+
+                <div className="header-block">
+                  <p>Request Headers</p>
+                  <div className="header-block-content">
+                    {
+                      !(request.header) ? null :
+                        Object.keys(request.header).map(key => {
+                          return (
+                            <p key={key}>{key}: {request.header[key].join(' ')}</p>
+                          )
+                        })
+                    }
+                  </div>
+                </div>
+
+                {
+                  !(request.body && request.body.byteLength) ? null :
+                    <div className="header-block">
+                      <p>Request Body</p>
+                      <div className="header-block-content">
+                        <p>
+                          {
+                            !(flow.isTextRequest()) ? <span style={{ color: 'gray' }}>Not text</span> :
+                              flow.requestBody()
+                          }
+                        </p>
+                      </div>
+                    </div>
+                }
+
+              </div>
+          }
+
+          {
+            !(flowTab === 'Response') ? null :
+              !(response.body && response.body.byteLength) ? <div style={{ color: 'gray' }}>No response</div> :
+                !(flow.isTextResponse()) ? <div style={{ color: 'gray' }}>Not text response</div> :
+                  <div>
+                    {flow.responseBody()}
+                  </div>
+          }
+        </div>
+
+      </div>
+    )
+  }
+}
+
+export default ViewFlow