Auto format

tobias-dev · Apr 23, 2020 · 34e4457 · 34e4457
1 parent 280684e
commit 34e4457
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 128 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "react": "^16.6.3",
     "react-debounce-input": "^3.2.2",
     "react-dom": "^16.6.3",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "2.1.1"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import { Route, Link } from 'react-router-dom'
-import * as BooksAPI from './BooksAPI'
-import Shelf from './Shelf'
-import Search from './Search'
-import './App.css'
+import React from 'react';
+import { Route, Link } from 'react-router-dom';
+import * as BooksAPI from './BooksAPI';
+import Shelf from './Shelf';
+import Search from './Search';
+import './App.css';
 
 const shelfList = [
   {
@@ -23,60 +23,61 @@ const shelfList = [
 class BooksApp extends React.Component {
   state = {
     booksInShelf: {}, // Contains books that are assigned to any shelf
-  }
+  };
 
   componentDidMount() {
-    BooksAPI.getAll()
-      .then((books) => {
-        // Store books with IDs as keys, so that they can be easily accessed by ID
-        const booksWithId = {};
-        books.forEach((book) => {
-          booksWithId[book.id] = book;
-        })
-        this.setState(() => ({
-          booksInShelf: booksWithId
-        }))
-      })
+    BooksAPI.getAll().then((books) => {
+      // Store books with IDs as keys, so that they can be easily accessed by ID
+      const booksWithId = {};
+      books.forEach((book) => {
+        booksWithId[book.id] = book;
+      });
+      this.setState(() => ({
+        booksInShelf: booksWithId,
+      }));
+    });
   }
 
   moveBook = (book, newShelfId) => {
-    BooksAPI.update(book, newShelfId)
-      .then(() => {
-        this.setState((prevState) => {
-          const bookId = book.id;
-          book.shelf = newShelfId; // Update shelf
-          this.isShelf(newShelfId) ?
-            prevState.booksInShelf[bookId] = book : // Updated or new book
-            delete prevState.booksInShelf.bookId; // Delete book if not in shelf anymore
-          return prevState;
-        });
-      })
-  }
+    BooksAPI.update(book, newShelfId).then(() => {
+      this.setState((prevState) => {
+        const bookId = book.id;
+        book.shelf = newShelfId; // Update shelf
+        this.isShelf(newShelfId)
+          ? (prevState.booksInShelf[bookId] = book) // Updated or new book
+          : delete prevState.booksInShelf.bookId; // Delete book if not in shelf anymore
+        return prevState;
+      });
+    });
+  };
 
   getBooksByShelf = (shelfId) => {
     const { booksInShelf } = this.state;
     return Object.keys(booksInShelf)
       .map((bookId) => booksInShelf[bookId])
       .filter((book) => book.shelf === shelfId);
-  }
+  };
 
   isShelf = (shelfId) => {
     return shelfList.map((shelf) => shelf.id).includes(shelfId);
-  }
+  };
 
   render() {
     const { booksInShelf } = this.state;
 
     return (
-      <div className="app">
-        <Route exact path='/' render={() => (
-            <div className="list-books">
-            <div className="list-books-title">
-              <h1>MyReads</h1>
-            </div>
-            <div className="list-books-content">
-              <div>
-                {shelfList.map((shelf) => (
+      <div className='app'>
+        <Route
+          exact
+          path='/'
+          render={() => (
+            <div className='list-books'>
+              <div className='list-books-title'>
+                <h1>MyReads</h1>
+              </div>
+              <div className='list-books-content'>
+                <div>
+                  {shelfList.map((shelf) => (
                     <Shelf
                       key={shelf.id}
                       shelf={shelf}
@@ -85,27 +86,30 @@ class BooksApp extends React.Component {
                       booksAnyShelf={booksInShelf}
                       onBookMove={this.moveBook}
                     />
-                  )
-                )}
+                  ))}
+                </div>
+              </div>
+              <div className='open-search'>
+                <Link to='/search'>
+                  <button>Add a book</button>
+                </Link>
               </div>
             </div>
-            <div className="open-search">
-              <Link to='/search'>
-                <button>Add a book</button>
-              </Link>
-            </div>
-          </div>)}
+          )}
         />
-        <Route path='/search' render={() => (
-          <Search
-            shelfList={shelfList}
-            booksAnyShelf={booksInShelf}
-            onBookMove={this.moveBook}
-          />)}
+        <Route
+          path='/search'
+          render={() => (
+            <Search
+              shelfList={shelfList}
+              booksAnyShelf={booksInShelf}
+              onBookMove={this.moveBook}
+            />
+          )}
         />
       </div>
-    )
+    );
   }
 }
 
