Refactor value rendering

app/src/components/CodeDiff.tsx

@@ -8,26 +8,25 @@ import 'prismjs/themes/prism-tomorrow.css'
 interface Props {
   previous: string
   current: string
+  language?: 'json'
   classes: any
 }
 
-interface State {
-}
-
-class CodeDiff extends React.Component<Props, State> {
+class CodeDiff extends React.Component<Props, {}> {
   constructor(props: Props) {
     super(props)
   }
 
   public render() {
     const changes = diff.diffLines(this.props.previous, this.props.current)
+
     const styledLines = Prism.highlight(this.props.current, Prism.languages.json).split('\n')
 
     let lineNumber = 0
     const code = changes.map((change, key) => {
       const hasStyledCode = change.removed !== true
       const changedLines = change.count || 0
-      if (hasStyledCode) {
+      if (hasStyledCode && this.props.language === 'json') {
         const html = styledLines.slice(lineNumber, lineNumber + changedLines).join('\n')
         lineNumber += changedLines
 
@@ -37,7 +36,11 @@ class CodeDiff extends React.Component<Props, State> {
       return <div key={key}><span className={this.cssClassForChange(change)}>{change.value}</span></div>
     })
 
-    return <pre style={{ maxHeight: '200px' }} className="language-json">{code}</pre>
+    return (
+      <pre className={`language-json ${this.props.classes.codeBlock}`}>
+        {code}
+      </pre>
+    )
   }
 
   private cssClassForChange(change: diff.Change) {
@@ -49,7 +52,7 @@ class CodeDiff extends React.Component<Props, State> {
       return this.props.classes.deletion
     }
 
-    return this.props.classes.code
+    return this.props.classes.noChange
   }
 }
 
@@ -58,10 +61,12 @@ const style = (theme: Theme) => {
     width: '100%',
   }
   return {
-    code: {
+    codeBlock: {
+      fontSize: '12px',
+      maxHeight: '200px',
+    },
+    noChange: {
       ...baseStyle,
-      // backgroundColor: theme.palette.background.paper,
-      // color: theme.palette.text.primary,
     },
     deletion: {
       ...baseStyle,

app/src/components/Sidebar/ValueRenderer.tsx

@@ -1,11 +1,8 @@
-import * as diff from 'diff'
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
+import CodeDiff from '../CodeDiff'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import { Theme, withTheme } from '@material-ui/core/styles'
-import CodeDiff from '../CodeDiff';
-
-const sha1 = require('sha1')
 
 interface Props {
   node?: q.TreeNode<any>,
@@ -15,14 +12,12 @@ interface Props {
 
 interface State {
   width: number
-  node?: q.TreeNode<any>
-  currentMessage?: q.Message
 }
 
 class ValueRenderer extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props)
-    this.state = { width: 0, node: props.node }
+    this.state = { width: 0 }
   }
 
   public render() {
@@ -71,21 +66,12 @@ class ValueRenderer extends React.Component<Props, State> {
     }
   }
 
-  public static getDerivedStateFromProps(props: Props, state: State) {
-    const discardEdit = props.node !== state.node || (props.node && props.node.message !== state.currentMessage)
-    return {
-      ...state,
-      node: props.node,
-      currentMessage: props.node && props.node.message,
-    }
-  }
-
-  private renderDiff(current: string = '', previous: string = '') {
+  private renderDiff(current: string = '', previous: string = '', language?: 'json') {
     return (
       <CodeDiff
-        key={sha1(current + previous)}
         previous={previous}
         current={current}
+        language={language}
       />
     )
   }