+
- {books.map((book) => {
- if (book.volumeInfo.imageLinks) {
- return (
-
- {book.volumeInfo.title}
-
- );
- } else {
- return (
-
- {book.volumeInfo.title}
-
- );
- }
+ {books.map((book, i) => {
+ return (
+
+
+ );
})}
diff --git a/src/components/Category.js b/src/components/Category.js
new file mode 100644
index 0000000..d1fe0b5
--- /dev/null
+++ b/src/components/Category.js
@@ -0,0 +1,127 @@
+import React from 'react';
+import { Carousel, Button } from 'react-bootstrap';
+
+const Category = ({ searchObj, setSearchObj, history }) => {
+ const handleAuthorSubmit = (event) => {
+ event.preventDefault();
+ setSearchObj({ ...searchObj, title: '', author: event.target.textContent });
+ history.push('/books');
+ };
+ return (
+
+
+
+ {book.volumeInfo.imageLinks && (
+
+
+
+
+
+ {book.volumeInfo.authors && + book.volumeInfo.authors.map((author, i) => { + return ( +
+ {author}
+
+ );
+ })}
+
+ {book.volumeInfo.categories && ( +
+ {book.volumeInfo.categories[0]}
+
+ )}
+
+ {book.volumeInfo.industryIdentifiers ? ( + + + + ) : null} +
+ {book.volumeInfo.title}
++ {book.volumeInfo.authors && + book.volumeInfo.authors.map((author, i) => { + return ( +
+ {book.volumeInfo.categories && ( +
+ {book.volumeInfo.industryIdentifiers ? ( + + + + ) : null} +
+
+ );
+};
+
+export default Category;
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..093fc03
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,43 @@
+import React from 'react';
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/Home.js b/src/components/Home.js
index 213dd57..5bffa80 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,18 +1,50 @@
import React from 'react';
-import { Jumbotron, Container } from 'react-bootstrap';
+import { Jumbotron, Container, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
+import Category from './Category';
+import NytBestsellers from './NytBestsellers';
-const Home = () => {
+const Home = ({ searchObj, setSearchObj, history }) => {
return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Most Browsed Authors
++
Mystery - Thriller
+ + + +Classics
+ + + +Childrens
+ + + +Romance
+ + + +Fantasy
+ + + +
+ 
+
-
+
+
-
+
+
);
};
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 0fc80db..8efe65a 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -4,16 +4,14 @@ import { Link } from 'react-router-dom';
const nav = () => {
return (
- +
Book Browser
+Welcome to Book Browser.
++ From here, you'll be able to navigate through the entire library of + G + o + o + g + l + e + Books. +
++ Looking for suggestions? Click on any option below to see more about + a book or author. +
++ You my also click the search button to search for a specific book: +
- ++
-
-
- Book Browser
-
-
+
+
+
+
+ Book Browser
+
+
+
);
diff --git a/src/components/NotFound.js b/src/components/NotFound.js
new file mode 100644
index 0000000..1dcdc53
--- /dev/null
+++ b/src/components/NotFound.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const NotFound = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default NotFound;
diff --git a/src/components/NytBestsellers.js b/src/components/NytBestsellers.js
new file mode 100644
index 0000000..ab85257
--- /dev/null
+++ b/src/components/NytBestsellers.js
@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import { Carousel } from 'react-bootstrap';
+
+const NytBestsellers = ({ searchObj, setSearchObj, history }) => {
+ const [list, setList] = useState(null);
+ const [nfList, setnfList] = useState(null);
+ useEffect(() => {
+ fetch(
+ `https://api.nytimes.com/svc/books/v3/lists/current/combined-print-and-e-book-fiction.json?api-key=${process.env.REACT_APP_NYT_KEY}`
+ )
+ .then((res) => res.json())
+ .then((res) => {
+ setList(res);
+ })
+ .catch(console.error);
+ fetch(
+ `https://api.nytimes.com/svc/books/v3/lists/current/combined-print-and-e-book-nonfiction.json?api-key=${process.env.REACT_APP_NYT_KEY}`
+ )
+ .then((res) => res.json())
+ .then((res) => {
+ setnfList(res);
+ })
+ .catch(console.error);
+ }, []);
+ const handleClick = (bestseller) => {
+ setSearchObj({
+ ...searchObj,
+ title: bestseller.title,
+ author: bestseller.author,
+ isbn: bestseller.primary_isbn13,
+ });
+ history.push('/books');
+ };
+
+ if (!list) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ 404
+
+
+ Look like you're lost
+ +the page you are looking for not avaible!
+ + + Go to Home + +
+
+ );
+ }
+ if (!nfList) {
+ return (
+ Book List not Found
+
+
+ );
+ }
+ return (
+ Book List not Found
+
+
+
+ );
+};
+
+export default NytBestsellers;
diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js
index d3e6e9d..eb459db 100644
--- a/src/components/SearchForm.js
+++ b/src/components/SearchForm.js
@@ -1,12 +1,57 @@
-import React from 'react';
-import { Form, FormControl, Button } from 'react-bootstrap';
+import React, { useState } from 'react';
+import { Form, FormControl, Button, InputGroup } from 'react-bootstrap';
-const SearchForm = () => {
+const SearchForm = ({ searchObj, setSearchObj }) => {
+ const initialState = {
+ title: '',
+ author: '',
+ isbn: '',
+ };
+ const [formState, setFormState] = useState(initialState);
+ const handleChange = (event) => {
+ setFormState({ ...formState, [event.target.id]: event.target.value });
+ };
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ setSearchObj(formState);
+ setFormState(initialState);
+ };
return (
-
+
+ {list.results.books.map((bestseller, i) => {
+ return (
+ handleClick(bestseller)}>
+ {bestseller.rank}
+ 
+
+ );
+ })}
+
+
+ The New York Times Best Sellers
+Best Sellers: Fiction
++
+
+ {nfList.results.books.map((bestseller, i) => {
+ return (
+ handleClick(bestseller)}>
+ {bestseller.rank}
+
+
+ );
+ })}
+
+
+ The New York Times Best Sellers
+Best Sellers: Non-Fiction
+
-