Created Bookshelf and SearchPage componenets, began implementation of routes
This commit is contained in:
Ken Jannette
@@ -90,3 +90,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
|
|||||||
This repository is the starter code for _all_ Udacity students. Therefore, we most likely will not accept pull requests.
|
This repository is the starter code for _all_ Udacity students. Therefore, we most likely will not accept pull requests.
|
||||||
|
|
||||||
For details, check out [CONTRIBUTING.md](CONTRIBUTING.md).
|
For details, check out [CONTRIBUTING.md](CONTRIBUTING.md).
|
||||||
|
|
||||||
|
1. Download or clone this project from [git]
|
||||||
|
2. To install app: Ffrom the command line, type: npm install.
|
||||||
|
3. When complete, to run app, type: npm start
|
||||||
|
|||||||
78
package-lock.json
generated
78
package-lock.json
generated
@@ -4249,12 +4249,29 @@
|
|||||||
"integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
|
"integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"history": {
|
||||||
|
"version": "4.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
|
||||||
|
"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
|
||||||
|
"requires": {
|
||||||
|
"invariant": "2.2.4",
|
||||||
|
"loose-envify": "1.3.1",
|
||||||
|
"resolve-pathname": "2.2.0",
|
||||||
|
"value-equal": "0.4.0",
|
||||||
|
"warning": "3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"hoek": {
|
"hoek": {
|
||||||
"version": "4.2.1",
|
"version": "4.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
|
||||||
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
|
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"hoist-non-react-statics": {
|
||||||
|
"version": "2.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz",
|
||||||
|
"integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w=="
|
||||||
|
},
|
||||||
"home-or-tmp": {
|
"home-or-tmp": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
|
||||||
@@ -4533,7 +4550,6 @@
|
|||||||
"version": "2.2.4",
|
"version": "2.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"loose-envify": "1.3.1"
|
"loose-envify": "1.3.1"
|
||||||
}
|
}
|
||||||
@@ -7052,6 +7068,48 @@
|
|||||||
"prop-types": "15.6.1"
|
"prop-types": "15.6.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-router": {
|
||||||
|
"version": "4.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
|
||||||
|
"integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==",
|
||||||
|
"requires": {
|
||||||
|
"history": "4.7.2",
|
||||||
|
"hoist-non-react-statics": "2.5.0",
|
||||||
|
"invariant": "2.2.4",
|
||||||
|
"loose-envify": "1.3.1",
|
||||||
|
"path-to-regexp": "1.7.0",
|
||||||
|
"prop-types": "15.6.1",
|
||||||
|
"warning": "3.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"isarray": {
|
||||||
|
"version": "0.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||||
|
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||||
|
},
|
||||||
|
"path-to-regexp": {
|
||||||
|
"version": "1.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
|
||||||
|
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
|
||||||
|
"requires": {
|
||||||
|
"isarray": "0.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-router-dom": {
|
||||||
|
"version": "4.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz",
|
||||||
|
"integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==",
|
||||||
|
"requires": {
|
||||||
|
"history": "4.7.2",
|
||||||
|
"invariant": "2.2.4",
|
||||||
|
"loose-envify": "1.3.1",
|
||||||
|
"prop-types": "15.6.1",
|
||||||
|
"react-router": "4.2.0",
|
||||||
|
"warning": "3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-scripts": {
|
"react-scripts": {
|
||||||
"version": "0.9.5",
|
"version": "0.9.5",
|
||||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-0.9.5.tgz",
|
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-0.9.5.tgz",
|
||||||
@@ -7456,6 +7514,11 @@
|
|||||||
"integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=",
|
"integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"resolve-pathname": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
|
||||||
|
},
|
||||||
"restore-cursor": {
|
"restore-cursor": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
|
||||||
@@ -8281,6 +8344,11 @@
|
|||||||
"spdx-expression-parse": "3.0.0"
|
"spdx-expression-parse": "3.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"value-equal": {
|
||||||
|
"version": "0.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
|
||||||
|
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
|
||||||
|
},
|
||||||
"vary": {
|
"vary": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||||
@@ -8322,6 +8390,14 @@
|
|||||||
"makeerror": "1.0.11"
|
"makeerror": "1.0.11"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"warning": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
|
||||||
|
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
|
||||||
|
"requires": {
|
||||||
|
"loose-envify": "1.3.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"watch": {
|
"watch": {
|
||||||
"version": "0.10.0",
|
"version": "0.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
|
"resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"prop-types": "^15.5.8",
|
"prop-types": "^15.5.8",
|
||||||
"react": "^15.5.4",
|
"react": "^15.5.4",
|
||||||
"react-dom": "^15.5.4"
|
"react-dom": "^15.5.4",
|
||||||
|
"react-router-dom": "^4.2.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"react-scripts": "0.9.5"
|
"react-scripts": "0.9.5"
|
||||||
|
|||||||
191
src/App.js
191
src/App.js
@@ -1,5 +1,8 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { Route, BrowserRouter } from 'react-router-dom'
|
||||||
// import * as BooksAPI from './BooksAPI'
|
// import * as BooksAPI from './BooksAPI'
|
||||||
|
import Bookshelf from './Bookshelf'
|
||||||
|
import SearchPage from './SearchPage'
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
|
||||||
class BooksApp extends React.Component {
|
class BooksApp extends React.Component {
|
||||||
@@ -16,188 +19,18 @@ class BooksApp extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<div className="app">
|
||||||
{this.state.showSearchPage ? (
|
|
||||||
<div className="search-books">
|
|
||||||
<div className="search-books-bar">
|
|
||||||
<a className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</a>
|
|
||||||
<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
|
<Route exact path='/' render={() => (
|
||||||
you don't find a specific author or title. Every search is limited by search terms.
|
<Bookshelf />
|
||||||
*/}
|
)}/>
|
||||||
<input type="text" placeholder="Search by title or author"/>
|
|
||||||
|
|
||||||
</div>
|
<Route exact path='/search' render={() => (
|
||||||
</div>
|
<SearchPage />
|
||||||
<div className="search-books-results">
|
)}/>
|
||||||
<ol className="books-grid"></ol>
|
|
||||||
</div>
|
<div className="open-search">
|
||||||
|
<a onClick={() => this.setState({ showSearchPage: true })}>Add a book</a>
|
||||||
</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="none" 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="none" 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">Enders 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="none" 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="none" 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 Sorcerers 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="none" 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="none" 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 Youll 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="none" 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">
|
|
||||||
<a onClick={() => this.setState({ showSearchPage: true })}>Add a book</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
169
src/Bookshelf.js
Normal file
169
src/Bookshelf.js
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
class Bookshelf extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div> Bookshelf </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="none" 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="none" 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">Enders 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="none" 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="none" 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 Sorcerers 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="none" 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="none" 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 Youll 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="none" 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>
|
||||||
|
*/
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Bookshelf
|
||||||
33
src/SearchPage.js
Normal file
33
src/SearchPage.js
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
class SearchPage extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>SearchPage</div>
|
||||||
|
/*
|
||||||
|
<div className="search-books">
|
||||||
|
<div className="search-books-bar">
|
||||||
|
<a className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</a>
|
||||||
|
<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>
|
||||||
|
*/
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SearchPage
|
||||||
Reference in New Issue
Block a user