Merge pull request #25 from Recharewky/RatingsAndReviews

Ratings and reviews

client/src/components/Reviews/RatingsBreakdown/Breakdown.jsx

@@ -6,7 +6,7 @@ class Breakdown extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      breakdowns: props.breakdowns
+      breakdowns: this.props.breakdowns
     };
   }
 

client/src/components/Reviews/RatingsBreakdown/RatingsBreakdown.jsx

@@ -56,24 +56,27 @@ class RatingBreakdown extends React.Component {
   }
 
   getAvg(data) {
-    var ratings = data.data.ratings;
-    var count = 0;
-    var total = 0;
-    var patsyAvg = Math.round(total / count * 10) / 10;
-    var countTrue = parseInt(data.data.recommended.true);
-    var countFalse = parseInt(data.data.recommended.false);
-    var breakdownArray = [];
-
-    for (var key in ratings) {
+    let ratings = data.data.ratings;
+    let count = 0;
+    let total = 0;
+
+    let countTrue = parseInt(data.data.recommended.true);
+    let countFalse = parseInt(data.data.recommended.false);
+    let breakdownArray = [];
+
+    for (let key in ratings) {
+      console.log('ratings[key]', count);
       count += parseInt(ratings[key]);
       total += (parseInt(key) * ratings[key]);
     }
+    let patsyAvg = Math.round(total / count * 10) / 10;
 
-    for (var i = 1; i < 6; i++) {
+    for (let i = 1; i < 6; i++) {
       if (i in ratings) {
         breakdownArray.push([i, ratings[i], Math.round(parseInt(ratings[i]) / count * 100)]);
       } else {
         breakdownArray.push([i, '0', 0]);
+
       }
     }
     if (!Number.isNaN(patsyAvg)) {
@@ -93,10 +96,11 @@ class RatingBreakdown extends React.Component {
 
   componentDidMount() {
     this.getMetaReviews(this.props.id, this.getAvg);
+
   }
 
   render() {
-    console.log(this)
+    console.log(this.props)
     return (
       <RatingBreakdown_div>
         <AvgContainer>

client/src/components/Reviews/ReviewList/AddReview.jsx

@@ -1,4 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
+
+const Button = styled.button`
+  background: #edf5e1;
+  border-radius: 4px;
+  border: 2px solid #05386b;
+  color: #05386b;
+  &:hover {
+    cursor: pointer;
+  }
+  margin: 0 1em;
+  padding: 0.25em 1em;
+`
 
 
 class AddReview extends React.Component {
@@ -11,12 +24,7 @@ class AddReview extends React.Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  // handleChange(event) {
-  //   event.preventDefault();
-  //   this.setState({
-  //     [event.target.name]: event.target.value,
-  //   });
-  // }
+
   handleChange(e) {
     const { name } = e.target;
     const { value } = e.target;
@@ -136,9 +144,9 @@ class AddReview extends React.Component {
           />
 
           <br />
-          <input
+          <Button
             type="submit"
-          />
+          > Submit </Button>
         </form>
 
       </div>

client/src/components/Reviews/ReviewList/AddReviewModal.jsx

@@ -4,10 +4,13 @@ import AddReview from './AddReview.jsx';
 import styled from 'styled-components';
 
 const Button = styled.button`
-  background: transparent;
-  border-radius: 3px;
-  border: 2px solid palevioletred;
-  color: tomato;
+  background: #edf5e1;
+  border-radius: 4px;
+  border: 2px solid #05386b;
+  color: #05386b;
+  &:hover {
+    cursor: pointer;
+  }
   margin: 0 1em;
   padding: 0.25em 1em;
 `

client/src/components/Reviews/ReviewList/Photo.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import ModalImage, { Lightbox } from 'react-modal-image';
+import ModalImage , { Lightbox } from 'react-modal-image';
 import styled from 'styled-components';
 // import {Lightbox} from 'react-image-lightbox';
 // import 'react-image-lightbox/style.css';
@@ -12,13 +12,13 @@ background-color: transparent;
 }
 `;
 
-export default class Photo extends Component {
+export default class Photo extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      photoIndex: 0,
-      isOpen: false,
+      // photoIndex: 0,
+      // isOpen: false,
     };
   }
 

client/src/components/Reviews/ReviewList/ReviewList.jsx

@@ -5,10 +5,13 @@ import styled from 'styled-components'
 import axios from 'axios';
 
 const Button = styled.button`
-  background: transparent;
-  border-radius: 3px;
-  border: 2px solid palevioletred;
-  color: palevioletred;
+  background: #edf5e1;
+  border-radius: 4px;
+  border: 2px solid #05386b;
+  color: #05386b;
+  &:hover {
+    cursor: pointer;
+  }
   margin: 0 1em;
   padding: 0.25em 1em;
 `

client/src/components/Reviews/ReviewList/ReviewListItem.jsx

@@ -127,7 +127,7 @@ const ReviewListItem = (props) => {
   var dateStr = date;
     var formattedDate = moment(dateStr).format('MMM DD, YYYY');
     if (recommend) {
-      var recommend = <Recommend_div> <span style={{color: 'green'}}>&#10003;</span>   I recommended this product</Recommend_div>;
+      var recommend = <Recommend_div> <span style={{color: 'blue'}}>&#10003;</span>   I recommended this product</Recommend_div>;
     }
     return (
       <ReviewListItem_Container>
@@ -155,9 +155,7 @@ const ReviewListItem = (props) => {
             />
           )}
         </Photo_div>
-
         {recommend}
-
         <Response_Container>
           <ResponseText_Container>
             <div>

client/src/components/Reviews/ReviewList/ReviewSortBy.jsx

@@ -1,22 +1,14 @@
 import React from 'react';
 
-class ReviewSortBy extends React.Component {
-  constructor(props) {
-    super();
-    this.state = {
-
-    }
-
-  }
-  render() {
+const ReviewSortBy = () => {
     return (
       <div>
         <h1>Sort By...</h1>
         <b>{this.props.totalReviews} reviews, sorted by ...</b>
       </div>
 
     );
-  }
 }
 
+
 export default ReviewSortBy;

package.json

@@ -25,6 +25,7 @@
     "axios": "^0.21.1",
     "express": "^4.17.1",
     "jquery": "^3.6.0",
+    "lightbox": "^0.5.0",
     "moment": "^2.29.1",
     "node-sass": "^6.0.1",
     "nodemon": "^2.0.12",

server/index.js

@@ -70,4 +70,5 @@ app.listen(PORT, () => {
   console.log(`Server listening on port: ${PORT}`);
 });
 
+
 module.export = app;