Skip to content
This repository was archived by the owner on Jun 28, 2022. It is now read-only.

Feat categorize books #139

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Feat categorize books #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
694c425
add books to the view
nahimanajz Mar 10, 2021
9cc3b43
show book for changing its shelf
nahimanajz Mar 11, 2021
f67b588
show books in their category
nahimanajz Mar 11, 2021
7b1fd3e
search books
nahimanajz Mar 13, 2021
9586c03
fix property thumbnail is undefined
nahimanajz Mar 13, 2021
bfc4125
change shelf of searched book
nahimanajz Mar 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15,223 changes: 15,195 additions & 28 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-router-dom": "^5.2.0",
"react-scripts": "2.1.1"
},
"scripts": {
Expand Down
277 changes: 98 additions & 179 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import React from 'react'
// import * as BooksAPI from './BooksAPI'
import * as BooksAPI from './BooksAPI'
import './App.css'
// import Shelf from './components/Shelf';
import { Book } from './components/Book';
import { BrowserRouter, Link, Route } from 'react-router-dom';
import SearchBook from './components/SearchBook';



class BooksApp extends React.Component {
state = {
Expand All @@ -10,195 +16,108 @@ class BooksApp extends React.Component {
* 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
showSearchPage: false,
books: [],
currentlyReading:[],
read:[],
wantToRead: [],
searchedBooks: []

}
//TODO: ADD COMPONENT DID MOUNT AND GET STATE OF BOOKS
componentDidMount() {
BooksAPI.getAll().then(books => {
this.setState(()=>({
books,

}))
})

}
//https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm

changeShelf = (book, shelf)=> {

BooksAPI.update(book, shelf).then(updateBooks => {
this.setState((prevState)=>({
books: prevState.books.filter((updatedBook)=> updatedBook.id !== book.id).concat({...book, shelf}),
}));
})
}
searchBook=(query) => {
BooksAPI.search(query).then(books =>{

let booksToArray = [];
const filteredBooks = booksToArray.concat(books).filter((book) =>
book.name.includes(query) ||
book.authors.some(author => author.includes(query))
);

this.setState((prevState)=>({
searchedBooks: filteredBooks

}))


render() {
return (
<div className="app">
{this.state.showSearchPage ? (
<div className="search-books">
<div className="search-books-bar">
<button className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</button>
<div className="search-books-input-wrapper">
{/*
NOTES: The search from BooksAPI is limited to a particular set of search terms.
You can find these search terms here:
https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md
})

However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if
you don't find a specific author or title. Every search is limited by search terms.
*/}
<input type="text" placeholder="Search by title or author"/>

}

render() {

const { books, searchedBooks} = this.state;
console.log(JSON.stringify(searchedBooks.length));
const currentlyReading= books.filter(book => book.shelf === 'currentlyReading');
const read = books.filter(book => book.shelf === 'read');
const wantToRead = books.filter(book => book.shelf === 'wantToRead');
return (
<BrowserRouter>
<div className="app">
{/* Search page was here */}
<div className="list-books">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid"></ol>
</div>
</div>
) : (
<div className="list-books">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
<div className="list-books-content">
<div>
<div className="bookshelf">
<h2 className="bookshelf-title">Currently Reading</h2>
<div className="bookshelf-books">
<ol className="books-grid">
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: 'url("http://books.google.com/books/content?id=PGR2AwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73-GnPVEyb7MOCxDzOYF1PTQRuf6nCss9LMNOSWBpxBrz8Pm2_mFtWMMg_Y1dx92HT7cUoQBeSWjs3oEztBVhUeDFQX6-tWlWz1-feexS0mlJPjotcwFqAg6hBYDXuK_bkyHD-y&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select>
<option value="move" 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">To Kill a Mockingbird</div>
<div className="book-authors">Harper Lee</div>
</div>
</li>
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 188, backgroundImage: 'url("http://books.google.com/books/content?id=yDtCuFHXbAYC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72RRiTR6U5OUg3IY_LpHTL2NztVWAuZYNFE8dUuC0VlYabeyegLzpAnDPeWxE6RHi0C2ehrR9Gv20LH2dtjpbcUcs8YnH5VCCAH0Y2ICaKOTvrZTCObQbsfp4UbDqQyGISCZfGN&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select>
<option value="move" 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">Ender's Game</div>
<div className="book-authors">Orson Scott Card</div>
</div>
</li>
</ol>
<div className="list-books-content">
<div>
<div className="bookshelf">
<h2 className="bookshelf-title">Currently Reading</h2>

<Book books={currentlyReading} changeShelf={this.changeShelf}/>
</div>
</div>
<div className="bookshelf">
<h2 className="bookshelf-title">Want to Read</h2>
<div className="bookshelf-books">
<ol className="books-grid">
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: 'url("http://books.google.com/books/content?id=uu1mC6zWNTwC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE73pGHfBNSsJG9Y8kRBpmLUft9O4BfItHioHolWNKOdLavw-SLcXADy3CPAfJ0_qMb18RmCa7Ds1cTdpM3dxAGJs8zfCfm8c6ggBIjzKT7XR5FIB53HHOhnsT7a0Cc-PpneWq9zX&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select>
<option value="move" 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">1776</div>
<div className="book-authors">David McCullough</div>
</div>
</li>
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 192, backgroundImage: 'url("http://books.google.com/books/content?id=wrOQLV6xB-wC&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72G3gA5A-Ka8XjOZGDFLAoUeMQBqZ9y-LCspZ2dzJTugcOcJ4C7FP0tDA8s1h9f480ISXuvYhA_ZpdvRArUL-mZyD4WW7CHyEqHYq9D3kGnrZCNiqxSRhry8TiFDCMWP61ujflB&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select>
<option value="move" 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">Harry Potter and the Sorcerer's Stone</div>
<div className="book-authors">J.K. Rowling</div>
</div>
</li>
</ol>
<div className="bookshelf">
<h2 className="bookshelf-title">Want to Read</h2>
<div className="bookshelf-books">
<Book books={wantToRead} changeShelf={this.changeShelf}/>

</div>
</div>
</div>
<div className="bookshelf">
<h2 className="bookshelf-title">Read</h2>
<div className="bookshelf-books">
<ol className="books-grid">
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 192, backgroundImage: 'url("http://books.google.com/books/content?id=pD6arNyKyi8C&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE70Rw0CCwNZh0SsYpQTkMbvz23npqWeUoJvVbi_gXla2m2ie_ReMWPl0xoU8Quy9fk0Zhb3szmwe8cTe4k7DAbfQ45FEzr9T7Lk0XhVpEPBvwUAztOBJ6Y0QPZylo4VbB7K5iRSk&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select>
<option value="move" 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">The Hobbit</div>
<div className="book-authors">J.R.R. Tolkien</div>
</div>
</li>
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 174, backgroundImage: 'url("http://books.google.com/books/content?id=1q_xAwAAQBAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE712CA0cBYP8VKbEcIVEuFJRdX1k30rjLM29Y-dw_qU1urEZ2cQ42La3Jkw6KmzMmXIoLTr50SWTpw6VOGq1leINsnTdLc_S5a5sn9Hao2t5YT7Ax1RqtQDiPNHIyXP46Rrw3aL8&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select>
<option value="move" 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">Oh, the Places You'll Go!</div>
<div className="book-authors">Seuss</div>
</div>
</li>
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 192, backgroundImage: 'url("http://books.google.com/books/content?id=32haAAAAMAAJ&printsec=frontcover&img=1&zoom=1&imgtk=AFLRE72yckZ5f5bDFVIf7BGPbjA0KYYtlQ__nWB-hI_YZmZ-fScYwFy4O_fWOcPwf-pgv3pPQNJP_sT5J_xOUciD8WaKmevh1rUR-1jk7g1aCD_KeJaOpjVu0cm_11BBIUXdxbFkVMdi&source=gbs_api")' }}></div>
<div className="book-shelf-changer">
<select>
<option value="move" 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">The Adventures of Tom Sawyer</div>
<div className="book-authors">Mark Twain</div>
</div>
</li>
</ol>
<div className="bookshelf">
<h2 className="bookshelf-title">Read</h2>
<div className="bookshelf-books">
<Book books={read} changeShelf={this.changeShelf}/>

</div>
</div>
</div>
</div>
<div className="open-search">
<Link to='search' books={books}>
<button>Add a book</button>
</Link>


</div>
</div>
<div className="open-search">
<button onClick={() => this.setState({ showSearchPage: true })}>Add a book</button>
</div>
</div>
)}
</div>


</div>
<Route path="/search" render={()=>( searchedBooks &&
<SearchBook books={searchedBooks} searchBook={this.searchBook} changeShelf={this.changeShelf} />
) } />
<Route path="/" exact />
</BrowserRouter>
)
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/BooksAPI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ const headers = {
'Accept': 'application/json',
'Authorization': token
}

export const get = (bookId) =>
fetch(`${api}/books/${bookId}`, { headers })
.then(res => res.json())
.then(data => data.book)

export const getAll = () =>
fetch(`${api}/books`, { headers })
export const getAll = async() =>
await fetch(`${api}/books`, { headers })
.then(res => res.json())
.then(data => data.books)

Expand Down
46 changes: 46 additions & 0 deletions src/components/Book.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
//TODO: CREATE STORE Add redux functions

import React from 'react';
class Book extends React.Component {


changeShelfHandler = (chosenShelf, bookID)=>{
//console.log(`${chosenShelf} and the book is ${bookID}`);
this.props.changeShelf(bookID, chosenShelf)

}
render() {
const { books } = this.props;
return (
<ol className="books-grid">
{ books && books.map(book =>(
<li key={book.id}>
<div className="book">
<div className="book-top">

<div className="book-cover"
style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div>
<div className="book-shelf-changer">
<select onChange={(e)=>this.changeShelfHandler(e.target.value, book)}>
<option value="move" disabled>Move to...</option>
<option value="" hidden></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">{book.title}</div>
<div className="book-authors">{book.authors.map(author => author)}</div>
</div>
</li>
))}


</ol>
)
}
}
export { Book };
Loading