Conor Fleming - Advanced State Practice

.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,

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) {
         <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>
+          <p className="pull-right">
+            <Review product={props.product} />
+          </p>
           <p>
             {stars}
           </p>

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 (
+          <ReviewItem key={i} review={e} />
+        );
+      })
+    );
+  }
+
+  render() {
+    return (
+      <div onClick={() => {this.toggleHidden();}}>
+        <span>{this.reviewsMethod()}</span>
+        <div>
+          {this.state.visible ? this.revItems() : ""}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Review;

src/components/ReviewItem.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function ReviewItem(props) {
+  return (
+    <div>
+      <br />
+      <div>{props.review.description}</div>
+      <div>{props.review.rating}</div>
+    </div>
+  );
+}
+
+export default ReviewItem;

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 {
     }
   ]
   }]
-}
+}