beta

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

Author: Rokt33r

browser/main/HomePage.js

@@ -27,8 +27,8 @@ class HomePage extends React.Component {
   }
 
   handleKeyDown (e) {
-    if (isModalOpen() && e.keyCode === 27) {
-      closeModal()
+    if (isModalOpen()) {
+      if (e.keyCode === 27) closeModal()
       return
     }
 

browser/main/HomePage/ArticleTopBar.js

@@ -61,9 +61,7 @@ export default class ArticleTopBar extends React.Component {
   }
 
   handleSearchClearButton (e) {
-    let { dispatch } = this.props
-
-    dispatch(setSearchFilter(''))
+    this.searchInput.value = ''
     this.focusInput()
   }
 

browser/main/index.js

@@ -7,9 +7,9 @@ import HomePage from './HomePage'
 // import auth from 'boost/auth'
 import store from 'boost/store'
 import ReactDOM from 'react-dom'
-import { isModalOpen, closeModal } from 'boost/modal'
-import { IDLE_MODE, CREATE_MODE, EDIT_MODE } from 'boost/actions'
 require('../styles/main/index.styl')
+import { openModal } from 'boost/modal'
+import Tutorial from 'boost/components/modal/Tutorial'
 
 let routes = (
   <Route path='/' component={MainPage}>
@@ -27,4 +27,11 @@ ReactDOM.render((
 ), el, function () {
   let loadingCover = document.getElementById('loadingCover')
   loadingCover.parentNode.removeChild(loadingCover)
+  let status = JSON.parse(localStorage.getItem('status'))
+  if (status == null) status = {}
+  if (!status.introWatched) {
+    openModal(Tutorial)
+    status.introWatched = true
+    localStorage.setItem('status', JSON.stringify(status))
+  }
 })

browser/styles/main/HomeContainer/lib/CreateNewFolder.styl

@@ -37,22 +37,17 @@ iptFocusBorderColor = #369DCD
     margin 100px auto 25px
     &:focus
       border-color iptFocusBorderColor
-  .public
+  .alert
+    color infoTextColor
+    background-color infoBackgroundColor
+    font-size 14px
+    padding 15px 15px
+    width 330px
+    border-radius 5px
     margin 0 auto
-    text-align center
-    button
-      border none
-      background-color transparent
-      font-size 18px
-      color inactiveTextColor
-      transition 0.1s
-    button:hover
-      font-size 22px
-    button.active
-      color brandColor
-      font-size 22px
-    .divider
-      margin 0 5px
+    &.error
+      color errorTextColor
+      background-color errorBackgroundColor
   .confirmBtn
     display block
     position absolute

browser/styles/main/HomeContainer/lib/Preferences.styl

@@ -103,23 +103,17 @@ iptFocusBorderColor = #369DCD
           font-size 14px
           &:hover
             background-color lighten(brandColor, 10%)
-        .alert
-          float right
-          height 33px
-          padding 0 15px
-          border-radius 5px
-          margin-right 5px
-          line-height 33px
-          font-size 14px
-          &.info
-            background-color infoBackgroundColor
-            color infoTextColor
-          &.error
-            background-color errorBackgroundColor
-            color errorTextColor
-          &.success
-            background-color successBackgroundColor
-            color successTextColor
+    .alert
+      color infoTextColor
+      background-color infoBackgroundColor
+      font-size 14px
+      padding 15px 15px
+      width 330px
+      border-radius 5px
+      margin 10px auto
+      &.error
+        color errorTextColor
+        background-color errorBackgroundColor
     &.AppSettingTab
       .description
         marked()
@@ -390,6 +384,18 @@ iptFocusBorderColor = #369DCD
               width 145px
               text-align center
             &.newFolder
+              .alert
+                display block
+                color infoTextColor
+                background-color infoBackgroundColor
+                font-size 14px
+                padding 15px 15px
+                width 330px
+                border-radius 5px
+                margin 0 auto
+                &.error
+                  color errorTextColor
+                  background-color errorBackgroundColor
               .folderName input
                 height 33px
                 border 1px solid transparent

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>

lib/reducer.js

@@ -19,6 +19,8 @@ function folders (state = initialFolders, action) {
     case FOLDER_CREATE:
       {
         let newFolder = action.data.folder
+        if (!_.isString(newFolder.name)) throw new Error('Folder name must be a string')
+        newFolder.name = newFolder.name.trim().replace(/\s/, '_')
         Object.assign(newFolder, {
           key: keygen(),
           createAt: new Date(),
@@ -27,8 +29,10 @@ function folders (state = initialFolders, action) {
           color: Math.round(Math.random() * 7)
         })
 
+        if (newFolder.length === 0) throw new Error('Folder name is required')
+
         let conflictFolder = _.findWhere(state, {name: newFolder.name})
-        if (conflictFolder != null) throw new Error('name conflicted!')
+        if (conflictFolder != null) throw new Error(`${newFolder.name} already exists!`)
         state.push(newFolder)
 
         dataStore.setFolders(null, state)
@@ -39,11 +43,18 @@ function folders (state = initialFolders, action) {
         let folder = action.data.folder
         let targetFolder = _.findWhere(state, {key: folder.key})
 
+        if (!_.isString(folder.name)) throw new Error('Folder name must be a string')
+        folder.name = folder.name.trim().replace(/\s/, '_')
+        if (folder.length === 0) throw new Error('Folder name is required')
+
         // Folder existence check
         if (targetFolder == null) throw new Error('Folder doesnt exist')
         // Name conflict check
         if (targetFolder.name !== folder.name) {
-          let conflictFolder = _.findWhere(state, {name: folder.name})
+          let conflictFolder = _.find(state, _folder => {
+            return folder.name === _folder.name && folder.key !== _folder.key
+          })
+          console.log(conflictFolder)
           if (conflictFolder != null) throw new Error('Name conflicted')
         }
         Object.assign(targetFolder, folder, {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.4.0-alpha.7",
+  "version": "0.4.0-beta",
   "description": "Boost App",
   "main": "main.js",
   "scripts": {