From 8abdedc11d991924e4ff23a3a3ef114767afa492 Mon Sep 17 00:00:00 2001 From: Rokt33r Date: Thu, 5 Nov 2015 09:50:07 +0900 Subject: [PATCH] beta - add error alert(folder editing) - debug clear button of search input --- browser/main/HomePage.js | 4 +- browser/main/HomePage/ArticleTopBar.js | 4 +- browser/main/index.js | 11 ++++- .../HomeContainer/lib/CreateNewFolder.styl | 25 +++++------- .../main/HomeContainer/lib/Preferences.styl | 40 +++++++++++-------- lib/components/modal/CreateNewFolder.js | 32 ++++++++------- lib/components/modal/Preference/FolderRow.js | 34 ++++++++++------ .../modal/Preference/FolderSettingTab.js | 36 +++++++++++++---- lib/reducer.js | 15 ++++++- package.json | 2 +- 10 files changed, 126 insertions(+), 77 deletions(-) diff --git a/browser/main/HomePage.js b/browser/main/HomePage.js index 00f11dc1..da1f6162 100644 --- a/browser/main/HomePage.js +++ b/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 } diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js index 9128b9b9..a7391d20 100644 --- a/browser/main/HomePage/ArticleTopBar.js +++ b/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() } diff --git a/browser/main/index.js b/browser/main/index.js index 33e468fb..29e05a9c 100644 --- a/browser/main/index.js +++ b/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 = ( @@ -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)) + } }) diff --git a/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl b/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl index 0da43f58..2e1c6507 100644 --- a/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl +++ b/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 diff --git a/browser/styles/main/HomeContainer/lib/Preferences.styl b/browser/styles/main/HomeContainer/lib/Preferences.styl index 56573b8a..3dbdbd14 100644 --- a/browser/styles/main/HomeContainer/lib/Preferences.styl +++ b/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 diff --git a/lib/components/modal/CreateNewFolder.js b/lib/components/modal/CreateNewFolder.js index e50c79ca..0934e219 100644 --- a/lib/components/modal/CreateNewFolder.js +++ b/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 () { diff --git a/lib/components/modal/Preference/FolderRow.js b/lib/components/modal/Preference/FolderRow.js index c4eec716..336a0d6c 100644 --- a/lib/components/modal/Preference/FolderRow.js +++ b/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 diff --git a/lib/components/modal/Preference/FolderSettingTab.js b/lib/components/modal/Preference/FolderSettingTab.js index 097a641b..ff1e8229 100644 --- a/lib/components/modal/Preference/FolderSettingTab.js +++ b/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 ( - + this.setAlert(alert, cb)}/> ) }) + let alert = this.state.alert + let alertElement = alert != null ? ( +

+ {alert.message} +

+ ) : null + return (
@@ -50,6 +71,7 @@ export default class FolderSettingTab extends React.Component {
+ {alertElement} diff --git a/lib/reducer.js b/lib/reducer.js index feb172a1..728f4384 100644 --- a/lib/reducer.js +++ b/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, { diff --git a/package.json b/package.json index 7868fc02..13a197d2 100644 --- a/package.json +++ b/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": {