addon web FlowPreview shouldComponentUpdate

addon/web/client/src/App.tsx

@@ -6,6 +6,7 @@ import './App.css'
 
 import BreakPoint from './components/BreakPoint'
 import EditFlow from './components/EditFlow'
+import FlowPreview from './components/FlowPreview'
 
 import { FlowManager } from './flow'
 import { isTextBody } from './utils'
@@ -256,23 +257,15 @@ class App extends React.Component<any, IState> {
               flows.map(f => {
                 const fp = f.preview()
 
-                const classNames = []
-                if (this.state.flow && this.state.flow.id === fp.id) classNames.push('tr-selected')
-                if (fp.waitIntercept) classNames.push('tr-wait-intercept')
-
                 return (
-                  <tr className={classNames.length ? classNames.join(' ') : undefined} key={fp.id}
+                  <FlowPreview
-                    onClick={() => {
+                    key={fp.id}
+                    flow={fp}
+                    isSelected={(this.state.flow && this.state.flow.id === fp.id) ? true : false}
+                    onShowDetail={() => {
                       this.setState({ flow: f })
                     }}
-                  >
+                  />
-                    <td>{fp.no}</td>
-                    <td>{fp.host}</td>
-                    <td>{fp.path}</td>
-                    <td>{fp.method}</td>
-                    <td>{fp.statusCode}</td>
-                    <td>{fp.size}</td>
-                  </tr>
                 )
               })
             }

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { IFlowPreview } from '../message'
+import { shallowEqual } from '../utils'
+
+interface IProps {
+  flow: IFlowPreview
+  isSelected: boolean
+  onShowDetail: () => void
+}
+
+class FlowPreview extends React.Component<IProps> {
+  shouldComponentUpdate(nextProps: IProps) {
+    if (nextProps.isSelected === this.props.isSelected && shallowEqual(nextProps.flow, this.props.flow)) {
+      return false
+    }
+    return true
+  }
+
+  render() {
+    const fp = this.props.flow
+
+    const classNames = []
+    if (this.props.isSelected) classNames.push('tr-selected')
+    if (fp.waitIntercept) classNames.push('tr-wait-intercept')
+
+    return (
+      <tr className={classNames.length ? classNames.join(' ') : undefined}
+        onClick={() => {
+          this.props.onShowDetail()
+        }}
+      >
+        <td>{fp.no}</td>
+        <td>{fp.host}</td>
+        <td>{fp.path}</td>
+        <td>{fp.method}</td>
+        <td>{fp.statusCode}</td>
+        <td>{fp.size}</td>
+      </tr>
+    )
+  }
+}
+
+export default FlowPreview

addon/web/client/src/message.ts

@@ -30,6 +30,17 @@ export interface IMessage {
   content?: ArrayBuffer | IRequest | IResponse
 }
 
+export interface IFlowPreview {
+  no: number
+  id: string
+  waitIntercept: boolean
+  host: string
+  path: string
+  method: string
+  statusCode: string
+  size: string
+}
+
 export class Flow {
   public no: number
   public id: string
@@ -71,7 +82,7 @@ export class Flow {
     return this
   }
 
-  public preview() {
+  public preview(): IFlowPreview {
     return {
       no: this.no,
       id: this.id,
@@ -79,7 +90,7 @@ export class Flow {
       host: this.host,
       path: this.path,
       method: this.request.method,
-      statusCode: this.response ? this.response.statusCode : '(pending)',
+      statusCode: this.response ? String(this.response.statusCode) : '(pending)',
       size: this.size,
     }
   }

addon/web/client/src/utils.ts

@@ -26,3 +26,17 @@ export const getSize = (response: IResponse) => {
   if (len < 1024*1024) return `${(len/1024).toFixed(2)} KB`
   return `${(len/(1024*1024)).toFixed(2)} MB`
 }
+
+export const shallowEqual = (objA: any, objB: any) => {
+  if (objA === objB) return true
+
+  const keysA = Object.keys(objA)
+  const keysB = Object.keys(objB)
+  if (keysA.length !== keysB.length) return false
+
+  for (let i = 0; i < keysA.length; i++) {
+    const key = keysA[i]
+    if (objB[key] === undefined || objA[key] !== objB[key]) return false
+  }
+  return true
+}