diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
deleted file mode 100644
index 2923eaa..0000000
--- a/CONTRIBUTING.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# How to contribute
-
-The files in this repository are used in the course videos and are the starting point for all students. Because we want all students to have the same experience going through course, if your pull request alters any of the core files, then it (most likely) will _not_ be merged into the project.
diff --git a/package.json b/package.json
index 1ba84cc..e2c540f 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "lodash.debounce": "^4.0.8",
"prop-types": "^15.6.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
diff --git a/src/App.css b/src/App.css
index 049366c..b780245 100644
--- a/src/App.css
+++ b/src/App.css
@@ -78,10 +78,7 @@ body,
/* search page */
.search-books-bar {
- position: fixed;
width: 100%;
- top: 0;
- left: 0;
z-index: 5;
display: flex;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 0 6px rgba(0, 0, 0, 0.23);
diff --git a/src/App.js b/src/App.js
index bc670e9..5dd9b60 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,32 +1,71 @@
+import { useState, useEffect } from 'react'
import './App.css'
import Navigation from './components/Navigation/Navigation'
import Main from './components/Main/Main'
-import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
+import { BooksProvider } from './BooksProvider'
+import { getAll, update } from './BooksAPI'
const BooksApp = () => {
- // state = {
- // /**
- // * TODO: Instead of using this state variable to keep track of which page
- // * we're on, use the URL in the browser's address bar. This will ensure that
- // * users can use the browser's back and forward buttons to navigate between
- // * pages, as well as provide a good URL they can bookmark and share.
- // */
- // showSearchPage: false,
- // }
+ const [searchResults, setSearchResults] = useState([])
+ const [books, setBooks] = useState([])
+ const [shouldUpdate, setShouldUpdate] = useState(true)
+
+ const currentlyReading = books && books.filter((book) => book.shelf === 'currentlyReading')
+ const wantToRead = books && books.filter((book) => book.shelf === 'wantToRead')
+ const read = books && books.filter((book) => book.shelf === 'read')
+
+ useEffect(() => {
+ if (shouldUpdate) {
+ getAll()
+ .then((data) => {
+ setBooks(data)
+ })
+ .then(() => setShouldUpdate(false))
+ .catch((err) => console.log(err))
+ }
+ setShouldUpdate(false)
+ }, [shouldUpdate])
+
+ const handleShelf = (shelf, book) => {
+ const { id } = book
+
+ // update server
+ update(id, shelf)
+ // check if book is already on the shelf
+ const isBook = books.find((book) => book.id === id)
+
+ // when book already exists, change it to the selected shelf
+ if (isBook !== undefined) {
+ const myBooks = [...books]
+ const bookIndex = myBooks.findIndex((book) => book.id === id)
+ myBooks[bookIndex].shelf = shelf
+ setBooks(myBooks)
+
+ // When book does not exists, add it to the selected shelf and update the state
+ } else {
+ // force update to update the books
+ setShouldUpdate(true)
+ }
+ }
return (
-
-
-
-
-
-
-
-
-
-
+
+ {/* Pass books down to make it available for any consumer component within the provider */}
+
+
+
)
}
diff --git a/src/BooksProvider.js b/src/BooksProvider.js
new file mode 100644
index 0000000..f2eab6b
--- /dev/null
+++ b/src/BooksProvider.js
@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export const BooksContext = createContext([])
+
+export const BooksProvider = BooksContext.Provider
+
+export default BooksContext
diff --git a/src/assets/book-placeholder.jpeg b/src/assets/book-placeholder.jpeg
new file mode 100644
index 0000000..e4ba8c7
Binary files /dev/null and b/src/assets/book-placeholder.jpeg differ
diff --git a/src/components/Book/Book.js b/src/components/Book/Book.js
index c569e6d..171c396 100644
--- a/src/components/Book/Book.js
+++ b/src/components/Book/Book.js
@@ -1,13 +1,21 @@
+import { useContext } from 'react'
+import BooksProvider from '../../BooksProvider'
import BookShelfChanger from '../BookShelfChanger/BookShelfChanger'
+import placeholder from '../../assets/book-placeholder.jpeg'
-const Book = ({ book, handleShelf }) => {
- const {
- imageLinks: { thumbnail },
- title,
- authors,
- shelf,
- id,
- } = book
+const Book = ({ book, search }) => {
+ const { title, authors, shelf, id, imageLinks } = book
+
+ const { books } = useContext(BooksProvider)
+
+ // if book list coming from search results, check if book is already is in any shelf mybooks
+ const isBook = () => {
+ if (search) {
+ return books && books.find((book) => book.id === id)
+ }
+ }
+
+ const thumbnail = imageLinks ? book.imageLinks.thumbnail : placeholder
const bookAuthors = authors && authors.map((author) =>