added delete snippet, update snippet, create snippet and save on snippet change

browser/main/modals/PreferencesModal/SnippetTab.js

@@ -1,39 +1,84 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
-import dataApi from 'browser/main/lib/dataApi'
 import styles from './SnippetTab.styl'
-import ConfigManager from 'browser/main/lib/ConfigManager'
-import SnippetEditor from './SnippetEditor';
+import fs from 'fs'
+import SnippetEditor from './SnippetEditor'
 import i18n from 'browser/lib/i18n'
+import path from 'path'
+import dataApi from 'browser/main/lib/dataApi'
+import consts from 'browser/lib/consts'
+
+const { remote } = require('electron')
+
+const { Menu, MenuItem } = remote
 
 class SnippetTab extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      snippets: [
-        { id: 'abcsajisdjiasd', name: 'Hello', content: 'asdddddddsaddddddd' },
-        { id: 'btbjieejbiebfe', name: 'Hello 2', content: 'asdddddddsaddddddd' }
-      ],
+      snippets: [],
       currentSnippet: null
     }
   }
 
-  handleSnippetClick(id) {
-    this.setState({'currentSnippet': id})
+  componentDidMount () {
+    this.snippets = JSON.parse(fs.readFileSync(consts.SNIPPET_FILE, 'utf8'))
+
+    this.setState({snippets: this.snippets})
+  }
+
+  handleSnippetClick (snippet) {
+    let currentSnippet = Object.assign({}, snippet)
+    currentSnippet.prefix = currentSnippet.prefix.join(', ')
+    this.setState({currentSnippet})
+  }
+
+  handleSnippetContextMenu(snippet) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Delete',
+      click: () => {
+        this.deleteSnippet(snippet.id)
+      }
+    }))
+    menu.popup()
+  }
+
+  deleteSnippet(id) {
+    dataApi.deleteSnippet(this.snippets, id).then((snippets) => {
+      this.snippets = snippets
+      this.setState(this.snippets)
+    }).catch(err => {throw err})
+  }
+
+  createSnippet() {
+    dataApi.createSnippet(this.snippets).then((snippets) => {
+      this.snippets = snippets
+      this.setState(this.snippets)
+      // scroll to end of list when added new snippet
+      let snippetList = document.getElementById("snippets")
+      snippetList.scrollTop = snippetList.scrollHeight
+    }).catch(err => {throw err})
   }
 
   renderSnippetList () {
-    let { snippets } = this.state
+    const { snippets } = this.state
     return (
-      snippets.map((snippet) => (
-        <div styleName='snippet-item' 
-              key={snippet.id} 
-              onClick={() => this.handleSnippetClick(snippet.id)}>
-          {snippet.name}
-        </div>
-      ))
+      <ul id='snippets' style={{height: 'calc(100% - 8px)', overflow: 'scroll', background: '#f5f5f5'}}>
+        {
+          snippets.map((snippet) => (
+            <li
+              styleName='snippet-item'
+              key={snippet.id}
+              onContextMenu={() => this.handleSnippetContextMenu(snippet)}
+              onClick={() => {
+                this.handleSnippetClick(snippet)}}>
+              {snippet.name}
+            </li>
+          ))
+        }
+      </ul>
     )
   }
 
@@ -48,14 +93,42 @@ class SnippetTab extends React.Component {
       <div styleName='root'>
         <div styleName='header'>{i18n.__('Snippets')}</div>
         <div styleName='snippet-list'>
+          <div styleName='group-section'>
+            <div styleName='group-section-control'>
+              <button styleName='group-control-button' onClick={() => this.createSnippet()}>
+                <i className='fa fa-plus' /> {i18n.__('New Snippet')}
+              </button>
+            </div>
+          </div>
           {this.renderSnippetList()}
         </div>
-        {this.state.currentSnippet ? 
-        <div styleName='snippet-detail'>
+        {this.state.currentSnippet ? <div styleName='snippet-detail'>
           <div styleName='group-section'>
             <div styleName='group-section-label'>{i18n.__('Snippet name')}</div>
             <div styleName='group-section-control'>
-              <input styleName='group-section-control-input' type='text' />
+              <input
+                styleName='group-section-control-input'
+                value={this.state.currentSnippet.name}
+                onChange={e => {
+                  const newSnippet = Object.assign({}, this.state.currentSnippet)
+                  newSnippet.name = e.target.value
+                  this.setState({ currentSnippet: newSnippet })
+                }}
+                type='text' />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Snippet prefix')}</div>
+            <div styleName='group-section-control'>
+              <input
+                styleName='group-section-control-input'
+                value={this.state.currentSnippet.prefix}
+                onChange={e => {
+                  const newSnippet = Object.assign({}, this.state.currentSnippet)
+                  newSnippet.prefix = e.target.value
+                  this.setState({ currentSnippet: newSnippet })
+                }}
+                type='text' />
             </div>
           </div>
           <div styleName='snippet-editor-section'>
@@ -71,7 +144,7 @@ class SnippetTab extends React.Component {
               rulers={config.editor.rulers}
               displayLineNumbers={config.editor.displayLineNumbers}
               scrollPastEnd={config.editor.scrollPastEnd}
-              snippetId={this.state.currentSnippet} />
+              snippet={this.state.currentSnippet} />
           </div>
         </div>
         : ''}
@@ -83,4 +156,4 @@ class SnippetTab extends React.Component {
 SnippetTab.PropTypes = {
 }
 
-export default CSSModules(SnippetTab, styles)
+export default CSSModules(SnippetTab, styles)