reworking architecture of code

browser/main/Detail/MarkdownNoteDetail.js

@@ -30,10 +30,7 @@ class MarkdownNoteDetail extends React.Component {
         content: ''
       }, props.note),
       isLockButtonShown: false,
-      isLocked: false,
-      fullScreen: false,
-      widthOfNoteDetail: 0,
-      widthOfMainBody: 0
+      isLocked: false
     }
     this.dispatchTimer = null
 
@@ -200,25 +197,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleFullScreenButton (e) {
-    this.setState({ fullScreen: !this.state.fullScreen }, () => {
-      const noteDetail = document.querySelector('.NoteDetail')
-      const mainBody = document.querySelector('#main-body')
-      const sliderRight = document.querySelector('#slider-right')
-      const sliderLeft = document.querySelector('#slider-left')
-      if (this.state.fullScreen) {
-        this.state.widthOfNoteDetail = noteDetail.style.left
-        this.state.widthOfMainBody = mainBody.style.left
-        noteDetail.style.left = '0px'
-        mainBody.style.left = '0px'
-        sliderRight.style.display = 'none'
-        sliderLeft.style.display = 'none'
-      } else {
-        noteDetail.style.left = this.state.widthOfNoteDetail
-        mainBody.style.left = this.state.widthOfMainBody
-        sliderRight.style.display = 'block'
-        sliderLeft.style.display = 'block'
-      }
-    })
+    ee.emit('editor:fullscreen')
   }
 
   handleLockButtonMouseDown (e) {

browser/main/Detail/SnippetNoteDetail.js

@@ -48,10 +48,7 @@ class SnippetNoteDetail extends React.Component {
         description: ''
       }, props.note, {
         snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
-      }),
-      fullScreen: false,
-      widthOfNoteDetail: 0,
-      widthOfMainBody: 0
+      })
     }
   }
 
@@ -194,25 +191,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleFullScreenButton (e) {
-    this.setState({ fullScreen: !this.state.fullScreen }, () => {
-      const noteDetail = document.querySelector('.NoteDetail')
-      const mainBody = document.querySelector('#main-body')
-      const sliderRight = document.querySelector('#slider-right')
-      const sliderLeft = document.querySelector('#slider-left')
-      if (this.state.fullScreen) {
-        this.state.widthOfNoteDetail = noteDetail.style.left
-        this.state.widthOfMainBody = mainBody.style.left
-        noteDetail.style.left = '0px'
-        mainBody.style.left = '0px'
-        sliderRight.style.display = 'none'
-        sliderLeft.style.display = 'none'
-      } else {
-        noteDetail.style.left = this.state.widthOfNoteDetail
-        mainBody.style.left = this.state.widthOfMainBody
-        sliderRight.style.display = 'block'
-        sliderLeft.style.display = 'block'
-      }
-    })
+    ee.emit('editor:fullscreen')
   }
 
   handleTabPlusButtonClick (e) {

browser/main/Main.js

@@ -13,6 +13,7 @@ import modal from 'browser/main/lib/modal'
 import InitModal from 'browser/main/modals/InitModal'
 import mixpanel from 'browser/main/lib/mixpanel'
 import mobileAnalytics from 'browser/main/lib/awsMobileAnalyticsConfig'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 function focused () {
   mixpanel.track('MAIN_FOCUSED')
@@ -30,8 +31,11 @@ class Main extends React.Component {
       isRightSliderFocused: false,
       listWidth: config.listWidth,
       navWidth: config.navWidth,
-      isLeftSliderFocused: false
+      isLeftSliderFocused: false,
+      fullScreen: false,
     }
+
+    this.fullScreenEditorCode = () => this.handleFullScreenButton()
   }
 
   getChildContext () {
@@ -66,11 +70,13 @@ class Main extends React.Component {
         }
       })
 
+    eventEmitter.on('editor:fullscreen', this.fullScreenEditorCode)
     window.addEventListener('focus', focused)
   }
 
   componentWillUnmount () {
     window.removeEventListener('focus', focused)
+    eventEmitter.off('editor:fullscreen', this.fullScreenEditorCode)
   }
 
   handleLeftSlideMouseDown (e) {
@@ -147,6 +153,24 @@ class Main extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    this.setState({ fullScreen: !this.state.fullScreen }, () => {
+      const noteDetail = document.querySelector('.NoteDetail')
+      const mainBody = document.querySelector('#main-body')
+      const sliderRight = document.querySelector('#slider-right')
+      const sliderLeft = document.querySelector('#slider-left')
+      if (this.state.fullScreen) {
+        noteDetail.style.left = '0px'
+        mainBody.style.left = '0px'
+        sliderRight.style.display = 'none'
+        sliderLeft.style.display = 'none'
+      } else {
+        sliderRight.style.display = 'block'
+        sliderLeft.style.display = 'block'
+      }
+    })
+  }
+
   render () {
     let { config } = this.props