added fetch snippet

refactored some code

fixed snippet content empty on changed from list

fixed snippet name not updating on list when changed

browser/main/modals/PreferencesModal/SnippetEditor.js

@@ -12,6 +12,7 @@ const buildCMRulers = (rulers, enableRulers) =>
 export default class SnippetEditor extends React.Component {
 
   componentDidMount () {
+    this.props.onRef(this)
     const { rulers, enableRulers } = this.props
     this.cm = CodeMirror(this.refs.root, {
       rulers: buildCMRulers(rulers, enableRulers),
@@ -29,9 +30,6 @@ export default class SnippetEditor extends React.Component {
       autoCloseBrackets: true
     })
     this.cm.setSize('100%', '100%')
-    this.snippet = this.props.snippet
-    const snippetId = this.snippet.id
-    this.loadSnippet(snippetId)
     let changeDelay = null
 
     this.cm.on('change', () => {
@@ -44,32 +42,25 @@ export default class SnippetEditor extends React.Component {
     })
   }
 
+  componentWillUnmount () {
+    this.props.onRef(undefined)
+  }
+
+  onSnippetChanged (newSnippet) {
+    this.snippet = newSnippet
+    this.cm.setValue(this.snippet.content)
+  }
+
+  onSnippetNameOrPrefixChanged (newSnippet) {
+    this.snippet.name = newSnippet.name
+    this.snippet.prefix = newSnippet.prefix.toString().replace(/\s/g, '').split(',')
+    this.saveSnippet()
+  }
+
   saveSnippet () {
     dataApi.updateSnippet(this.snippet).catch((err) => { throw err })
   }
 
-  loadSnippet (snippetId) {
-    const snippets = JSON.parse(fs.readFileSync(consts.SNIPPET_FILE, 'utf8'))
-
-    for (let i = 0; i < snippets.length; i++) {
-      if (snippets[i].id === snippetId) {
-        this.cm.setValue(snippets[i].content)
-      }
-    }
-  }
-
-  componentWillReceiveProps (newProps) {
-    if (this.snippet.id !== newProps.snippet.id) {
-      // when user changed to a new snippet on the snippetList.js
-      this.loadSnippet(newProps.snippet.id)
-    } else {
-      // when snippet name or prefix being changed from snippetTab.js
-      this.snippet.name = newProps.snippet.name
-      this.snippet.prefix = newProps.snippet.prefix.replace(/\s/g, '').split(/\,/).filter(val => val)
-      this.saveSnippet()
-    }
-  }
-
   render () {
     const { fontSize } = this.props
     let fontFamily = this.props.fontFamily

browser/main/modals/PreferencesModal/SnippetTab.js

@@ -19,18 +19,30 @@ class SnippetTab extends React.Component {
       snippets: [],
       currentSnippet: null
     }
+    this.changeDelay = null
   }
 
   componentDidMount () {
-    this.snippets = JSON.parse(fs.readFileSync(consts.SNIPPET_FILE, 'utf8'))
-
-    this.setState({snippets: this.snippets})
+    this.reloadSnippetList()
   }
 
   handleSnippetClick (snippet) {
-    const currentSnippet = Object.assign({}, snippet)
-    currentSnippet.prefix = currentSnippet.prefix.join(', ')
-    this.setState({currentSnippet})
+    if (this.state.currentSnippet === null || this.state.currentSnippet.id !== snippet.id) {
+      dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
+        // notify the snippet editor to load the content of the new snippet
+        this.snippetEditor.onSnippetChanged(changedSnippet)
+        this.setState({currentSnippet: changedSnippet})
+      })
+    }
+  }
+
+  handleSnippetNameOrPrefixChange () {
+    clearTimeout(this.changeDelay)
+    this.changeDelay = setTimeout(() => {
+      // notify the snippet editor that the name or prefix of snippet has been changed
+      this.snippetEditor.onSnippetNameOrPrefixChanged(this.state.currentSnippet)
+      this.reloadSnippetList()
+    }, 500)
   }
 
   handleSnippetContextMenu (snippet) {
@@ -38,23 +50,25 @@ class SnippetTab extends React.Component {
     menu.append(new MenuItem({
       label: i18n.__('Delete snippet'),
       click: () => {
-        this.deleteSnippet(snippet.id)
+        this.deleteSnippet(snippet)
       }
     }))
     menu.popup()
   }
 
-  deleteSnippet (id) {
-    dataApi.deleteSnippet(this.snippets, id).then((snippets) => {
-      this.snippets = snippets
-      this.setState(this.snippets)
+  reloadSnippetList () {
+    dataApi.fetchSnippet().then(snippets => this.setState({snippets}))
+  }
+
+  deleteSnippet (snippet) {
+    dataApi.deleteSnippet(snippet).then(() => {
+      this.reloadSnippetList()
     }).catch(err => { throw err })
   }
 
   createSnippet () {
-    dataApi.createSnippet(this.snippets).then((snippets) => {
-      this.snippets = snippets
-      this.setState(this.snippets)
+    dataApi.createSnippet().then(() => {
+      this.reloadSnippetList()
       // scroll to end of list when added new snippet
       const snippetList = document.getElementById('snippets')
       snippetList.scrollTop = snippetList.scrollHeight
@@ -100,17 +114,18 @@ class SnippetTab extends React.Component {
           </div>
           {this.renderSnippetList()}
         </div>
-        {this.state.currentSnippet ? <div styleName='snippet-detail'>
+        <div styleName='snippet-detail' style={{visibility: this.state.currentSnippet ? 'visible' : 'hidden'}}>
           <div styleName='group-section'>
             <div styleName='group-section-label'>{i18n.__('Snippet name')}</div>
             <div styleName='group-section-control'>
               <input
                 styleName='group-section-control-input'
-                value={this.state.currentSnippet.name}
+                value={this.state.currentSnippet ? this.state.currentSnippet.name : ''}
                 onChange={e => {
                   const newSnippet = Object.assign({}, this.state.currentSnippet)
                   newSnippet.name = e.target.value
                   this.setState({ currentSnippet: newSnippet })
+                  this.handleSnippetNameOrPrefixChange()
                 }}
                 type='text' />
             </div>
@@ -120,11 +135,12 @@ class SnippetTab extends React.Component {
             <div styleName='group-section-control'>
               <input
                 styleName='group-section-control-input'
-                value={this.state.currentSnippet.prefix}
+                value={this.state.currentSnippet ? this.state.currentSnippet.prefix : ''}
                 onChange={e => {
                   const newSnippet = Object.assign({}, this.state.currentSnippet)
                   newSnippet.prefix = e.target.value
                   this.setState({ currentSnippet: newSnippet })
+                  this.handleSnippetNameOrPrefixChange()
                 }}
                 type='text' />
             </div>
@@ -142,10 +158,9 @@ class SnippetTab extends React.Component {
               rulers={config.editor.rulers}
               displayLineNumbers={config.editor.displayLineNumbers}
               scrollPastEnd={config.editor.scrollPastEnd}
-              snippet={this.state.currentSnippet} />
+              onRef={ref => this.snippetEditor = ref} />
           </div>
         </div>
-        : ''}
       </div>
     )
   }