diff --git a/.eslintrc b/.eslintrc index ee54d86..2e99963 100644 --- a/.eslintrc +++ b/.eslintrc @@ -77,7 +77,7 @@ "init-declarations": 0, "key-spacing": [2, {"beforeColon": false, "afterColon": true}], "keyword-spacing": 2, - "linebreak-style": 2, + "linebreak-style": 0, "lines-around-comment": 0, "max-depth": 0, "max-len": [2, 100, 4, {"ignoreUrls": true}], @@ -177,7 +177,7 @@ "no-unneeded-ternary": 2, "no-unreachable": 2, "no-unused-expressions": 2, - "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], + "no-unused-vars": [0, {"vars": "all", "args": "after-used"}], "no-use-before-define": 0, "no-useless-call": 2, "no-var": 2, diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js index 885919a..d2876a2 100644 --- a/src/components/ProductDetail.js +++ b/src/components/ProductDetail.js @@ -1,4 +1,5 @@ import React from "react"; +import Review from "./Review"; function ProductDetail(props) { const {name,description,rating,imgUrl} = props.product; @@ -14,11 +15,13 @@ function ProductDetail(props) {

{name}

-

{description} +

{description}

-

15 reviews

+

+ +

{stars}

diff --git a/src/components/Review.js b/src/components/Review.js new file mode 100644 index 0000000..787d987 --- /dev/null +++ b/src/components/Review.js @@ -0,0 +1,46 @@ +import React from "react"; +import ReviewItem from "./ReviewItem"; + +class Review extends React.Component { + constructor(props) { + super(props); + this.state = { + visible: false + }; + } + + reviewsMethod() { + const revNum = this.props.product.reviews.length; + const message = revNum === 1 ? "review" : "reviews"; + return revNum + " " + message; + } + + toggleHidden() { + this.setState({ + visible: !this.state.visible + }); + } + + revItems() { + return ( + this.props.product.reviews.map((e, i) => { + return ( + + ); + }) + ); + } + + render() { + return ( +
{this.toggleHidden();}}> + {this.reviewsMethod()} +
+ {this.state.visible ? this.revItems() : ""} +
+
+ ); + } +} + +export default Review; diff --git a/src/components/ReviewItem.js b/src/components/ReviewItem.js new file mode 100644 index 0000000..e2da741 --- /dev/null +++ b/src/components/ReviewItem.js @@ -0,0 +1,13 @@ +import React from "react"; + +function ReviewItem(props) { + return ( +
+
+
{props.review.description}
+
{props.review.rating}
+
+ ); +} + +export default ReviewItem; diff --git a/src/state.js b/src/state.js index badf378..c95929b 100644 --- a/src/state.js +++ b/src/state.js @@ -4,7 +4,7 @@ export default { "id": 1, "name": "Body Luxuries Sweet Lavender Hand Sanitizer", "description": "Psychotropic drugs, not elsewhere classified", - "reviews": 46, + "reviewsNum": 46, "rating": 2, "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff", "price": "$95.11", @@ -44,7 +44,7 @@ export default { "id": 2, "name": "Topiramate", "description": "Injury of ulnar nerve at forearm level, left arm, sequela", - "reviews": 2, + "reviewsNum": 2, "rating": 2, "imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff", "price": "$37.09", @@ -70,7 +70,7 @@ export default { "id": 3, "name": "Almond", "description": "Other disorders of continuity of bone, unsp tibia and fibula", - "reviews": 27, + "reviewsNum": 27, "rating": 5, "imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000", "price": "$51.83", @@ -90,7 +90,7 @@ export default { "id": 4, "name": "VYTORIN", "description": "Orchard as the place of occurrence of the external cause", - "reviews": 60, + "reviewsNum": 60, "rating": 3, "imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff", "price": "$86.93", @@ -110,7 +110,7 @@ export default { "id": 5, "name": "Decolorized Iodine", "description": "Injury", - "reviews": 20, + "reviewsNum": 20, "rating": 1, "imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff", "price": "$70.10", @@ -130,7 +130,7 @@ export default { "id": 6, "name": "Fresh Sugar Honey Tinted Lip Treatment SPF15", "description": "Unspecified open wound ", - "reviews": 79, + "reviewsNum": 79, "rating": 3, "imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff", "price": "$39.25", @@ -150,7 +150,7 @@ export default { "id": 7, "name": "LBel", "description": "Toxic effect of 2-Propanol, intentional self-harm, init", - "reviews": 76, + "reviewsNum": 76, "rating": 3, "imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff", "price": "$99.91", @@ -170,7 +170,7 @@ export default { "id": 8, "name": "Cholestyramine", "description": "Laceration without foreign body of trachea, sequela", - "reviews": 74, + "reviewsNum": 74, "rating": 3, "imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff", "price": "$67.17", @@ -190,7 +190,7 @@ export default { "id": 9, "name": "Risperidone", "description": "Poisn by cephalospor/oth beta-lactm antibiot, undet, sequela", - "reviews": 9, + "reviewsNum": 9, "rating": 1, "imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff", "price": "$96.84", @@ -210,7 +210,7 @@ export default { "id": 10, "name": "MAC", "description": "Other Gram-negative sepsis", - "reviews": 45, + "reviewsNum": 45, "rating": 2, "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff", "price": "$74.37", @@ -221,4 +221,4 @@ export default { } ] }] -} \ No newline at end of file +}