gists #571

Lets you pull gist snippets into all notes tab from gists tab, and push snippets to github.

Author: janat08

browser/components/CodeEditor.js

@@ -38,7 +38,7 @@ function translateHotkey (hotkey) {
   return hotkey.replace(/\s*\+\s*/g, '-').replace(/Command/g, 'Cmd').replace(/Control/g, 'Ctrl')
 }
 
-const languageMaps = {
+export const languageMaps = {
   brainfuck: 'Brainfuck',
   cpp: 'C++',
   cs: 'C#',
@@ -747,14 +747,14 @@ export default class CodeEditor extends React.Component {
   }
 
   incrementLines (start, linesAdded, linesRemoved, editor) {
-    let highlightedLines = editor.options.linesHighlighted
+    const highlightedLines = editor.options.linesHighlighted
 
     const totalHighlightedLines = highlightedLines.length
 
-    let offset = linesAdded - linesRemoved
+    const offset = linesAdded - linesRemoved
 
     // Store new items to be added as we're changing the lines
-    let newLines = []
+    const newLines = []
 
     let i = totalHighlightedLines
 

browser/components/MarkdownPreview.js

@@ -321,7 +321,7 @@ export default class MarkdownPreview extends React.Component {
         allowCustomCSS,
         customCSS
       )
-      let body = this.markdown.render(noteContent)
+      const body = this.markdown.render(noteContent)
       const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
       files.forEach(file => {
         if (global.process.platform === 'win32') {

browser/components/SideNavFilter.js

@@ -17,8 +17,9 @@ import i18n from 'browser/lib/i18n'
  */
 const SideNavFilter = ({
   isFolded, isHomeActive, handleAllNotesButtonClick,
-  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote,
-  counterTotalNote, counterStarredNote, handleFilterButtonContextMenu
+  isStarredActive, handleStarredButtonClick, isTrashedActive, isGistedActive, handleTrashedButtonClick, counterDelNote,
+  counterTotalNote, counterStarredNote, counterGistsNote, handleFilterButtonContextMenu,
+  handleGistedButtonClick
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
 
@@ -50,7 +51,8 @@ const SideNavFilter = ({
       <span styleName='counters'>{counterStarredNote}</span>
     </button>
 
-    <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
+    <button
+      styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
       onClick={handleTrashedButtonClick} onContextMenu={handleFilterButtonContextMenu}
     >
       <div styleName='iconWrap'>
@@ -64,17 +66,31 @@ const SideNavFilter = ({
       <span styleName='counters'>{counterDelNote}</span>
     </button>
 
+    <button
+      onClick={handleGistedButtonClick}
+      styleName={isGistedActive ? 'menu-button-trash--active' : 'menu-button'}
+        >
+      <div styleName='iconWrap'>
+        <img src='../resources/icon/icon-gist.svg' />
+      </div>
+      <span styleName='menu-button-label'>{i18n.__('Gists')}</span>
+      <span styleName='counters'>{counterGistsNote}</span>
+    </button>
+
   </div>
 )
 
 SideNavFilter.propTypes = {
   isFolded: PropTypes.bool,
   isHomeActive: PropTypes.bool.isRequired,
   handleAllNotesButtonClick: PropTypes.func.isRequired,
+  counterGistsNote: PropTypes.bool.isRequired,
   isStarredActive: PropTypes.bool.isRequired,
   isTrashedActive: PropTypes.bool.isRequired,
+  isGistedActive: PropTypes.bool.isRequired,
   handleStarredButtonClick: PropTypes.func.isRequired,
-  handleTrashdButtonClick: PropTypes.func.isRequired
+  handleTrashdButtonClick: PropTypes.func.isRequired,
+  handleGistedButtonClick: PropTypes.func.isRequired
 }
 
 export default CSSModules(SideNavFilter, styles)

browser/components/StorageList.styl

@@ -1,7 +1,7 @@
 .storageList
   absolute left right
   bottom 37px
-  top 180px
+  top 200px
   overflow-y auto
 
 .storageList-folded

browser/lib/confirmDeleteNote.js

@@ -3,12 +3,12 @@ import i18n from 'browser/lib/i18n'
 const { remote } = electron
 const { dialog } = remote
 
-export function confirmDeleteNote (confirmDeletion, permanent) {
+export function confirmDeleteNote (confirmDeletion, permanent, gist = false) {
   if (confirmDeletion || permanent) {
     const alertConfig = {
       ype: 'warning',
       message: i18n.__('Confirm note deletion'),
-      detail: i18n.__('This will permanently remove this note.'),
+      detail: gist ? i18n.__('This will permanently remove this gist on github.') : i18n.__('This will permanently remove this note.'),
       buttons: [i18n.__('Confirm'), i18n.__('Cancel')]
     }
 

browser/lib/newNote.js

@@ -40,7 +40,6 @@ export function createMarkdownNote (storage, folder, dispatch, location, params,
 export function createSnippetNote (storage, folder, dispatch, location, params, config) {
   AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
   AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
-
   let tags = []
   if (config.ui.tagNewNoteWithFilteringTags && location.pathname.match(/\/tags/)) {
     tags = params.tagname.split(' ')

browser/main/Detail/GistButton.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoButton.styl'
+import i18n from 'browser/lib/i18n'
+
+const GistButton = ({
+    onClick,
+    isGisted,
+    gistId
+}) => {
+  return (
+    <button styleName='control-infoButton'
+      onClick={(e) => onClick(e)}
+        >
+      <img className='infoButton' src='../resources/icon/icon-gist.svg' />
+      {isGisted ? 1 : 0}
+      <span styleName='tooltip'>{isGisted ? i18n.__('Hide in All Notes') : gistId ? i18n.__('Show in All Notes') : i18n.__('Upload Gist and Show in All Notes')}</span>
+    </button>
+  )
+}
+
+GistButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isGisted: PropTypes.bool,
+  gistId: PropTypes.bool
+}
+
+export default CSSModules(GistButton, styles)

browser/main/Detail/SnippetNoteDetail.js

@@ -18,11 +18,11 @@ import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import _ from 'lodash'
 import {findNoteTitle} from 'browser/lib/findNoteTitle'
-import convertModeName from 'browser/lib/convertModeName'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import FullscreenButton from './FullscreenButton'
 import TrashButton from './TrashButton'
 import RestoreButton from './RestoreButton'
+import GistButton from './GistButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
@@ -31,6 +31,7 @@ import { formatDate } from 'browser/lib/date-formatter'
 import i18n from 'browser/lib/i18n'
 import { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'
 import markdownToc from 'browser/lib/markdown-toc-generator'
+import { getGithubApi, CREATE_SINGLE_GIST, EDIT_SINGLE_GIST, mapToGist } from 'browser/main/lib/dataApi/github-api.js'
 
 const electron = require('electron')
 const { remote } = electron
@@ -74,6 +75,7 @@ class SnippetNoteDetail extends React.Component {
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key && !this.state.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
+      if (this.saveGithubQueue != null) this.saveGithub()
       const nextNote = Object.assign({
         description: ''
       }, nextProps.note, {
@@ -96,6 +98,7 @@ class SnippetNoteDetail extends React.Component {
 
   componentWillUnmount () {
     if (this.saveQueue != null) this.saveNow()
+    if (this.saveGithubQueue != null) this.saveGithub()
     ee.off('code:generate-toc', this.generateToc)
   }
 
@@ -128,6 +131,11 @@ class SnippetNoteDetail extends React.Component {
     this.saveQueue = setTimeout(() => {
       this.saveNow()
     }, 1000)
+    clearTimeout(this.saveGithubQueue)
+    this.saveGithubQueue = setTimeout(() => {
+      this.saveGithub()
+    }, 5 * 60 * 1000
+    )
   }
 
   saveNow () {
@@ -146,6 +154,13 @@ class SnippetNoteDetail extends React.Component {
       })
   }
 
+  saveGithub () {
+    const { note } = this.props
+    clearTimeout(this.saveGithubQueue)
+    this.saveGithubQueue = null
+    getGithubApi(EDIT_SINGLE_GIST)(mapToGist(note))
+  }
+
   handleFolderChange (e) {
     const { note } = this.state
     const value = this.refs.folder.value
@@ -198,11 +213,10 @@ class SnippetNoteDetail extends React.Component {
 
   handleTrashButtonClick (e) {
     const { note } = this.state
-    const { isTrashed } = note
+    const { isTrashed, gistId } = note
     const { confirmDeletion } = this.props.config.ui
-
-    if (isTrashed) {
-      if (confirmDeleteNote(confirmDeletion, true)) {
+    if (isTrashed || gistId) {
+      if (confirmDeleteNote(confirmDeletion, true, gistId)) {
         const {note, dispatch} = this.props
         dataApi
           .deleteNote(note.storage, note.key)
@@ -233,6 +247,26 @@ class SnippetNoteDetail extends React.Component {
     }
   }
 
+  handleGistedClick (e) {
+    const { note } = this.state
+    note.isGisted = !note.isGisted
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+    !note.gistId ? getGithubApi(CREATE_SINGLE_GIST)(mapToGist(note)).then(x => {
+      note.gistId = x.id
+      this.setState({
+        note
+      }, () => {
+        this.save()
+      })
+    }).catch(x => {
+      throw Error(x)
+    }) : null
+  }
+
   handleUndoButtonClick (e) {
     const { note } = this.state
 
@@ -759,9 +793,12 @@ class SnippetNoteDetail extends React.Component {
       </div>
       <div styleName='info-right'>
         <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
+        <GistButton onClick={(e) => this.handleGistedClick(e)} gistId={note.gistId} isGisted={note.isGisted} />
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
+
         <InfoPanelTrashed
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
@@ -805,6 +842,8 @@ class SnippetNoteDetail extends React.Component {
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
 
+        <GistButton onClick={(e) => this.handleGistedClick(e)} gistId={note.gistId} isGisted={note.isGisted} />
+
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />

browser/main/Main.js

@@ -17,6 +17,11 @@ import store from 'browser/main/store'
 import i18n from 'browser/lib/i18n'
 import { getLocales } from 'browser/lib/Languages'
 import applyShortcuts from 'browser/main/lib/shortcutManager'
+import {
+  getGithubApi,
+  GET_ALL_GISTS,
+  mapToNote
+} from 'browser/main/lib/dataApi/github-api'
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -141,7 +146,7 @@ class Main extends React.Component {
 
   componentDidMount () {
     const { dispatch, config } = this.props
-
+    console.log(1)
     const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
 
     if (supportedThemes.indexOf(config.ui.theme) !== -1) {
@@ -156,6 +161,7 @@ class Main extends React.Component {
       i18n.setLocale('en')
     }
     applyShortcuts()
+
     // Reload all data
     dataApi.init().then(data => {
       dispatch({
@@ -167,6 +173,36 @@ class Main extends React.Component {
       if (data.storages.length < 1) {
         this.init()
       }
+      return data
+    }).then(data => {
+      function makeUpdate (note) {
+        store.dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+      }
+      function add (note, older) {
+        if (older) {
+          dataApi.updateNote(note.storage, note.key, note)
+          .then(makeUpdate)
+        } else {
+          dataApi
+        .createNote(data.storages[0].key, note)
+        .then(makeUpdate)
+        }
+      }
+      getGithubApi(GET_ALL_GISTS)().then((items) => {
+        var loadedGists = new Map(data.notes.filter(x => x.gistId).map(x => [x.gistId, x]))
+        items.forEach(x => {
+          const gistId = x.id
+          const older = loadedGists.get(gistId)
+          const note = Object.assign({ }, mapToNote(x), older, { gistId }, { folder: data.storages[0].folders[0].key })
+          add(note, older)
+        })
+      }).catch(x => {
+        throw Error(x)
+      })
+      return data
     })
 
     delete CodeMirror.keyMap.emacs['Ctrl-V']