[Story] Create Book Component

[Dylan-Gresham]

As a User, I need to have a visual representation of my novels so that I have a more enjoyable user experience.

Requires Tasks #2 and #4 to be completed.

Each book will be shown visually in a card format. Similar to this image. The card itself will be the image supplied by the user or some default image, the title of the book displayed either below the card or on the bottom of the card, and a progress bar below the card.

The progress bar should be from this package and should be green if the book is in progress, red if the book is dropped, or orange if the book is aside. The progress itself should be the percentage followed by the number of pages read, for example if a user was halfway through a 100 page book, the progress bar would look like 50% (50). If the book is completed, there should be a green check mark displayed in place of the progress bar. If the book is in the plan to read list, there should be nothing displayed where the progress bar or check mark would be.

When clicked, each card should open the edit book route (which should be a clone of the new book route), with the fields auto-filled with the clicked book's details. From there, any changes that are made should be saved, database and state should be updated, and the corresponding book in the Library route should reflect the changes.

Acceptance Criteria:

• Given a BookType, when a Book component is created with the BookType, then a new Book component should be made and displayed in the /library route.
• Given a Book component in the /library route, when looked at, the viewer should see an image, the title, and the appropriate progress bar/icon/nothing shown as well.
• Given a Book component, when component is clicked, then route is changed to /edit-book
• Given a Book component has already been clicked, when in the /edit-book route, then the fields are filled with the clicked Book's information
• Given a Book component has already been clicked, when in the /edit-book route, changes have been made, and the submit button has been clicked, then the original Book component gets updated and the entry in the database also gets modified.
• Given a Book component, when it's visible and a progress bar should be shown, then a progress bar is shown with the appropriate styling
• Given a Book component, when it's visible and in the in progress status, then a progress bar is shown with the bar colored green
• Given a Book component, when it's visible and in the dropped status, then a progress bar is shown with the bar colored orange
• Given a Book component, when it's visible and in the aside status, then a progress bar is shown with the bar colored red
• Given a Book component, when it's visible and a progress bar shouldn't be shown, then the appropriate icon, or nothing, is shown
• Given a Book component, when it's visible and in the planned status, then no icon or progress bar should be shown
• Given a Book component, when it's visible and in the completed status, then a green check-mark should be shown

[Dylan-Gresham]

Finished with commit 9f57131