Updates

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 yarn.lock
 .DS_Store
+secrets.js
+build/

src/App.js

@@ -1,91 +1,89 @@
-import React from 'react'
+import React from "react";
-import { Router } from 'react-router-dom'
+import { Router } from "react-router-dom";
-import { Link, Route } from 'react-router-dom'
+import { Link, Route } from "react-router-dom";
-import Bookshelf from './Bookshelf'
+import Bookshelf from "./Bookshelf";
-import createHistory from 'history/createBrowserHistory'
+import createHistory from "history/createBrowserHistory";
-import { get, getAll, update } from './BooksAPI'
+import { get, getAll, update } from "./BooksAPI";
-import SearchPage from './SearchPage'
+import SearchPage from "./SearchPage";
-import './App.css'
+import "./App.css";
 
 export const history = createHistory();
 
 class BooksApp extends React.Component {
-
   constructor() {
     super();
     this.state = {
       books: [],
-    }
+    };
-  };
+  }
 
   componentDidMount() {
     getAll().then((books) => {
-      this.setState({ books })
+      this.setState({ books });
-    })
+    });
-  };
+  }
 
   onResultSelect = (e) => {
-
+    const id = e.target.name;
-    const id = e.target.name
+    const newShelf = e.target.value;
-    const newShelf = e.target.value
+    let newBook;
-    let newBook
     get(id).then((result) => {
-      newBook = result
+      newBook = result;
-      newBook.shelf = newShelf
+      newBook.shelf = newShelf;
       this.setState({
-        books: [...this.state.books, newBook]
+        books: [...this.state.books, newBook],
       });
-      const newBooks = this.state.books
+      const newBooks = this.state.books;
       newBooks.forEach((book) => {
-        update(book, book.shelf)
+        update(book, book.shelf);
-      })
+      });
     });
-    history.push('/');
+    history.push("/");
   };
 
   onSelectChange = (e) => {
-    const id = e.target.name
+    const id = e.target.name;
-    const newShelf = e.target.value
+    const newShelf = e.target.value;
-    const books = this.state.books
+    const books = this.state.books;
     books.forEach((book) => {
       if (book.id === id) {
         book.shelf = newShelf;
-        update(book, newShelf)
+        update(book, newShelf);
       }
     });
     this.setState({ books });
-  }
+  };
 
   render() {
-
     return (
       <Router history={history}>
-
         <div className="app">
-
+          <Route
-            <Route exact path='/' render={() => (
+            exact
+            path="/"
+            render={() => (
               <Bookshelf
                 books={this.state.books}
                 onSelect={this.onSelectChange}
               />
-            )}/>
+            )}
-
+          />
-            <Route path='/search' render={() => (
+          <Route
+            path="/search"
+            render={() => (
               <SearchPage
                 books={this.state.books}
                 onSelect={this.onResultSelect}
               />
-            )}/>
+            )}
-
+          />
-            <div className="open-search">
+          <div className="open-search">
-              <Link to="/search">Search for Books</Link>
+            <Link to="/search">Search for Books</Link>
-            </div>
+          </div>
-
         </div>
-
       </Router>
-    )
+    );
   }
-};
+}
 
-export default BooksApp
+export default BooksApp;

src/App.test.js

@@ -1,16 +1,8 @@
-import React from 'react'
+import React from "react";
-import ReactDOM from 'react-dom'
+import ReactDOM from "react-dom";
-import App from './App'
+import App from "./App";
-
-/** 
- This course is not designed to teach Test Driven Development. 
- Feel free to use this file to test your application, but it 
- is not required.
-**/
-
-it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(<App />, div)
-})
-
 
+it("renders as expected", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+});

src/BooksAPI.js

@@ -1,44 +1,43 @@
+import SEARCH_API from "../secrets";
+const api = SEARCH_API;
 
-const api = "https://reactnd-books-api.udacity.com"
+// Generate a unique token
-
+let token = localStorage.token;
-
+if (!token) token = localStorage.token = Math.random().toString(36).substr(-8);
-// Generate a unique token 
-let token = localStorage.token
-if (!token)
-  token = localStorage.token = Math.random().toString(36).substr(-8)
 
 const headers = {
-  'Accept': 'application/json',
+  Accept: "application/json",
-  'Authorization': token
+  Authorization: token,
-}
+};
 
 export const get = (bookId) =>
   fetch(`${api}/books/${bookId}`, { headers })
-    .then(res => res.json())
+    .then((res) => res.json())
-    .then(data => data.book)
+    .then((data) => data.book);
 
 export const getAll = () =>
   fetch(`${api}/books`, { headers })
-    .then(res => res.json())
+    .then((res) => res.json())
-    .then(data => data.books)
+    .then((data) => data.books);
 
 export const update = (book, shelf) =>
   fetch(`${api}/books/${book.id}`, {
-    method: 'PUT',
+    method: "PUT",
     headers: {
       ...headers,
-      'Content-Type': 'application/json'
+      "Content-Type": "application/json",
     },
-    body: JSON.stringify({ shelf })
+    body: JSON.stringify({ shelf }),
-  }).then(res => res.json())
+  }).then((res) => res.json());
 
 export const search = (query) =>
   fetch(`${api}/search`, {
-    method: 'POST',
+    method: "POST",
     headers: {
       ...headers,
-      'Content-Type': 'application/json'
+      "Content-Type": "application/json",
     },
-    body: JSON.stringify({ query })
+    body: JSON.stringify({ query }),
-  }).then(res => res.json())
+  })
-    .then(data => data.books)
+    .then((res) => res.json())
+    .then((data) => data.books);