Allow books to be created

app/components/BookBuilder/BookList.jsx

 import React from 'react'
+import ReactDOM from 'react-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { Modal } from 'react-bootstrap'
-import { LinkContainer } from 'react-router-bootstrap'
+import { Modal, Button, FormControl, FormGroup, ControlLabel } from 'react-bootstrap'
 import * as Actions from 'pubsweet-frontend/src/actions'
+import { Link } from 'react-router'
 import styles from './styles/bookList.local.scss'
 
 export class BookList extends React.Component {
@@ -23,16 +24,34 @@ export class BookList extends React.Component {
     })
   }
 
+  _createCollection = (event) => {
+    event.preventDefault()
+    this.props.actions.createCollection({
+      title: ReactDOM.findDOMNode(this.refs.newBookTitle).value || 'Untitled'
+    })
+    // TODO: allow the title to be edited
+    // TODO: handle errors
+    this._toggleModal()
+  }
+
   render () {
-    const { book } = this.props
+    const { books } = this.props
     const { showModal } = this.state
-    let bookTitle = book ? book.title : 'Fetching...'
-    let bookId = book ? book.id : ''
+
+    // TODO: sort most recently created to the top
+    // TODO: needs a "created_at" property on each book
+    // if (books) {
+    //   books.sort((a, b) => {
+    //     return (b.created_at < a.created_at) ? -1 : ((b.created_at > a.created_at) ? 1 : 0);
+    //   })
+    // }
 
     return (
       <div className={styles.bookList + ' bootstrap'}>
+        {/* FIXME: make this height: 100%, overflow: auto so it scrolls */}
         <div className='container col-lg-offset-2 col-lg-8'>
 
+          { /* FIXME: make this a fixed header */ }
           <div className='col-lg-12'>
             <h1 className={styles.bookTitle}>
               Books
@@ -43,17 +62,12 @@ export class BookList extends React.Component {
           </div>
 
           <div className='col-lg-12'>
-            <div className={styles.bookContainer}>
-              <h2>{bookTitle}</h2>
-              <LinkContainer to={`/books/${bookId}/book-builder`}>
-                <a href='#'
-                  className={styles.editBook}
-                  onClick={this._toggleModal} >
-                  Edit
-                </a>
-              </LinkContainer>
-            </div>
-
+            {books ? books.map(book => (
+              <div key={book.id} className={styles.bookContainer}>
+                <h2>{book.title}</h2>
+                <Link to={`/books/${book.id}/book-builder`} className={styles.editBook}>Edit</Link>
+              </div>
+            )) : 'Fetching…' }
           </div>
         </div>
 
@@ -71,7 +85,16 @@ export class BookList extends React.Component {
           </Modal.Header>
 
           <Modal.Body>
-            This feature is currently disabled.
+            <form onSubmit={this._createCollection}>
+              <FormGroup>
+                <ControlLabel>Title</ControlLabel>
+                <FormControl ref="newBookTitle" name="title" type="text" placeholder="Untitled"/>
+              </FormGroup>
+
+              <Button bsStyle="primary" type="submit">
+                <i className='fa fa-plus'/> Create book
+              </Button>
+            </form>
           </Modal.Body>
 
           <Modal.Footer>
@@ -89,12 +112,13 @@ export class BookList extends React.Component {
 }
 
 BookList.propTypes = {
-  book: React.PropTypes.object
+  books: React.PropTypes.arrayOf(React.PropTypes.object),
+  actions: React.PropTypes.object.isRequired
 }
 
-function mapStateToProps (state) {
+function mapStateToProps (state, { params }) {
   return {
-    book: state.collections[0]
+    books: state.collections
   }
 }
 

app/routes.jsx

@@ -18,6 +18,8 @@ import SimpleEditorWrapper from './components/SimpleEditor/SimpleEditorWrapper'
 import Login from 'pubsweet-component-login/Login'
 import Signup from 'pubsweet-component-signup/Signup'
 
+// FIXME: this shouldn't be using the collection as the object
+
 const AuthenticatedManage = requireAuthentication(
   Manage, 'create', (state) => state.collections[0]
 )