Refactor

app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx

@@ -22,14 +22,21 @@ interface State {
 }
 
 class MessageHistory extends React.Component<Props, State> {
+
+  private updateNode = throttle(() => {
+    this.setState(this.state)
+  }, 300)
   constructor(props: any) {
     super(props)
     this.state = { }
   }
 
-  private updateNode = throttle(() => {
-    this.setState(this.state)
-  }, 300)
+  private displayMessage = (index: number, eventTarget: EventTarget) => {
+    const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
+    if (message) {
+      this.props.onSelect(message)
+    }
+  }
 
   public componentWillReceiveProps(nextProps: Props) {
     this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
@@ -82,20 +89,13 @@ class MessageHistory extends React.Component<Props, State> {
     )
   }
 
-  public renderPlot(data: {x: number, y: number}[]) {
+  public renderPlot(data: Array<{x: number, y: number}>) {
     return (
       <React.Suspense fallback={<div>Loading...</div>}>
         <PlotHistory data={data} />
       </React.Suspense>
     )
   }
-
-  private displayMessage = (index: number, eventTarget: EventTarget) => {
-    const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
-    if (message) {
-      this.props.onSelect(message)
-    }
-  }
 }
 
 export default MessageHistory

app/src/components/Sidebar/ValueRenderer/PlotHistory.tsx

@@ -8,7 +8,7 @@ const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('re
 const abbreviate = require('number-abbreviate')
 
 interface Props {
-  data: {x: number, y: number}[]
+  data: Array<{x: number, y: number}>
 }
 
 interface Stats {
@@ -26,6 +26,23 @@ class PlotHistory extends React.Component<Props, Stats> {
     this.setState({ width: width - 12 })
   }
 
+  private hintFormatter = (point: any) => {
+    return [
+      { title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
+      { title: <b>Value</b>, value: point.y },
+    ]
+  }
+
+  private _forgetValue = () => {
+    this.setState({
+      value: undefined,
+    })
+  }
+
+  private _rememberValue = (value: any) => {
+    this.setState({ value })
+  }
+
   public render() {
     const data = this.props.data
 
@@ -50,23 +67,6 @@ class PlotHistory extends React.Component<Props, Stats> {
       </div>
     )
   }
-
-  private hintFormatter = (point: any) => {
-    return [
-      { title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
-      { title: <b>Value</b>, value: point.y },
-    ]
-  }
-
-  private _forgetValue = () => {
-    this.setState({
-      value: undefined,
-    })
-  }
-
-  private _rememberValue = (value: any) => {
-    this.setState({ value })
-  }
 }
 
 export default PlotHistory

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -47,30 +47,6 @@ class ValuePanel extends React.Component<Props, State> {
     this.state = { }
   }
 
-  public render() {
-    const { node, classes } = this.props
-    const { detailsStyle, summaryStyle } = this.panelStyle()
-
-    const copyValue = (node && node.message && node.message.value) ? <Copy value={Base64Message.toUnicodeString(node.message.value)} /> : null
-
-    return (
-      <ExpansionPanel key="value" defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
-            <Typography className={classes.heading}>Value {copyValue}</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails style={detailsStyle}>
-            {this.messageMetaInfo()}
-            <div>
-              <React.Suspense fallback={<div>Loading...</div>}>
-                {this.renderValue()}
-              </React.Suspense>
-            </div>
-            <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-    )
-  }
-
   private renderValue() {
     const node = this.props.node
     if (!node || !node.message) {
@@ -87,7 +63,7 @@ class ValuePanel extends React.Component<Props, State> {
   }
 
   private messageMetaInfo() {
-    if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
+    if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
       return null
     }
 
@@ -152,6 +128,30 @@ class ValuePanel extends React.Component<Props, State> {
       this.setState({ compareMessage: undefined })
     }
   }
+
+  public render() {
+    const { node, classes } = this.props
+    const { detailsStyle, summaryStyle } = this.panelStyle()
+
+    const copyValue = (node && node.message && node.message.value) ? <Copy value={Base64Message.toUnicodeString(node.message.value)} /> : null
+
+    return (
+      <ExpansionPanel key="value" defaultExpanded={true}>
+          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
+            <Typography className={classes.heading}>Value {copyValue}</Typography>
+          </ExpansionPanelSummary>
+          <ExpansionPanelDetails style={detailsStyle}>
+            {this.messageMetaInfo()}
+            <div>
+              <React.Suspense fallback={<div>Loading...</div>}>
+                {this.renderValue()}
+              </React.Suspense>
+            </div>
+            <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+    )
+  }
 }
 
 const mapDispatchToProps = (dispatch: any) => {

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -24,6 +24,36 @@ class ValueRenderer extends React.Component<Props, State> {
     this.state = { width: 0 }
   }
 
+  private renderDiff(current: string = '', previous: string = '', language?: 'json') {
+    return (
+      <CodeDiff
+        previous={previous}
+        current={current}
+        language={language}
+        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
+      />
+    )
+  }
+
+  private messageToPrettyJson(str: string): string | undefined {
+    try {
+      const json = JSON.parse(str)
+      return JSON.stringify(json, undefined, '  ')
+    } catch {
+      return undefined
+    }
+  }
+
+  private updateWidth = (width: number) => {
+    if (width !== this.state.width) {
+      this.setState({ width })
+    }
+  }
+
+  private renderRawValue(value: string, compare: string) {
+    return this.renderDiff(value, compare)
+  }
+
   public render() {
     return (
       <div style={{ padding: '8px 0px 8px 8px' }}>
@@ -38,7 +68,7 @@ class ValueRenderer extends React.Component<Props, State> {
 
     const previousMessages = messageHistory.toArray()
     const previousMessage = previousMessages[previousMessages.length - 2]
-    let compareMessage = compareWith || previousMessage || message
+    let compareMessage = compareWith || previousMessage || message
     if (renderMode === 'raw') {
       compareMessage = message
     }
@@ -71,36 +101,6 @@ class ValueRenderer extends React.Component<Props, State> {
       return this.renderDiff(current, compare, language)
     }
   }
-
-  private renderDiff(current: string = '', previous: string = '', language?: 'json') {
-    return (
-      <CodeDiff
-        previous={previous}
-        current={current}
-        language={language}
-        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
-      />
-    )
-  }
-
-  private messageToPrettyJson(str: string): string | undefined {
-    try {
-      const json = JSON.parse(str)
-      return JSON.stringify(json, undefined, '  ')
-    } catch {
-      return undefined
-    }
-  }
-
-  private updateWidth = (width: number) => {
-    if (width !== this.state.width) {
-      this.setState({ width })
-    }
-  }
-
-  private renderRawValue(value: string, compare: string) {
-    return this.renderDiff(value, compare)
-  }
 }
 
 const mapStateToProps = (state: AppState) => {