diff --git a/app/components/BookBuilder/BookList.jsx b/app/components/BookBuilder/BookList.jsx index c6b88a804c2efd87345734bff5a4a863969e5f87..d9343bd20d3f0acc6734fe4e7d03b3faf9331958 100644 --- a/app/components/BookBuilder/BookList.jsx +++ b/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> diff --git a/app/components/BookBuilder/styles/bookList.local.scss b/app/components/BookBuilder/styles/bookList.local.scss index 656213a3aa4427f13e44a7acfc626e110cb4e75e..c56952195fb14501c722947ed14c365b38a1671c 100644 --- a/app/components/BookBuilder/styles/bookList.local.scss +++ b/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;