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

Commit 1615676

Browse files
e-ahmed-mahmoude-ahmed-mahmoud
committed
modifying bugs and adding bootstrap 4.6 and adding Book details for view book details using API.get()
1 parent 81f448a commit 1615676

File tree

8 files changed

+131
-103
lines changed

8 files changed

+131
-103
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"bootstrap": "4.6.0",
67
"prop-types": "^15.6.2",
78
"react": "^16.6.3",
89
"react-dom": "^16.6.3",

‎src/App.js

Lines changed: 10 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import "./App.css";
44
import ShelfsBooks from "./components/shelfBooksRender";
55
import Search from "./components/search";
66
import { Link, Route } from "react-router-dom";
7+
import BookDetails from "./components/bookDetails";
78

89

910
/**
@@ -39,69 +40,19 @@ class BooksApp extends React.Component {
3940

4041
//get fields from books and push it into books array
4142
books.push({
42-
bookId: cur.id,
43+
id: cur.id,
4344
title: cur.title,
4445
shelf: cur.shelf,
4546
bookImage: cur.imageLinks.smallThumbnail,
4647
categories: [...categories],
4748
authors: [...cur.authors],
4849
});
4950
});
50-
51-
/* if requried to use caching so trying to use localStorage as cache for books,
52-
so load last state of books ids on shelfs from localStorage
53-
54-
// if (localStorage.length > 0 ) {
55-
// const ids = [];
56-
// const readBooks = localStorage.getItem('currentlyReading');
57-
// const currentlyReadingBooks = localStorage.getItem('read');
58-
// const wantToreadBooks = localStorage.getItem('wantToRead');
59-
60-
// currentlyReadingBooks && ids.push(...currentlyReadingBooks.split(','));
61-
// readBooks && ids.push(...readBooks.split(','));
62-
// wantToreadBooks && ids.push(...wantToreadBooks.split(','));
63-
64-
// const uniqueIds = new Set(ids);
65-
// console.log(uniqueIds);
66-
67-
// const booksIds = books.map(book => book.bookId);
68-
// const recentAddBooksIds = [...uniqueIds].filter(id => !booksIds.includes(id));
69-
70-
// const recentAddBooks = this.getBookById(recentAddBooksIds);
71-
// console.log(recentAddBooks);
72-
// (recentAddBooksIds.length > 0) && books.push([...recentAddBooks]);
73-
74-
// books.forEach(book => {
75-
// if (readBooks.includes(book.bookId))
76-
// book.shelf = 'read';
77-
// else if(currentlyReadingBooks.includes(book.bookId))
78-
// book.shelf = 'currentlyReading';
79-
// else if (wantToreadBooks.includes(book.bookId))
80-
// book.shelf = 'wantToRead';
81-
// else
82-
// book.shelf = 'none';
83-
// })
84-
// }
85-
}
86-
*/
87-
8851
//set state with recived data from server
8952
this.setState({ books, shelfs });
9053
});
9154
};
9255

