beta

- add error alert(folder editing)
- debug clear button of search input

lib/components/modal/CreateNewFolder.js

@@ -18,22 +18,24 @@ export default class CreateNewFolder extends React.Component {
   }
 
   handleConfirmButton (e) {
-    let { close } = this.props
-    let name = this.state.name
-    let input = {
-      name
-    }
+    this.setState({alert: null}, () => {
+      let { close } = this.props
+      let name = this.state.name
+      let input = {
+        name
+      }
 
-    store.dispatch(createFolder(input))
-    try {
-    } catch (e) {
-      this.setState({alert: {
-        type: 'error',
-        message: e.message
-      }})
-      return
-    }
-    close()
+      try {
+        store.dispatch(createFolder(input))
+      } catch (e) {
+        this.setState({alert: {
+          type: 'error',
+          message: e.message
+        }})
+        return
+      }
+      close()
+    })
   }
 
   render () {

lib/components/modal/Preference/FolderRow.js

@@ -34,20 +34,27 @@ export default class FolderRow extends React.Component {
     this.setState({mode: DELETE})
   }
 
-  handleFolderPublicChange (e) {
-    this.setState({public: e.target.value})
-  }
-
   handleSaveButtonClick (e) {
-    let { folder } = this.props
-    let input = {
-      name: this.state.name
-    }
-    Object.assign(folder, input)
+    let { folder, setAlert } = this.props
 
-    store.dispatch(updateFolder(folder))
-    this.setState({
-      mode: IDLE
+    setAlert(null, () => {
+      let input = {
+        name: this.state.name
+      }
+      folder = Object.assign({}, folder, input)
+
+      try {
+        store.dispatch(updateFolder(folder))
+        this.setState({
+          mode: IDLE
+        })
+      } catch (e) {
+        console.error(e)
+        setAlert({
+          type: 'error',
+          message: e.message
+        })
+      }
     })
   }
 
@@ -98,7 +105,8 @@ export default class FolderRow extends React.Component {
 }
 
 FolderRow.propTypes = {
-  folder: PropTypes.shape()
+  folder: PropTypes.shape(),
+  setAlert: PropTypes.func
 }
 
 FolderRow.prototype.linkState = linkState

lib/components/modal/Preference/FolderSettingTab.js

@@ -13,25 +13,46 @@ export default class FolderSettingTab extends React.Component {
   }
 
   handleSaveButtonClick (e) {
-    if (this.state.name.trim().length === 0) return false
+    this.setState({alert: null}, () => {
+      if (this.state.name.trim().length === 0) return false
 
-    let { dispatch } = this.props
+      let { dispatch } = this.props
 
-    dispatch(createFolder({
-      name: this.state.name
-    }))
+      try {
+        dispatch(createFolder({
+          name: this.state.name
+        }))
+      } catch (e) {
+        this.setState({alert: {
+          type: 'error',
+          message: e.message
+        }})
+        return
+      }
 
-    this.setState({name: ''})
+      this.setState({name: ''})
+    })
+  }
+
+  setAlert (alert, cb) {
+    this.setState({alert: alert}, cb)
   }
 
   render () {
     let { folders } = this.props
     let folderElements = folders.map(folder => {
       return (
-        <FolderRow key={'folder-' + folder.key} folder={folder}/>
+        <FolderRow key={'folder-' + folder.key} folder={folder} setAlert={(alert, cb) => this.setAlert(alert, cb)}/>
         )
     })
 
+    let alert = this.state.alert
+    let alertElement = alert != null ? (
+        <p className={`alert ${alert.type}`}>
+          {alert.message}
+        </p>
+      ) : null
+
     return (
       <div className='FolderSettingTab content'>
         <div className='section'>
@@ -50,6 +71,7 @@ export default class FolderSettingTab extends React.Component {
                 <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Add</button>
               </div>
             </div>
+            {alertElement}
           </div>
         </div>
       </div>