From 6c75136777d9fd3ef04b28d7eac2e39d5efa0348 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <lourens_M@hotmail.com>
Date: Mon, 13 Nov 2017 23:57:42 +0100
Subject: [PATCH 1/3] implemented drag/drop for tabs

---
 browser/components/SnippetTab.js         | 18 ++++++++++++++++++
 browser/main/Detail/SnippetNoteDetail.js | 22 ++++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/browser/components/SnippetTab.js b/browser/components/SnippetTab.js
index 5423f3ed..2b963a5b 100644
--- a/browser/components/SnippetTab.js
+++ b/browser/components/SnippetTab.js
@@ -85,6 +85,19 @@ class SnippetTab extends React.Component {
     })
   }
 
+  handleDragStart (e) {
+    e.dataTransfer.dropEffect = 'move'
+    this.props.onDragStart(e)
+  }
+
+  handleDragEnd (e) {
+    this.props.onDragEnd(e)
+  }
+
+  handleDrop (e) {
+    this.props.onDrop(e)
+  }
+
   render () {
     const { isActive, snippet, isDeletable } = this.props
     return (
@@ -98,6 +111,10 @@ class SnippetTab extends React.Component {
             onClick={(e) => this.handleClick(e)}
             onDoubleClick={(e) => this.handleRenameClick(e)}
             onContextMenu={(e) => this.handleContextMenu(e)}
+            onDragStart={(e) => this.handleDragStart(e)}
+            onDragEnd={(e) => this.handleDragEnd(e)}
+            onDrop={(e) => this.handleDrop(e)}
+            draggable='true'
           >
             {snippet.name.trim().length > 0
               ? snippet.name
@@ -127,6 +144,7 @@ class SnippetTab extends React.Component {
 }
 
 SnippetTab.propTypes = {
+
 }
 
 export default CSSModules(SnippetTab, styles)
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 51f14fae..ca20d6e5 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -236,6 +236,26 @@ class SnippetNoteDetail extends React.Component {
     })
   }
 
+  handleTabDragStart (e, index) {
+    e.dataTransfer.setData('text/plain', index)
+  }
+
+  handleTabDrop (e, index) {
+    const oldIndex = parseInt(e.dataTransfer.getData('text'))
+
+    const snippets = this.state.note.snippets.slice()
+    const draggedSnippet = snippets[oldIndex]
+    snippets[oldIndex] = snippets[index]
+    snippets[index] = draggedSnippet
+    const snippetIndex = index
+
+    const note = Object.assign({}, this.state.note, {snippets})
+    this.setState({ note, snippetIndex }, () => {
+      this.save()
+      this.refs['code-' + this.state.snippetIndex].reload()
+    })
+  }
+
   handleTabDeleteButtonClick (e, index) {
     if (this.state.note.snippets.length > 1) {
       if (this.state.note.snippets[index].content.trim().length > 0) {
@@ -511,6 +531,8 @@ class SnippetNoteDetail extends React.Component {
         onDelete={(e) => this.handleTabDeleteButtonClick(e, index)}
         onRename={(name) => this.renameSnippetByIndex(index, name)}
         isDeletable={note.snippets.length > 1}
+        onDragStart={(e) => this.handleTabDragStart(e, index)}
+        onDrop={(e) => this.handleTabDrop(e, index)}
       />
     })
 

From 1af2c83c6374854fa5ae39fd998ca1f4f703fb60 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <lourens_M@hotmail.com>
Date: Tue, 14 Nov 2017 15:10:09 +0100
Subject: [PATCH 2/3] removed the onDragEnd handler

---
 browser/components/SnippetTab.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/browser/components/SnippetTab.js b/browser/components/SnippetTab.js
index 2b963a5b..39d684fc 100644
--- a/browser/components/SnippetTab.js
+++ b/browser/components/SnippetTab.js
@@ -90,10 +90,6 @@ class SnippetTab extends React.Component {
     this.props.onDragStart(e)
   }
 
-  handleDragEnd (e) {
-    this.props.onDragEnd(e)
-  }
-
   handleDrop (e) {
     this.props.onDrop(e)
   }
@@ -112,7 +108,6 @@ class SnippetTab extends React.Component {
             onDoubleClick={(e) => this.handleRenameClick(e)}
             onContextMenu={(e) => this.handleContextMenu(e)}
             onDragStart={(e) => this.handleDragStart(e)}
-            onDragEnd={(e) => this.handleDragEnd(e)}
             onDrop={(e) => this.handleDrop(e)}
             draggable='true'
           >

From d06d94449c239d80d20492e5c129d301674c6c93 Mon Sep 17 00:00:00 2001
From: Maurits Lourens <lourens_M@hotmail.com>
Date: Mon, 4 Dec 2017 19:24:31 +0100
Subject: [PATCH 3/3] forgot to reload tab at oldindex

---
 browser/main/Detail/SnippetNoteDetail.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index ca20d6e5..6b18a5a0 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -252,7 +252,8 @@ class SnippetNoteDetail extends React.Component {
     const note = Object.assign({}, this.state.note, {snippets})
     this.setState({ note, snippetIndex }, () => {
       this.save()
-      this.refs['code-' + this.state.snippetIndex].reload()
+      this.refs['code-' + index].reload()
+      this.refs['code-' + oldIndex].reload()
     })
   }