93-
//function for geting books that store in localstorage by Id, has a bug
94-
getBookById = async (booksIds)=>{
95-
// const books = [];
96-
// await booksIds.forEach(id => {
97-
// BooksAPI.get(id).then(res=> {
98-
// console.log(res);
99-
// books.push(res);
100-
// })
101-
// });
102-
// return books;
103-
}
104-
10556
/**
10657
*Update state of books and push not defined books into state and track book shefl
10758
*
@@ -128,7 +79,7 @@ class BooksApp extends React.Component {
12879
else { //if assign to none then remove book from shelfs
12980
this.setState((curState) => {
13081
const books = curState.books.filter( //filter and remove book
131-
(book) => book.bookId !== updatedBook.bookId
82+
(book) => book.id !== updatedBook.id
13283
);
13384
return { books };
13485
});
@@ -140,23 +91,6 @@ class BooksApp extends React.Component {
14091
.catch((er) => alert(`Error! can't update data `));
14192
};
14293

143-
144-
//cached updated books in localStorage
145-
cachedBooks = () => {
146-
// const books = [...this.state.books];
147-
// console.log(books);
148-
// const currentlyReadingBooksIds = books.filter(book => book.shelf === "currentlyReading").map(book=> book.bookId);
149-
// const readBooksIds = books.filter(book => book.shelf === 'read').map(book=> book.bookId);
150-
// const wantToReadBooksIds = books.filter(book => book.shelf === 'wantToRead').map(book=> book.bookId);
151-
// console.log(currentlyReadingBooksIds);
152-
// console.log(readBooksIds);
153-
// console.log(wantToReadBooksIds);
154-
// localStorage.setItem('currentlyReading',[...currentlyReadingBooksIds]);
155-
// localStorage.setItem('read',[...readBooksIds]);
156-
// localStorage.setItem('wantToRead',[...wantToReadBooksIds]);
157-
// console.log(localStorage.getItem('read'));
158-
};
159-
16094
/**
16195
* render two component search component and shelf component for rendering main page books using Link and Route
16296
* @returns return mark up to inject into html index page as final result1
@@ -204,6 +138,13 @@ class BooksApp extends React.Component {
204138
</div>
205139
)}
206140
/>
141+
<Route exact path="/components/bookDetails/:id" render = {(props)=>
142+
{
143+
return(
144+
<BookDetails {...props} onUpdateBookShelf={this.updateBookShelf}/>
145+
)
146+
}}
147+
/>
207148
</div>
208149
);
209150
}

‎src/components/book.js

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from "react";
2+
import { Link } from "react-router-dom";
23

34
/**
45
* functional component for rendering book details
@@ -12,36 +13,31 @@ import React from "react";
1213
const Book = (props) => {
1314

1415
//handel images if not define so return alt text or black book image
15-
const imagePath = (props.book.bookImage !=='alt')? `${(props.book.bookImage)}`: '../icons/1021547.png';
16+
const {book, shelfName } = {...props};
17+
const imagePath = (book.bookImage !=='alt')? `${(book.bookImage)}`: '../icons/1021547.png';
1618

17-
return (
18-
<div className="book">
19-
<div className="book-top">
20-
<div
21-
className="book-cover"
22-
style={{
23-
width: 128,
24-
height: 193,
25-
backgroundImage:`url(${imagePath})`
26-
}}
27-
/>
28-
<div className="book-shelf-changer">
29-
30-
<select onChange={(ev) => props.onUpdateBookShelf(ev.target.value , props.book)} defaultValue={`${props.shelfName}`}>
31-
<option value="move" disabled>
32-
Move to...
33-
</option>
34-
<option value="currentlyReading" >Currently Reading</option>
35-
<option value="wantToRead" >Want to Read</option>
36-
<option value="read" >Read</option>
37-
<option value="none" >None</option>
38-
</select>
39-
</div>
19+
return <div className="book">
20+
<div className="book-top">
21+
22+
<Link to={`components/bookDetails/${book.id}`} >
23+
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${imagePath})` }} />
24+
</Link>
25+
26+
<div className="book-shelf-changer">
27+
<select onChange={(ev) => props.onUpdateBookShelf(ev.target.value, props.book)} defaultValue={`${shelfName}`}>
28+
<option value="move" disabled>
29+
Move to...
30+
</option>
31+
<option value="currentlyReading">Currently Reading</option>
32+
<option value="wantToRead">Want to Read</option>
33+
<option value="read">Read</option>
34+
<option value="none">None</option>
35+
</select>
4036
</div>
41-
<div className="book-title">{props.book.title}</div>
42-
<div className="book-authors"> {[...props.book.authors]} </div>
4337
</div>
44-
);
38+
<div className="book-title">{book.title}</div>
39+
<div className="book-authors"> {[...book.authors]} </div>
40+
</div>;
4541
};
4642

4743
export default Book;

‎src/components/bookDetails.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React, { Component } from 'react';
2+
import { get as getBook} from '../BooksAPI';
3+
import 'bootstrap/dist/css/bootstrap.min.css';
4+
5+
class BookDetails extends Component {
6+
7+
state={
8+
book:{
9+
title: '',
10+
authors: [],
11+
publisher: '',
12+
description: '',
13+
shelf: '',
14+
image: '',
15+
categories: [],
16+
pageCount: '',
17+
language: ''
18+
},
19+
}
20+
21+
componentDidMount = () => {
22+
const { match } = { ...this.props };
23+
const id = match.params.id;
24+
getBook(id).then((res) => {
25+
const categories = res.categories ? [...res.categories] : [];
26+
const book = {
27+
id: res.id,
28+
title: res.title,
29+
authors: [...res.authors],
30+
publisher: res.publisher,
31+
description: res.description,
32+
shelf: res.shelf,
33+
image: res.imageLinks.thumbnail,
34+
categories: [...categories],
35+
pageCount: res.pageCount,
36+
language: res.language
37+
}
38+
this.setState({ book });
39+
});
40+
};
41+
42+
render() {
43+
const book = {...this.state.book};
44+
console.log(this.props);
45+
return (
46+
<div className='container' style={{ boxSizing:"border-box", height:"100vh" , padding:"10px 40px"}} >
47+
<div className="card justify-content-center align-items-center"
48+
style={{display:'', alignContent:"center", margin:"5px", padding: "40px 60px" , boxSizing:"border-box", height:"80%", width:"60%"}}>
49+
<img className="card-img-top " src={book.image} alt="Card cap" style={{ boxSizing:"border-box", height:"50%", width:"40%"}}/>
50+
51+
<div className="card-body" style={{ boxSizing:"border-box"}}>
52+
<h5 className="card-title">{book.title}</h5>
53+
<div className="card-text">
54+
<div>
55+
<p>description: {book.description.slice(0,70)} </p>
56+
<div>
57+
<span> <p style={{display:"inline"}}>publisher {book.publisher} </p> </span>
58+
<span><p style={{display:"inline", paddingLeft:"30px"}}>page Count: {book.pageCount} </p></span>
59+
</div>
60+
<div >
61+
<p style={{display:"inline"}} >authors: {book.authors} </p>
62+
<p style={{display:"inline", marginLeft:"35px",paddingLeft: "90px" }}> categories: {book.categories} </p>
63+
</div>
64+
<p style={{display:"inline"}}>language: {book.language} </p>
65+
</div>
66+
</div>
67+
<div className="book-shelf-changer">
68+
{console.log(book.shelf)}
69+
<select onChange={(ev)=> this.props.onUpdateBookShelf(ev.target.value, book)} defaultValue={`${book.shelf}`}>
70+
<option value="move" disabled>
71+
Move to...
72+
</option>
73+
<option value="currentlyReading">Currently Reading</option>
74+
<option value="wantToRead">Want to Read</option>
75+
<option value="read">Read</option>
76+
<option value="none">None</option>
77+
</select>
78+
</div>
79+
</div>
80+
</div>
81+
</div>);
82+
}
83+
}
84+
85+
export default BookDetails;

‎src/components/search.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ class Search extends Component {
2525
*/
2626
getSearchText = (ev) => {
2727
const searchTxt = ev.target.value.trim();
28-
console.log(searchTxt);
2928
if (searchTxt !== "") {
3029
//fetch API for getting matched book
3130
BooksAPI.search(searchTxt)
@@ -40,7 +39,7 @@ class Search extends Component {
4039
const img = cur.imageLinks ? cur.imageLinks.smallThumbnail : "alt";
4140

4241
const book = {
43-
bookId: cur.id,
42+
id: cur.id,
4443
title: cur.title,
4544
shelf: cur.shelf,
4645
bookImage: img,
@@ -51,9 +50,11 @@ class Search extends Component {
5150
index === -1 && books.push(book);
5251
});
5352
this.setState({ books });
54-
} else {
53+
}
54+
else
55+
{
5556
this.setState({ books: [] });
56-
alert("invalid searche");
57+
alert("No Books matched the search");
5758
}
5859
})
5960
.catch((er) => {

‎src/components/searchBooksRender.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ class SearchBooks extends Component {
1616
if (!bookShelf)
1717
return 'none';
1818
const [shelf] = [...this.props.shelfs.filter(shelf => shelf === bookShelf)];
19-
console.log(shelf);
2019
return shelf;
2120
}
2221

@@ -39,7 +38,7 @@ class SearchBooks extends Component {
3938
{books.map((book) => {
4039
const shelf = this.getShelf(book.shelf);
4140
return (
42-
<li key={book.bookId}>
41+
<li key={book.id}>
4342
<Book
4443
book={book}
4544
shelfName = {shelf}

‎src/components/shelfBooksRender.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ class ShelfsBooks extends Component {
4545
{books.map((book) => {
4646
return (
4747
shelf === book.shelf && (
48-
<li key={book.bookId}>
48+
<li key={book.id}>
4949
<Book
5050
book={book}
5151
shelfName={shelf}

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1743,6 +1743,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
17431743
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
17441744
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
17451745

1746+
bootstrap@4.6.0:
1747+
version "4.6.0"
1748+
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
1749+
integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
1750+
17461751
brace-expansion@^1.1.7:
17471752
version "1.1.11"
17481753
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"

0 commit comments

Comments
 (0)