make new book modal focus on open, capture new title and handle empty input

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()

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()
   }