kjannette/reactnd-project-bookbrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from kjannette/updatepkjs

Browse Source 
Updatepkjs
This commit is contained in:
S Jannette
2025-02-27 07:55:58 -05:00
committed by GitHub
parent 880a8df71b 51241e95e7
commit 32bfdff3bd
7 changed files with 325 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -2,4 +2,5 @@ node_modules
yarn.lock yarn.lock
.DS_Store .DS_Store
secrets.js secrets.js
build/ build/
.gitignore

3
package.json
View File

@@ -1,4 +1,7 @@
{ {
"name": "browse",
"homepage": ".",
"version": "1.0",
"dependencies": { "dependencies": {
"babel-cli": "^6.26.0", "babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

18
public/index.html
View File

@@ -1,11 +1,17 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700"> <link
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700"> rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700"
/>
<!-- <!--
--> -->
<title>MyReads</title> <title>MyReads</title>

6
src/App.js
View File

@@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Router } from "react-router-dom"; import { BrowserRouter } 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";
@@ -56,7 +56,7 @@ class BooksApp extends React.Component {
render() { render() {
return ( return (
<Router history={history}> <BrowserRouter basename="/bb" history={history}>
<div className="app"> <div className="app">
<Route <Route
exact exact
@@ -81,7 +81,7 @@ class BooksApp extends React.Component {
<Link to="/search">Search for Books</Link> <Link to="/search">Search for Books</Link>
</div> </div>
</div> </div>
</Router> </BrowserRouter>
); );
} }
} }

2
src/BooksAPI.js
View File

@@ -1,5 +1,5 @@
import SEARCH_API from "../secrets"; import SEARCH_API from "../secrets";
const api = SEARCH_API; const api = "https://reactnd-books-api.udacity.com";
// Generate a unique token // Generate a unique token
let token = localStorage.token; let token = localStorage.token;

425
src/SearchPage.js
View File

@@ -1,170 +1,353 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import { Link } from 'react-router-dom' import { Link } from "react-router-dom";
import { search } from './BooksAPI' import { search } from "./BooksAPI";
import './search.css' import "./search.css";
class SearchPage extends Component { class SearchPage extends Component {
constructor() {
constructor(){
super(); super();
this.state = { this.state = {
results: [], results: [],
} };
} }
onSearch = (query) => { onSearch = (query) => {
const books = this.props.books const books = this.props.books;
if (query.length > 3) { if (query.length > 3) {
search(query).then((results) => { search(query).then((results) => {
if (results.error === undefined) { if (results.error === undefined) {
for (var result of results) { for (var result of results) {
for (var book of books) { for (var book of books) {
if (result.title === book.title) { if (result.title === book.title) {
result.shelf = book.shelf result.shelf = book.shelf;
} }
} }
} }
this.setState({ results }); this.setState({ results });
} else { } else {
this.setState({results: []}) this.setState({ results: [] });
} }
}) });
} }
}; };
render() { render() {
const onSelect = this.props.onSelect;
const onSelect = this.props.onSelect
return ( return (
<div className="search-books"> <div className="search-books">
<div className="search-books-bar"> <div className="search-books-bar">
<Link className="close-search" to="/">Close</Link> <Link className="close-search" to="/">
Close
</Link>
<div className="search-books-input-wrapper"> <div className="search-books-input-wrapper">
<input <input
type="text" type="text"
placeholder="Search by title or author" placeholder="Search by title or author"
onChange={e => this.onSearch(e.target.value)} onChange={(e) => this.onSearch(e.target.value)}
/> />
</div> </div>
</div> </div>
<div className="search-books-results"> <div className="search-books-results">
<ol className="books-grid"> <ol className="books-grid">
{ this.state.results.length > 0 && ( {this.state.results.length > 0 &&
this.state.results.map((result) => { this.state.results.map((result) => {
return <li key={result.id}> return (
<div className="book"> <li key={result.id}>
<div className="book-top"> <div className="book">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ result.imageLinks ? result.imageLinks.thumbnail : 'No Image' }")` }}></div> <div className="book-top">
<div className="book-shelf-changer"> <div
<select name={result.id} onChange={onSelect} defaultValue={result.shelf}> className="book-cover"
<option value="none">Move to...</option> style={{
<option value="currentlyReading">Currently Reading</option> width: 128,
<option value="wantToRead">Want to Read</option> height: 193,
<option value="read">Read</option> backgroundImage: `url("${
<option value="none">None</option> result.imageLinks
</select> ? result.imageLinks.thumbnail
</div> : "No Image"
</div> }")`,
<div className="book-title">{result.title}</div> }}
<div className="book-authors">{result.authors ? result.authors : 'Author Unknown'}</div> ></div>
</div> <div className="book-shelf-changer">
</li> <select
}) name={result.id}
) onChange={onSelect}
} defaultValue={result.shelf}
>
<option value="none">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">{result.title}</div>
<div className="book-authors">
{result.authors ? result.authors : "Author Unknown"}
</div>
</div>
</li>
);
})}
</ol> </ol>
</div> </div>
<div className="tags"> <div className="tags">
<p className="title-tag">Suggested search terms:</p> <p className="title-tag">Suggested search terms:</p>
<ul> <ul>
<li><span class="badge">Android</span></li> <li>
<li><span class="badge">Art</span></li> <span class="badge">Android</span>
<li><span class="badge">Artificial Intelligence</span></li> </li>
<li><span class="badge">Astronomy</span></li> <li>
<li><span class="badge">Austen</span></li> <span class="badge">Art</span>
<li><span class="badge">Baseball</span></li> </li>
<li><span class="badge">Basketball</span></li> <li>
<li><span class="badge">Basketball</span></li> <span class="badge">Artificial Intelligence</span>
<li><span class="badge">Bhagat</span></li> </li>
<li><span class="badge">Basketball</span></li> <li>
<li><span class="badge">Biography</span></li> <span class="badge">Astronomy</span>
<li><span class="badge">Brief</span></li> </li>
<li><span class="badge">Business</span></li> <li>
<li><span class="badge">Camus</span></li> <span class="badge">Austen</span>
<li><span class="badge">Cervantes</span></li> </li>
<li><span class="badge">Christie</span></li> <li>
<li><span class="badge">Classics</span></li> <span class="badge">Baseball</span>
<li><span class="badge">Comics</span></li> </li>
<li><span class="badge">Cook</span></li> <li>
<li><span class="badge">Cricket</span></li> <span class="badge">Basketball</span>
<li><span class="badge">Cycling</span></li> </li>
<li><span class="badge">Desai</span></li> <li>
<li><span class="badge">Design</span></li> <span class="badge">Basketball</span>
<li><span class="badge">Development</span></li> </li>
<li><span class="badge">Digital Marketing</span></li> <li>
<li><span class="badge">Drama</span></li> <span class="badge">Bhagat</span>
<li><span class="badge">Drawing</span></li> </li>
<li><span class="badge">Dumas</span></li> <li>
<li><span class="badge">Education</span></li> <span class="badge">Basketball</span>
<li><span class="badge">Everything</span></li> </li>
<li><span class="badge">Fantasy</span></li> <li>
<li><span class="badge">Film</span></li> <span class="badge">Biography</span>
<li><span class="badge">Finance</span></li> </li>
<li><span class="badge">First</span></li> <li>
<li><span class="badge">Fitness</span></li> <span class="badge">Brief</span>
<li><span class="badge">Football</span></li> </li>
<li><span class="badge">Future</span></li> <li>
<li><span class="badge">Games</span></li> <span class="badge">Business</span>
<li><span class="badge">Gandhi</span></li> </li>
<li><span class="badge">Homer</span></li> <li>
<li><span class="badge">Horror</span></li> <span class="badge">Camus</span>
<li><span class="badge">Hugo</span></li> </li>
<li><span class="badge">Ibsen</span></li> <li>
<li><span class="badge">Journey</span></li> <span class="badge">Cervantes</span>
<li><span class="badge">Kafka</span></li> </li>
<li><span class="badge">King</span></li> <li>
<li><span class="badge">Lahiri</span></li> <span class="badge">Christie</span>
<li><span class="badge">Larsson</span></li> </li>
<li><span class="badge">Learn</span></li> <li>
<li><span class="badge">Football</span></li> <span class="badge">Classics</span>
<li><span class="badge">Literary Fiction</span></li> </li>
<li><span class="badge">Make</span></li> <li>
<li><span class="badge">Manage</span></li> <span class="badge">Comics</span>
<li><span class="badge">Marquez</span></li> </li>
<li><span class="badge">Money</span></li> <li>
<li><span class="badge">Mystery</span></li> <span class="badge">Cook</span>
<li><span class="badge">Negotiate</span></li> </li>
<li><span class="badge">Painting</span></li> <li>
<li><span class="badge">Philosophy</span></li> <span class="badge">Cricket</span>
<li><span class="badge">Photography</span></li> </li>
<li><span class="badge">Poetry</span></li> <li>
<li><span class="badge">Production</span></li> <span class="badge">Cycling</span>
<li><span class="badge">Programming</span></li> </li>
<li><span class="badge">React</span></li> <li>
<li><span class="badge">Redux</span></li> <span class="badge">Desai</span>
<li><span class="badge">River</span></li> </li>
<li><span class="badge">Robotics</span></li> <li>
<li><span class="badge">Rowling</span></li> <span class="badge">Design</span>
<li><span class="badge">Satire</span></li> </li>
<li><span class="badge">Science Fiction</span></li> <li>
<li><span class="badge">Shakespeare</span></li> <span class="badge">Development</span>
<li><span class="badge">Singh</span></li> </li>
<li><span class="badge">Swimming</span></li> <li>
<li><span class="badge">Tale</span></li> <span class="badge">Digital Marketing</span>
<li><span class="badge">Thrun</span></li> </li>
<li><span class="badge">Time</span></li> <li>
<li><span class="badge">Tolstoy</span></li> <span class="badge">Drama</span>
<li><span class="badge">Travel</span></li> </li>
<li><span class="badge">Ultimate</span></li> <li>
<li><span class="badge">Virtual Reality</span></li> <span class="badge">Drawing</span>
<li><span class="badge">Web Development</span></li> </li>
<li><span class="badge">Tolstoy</span></li> <li>
<span class="badge">Dumas</span>
</li>
<li>
<span class="badge">Education</span>
</li>
<li>
<span class="badge">Everything</span>
</li>
<li>
<span class="badge">Fantasy</span>
</li>
<li>
<span class="badge">Film</span>
</li>
<li>
<span class="badge">Finance</span>
</li>
<li>
<span class="badge">First</span>
</li>
<li>
<span class="badge">Fitness</span>
</li>
<li>
<span class="badge">Football</span>
</li>
<li>
<span class="badge">Future</span>
</li>
<li>
<span class="badge">Games</span>
</li>
<li>
<span class="badge">Gandhi</span>
</li>
<li>
<span class="badge">Homer</span>
</li>
<li>
<span class="badge">Horror</span>
</li>
<li>
<span class="badge">Hugo</span>
</li>
<li>
<span class="badge">Ibsen</span>
</li>
<li>
<span class="badge">Journey</span>
</li>
<li>
<span class="badge">Kafka</span>
</li>
<li>
<span class="badge">King</span>
</li>
<li>
<span class="badge">Lahiri</span>
</li>
<li>
<span class="badge">Larsson</span>
</li>
<li>
<span class="badge">Learn</span>
</li>
<li>
<span class="badge">Football</span>
</li>
<li>
<span class="badge">Literary Fiction</span>
</li>
<li>
<span class="badge">Make</span>
</li>
<li>
<span class="badge">Manage</span>
</li>
<li>
<span class="badge">Marquez</span>
</li>
<li>
<span class="badge">Money</span>
</li>
<li>
<span class="badge">Mystery</span>
</li>
<li>
<span class="badge">Negotiate</span>
</li>
<li>
<span class="badge">Painting</span>
</li>
<li>
<span class="badge">Philosophy</span>
</li>
<li>
<span class="badge">Photography</span>
</li>
<li>
<span class="badge">Poetry</span>
</li>
<li>
<span class="badge">Production</span>
</li>
<li>
<span class="badge">Programming</span>
</li>
<li>
<span class="badge">React</span>
</li>
<li>
<span class="badge">Redux</span>
</li>
<li>
<span class="badge">River</span>
</li>
<li>
<span class="badge">Robotics</span>
</li>
<li>
<span class="badge">Rowling</span>
</li>
<li>
<span class="badge">Satire</span>
</li>
<li>
<span class="badge">Science Fiction</span>
</li>
<li>
<span class="badge">Shakespeare</span>
</li>
<li>
<span class="badge">Singh</span>
</li>
<li>
<span class="badge">Swimming</span>
</li>
<li>
<span class="badge">Tale</span>
</li>
<li>
<span class="badge">Thrun</span>
</li>
<li>
<span class="badge">Time</span>
</li>
<li>
<span class="badge">Tolstoy</span>
</li>
<li>
<span class="badge">Travel</span>
</li>
<li>
<span class="badge">Ultimate</span>
</li>
<li>
<span class="badge">Virtual Reality</span>
</li>
<li>
<span class="badge">Web Development</span>
</li>
<li>
<span class="badge">Tolstoy</span>
</li>
</ul> </ul>
</div> </div>
</div> </div>
) );
} }
} }
export default SearchPage export default SearchPage;