From 672d409bf27b588970171edb57b73365ff19216e Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sat, 11 Feb 2017 17:52:11 +0900
Subject: [PATCH] Enable to show the lock icon only the Editor state is CODE

---
 browser/components/MarkdownEditor.js      |  5 ++---
 browser/main/Detail/MarkdownNoteDetail.js | 19 ++++++++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index 4a2e232a..a131aac7 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -19,13 +19,11 @@ class MarkdownEditor extends React.Component {
     }
 
     this.lockEditorCode = () => this.handleLockEditor()
-    this.getEditorStatus = () => this.handleGetEditorStatus()
   }
 
   componentDidMount () {
     this.value = this.refs.code.value
     eventEmitter.on('editor:lock', this.lockEditorCode)
-    eventEmitter.on('editor:status', this.getEditorStatus)
   }
 
   componentDidUpdate () {
@@ -41,7 +39,6 @@ class MarkdownEditor extends React.Component {
   componentWillUnmount () {
     this.cancelQueue()
     eventEmitter.off('editor:lock', this.lockEditorCode)
-    eventEmitter.off('editor:status', this.getEditorStatus)
   }
 
   queueRendering (value) {
@@ -94,6 +91,7 @@ class MarkdownEditor extends React.Component {
       this.setState({
         status: 'PREVIEW'
       }, () => {
+        eventEmitter.emit('topbar:lock')
         this.refs.preview.focus()
         this.refs.preview.scrollTo(cursorPosition.line)
       })
@@ -143,6 +141,7 @@ class MarkdownEditor extends React.Component {
       this.setState({
         status: 'CODE'
       }, () => {
+        eventEmitter.emit('topbar:lock')
         this.refs.code.focus()
       })
     } else {
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 73b3047c..3bac9ea8 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -26,15 +26,22 @@ class MarkdownNoteDetail extends React.Component {
         title: '',
         content: ''
       }, props.note),
+      isCODE: false,
       locked: false
     }
     this.dispatchTimer = null
+
+    this.showLockButton = () => this.handleShowLockButton()
   }
 
   focus () {
     this.refs.content.focus()
   }
 
+  componentDidMount () {
+    ee.on('topbar:lock', this.showLockButton)
+  }
+
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
@@ -51,6 +58,10 @@ class MarkdownNoteDetail extends React.Component {
     if (this.saveQueue != null) this.saveNow()
   }
 
+  componentDidUnmount () {
+    ee.off('topbar:lock', this.showLockButton)
+  }
+
   findTitle (value) {
     let splitted = value.split('\n')
     let title = null
@@ -215,6 +226,10 @@ class MarkdownNoteDetail extends React.Component {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
+  handleShowLockButton () {
+    this.setState({isCODE: !this.state.isCODE})
+  }
+
   render () {
     let { data, config } = this.props
     let { note } = this.state
@@ -247,10 +262,8 @@ class MarkdownNoteDetail extends React.Component {
           </div>
           <div styleName='info-right'>
             {(() => {
-              // TODO: get a state of MarkdownEditor somehow
-              const editorStatus='CODE'
               let faClassName=`fa ${this.toggleLockButton()}`
-              if (editorStatus === 'CODE') {
+              if (this.state.isCODE) {
                 return(
                   <button styleName='info-right-button'
                     onClick={(e) => this.handleLockButtonClick(e)}