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

Commit 3611cea

Browse files
e-ahmed-mahmoude-ahmed-mahmoud
committed
fixing design and Bugs of bookDetails
1 parent 1615676 commit 3611cea

File tree

6 files changed

+57
-39
lines changed

6 files changed

+57
-39
lines changed

‎src/App.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import BookDetails from "./components/bookDetails";
1111
* top parent where defines router components and instantiate all component
1212
* handing shelf selection in here and send aknowldgement to server
1313
* rendering main pages
14-
* components map: 1- BooksApp => Search => SearchBooks => Books
15-
* 2- BooksApp => BooksShelfRender => Book
14+
* components map: 1- BooksApp => Search => SearchBooks => Books => BookDetials
15+
* 2- BooksApp => BooksShelfRender => Book =
1616
*/
1717

1818
class BooksApp extends React.Component {

‎src/components/book.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ import { Link } from "react-router-dom";
1313
const Book = (props) => {
1414

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

1919
return <div className="book">
2020
<div className="book-top">
2121

22-
<Link to={`components/bookDetails/${book.id}`} >
22+
<Link to={bookSender === 'search'?`bookDetails/${book.id}`:`components/bookDetails/${book.id}` } >
2323
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${imagePath})` }} />
2424
</Link>
2525

‎src/components/bookDetails.js

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -41,44 +41,60 @@ class BookDetails extends Component {
4141

4242
render() {
4343
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>
44+
return <div className='container'>
45+
<div className="row d-flex justify-content-center m-3 p-3 bg-light" >
46+
<div className="row col-md-6">
47+
<h5 className="card-title bd-title" style={{fontSize:"calc(1.425rem + 2.1vw)", fontWeight:"bold"}}>{book.title}</h5>
48+
<div className="card-text row">
49+
<div className="">
50+
<p>description: {book.description.slice(0, 250)} </p>
51+
<div className='d-flex justify-content-between pt-4'>
52+
<span>
53+
<p >
54+
publisher {book.publisher}
55+
</p>
56+
</span>
57+
<span>
58+
<p >
59+
page Count: {book.pageCount}
60+
</p>
61+
</span>
62+
</div>
63+
<div className='d-flex justify-content-between pr-1'>
64+
<p >
65+
authors: {book.authors}
66+
</p>
67+
<p >
68+
categories: {book.categories}
69+
</p>
70+
</div>
71+
<p style={{ display: "inline" }}>
72+
language: {book.language}
73+
</p>
6574
</div>
75+
</div>
76+
<div className="col-1" />
6677
</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 className='row col-5 d-flex justify-content-end align-items-end mb-5 pb-4'>
79+
<div className="d-absolute " style={{ }}>
80+
<div className='d-flex align-items-center'>
81+
<img className="img-thumbnail" src={book.image} alt="Card cap" />
82+
<div className="book-shelf-changer d-absolute">
83+
<select onChange={(ev) => this.props.onUpdateBookShelf(ev.target.value, book)} value={book.shelf}>
84+
<option value="move" disabled>
85+
Move to...
86+
</option>
87+
<option value="currentlyReading">Currently Reading</option>
88+
<option value="wantToRead">Want to Read</option>
89+
<option value="read">Read</option>
90+
<option value="none">None</option>
91+
</select>
92+
</div>
93+
</div>
94+
</div>
7895
</div>
79-
</div>
8096
</div>
81-
</div>);
97+
</div>
8298
}
8399
}
84100

‎src/components/search.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ class Search extends Component {
2626
getSearchText = (ev) => {
2727
const searchTxt = ev.target.value.trim();
2828
if (searchTxt !== "") {
29-
//fetch API for getting matched book
29+
//fetch API for getting matched book after 500ms
3030
BooksAPI.search(searchTxt)
3131
.then((res) => {
3232
if (res.length > 0) {

‎src/components/searchBooksRender.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ class SearchBooks extends Component {
4242
<Book
4343
book={book}
4444
shelfName = {shelf}
45+
bookSender = 'search'
4546
// authors={this.getAuthorsByID(book.authors)}
4647
onUpdateBookShelf = {this.onUpdateBookShelf}
4748
/>

‎src/components/shelfBooksRender.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ class ShelfsBooks extends Component {
4949
<Book
5050
book={book}
5151
shelfName={shelf}
52+
bookSender = 'shelf'
5253
onUpdateBookShelf={this.onUpdateBookShelf}
5354
/>
5455
</li>

0 commit comments

Comments
 (0)