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

refactor: This change refactors project codebase #153

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

refactor: This change refactors project codebase #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe3e460
refactor: This change refactors project codebase
misanj Aug 23, 2021
ba93adc
feat: Create more components
misanj Aug 23, 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
43,067 changes: 32,908 additions & 10,159 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"prop-types": "^15.6.2",
"prop-types": "^15.7.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3"
},
"scripts": {
"start": "react-scripts start",
Expand Down
12 changes: 7 additions & 5 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ body, .app {

.list-books-title {
padding: 10px 0;
background: #2e7c31;
background: #0873ff;
text-align: center;
}

Expand All @@ -40,7 +40,9 @@ body, .app {
}

.bookshelf-title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-bottom: 1px solid #dedede;
color: #011127;
}

.bookshelf-books {
Expand All @@ -58,18 +60,18 @@ body, .app {
width: 50px;
height: 50px;
border-radius: 50%;
background: #2e7d32;
background: #0873ff;
background-image: url('./icons/add.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-shadow: 0 3px 6px rgba(1, 2, 43, 0.16), 0 3px 6px rgba(0,0,0,0.23);
font-size: 0;
outline: 0;
}

.open-search button:hover {
background-color: rgb(0, 102, 0);
background-color: rgb(69, 127, 235);
}


Expand Down Expand Up @@ -169,7 +171,7 @@ button:active {
width: 40px;
height: 40px;
border-radius: 50%;
background: #60ac5d;
background: #0873ff;
background-image: url('./icons/arrow-drop-down.svg');
background-repeat: no-repeat;
background-position: center;
Expand Down
228 changes: 40 additions & 188 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,203 +1,55 @@
import React from 'react'
// import * as BooksAPI from './BooksAPI'
import React, { Component } from 'react'
import MyShelf from './myShelves'
import SearchPage from './searchPage'
import SearchBooks from './searchBooks'
import { Route } from 'react-router-dom'
import * as BooksAPI from './BooksAPI'
import './App.css'

class BooksApp extends React.Component {
class BooksApp extends Component {
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
books: []
}

componentDidMount(){ // This react lifecycle function ensures that our empty books array is populated with all the books on our BooksAPI
BooksAPI.getAll()
.then((books)=>{
this.setState(() =>({
books
}))
})
}
shelfUpdate = (movedBook, shelf) => {
BooksAPI.update(movedBook, shelf).then(response =>{
movedBook.shelf = shelf
this.setState((prevState) =>({
books: prevState.books.filter(book => book.id !== movedBook.id).concat(movedBook)
}))
});
};
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"/>

</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>
</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>
</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>
</div>
</div>
</div>
<div className="open-search">
<button onClick={() => this.setState({ showSearchPage: true })}>Add a book</button>
</div>
</div>
)}
<div>
<Route exact path='/' render={()=>( //This uses react router dom element to navigate our page with url instead of state variable. it also ensures that our seach page is displayed
<div>
<MyShelf
getBooks = {this.state.books}
shelfUpdate = {this.shelfUpdate}
/>
<SearchPage
/>
</div>
)}/>
<Route path='/search' render={() => (
<SearchBooks
getBooks={this.state.books} shelfUpdate={this.shelfUpdate}
/>
)}/>
</div>
)
}
Expand Down
8 changes: 7 additions & 1 deletion src/index.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 ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
import './index.css'

ReactDOM.render(<App />, document.getElementById('root'))
ReactDOM.render(
// With the BrowserRouter, We will be able to use all the elements that comes with the react-router-dom npm module
<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'))

41 changes: 41 additions & 0 deletions src/myShelves.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Component } from 'react'
import SingleShelf from './singleShelf'

class MyShelf extends Component {

render(){
// This component displays the home page
// This filters books into their various shelfs
const { getBooks } = this.props
const currentlyReading = getBooks.filter((book) => book.shelf === 'currentlyReading');
const wantToRead = getBooks.filter(book => book.shelf === 'wantToRead');
const read = getBooks.filter(book => book.shelf === 'read');
return(
<div className="list-books">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
<div className="list-books-content">
<div>
<SingleShelf
books = {currentlyReading} //filtered books according to shelve title
shelfName = {'Currently Reading'} //shelf title
shelfUpdate={this.props.shelfUpdate} // Updates individual shelves
/>
<SingleShelf
books = {wantToRead}
shelfName = {'Want To Read'}
shelfUpdate={this.props.shelfUpdate}
/>
<SingleShelf
books = {read}
shelfName = {'Read'}
shelfUpdate={this.props.shelfUpdate}
/>
</div>
</div>
</div>
);
}
}
export default MyShelf
Loading