-export default BooksApp
+export default BooksApp;
diff --git a/src/Book.js b/src/Book.js
@@ -7,13 +7,14 @@ const Book = (props) => {
   const { title, authors, imageLinks } = book;
 
   return (
-    <div className="book">
-      <div className="book-top">
-        <div className="book-cover"
+    <div className='book'>
+      <div className='book-top'>
+        <div
+          className='book-cover'
           style={{
             width: 128,
             height: 188,
-            backgroundImage: imageLinks ? `url("${imageLinks.thumbnail}")` : ''
+            backgroundImage: imageLinks ? `url("${imageLinks.thumbnail}")` : '',
           }}
         />
         <ShelfChanger
@@ -23,11 +24,11 @@ const Book = (props) => {
           onBookMove={onBookMove}
         />
       </div>
-      <div className="book-title">{title}</div>
-      <div className="book-authors">{(authors || []).join(', ')}</div>
+      <div className='book-title'>{title}</div>
+      <div className='book-authors'>{(authors || []).join(', ')}</div>
     </div>
-  )
-}
+  );
+};
 
 Book.propTypes = {
   book: PropTypes.object.isRequired,
@@ -36,4 +37,4 @@ Book.propTypes = {
   onBookMove: PropTypes.func.isRequired,
 };
 
-export default Book
+export default Book;
diff --git a/src/ListBooks.js b/src/ListBooks.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import Book from './Book'
+import Book from './Book';
 import PropTypes from 'prop-types';
 
 const ListBooks = (props) => {
   const { booksThisList, shelfList, booksAnyShelf, onBookMove } = props;
-  
+
   return (
-    <ol className="books-grid">
+    <ol className='books-grid'>
       {booksThisList.map((book) => (
         <li key={book.id}>
           <Book
@@ -18,8 +18,8 @@ const ListBooks = (props) => {
         </li>
       ))}
     </ol>
-  )
-}
+  );
+};
 
 ListBooks.propTypes = {
   booksThisList: PropTypes.array.isRequired,
@@ -28,4 +28,4 @@ ListBooks.propTypes = {
   onBookMove: PropTypes.func.isRequired,
 };
 
-export default ListBooks
+export default ListBooks;
diff --git a/src/Search.js b/src/Search.js
@@ -10,61 +10,63 @@ class Search extends Component {
     query: '',
     books: [],
     hasSearchError: false,
-  }
+  };
 
   handleSearch = (e) => {
     const query = e.target.value;
-    this.setState(() => ({
-      query
-    }), () => {
-      BooksAPI.search(query)
-        .then((books) => {
-          typeof books === 'undefined' || books.hasOwnProperty('error') ?
-            this.setState(() => ({
-              books: [],
-              hasSearchError: true,
-            })) :
-            this.setState(() => ({
-              books: books || [],
-              hasSearchError: false,
-            }))
+    this.setState(
+      () => ({
+        query,
+      }),
+      () => {
+        BooksAPI.search(query).then((books) => {
+          typeof books === 'undefined' || books.hasOwnProperty('error')
+            ? this.setState(() => ({
+                books: [],
+                hasSearchError: true,
+              }))
+            : this.setState(() => ({
+                books: books || [],
+                hasSearchError: false,
+              }));
         });
-    })
-  }
+      }
+    );
+  };
 
   render() {
     const { query, books, hasSearchError } = this.state;
     const { shelfList, booksAnyShelf, onBookMove } = this.props;
 
     return (
-      <div className="search-books">
-        <div className="search-books-bar">
+      <div className='search-books'>
+        <div className='search-books-bar'>
           <Link to='/'>
-            <button className="close-search">Close</button>
+            <button className='close-search'>Close</button>
           </Link>
-          <div className="search-books-input-wrapper">
+          <div className='search-books-input-wrapper'>
             <DebounceInput
-              type="text"
-              placeholder="Search by title or author"
+              type='text'
+              placeholder='Search by title or author'
               value={query}
               debounceTimeout={150}
               className={hasSearchError ? 'error' : ''}
               onChange={this.handleSearch}
             />
           </div>
         </div>
-        <div className="search-books-results">
-          {!hasSearchError &&
+        <div className='search-books-results'>
+          {!hasSearchError && (
             <ListBooks
               booksThisList={books}
               shelfList={shelfList}
               booksAnyShelf={booksAnyShelf}
               onBookMove={onBookMove}
             />
-          }
+          )}
         </div>
       </div>
-    )
+    );
   }
 }
 
@@ -74,4 +76,4 @@ Search.propTypes = {
   onBookMove: PropTypes.func.isRequired,
 };
 
-export default Search
+export default Search;
diff --git a/src/Shelf.js b/src/Shelf.js
@@ -3,19 +3,24 @@ import ListBooks from './ListBooks';
 import PropTypes from 'prop-types';
 
 class Shelf extends Component {
-
   shouldComponentUpdate(nextProps) {
     // Only update if a book is added or removed
     return this.props.booksThisShelf.length !== nextProps.booksThisShelf.length;
   }
 
   render() {
-    const { shelf, shelfList, booksThisShelf, booksAnyShelf, onBookMove } = this.props;
+    const {
+      shelf,
+      shelfList,
+      booksThisShelf,
+      booksAnyShelf,
+      onBookMove,
+    } = this.props;
 
     return (
-      <div className="bookshelf">
-        <h2 className="bookshelf-title">{shelf.label}</h2>
-        <div className="bookshelf-books">
+      <div className='bookshelf'>
+        <h2 className='bookshelf-title'>{shelf.label}</h2>
+        <div className='bookshelf-books'>
           <ListBooks
             booksThisList={booksThisShelf}
             shelfList={shelfList}
@@ -24,7 +29,7 @@ class Shelf extends Component {
           />
         </div>
       </div>
-    )
+    );
   }
 }
 
@@ -36,4 +41,4 @@ Shelf.propTypes = {
   onBookMove: PropTypes.func.isRequired,
 };
 
-export default Shelf
+export default Shelf;