Add UI for removing a book

app/components/BookBuilder/BookList.jsx

@@ -34,6 +34,12 @@ export class BookList extends React.Component {
     this._toggleModal()
   }
 
+  _removeCollection = (collection) => {
+    if (confirm('Remove this book?')) {
+      this.props.actions.deleteCollection(collection)
+    }
+  }
+
   render () {
     const { books } = this.props
     const { showModal } = this.state
@@ -63,7 +69,12 @@ export class BookList extends React.Component {
             {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 className={styles.bookActions}>
+                  <Link to={`/books/${book.id}/book-builder`} className={styles.editBook}>Edit</Link>
+
+                  <a href="#" onClick={() => this._removeCollection(book)} className={styles.editBook}>Remove</a>
+                </div>
               </div>
             )) : 'Fetching…' }
           </div>

app/components/BookBuilder/styles/bookList.local.scss

@@ -56,6 +56,13 @@ $primary-color: #515253;
     padding-bottom: 0;
     padding-left: 2em;
     padding-top: 0;
+    position: relative;
+  }
+
+  .bookActions {
+    bottom: 0;
+    right: 13px;
+    position: absolute;
   }
 
   .editBook {
@@ -63,10 +70,8 @@ $primary-color: #515253;
     text-decoration: none;
     font-style: italic;
     font-weight: 500;
-    right: 13px;
-    display: block;
-    bottom: 0;
-    position: absolute;
+    display: inline-block;
+    margin-left: 13px;
     &:hover {
       color:#502424;
       text-decoration: none;