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

browser/main/modals/PreferencesModal/SnippetEditor.js

@@ -1,18 +1,18 @@
 import CodeMirror from 'codemirror'
-import PropTypes from 'prop-types'
 import React from 'react'
 import _ from 'lodash'
 import fs from 'fs'
-import { findStorage } from 'browser/lib/findStorage'
+import path from 'path'
+import consts from 'browser/lib/consts'
+import dataApi from 'browser/main/lib/dataApi'
+
+const { remote } = require('electron')
 
 const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
 const buildCMRulers = (rulers, enableRulers) =>
   enableRulers ? rulers.map(ruler => ({ column: ruler })) : []
 
 export default class SnippetEditor extends React.Component {
-  constructor (props) {
-    super(props)
-  }
 
   componentDidMount () {
     const { rulers, enableRulers } = this.props
@@ -29,33 +29,48 @@ export default class SnippetEditor extends React.Component {
       dragDrop: false,
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-      autoCloseBrackets: true,
+      autoCloseBrackets: true
     })
-    this.cm.setSize("100%", "100%")
-    let snippetId = this.props.snippetId
+    this.cm.setSize('100%', '100%')
+    this.snippet = this.props.snippet
+    const snippetId = this.snippet.id
+    this.loadSnippet(snippetId)
+    let changeDelay = null
 
-    const storagePath = findStorage(this.props.storageKey).path
-    const expandDataFile = path.join(storagePath, 'expandData.json')
-    if (!fs.existsSync(expandDataFile)) {
-      const defaultExpandData = [
-        {
-          matches: ['lorem', 'ipsum'],
-          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
-        },
-        { match: 'h1', content: '# '},
-        { match: 'h2', content: '## '},
-        { match: 'h3', content: '### '},
-        { match: 'h4', content: '#### '},
-        { match: 'h5', content: '##### '},
-        { match: 'h6', content: '###### '}
-      ];
-      fs.writeFileSync(expandDataFile, JSON.stringify(defaultExpandData), 'utf8')
-    }
-    const expandData = JSON.parse(fs.readFileSync(expandDataFile, 'utf8'))
+    this.cm.on('change', () => {
+      this.snippet.content = this.cm.getValue()
+
+      clearTimeout(changeDelay)
+      changeDelay = setTimeout(() => {
+        this.saveSnippet()
+      }, 500)
+    })
   }
 
-  componentWillReceiveProps(newProps) {
-    this.cm.setValue(newProps.value)
+  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 () {
@@ -65,17 +80,13 @@ export default class SnippetEditor extends React.Component {
       ? [fontFamily].concat(defaultEditorFontFamily)
       : defaultEditorFontFamily
     return (
-      <div 
-      styleName="SnippetEditor"
-      ref='root'
-      tabIndex='-1'
-      style={{
-        fontFamily: defaultEditorFontFamily.join(', '),
+      <div styleName='SnippetEditor' ref='root' tabIndex='-1' style={{
+        fontFamily: fontFamily.join(', '),
         fontSize: fontSize,
-        position: 'relative',
-        height: 'calc(100vh - 310px)'
-      }}>
-      </div>
+        position: 'absolute',
+        width: '100%',
+        height: '90%'
+      }} />
     )
   }
 }

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)

browser/main/modals/PreferencesModal/SnippetTab.styl

@@ -57,6 +57,15 @@
   &:disabled
     background-color $ui-input--disabled-backgroundColor
 
+.group-control-button
+  height 30px
+  border none
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  colorPrimaryButton()
+  vertical-align middle
+  padding 0 20px
+
 .group-checkBoxSection
   margin-bottom 15px
   display flex
@@ -85,11 +94,9 @@
 .snippet-list
   width 30%
   height calc(100% - 200px)
-  background #f5f5f5
   position absolute
 
   .snippet-item
-    width 100%
     height 50px
     font-size 15px
     line-height 50px

browser/main/modals/PreferencesModal/index.js

@@ -89,10 +89,10 @@ class Preferences extends React.Component {
         )
       case 'SNIPPET':
         return (
-          <SnippetTab 
+          <SnippetTab
             dispatch={dispatch}
             config={config}
-            data={data} 
+            data={data}
           />
         )
       case 'STORAGES':