handle empty book list

app/components/Dashboard/BookList.jsx

-import { map, reverse, sortBy } from 'lodash'
+import { isEmpty, map, reverse, sortBy } from 'lodash'
 import React from 'react'
 
 import Book from './Book'
+import styles from './dashboard.local.scss'
 
 class BookList extends React.Component {
   renderBookList () {
     const { books, container, remove } = this.props
     if (!books) return 'Fetching...'
 
+    if (isEmpty(books)) {
+      return (
+        <div className={styles['booklist-empty']}>
+          There are no books to display.
+        </div>
+      )
+    }
+
     const items = reverse(sortBy(books, 'created'))
 
     const bookComponents = map(items, book => {

app/components/Dashboard/dashboard.local.scss

@@ -88,4 +88,8 @@ $medium-grey: #838587;
       text-decoration: none;
     }
   }
+
+  .booklist-empty {
+    padding-top: 15px;
+  }
 }