Skip to content

Jessica Killeen #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jkilleen15 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Jessica Killeen #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@
Fork, clone, run yarn install, yarn start, pull request

#### Do
* Add a new class component for Reviews
* Make sure to use extends and super
* Import and use this component in ProductDetail
* This component will take a product from props
* It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews
* It will create a list of the reviews description which will inititally be hidden
* When the word "review" is clicked show the reviews
* When clicked again, hide the reviews
X Add a new class component for Reviews
X Make sure to use extends and super
X Import and use this component in ProductDetail

X This component will take a product from props

X It will show the number of reviews followed by "review" or "reviews" depending on if there is one or more reviews

X It will create a list of the reviews description which will initially be hidden

X When the word "review" is clicked show the reviews

X When clicked again, hide the reviews
6 changes: 4 additions & 2 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ import NavBar from './components/NavBar';
import Footer from './components/Footer';
import ProductDetail from './components/ProductDetail';
import Carousel from './components/Carousel';

function App (props) {

var products = props.state.products.map(function(prod){
return <ProductDetail product={prod} />;
const products = props.state.products.map(function(prod) {
return <ProductDetail product={prod} key={prod.id} />;
});

return (
<div className="App">
<NavBar />
Expand Down
25 changes: 18 additions & 7 deletions src/components/ProductDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import React from "react";
//import ReactDOM from 'react-dom';
import Reviews from './Reviews';

function ProductDetail(props) {
const {name,description,rating,imgUrl} = props.product;
const {id,name,description,rating,imgUrl,reviews} = props.product;
const stars = [];
for (let i = 0; i < rating; i++) {
stars.push(<span className="glyphicon glyphicon-star" />);
stars.push(<span className="glyphicon glyphicon-star" key={i} />);
}
const reviewDivs = [];
for (let i = 0; i < reviews.length; i++) {
console.log(reviews[i].description);
reviewDivs.push(<p key={`review_${i}_for${id}`} > {reviews[i].description} - Rating: {reviews[i].rating}</p>);
}
const reviewQuantity = reviews.length;

return (
<div className="col-sm-4 col-lg-4 col-md-4">
Expand All @@ -14,16 +22,19 @@ function ProductDetail(props) {
<div className="caption">
<h4><a href="#">{name}</a>
</h4>
<p>{description}
<p>{description}
</p>
</div>
<div className="ratings">
<p className="pull-right">15 reviews</p>
</div>
<div className="ratings">
<Reviews
reviews={reviews}
reviewDivs={reviewDivs}
reviewQuantity={reviewQuantity} />
</div>
<p>
{stars}
</p>
</div>
</div>
</div>
);
}
Expand Down
45 changes: 45 additions & 0 deletions src/components/Reviews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import ReactDOM from 'react-dom';

class Reviews extends React.Component{
constructor(props) {
super(props);
this.state = {
visible: false,
};
}

handleReviewsClick = (e) => {
console.log("review clicked");
console.log(e.target);
this.setState({visible: !this.state.visible});
}

render(){
console.log(this.props.reviewDivs);
let displayReviewDivs = "";
let displayReviewQuantity = `${this.props.reviewQuantity} Reviews`;

if (this.props.reviewDivs.length < 2){
displayReviewQuantity = `${this.props.reviewQuantity} Review`
}

if (!this.state.visible) {
displayReviewDivs = <div></div>
}
else {
displayReviewDivs = <div>{this.props.reviewDivs}</div>
}
return(
<p className="pull-right">
<span onClick={this.handleReviewsClick}>
{displayReviewQuantity}
{displayReviewDivs}
</span>
</p>

);
}
};

export default Reviews;
26 changes: 15 additions & 11 deletions src/state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
// changed first occurence of products.reviews to products.reviewers,
// to avoid duplicate product.reviews(number) and product.reviews(object),
// same level

export default {
categories:["food","electronics","sporting"],
products:[{
"id": 1,
"name": "Body Luxuries Sweet Lavender Hand Sanitizer",
"description": "Psychotropic drugs, not elsewhere classified",
"reviews": 46,
"reviewers": 46,
"rating": 2,
"imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff",
"price": "$95.11",
Expand Down Expand Up @@ -44,7 +48,7 @@ export default {
"id": 2,
"name": "Topiramate",
"description": "Injury of ulnar nerve at forearm level, left arm, sequela",
"reviews": 2,
"reviewers": 2,
"rating": 2,
"imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff",
"price": "$37.09",
Expand All @@ -70,7 +74,7 @@ export default {
"id": 3,
"name": "Almond",
"description": "Other disorders of continuity of bone, unsp tibia and fibula",
"reviews": 27,
"reviewers": 27,
"rating": 5,
"imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000",
"price": "$51.83",
Expand All @@ -90,7 +94,7 @@ export default {
"id": 4,
"name": "VYTORIN",
"description": "Orchard as the place of occurrence of the external cause",
"reviews": 60,
"reviewers": 60,
"rating": 3,
"imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff",
"price": "$86.93",
Expand All @@ -110,7 +114,7 @@ export default {
"id": 5,
"name": "Decolorized Iodine",
"description": "Injury",
"reviews": 20,
"reviewers": 20,
"rating": 1,
"imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff",
"price": "$70.10",
Expand All @@ -130,7 +134,7 @@ export default {
"id": 6,
"name": "Fresh Sugar Honey Tinted Lip Treatment SPF15",
"description": "Unspecified open wound ",
"reviews": 79,
"reviewers": 79,
"rating": 3,
"imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff",
"price": "$39.25",
Expand All @@ -150,7 +154,7 @@ export default {
"id": 7,
"name": "LBel",
"description": "Toxic effect of 2-Propanol, intentional self-harm, init",
"reviews": 76,
"reviewers": 76,
"rating": 3,
"imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff",
"price": "$99.91",
Expand All @@ -170,7 +174,7 @@ export default {
"id": 8,
"name": "Cholestyramine",
"description": "Laceration without foreign body of trachea, sequela",
"reviews": 74,
"reviewers": 74,
"rating": 3,
"imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff",
"price": "$67.17",
Expand All @@ -190,7 +194,7 @@ export default {
"id": 9,
"name": "Risperidone",
"description": "Poisn by cephalospor/oth beta-lactm antibiot, undet, sequela",
"reviews": 9,
"reviewers": 9,
"rating": 1,
"imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff",
"price": "$96.84",
Expand All @@ -210,7 +214,7 @@ export default {
"id": 10,
"name": "MAC",
"description": "Other Gram-negative sepsis",
"reviews": 45,
"reviewers": 45,
"rating": 2,
"imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff",
"price": "$74.37",
Expand All @@ -221,4 +225,4 @@ export default {
}
]
}]
}
}