correction the pointed out code

browser/main/modals/PreferencesModal/UiTab.js

@@ -14,34 +14,29 @@ class UiTab extends React.Component {
 
     this.state = {
       config: props.config,
-      options: {
+      codemirrorTheme: props.config.editor.theme
-        lineNumbers: true,
-        theme: props.config.editor.theme,
-        readOnly: true,
-        mode: 'javascript'
-      },
-        code: ' function iamHappy(happy) {\n\tif(happy){\n\t  console.log("I am Happy!")\n\t}else{\n\t  console.log("I am not Happy!")\n\t}\n};'
     }
   }
 
   handleUIChange (e) {
-    let { config, options } = this.state
+    let { codemirrorTheme } = this.state
     let checkHighLight = document.getElementById('checkHighLight')
 
-    if (checkHighLight == null) {
+    if (checkHighLight === null) {
       checkHighLight = document.createElement('link')
       checkHighLight.setAttribute('id', 'checkHighLight')
       checkHighLight.setAttribute('rel', 'stylesheet')
       document.head.appendChild(checkHighLight)
     }
 
-    config.ui = {
+    const newConfig = {
+      ui: {
         theme: this.refs.uiTheme.value,
         disableDirectWrite: this.refs.uiD2w != null
           ? this.refs.uiD2w.checked
           : false
-    }
+      },
-    config.editor = {
+      editor: {
         theme: this.refs.editorTheme.value,
         fontSize: this.refs.editorFontSize.value,
         fontFamily: this.refs.editorFontFamily.value,
@@ -49,31 +44,22 @@ class UiTab extends React.Component {
         indentSize: this.refs.editorIndentSize.value,
         switchPreview: this.refs.editorSwitchPreview.value,
         keyMap: this.refs.editorKeyMap.value
-    }
+      },
-    config.preview = {
+      preview: {
         fontSize: this.refs.previewFontSize.value,
         fontFamily: this.refs.previewFontFamily.value,
         codeBlockTheme: this.refs.previewCodeBlockTheme.value,
         lineNumber: this.refs.previewLineNumber.checked
       }
-
-
-
-    let newOptions = {
-      lineNumbers: true,
-      theme: config.editor.theme,
-      readOnly: true,
-      mode: 'javascript'
     }
 
-    if (newOptions.theme !== options.theme) {
+    const newCodemirrorTheme = this.refs.editorTheme.value
-      checkHighLight.setAttribute('href', '../node_modules/codemirror/theme/' + newOptions.theme + '.css')
+
+    if (newCodemirrorTheme !== codemirrorTheme) {
+      checkHighLight.setAttribute('href', '../node_modules/codemirror/theme/' + newCodemirrorTheme + '.css')
     }
 
-    this.setState({options: newOptions})
+    this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme })
-
-    this.setState({ config })
-
   }
 
   handleSaveUIClick (e) {
@@ -93,7 +79,8 @@ class UiTab extends React.Component {
 
   render () {
     const themes = consts.THEMES
-    const { config, options } = this.state
+    const { config, codemirrorTheme } = this.state
+    const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t  console.log("I am Happy!")\n\t} else {\n\t  console.log("I am not Happy!")\n\t}\n};'
     return (
       <div styleName='root'>
         <div styleName='group'>
@@ -145,7 +132,7 @@ class UiTab extends React.Component {
                 }
               </select>
               <div styleName='code-mirror'>
-                <CodeMirror value={this.state.code} options={options}/>
+                <CodeMirror value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} />
               </div>
             </div>
           </div>