Old edits never pushed
This commit is contained in:
Kenneth Jannette
1
.gitignore
vendored
1
.gitignore
vendored
@@ -3,3 +3,4 @@ yarn.lock
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
secrets.js
|
secrets.js
|
||||||
build/
|
build/
|
||||||
|
.gitignore
|
||||||
13
README.md
13
README.md
@@ -1,13 +0,0 @@
|
|||||||
# MyReads Project
|
|
||||||
|
|
||||||
This app allows the user to categorize books according to status: "Currently Reading," "Want to Read" and "Read" - kind of like a personal "playlist" for books!
|
|
||||||
|
|
||||||
The main page displays the user's books by category. The main page also has a link to the search page, where the user can search the database for more books to add to the main page, and categorize them appropriately.
|
|
||||||
|
|
||||||
To use the app:
|
|
||||||
|
|
||||||
1. Download or clone this project from [git].
|
|
||||||
|
|
||||||
2. To install app: from the command line, type: npm install.
|
|
||||||
|
|
||||||
3. When complete, to run app, type: npm start and view the app in your favorite browser.
|
|
||||||
@@ -1,4 +1,7 @@
|
|||||||
{
|
{
|
||||||
|
"name": "bb",
|
||||||
|
"homepage": "http://www.execfunc.com/bb",
|
||||||
|
"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",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -1,65 +1,83 @@
|
|||||||
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="/bb">
|
||||||
|
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 (
|
||||||
|
<li key={result.id}>
|
||||||
<div className="book">
|
<div className="book">
|
||||||
<div className="book-top">
|
<div className="book-top">
|
||||||
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ result.imageLinks ? result.imageLinks.thumbnail : 'No Image' }")` }}></div>
|
<div
|
||||||
|
className="book-cover"
|
||||||
|
style={{
|
||||||
|
width: 128,
|
||||||
|
height: 193,
|
||||||
|
backgroundImage: `url("${
|
||||||
|
result.imageLinks
|
||||||
|
? result.imageLinks.thumbnail
|
||||||
|
: "No Image"
|
||||||
|
}")`,
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
<div className="book-shelf-changer">
|
<div className="book-shelf-changer">
|
||||||
<select name={result.id} onChange={onSelect} defaultValue={result.shelf}>
|
<select
|
||||||
|
name={result.id}
|
||||||
|
onChange={onSelect}
|
||||||
|
defaultValue={result.shelf}
|
||||||
|
>
|
||||||
<option value="none">Move to...</option>
|
<option value="none">Move to...</option>
|
||||||
<option value="currentlyReading">Currently Reading</option>
|
<option value="currentlyReading">
|
||||||
|
Currently Reading
|
||||||
|
</option>
|
||||||
<option value="wantToRead">Want to Read</option>
|
<option value="wantToRead">Want to Read</option>
|
||||||
<option value="read">Read</option>
|
<option value="read">Read</option>
|
||||||
<option value="none">None</option>
|
<option value="none">None</option>
|
||||||
@@ -67,104 +85,269 @@ class SearchPage extends Component {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="book-title">{result.title}</div>
|
<div className="book-title">{result.title}</div>
|
||||||
<div className="book-authors">{result.authors ? result.authors : 'Author Unknown'}</div>
|
<div className="book-authors">
|
||||||
|
{result.authors ? result.authors : "Author Unknown"}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</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;
|
||||||
|
|||||||
Reference in New Issue
Block a user