diff --git a/app/components/BookBuilder/AddBook.jsx b/app/components/BookBuilder/AddBook.jsx index f3c967d4c4578f43bfc989ec5163f24e7e1dc371..a0746d0c37cf0a912397a4764b4931aff1cb5318 100644 --- a/app/components/BookBuilder/AddBook.jsx +++ b/app/components/BookBuilder/AddBook.jsx @@ -6,25 +6,49 @@ export default class AddBook extends React.Component { constructor (props) { super(props) + this.handleKeyOnInput = this.handleKeyOnInput.bind(this) + this.onInputChange = this.onInputChange.bind(this) this.onCreate = this.onCreate.bind(this) + + this.state = { error: false } + } + + componentDidUpdate () { + const { show } = this.props + if (show) this.inputRef.focus() } - // TODO -- focus input - componentDidMount () { - // console.log(this.inputRef) - // this.inputRef.focus() + handleKeyOnInput (event) { + if (event.charCode !== 13) return + this.onCreate() } onCreate () { const { create } = this.props - create('haha') + + const input = this.inputRef + const newTitle = input.value.trim() + + if (newTitle.length === 0) return this.setState({ error: true }) + create(newTitle) + } + + onInputChange () { + const { error } = this.state + if (!error) return + this.setState({ error: false }) } renderBody () { + const error = this.renderError() + return ( <span> + { error } <input - name='name' + name='title' + onChange={this.onInputChange} + onKeyPress={this.handleKeyOnInput} placeholder='Untitled' ref={(item) => { this.inputRef = item }} type='text' @@ -33,6 +57,19 @@ export default class AddBook extends React.Component { ) } + renderError () { + const { error } = this.state + + const el = ( + <div> + New book title cannot be empty + </div> + ) + + const res = error ? el : null + return res + } + render () { const { container, show, toggle } = this.props const body = this.renderBody() diff --git a/app/components/BookBuilder/BookList.jsx b/app/components/BookBuilder/BookList.jsx index 50a6e7c02106473fd563b300349cdb6ebbeadc70..2ea56f15b0c4e847aa23e971eb8631e5cad7892b 100644 --- a/app/components/BookBuilder/BookList.jsx +++ b/app/components/BookBuilder/BookList.jsx @@ -24,16 +24,9 @@ export class BookList extends React.Component { createCollection = newTitle => { const { createCollection } = this.props.actions + const collection = { title: newTitle || 'Untitled' } - // TODO -- make it dynamic with refs - const collection = { - title: newTitle || 'Untitled' - } createCollection(collection) - - // TODO: allow the title to be edited - // TODO: handle errors - this.toggleModal() }