Add vote feature

ghost-code-ninja · ghost-code-ninja · commit 88a6387f7ba5 · 2019-11-22T10:58:39.000-05:00
diff --git a/src/actions/userBusiness.js b/src/actions/userBusiness.js
@@ -51,8 +51,8 @@ export const setMyBusinesses = businesses => {
     }
   }
 
-
-export const createBusiness = (data) => {
+// The promise of a burger party - blog post
+export const createBusiness = (data) => { 
   return dispatch => {
     return fetch("http://localhost:3001/api/v1/businesses", {
       credentials: "include",
@@ -66,12 +66,13 @@ export const createBusiness = (data) => {
       .then(response => {
         // console.log("Response" , response);
         if (response.error) {
+          //throw new Error(response.error)
           alert(response.error)
         } else {
           dispatch(addBusiness(response.data))
         }
       })
-      .catch(console.log)
+      .catch(error => alert(error))
   }
 }
 
diff --git a/src/components/categories/CategoryProduct.js b/src/components/categories/CategoryProduct.js
@@ -1,14 +1,29 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux'
 
+class CategoryProduct extends Component {
+    constructor(props){
+        super(props);
+        
+        this.state = { 
+          votes: 0
+         }
+
+        //  console.log("product", this.props)
+    }
 
-const CategoryProduct = (props) => {
+   handleProductUpVote = (productId) => {
+       console.log(productId)
+        this.setState ({
+            votes: this.state.votes +1
+        })
+       
+   }
 
-    // console.log("product props", props);
-    // console.log(props.match.params.id[0])
+    render() { 
 
-    let product = props.products.products.filter(product => product.id === props.match.params.id)[0]
-    // console.log("product is", product)
+    let product = this.props.products.products.filter(product => product.attributes.id === this.props.id)[0]
+    console.log("product is", product)
 
     let productColors = product ? product.attributes.colors.map(color => 
         <div key={color.color_id}>
@@ -18,38 +33,46 @@ const CategoryProduct = (props) => {
         
 
     return(
-        <div className="main">
+        <div className="">
             <div className="product-main">
                 <div className="product-flex">
                     <div className="product col-5">
-                        <li className="product-image">{product ? <img src={ product.attributes.image } alt="product" ></img> : null}</li>
+                        <li className="product-image">{<img src={ this.props.image } alt="product" ></img>}</li>
                     </div>
                 </div>
 
                 <div className="product-info col-7">
-                    <li className="product-text"> <b className="titlespacing">Product Name:</b> {product ? product.attributes.name : null}</li>
-                    <li className="product-text"><b className="titlespacing">Description:</b> {product ? product.attributes.description : null}</li>
-                    <li className="product-text"><b className="titlespacing">Item Number:</b> {product ? product.attributes.item_number : null}</li>
+                    <li className="product-text"> <b className="titlespacing">Product Name:</b> { this.props.name }</li>
+                    <li className="product-text"><b className="titlespacing">Description:</b> {this.props.description}</li>
+                    <li className="product-text"><b className="titlespacing">Item Number:</b> {this.props.item_number}</li>
 
                     <br></br>
                     <li className="product-text"><b className="titlespacing">Colors:</b> </li>
-                    { productColors }
+                    { productColors } 
                     
                     <br></br>
-                    <li className="product-text"><b className="titlespacing" >Price:</b> ${product ? product.attributes.price : null}</li>
+                    <li className="product-text"><b className="titlespacing" >Price:</b> ${this.props.price}</li>
+
+                    <button onClick={() => this.handleProductUpVote(`${this.props.id}`)} className="button">Vote</button>
+
+    
+                    <li className="products-price"> Votes: { this.state.votes }</li>
+
 
-                    <br></br>
-                    <br></br>
                 </div>     
             </div>
         </div>
     )
-}
 
+    }
+}
+ 
 const mapStateToProps = state => {
     return {
       products: state.productReducer,
     };    
 }
 
-export default connect(mapStateToProps)(CategoryProduct);
+export default connect(mapStateToProps)(CategoryProduct);
+
+
diff --git a/src/components/categories/CategoryProductOld.js b/src/components/categories/CategoryProductOld.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { connect } from 'react-redux'
+
+
+const CategoryProduct = (props) => {
+
+    // console.log("product props", props);
+    // console.log(props.match.params.id[0])
+
+    let product = props.products.products.filter(product => product.id === props.match.params.id)[0]
+    // console.log("product is", product)
+
+    let productColors = product ? product.attributes.colors.map(color => 
+        <div key={color.color_id}>
+            <li className="product-text">{color.color_name}</li> 
+        </div>
+    ) : null
+        
+
+    return(
+        <div className="main">
+            <div className="product-main">
+                <div className="product-flex">
+                    <div className="product col-5">
+                        <li className="product-image">{product ? <img src={ product.attributes.image } alt="product" ></img> : null}</li>
+                    </div>
+                </div>
+
+                <div className="product-info col-7">
+                    <li className="product-text"> <b className="titlespacing">Product Name:</b> {product ? product.attributes.name : null}</li>
+                    <li className="product-text"><b className="titlespacing">Description:</b> {product ? product.attributes.description : null}</li>
+                    <li className="product-text"><b className="titlespacing">Item Number:</b> {product ? product.attributes.item_number : null}</li>
+
+                    <br></br>
+                    <li className="product-text"><b className="titlespacing">Colors:</b> </li>
+                    { productColors }
+                    
+                    <br></br>
+                    <li className="product-text"><b className="titlespacing" >Price:</b> ${product ? product.attributes.price : null}</li>
+
+                    <br></br>
+                    <br></br>
+                </div>     
+            </div>
+        </div>
+    )
+}
+
+const mapStateToProps = state => {
+    return {
+      products: state.productReducer,
+    };    
+}
+
+export default connect(mapStateToProps)(CategoryProduct);
diff --git a/src/components/categories/CategoryProducts.js b/src/components/categories/CategoryProducts.js
@@ -1,15 +1,28 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
+import CategoryProduct from './CategoryProduct'
 
 
-const CategoryProducts = (props) => {
+class CategoryProducts extends Component {
+  constructor(props){
+    super(props);
+    
+    this.state = { 
+
+     } 
+}
+   
+
 
-    // console.log("categoryProducts", props)
+
+  render() { 
+
+        // console.log("categoryProducts", props)
     // console.log("category props", props.categories.categories)
 
-    let productList = props.match ? props.categories.categories.filter(category => category.id === props.match.params.id)[0] : null
-    const CategoryId = props.match ? props.match.params.id[0] : null
+    let productList = this.props.match ? this.props.categories.categories.filter(category => category.id === this.props.match.params.id)[0] : null
+    const CategoryId = this.props.match ? this.props.match.params.id[0] : null
     const CategoryName = productList ? <li className="category-name">{productList.attributes.name}</li> : null
     
     // console.log("products", productList);
@@ -18,39 +31,90 @@ const CategoryProducts = (props) => {
       return a.subcategory_id - b.subcategory_id;
     })   
     : null
-    //  console.log("sortedProducts", sortedProducts)
+     console.log("sortedProducts", sortedProducts)
+    
     
 
-    let categoryProducts = sortedProducts ? sortedProducts.map(product => 
-        <div key={product.id}>
-            <Link to={`/category/${CategoryId}/products/${product.id}` }>
-            <li className="products-image"> <img src={ product.image } alt="product" ></img></li>
-            <li className="products-text"> { product.name } <br></br></li> 
-            </Link>
-            <li className="products-price"> ${ product.price }</li>
-        </div>
-        )
+    let categoryProducts = sortedProducts ? sortedProducts.map(product => (
+       <CategoryProduct
+          key={product.id}
+          id={product.id}
+          image={product.image}
+          price={product.price}
+          name={product.name}
+          votes={product.votes}
+          description={product.description}
+          item_number={product.item_number}
+       />
+        ))
         : null
 
   
-    return (
-        
-      <div className="products">
-        
-          <h1 className="products">{CategoryName}</h1>
+        return (
+      
           <div className="products">
-            {categoryProducts}
-
-          </div>     
-      </div>
-    )
+              <h1 className="products">{CategoryName}</h1>
+              <div className="">
+                {categoryProducts}
+    
+              </div>     
+          </div>
+        )
+    
+  }
 }
-
+ 
 const mapStateToProps = state => {
-      return {
-        categories: state.categoryReducer,
-        subcategories: state.subcategoryReducer,
-      };    
+  return {
+    categories: state.categoryReducer,
+    subcategories: state.subcategoryReducer,
+  };    
 }
 
-export default connect(mapStateToProps)(CategoryProducts);
+export default connect(mapStateToProps)(CategoryProducts);
+
+
+
+
+// const CategoryProducts = (props) => {
+
+//     // console.log("categoryProducts", props)
+//     // console.log("category props", props.categories.categories)
+
+//     let productList = props.match ? props.categories.categories.filter(category => category.id === props.match.params.id)[0] : null
+//     const CategoryId = props.match ? props.match.params.id[0] : null
+//     const CategoryName = productList ? <li className="category-name">{productList.attributes.name}</li> : null
+    
+//     // console.log("products", productList);
+    
+//     let sortedProducts = productList ? productList.attributes.products.sort(function(a,b){
+//       return a.subcategory_id - b.subcategory_id;
+//     })   
+//     : null
+//     //  console.log("sortedProducts", sortedProducts)
+    
+
+//     let categoryProducts = sortedProducts ? sortedProducts.map(product => 
+//         <div key={product.id}>
+//             <Link to={`/category/${CategoryId}/products/${product.id}` }>
+//             <li className="products-image"> <img src={ product.image } alt="product" ></img></li>
+//             <li className="products-text"> { product.name } <br></br></li> 
+//             </Link>
+//             <li className="products-price"> ${ product.price }</li>
+//             <button onClick={this.handleClick}>Vote</button>
+//             <li>0</li>
+//         </div>
+//         )
+//         : null
+
+  
+// }
+
+// const mapStateToProps = state => {
+//       return {
+//         categories: state.categoryReducer,
+//         subcategories: state.subcategoryReducer,
+//       };    
+// }
+
+// export default connect(mapStateToProps)(CategoryProducts);
diff --git a/src/components/categories/CategoryProductsOld.js b/src/components/categories/CategoryProductsOld.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+
+const CategoryProducts = (props) => {
+
+    // console.log("categoryProducts", props)
+    // console.log("category props", props.categories.categories)
+
+    let productList = props.match ? props.categories.categories.filter(category => category.id === props.match.params.id)[0] : null
+    const CategoryId = props.match ? props.match.params.id[0] : null
+    const CategoryName = productList ? <li className="category-name">{productList.attributes.name}</li> : null
+    
+    // console.log("products", productList);
+    
+    let sortedProducts = productList ? productList.attributes.products.sort(function(a,b){
+      return a.subcategory_id - b.subcategory_id;
+    })   
+    : null
+    //  console.log("sortedProducts", sortedProducts)
+    
+
+    let categoryProducts = sortedProducts ? sortedProducts.map(product => 
+        <div key={product.id}>
+            <Link to={`/category/${CategoryId}/products/${product.id}` }>
+            <li className="products-image"> <img src={ product.image } alt="product" ></img></li>
+            <li className="products-text"> { product.name } <br></br></li> 
+            </Link>
+            <li className="products-price"> ${ product.price }</li>
+        </div>
+        )
+        : null
+
+  
+    return (
+        
+      <div className="products">
+        
+          <h1 className="products">{CategoryName}</h1>
+          <div className="products">
+            {categoryProducts}
+
+          </div>     
+      </div>
+    )
+}
+
+const mapStateToProps = state => {
+      return {
+        categories: state.categoryReducer,
+        subcategories: state.subcategoryReducer,
+      };    
+}
+
+export default connect(mapStateToProps)(CategoryProducts);
diff --git a/src/store.js b/src/store.js
@@ -18,6 +18,7 @@ const reducer = combineReducers ({
 
 const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
+// CreateStore to Initialize the store and pass in reducers and middleware for asynchronous functions when fetching data.
 const store = createStore(reducer, composeEnhancer(applyMiddleware(thunk)))
 
 export default store
diff --git a/src/stylesheets/product.css b/src/stylesheets/product.css

Original file line number	Diff line number	Diff line change
`@@ -51,8 +51,8 @@ export const setMyBusinesses = businesses => {`
`51`	`51`	`}`
`52`	`52`	`}`
`53`	`53`
`54`		`-`
`55`		`-export const createBusiness = (data) => {`
	`54`	`+// The promise of a burger party - blog post`
	`55`	`+export const createBusiness = (data) => {`
`56`	`56`	`return dispatch => {`
`57`	`57`	`return fetch("http://localhost:3001/api/v1/businesses", {`
`58`	`58`	`credentials: "include",`
`@@ -66,12 +66,13 @@ export const createBusiness = (data) => {`
`66`	`66`	`.then(response => {`
`67`	`67`	`// console.log("Response" , response);`
`68`	`68`	`if (response.error) {`
	`69`	`+ //throw new Error(response.error)`
`69`	`70`	`alert(response.error)`
`70`	`71`	`} else {`
`71`	`72`	`dispatch(addBusiness(response.data))`
`72`	`73`	`}`
`73`	`74`	`})`
`74`		`- .catch(console.log)`
	`75`	`+ .catch(error => alert(error))`
`75`	`76`	`}`
`76`	`77`	`}`
`77`	`78`