added components

src/components/Book.js

@@ -0,0 +1,59 @@
+import React , { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class Book extends Component {
+    static propTypes = {
+        book: PropTypes.object.isRequired,
+        booksShelfChange: PropTypes.func.isRequired
+    }
+
+    handleShelfChange = (e) => {
+        let newValue = e.target.value;
+        this.props.booksShelfChange(this, newValue)
+    }
+
+    render() {
+        const { title } = this.props.book;
+
+        if(this.props.book.authors !== undefined && Array.isArray(this.props.book.authors) && this.props.book.authors.length > 1) {
+            this.props.book.authors = this.props.book.authors.join(' and ');
+        } else if (this.props.book.authors !== undefined && Array.isArray(this.props.book.authors)) {
+            this.props.book.authors = this.props.book.authors[0];
+        } else if(this.props.book.authors === undefined) {
+            this.props.book.authors = '';
+        }
+
+        if(this.props.book.shelf === undefined) {
+            this.props.book.shelf = 'none';
+        }
+
+        if(this.props.book.imageLinks === undefined ) {
+            this.props.book.imageLinks = ['thumbnail'];
+            this.props.book.imageLinks.thumbnail = 'https://library.britishcouncil.org.in/static-content/isbn/noimage.jpg';
+        }
+
+        return (
+            <div className="book">
+                <div className="book-top">
+                    <div className="book-cover" style={{ width: 128, height: 193 }}>
+                        <img alt="" src={this.props.book.imageLinks.thumbnail} style={{ width: 128, height: 193 }}/>
+                    </div>
+                    <div className="book-shelf-changer">
+                        <select onChange={this.handleShelfChange} defaultValue={this.props.book.shelf}>
+                            <option value="none" disabled>Move to...</option>
+                            <option value="currentlyReading" >Currently Reading</option>
+                            <option value="wantToRead" >Want to Read</option>
+                            <option value="read" >Read</option>
+                            <option value="none" >None</option>
+                        </select>
+                    </div>
+                </div>
+                <div className="book-title">{title}</div>
+                <div className="book-authors">{this.props.book.authors}</div>
+            </div>
+        )
+    }
+}
+
+
+export default Book

src/components/BookCase.js

@@ -0,0 +1,44 @@
+import React , { Component } from 'react';
+import PropTypes from 'prop-types';
+import Shelf from './Shelf'
+
+class BookCase extends Component {
+
+    static propTypes = {
+        books: PropTypes.array.isRequired,
+        onBookShelfChange: PropTypes.func.isRequired
+    }
+
+    handleBookShelfChange = (book, shelf) => {
+        this.props.onBookShelfChange(book, shelf);
+    }
+
+    render() {
+        return (
+            <div className="list-books-content">
+                <div>
+                    <Shelf
+                        title="Currently Reading"
+                        cat="currentlyReading"
+                        books={this.props.books.filter(bs => bs.shelf === 'currentlyReading')}
+                        onBookShelfChange={this.handleBookShelfChange}
+                    />
+                    <Shelf
+                        title="Want to Read"
+                        cat="wantToRead"
+                        books={this.props.books.filter(bs => bs.shelf === 'wantToRead')}
+                        onBookShelfChange={this.handleBookShelfChange}
+                    />
+                    <Shelf
+                        title="Read"
+                        cat="read"
+                        books={this.props.books.filter(bs => bs.shelf === 'read')}
+                        onBookShelfChange={this.handleBookShelfChange}
+                    />
+                </div>
+            </div>
+        )
+    }
+}
+
+export default BookCase

src/components/Shelf.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Book from './Book'
+
+const Shelf = function (props) {
+
+    let handleBookShelfChange = (book, shelf) => {
+        props.onBookShelfChange(book, shelf);
+    }
+
+    return (
+        <div className="bookshelf">
+            <h2 className="bookshelf-title">{props.title}</h2>
+            <div className="bookshelf-books">
+                <ol className="books-grid">
+                    {props.books.map((book) => (
+                        <li key={book.id}>
+                            <Book
+                                book={book}
+                                booksShelfChange={handleBookShelfChange}
+                            />
+                        </li>
+                    ))}
+                </ol>
+            </div>
+        </div>
+    )
+
+}
+
+Shelf.propTypes = {
+    books: PropTypes.array.isRequired,
+    title: PropTypes.string.isRequired
+}
+export default Shelf