Requested Review

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -32,10 +32,7 @@ class HotkeyTab extends React.Component {
         message: err.message != null ? err.message : 'Error occurs!'
       }})
     }
-    if (JSON.parse(localStorage.getItem('config'))) {
+    this.oldHotkey = this.state.config.hotkey
-      const {hotkey} = JSON.parse(localStorage.getItem('config'))
-      this.hotkey = hotkey
-    }
     ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
     ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
   }
@@ -57,7 +54,7 @@ class HotkeyTab extends React.Component {
       config: newConfig
     })
     this.clearMessage()
-    this.props.haveToSave(null)
+    this.props.haveToSave()
   }
 
   handleHintToggleButtonClick (e) {
@@ -75,8 +72,8 @@ class HotkeyTab extends React.Component {
     this.setState({
       config
     })
-    if (JSON.stringify(this.hotkey) === JSON.stringify(config.hotkey)) {
+    if (JSON.stringify(this.oldHotkey) === JSON.stringify(config.hotkey)) {
-      this.props.haveToSave(null)
+      this.props.haveToSave()
     } else {
       this.props.haveToSave({
         tab: 'Hotkey',

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -43,9 +43,7 @@ top-bar--height = 50px
   color $ui-text-color
   font-size 16px
   .saving--warning
-    color #FFA500
+    haveToSave()
-    font-size 10px
-    margin-top 3px
 
 .nav-button--active
   @extend .nav-button
@@ -54,9 +52,7 @@ top-bar--height = 50px
   &:hover
     color $ui-text-color
   .saving--warning
-    color #FFA500
+    haveToSave()
-    font-size 10px
-    margin-top 3px
 
 .nav-button-icon
   display block

browser/main/modals/PreferencesModal/Tab.styl

@@ -20,3 +20,8 @@ $tab--dark-text-color = #E5E5E5
 body[data-theme="dark"]
   .header
     color $tab--dark-text-color
+
+haveToSave()
+  color #FFA500
+  font-size 10px
+  margin-top 3px

browser/main/modals/PreferencesModal/UiTab.js

@@ -20,8 +20,7 @@ class UiTab extends React.Component {
     super(props)
     this.state = {
       config: props.config,
-      codemirrorTheme: props.config.editor.theme,
+      codemirrorTheme: props.config.editor.theme
-      haveToSave: null
     }
   }
 
@@ -93,18 +92,16 @@ class UiTab extends React.Component {
       checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme.split(' ')[0]}.css`)
     }
     this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme }, () => {
-      if (JSON.parse(localStorage.getItem('config'))) {
+      const {ui, editor, preview} = this.props.config
-        const {ui, editor, preview} = JSON.parse(localStorage.getItem('config'))
+      this.currentConfig = {ui, editor, preview}
-        this.currentConfig = {ui, editor, preview}
+      if (JSON.stringify(this.currentConfig) === JSON.stringify(this.state.config)) {
-        if (JSON.stringify(this.currentConfig) === JSON.stringify(this.state.config)) {
+        this.props.haveToSave()
-          this.props.haveToSave(null)
+      } else {
-        } else {
+        this.props.haveToSave({
-          this.props.haveToSave({
+          tab: 'UI',
-            tab: 'UI',
+          type: 'warning',
-            type: 'warning',
+          message: 'You have to save!'
-            message: 'You have to save!'
+        })
-          })
-        }
       }
     })
   }
@@ -123,7 +120,7 @@ class UiTab extends React.Component {
       config: newConfig
     })
     this.clearMessage()
-    this.props.haveToSave(null)
+    this.props.haveToSave()
   }
 
   clearMessage () {

browser/main/modals/PreferencesModal/index.js

@@ -18,8 +18,8 @@ class Preferences extends React.Component {
 
     this.state = {
       currentTab: 'STORAGES',
-      UI: null,
+      UIAlert: '',
-      Hotkey: null
+      HotkeyAlert: ''
     }
   }
 
@@ -60,7 +60,7 @@ class Preferences extends React.Component {
           <HotkeyTab
             dispatch={dispatch}
             config={config}
-            haveToSave={msg => this.setState({Hotkey: msg})}
+            haveToSave={msg => this.setState({HotkeyAlert: msg})}
           />
         )
       case 'UI':
@@ -68,7 +68,7 @@ class Preferences extends React.Component {
           <UiTab
             dispatch={dispatch}
             config={config}
-            haveToSave={msg => this.setState({UI: msg})}
+            haveToSave={msg => this.setState({UIAlert: msg})}
           />
         )
       case 'CROWDFUNDING':
@@ -98,20 +98,26 @@ class Preferences extends React.Component {
     return node.getBoundingClientRect()
   }
   
+  haveToSaveNotif (tab) {
+    return (
+      <p styleName={`saving--${tab[tab.label].type}`}>{tab[tab.label].message}</p>
+    )
+  }
+
   render () {
     const content = this.renderContent()
 
     const tabs = [
       {target: 'STORAGES', label: 'Storages'},
-      {target: 'HOTKEY', label: 'Hotkey', Hotkey: this.state.Hotkey},
+      {target: 'HOTKEY', label: 'Hotkey', Hotkey: this.state.HotkeyAlert},
-      {target: 'UI', label: 'UI', UI: this.state.UI},
+      {target: 'UI', label: 'UI', UI: this.state.UIAlert},
       {target: 'INFO', label: 'Community / Info'},
       {target: 'CROWDFUNDING', label: 'Crowdfunding'}
     ]
 
     const navButtons = tabs.map((tab) => {
       const isActive = this.state.currentTab === tab.target
-      const isOk = typeof tab[tab.label] !== 'undefined' && tab[tab.label] !== null
+      const isUiHotkeyTab = _.isObject(tab[tab.label]) && tab.label === tab[tab.label].tab
       return (
         <button styleName={isActive
             ? 'nav-button--active'
@@ -123,7 +129,7 @@ class Preferences extends React.Component {
           <span styleName='nav-button-label'>
             {tab.label}
           </span>
-          {isOk && tab.label === tab[tab.label].tab ? <p styleName={`saving--${tab[tab.label].type}`}>{tab[tab.label].message}</p> : null}
+          {isUiHotkeyTab ? this.haveToSaveNotif(tab) : null}
         </button>
       )
     })