Skip to content

Commit 175b132

Browse files
ghost-code-ninjaghost-code-ninja
committed
Add edit color functionality
1 parent b296c79 commit 175b132

File tree

6 files changed

+106
-40
lines changed

6 files changed

+106
-40
lines changed

‎src/App.js‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,15 @@ class App extends Component {
3030

3131

3232
render() {
33-
const { businesses } = this.props
33+
const { businesses } = this.props;
3434
// console.log("app businesses", businesses)
3535

36-
const { products } = this.props
36+
const { products } = this.props;
37+
const { colors } = this.props;
3738
// console.log("app products", products)
3839

40+
41+
3942
return (
4043
<div className="App">
4144
<Navbar />
@@ -91,14 +94,15 @@ class App extends Component {
9194
}/>
9295

9396

94-
<Route exact path ='/products/:id/colors/:id/edit' component={ProductColorEdit} />
95-
97+
{/* <Route exact path ='/products/:id/colors/:id/edit' component={ProductColorEdit} /> */}
9698

97-
{/* <Route exact path='/products/:id/colors/:id/edit' render={props => {
98-
const product = products.products.find(product => product.id === props.match.params.id)
99-
return <ProductColorEdit product={product} {...props} />
99+
<Route exact path='/products/:id/colors/:id/edit' render={props => {
100+
const color = colors.colors.find(color => color.id === parseInt(props.match.params.id))
101+
const productId = props.match.url[10] + props.match.url[11]
102+
const product = products.products.find(product => product.id === productId)
103+
return <ProductColorEdit color={color} productId={product} {...props} />
100104
}
101-
}/> */}
105+
}/>
102106

103107

104108
</Switch>
@@ -113,6 +117,7 @@ const mapStateToProps = state => {
113117
return {
114118
businesses: state.businessReducer,
115119
products: state.productReducer,
120+
colors: state.colorReducer,
116121
};
117122
}
118123

‎src/actions/product.js‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const setMyProducts = products => {
1414
}
1515

1616
export const editMyProduct = business => {
17-
console.log("returned business is", business);
17+
// console.log("returned business is", business);
1818
return {
1919
type: "EDIT_PRODUCT",
2020
business
@@ -29,16 +29,22 @@ export const setMyProducts = products => {
2929
}
3030
}
3131

32-
33-
34-
3532
export const addColor = product => {
3633
return {
3734
type: "ADD_PRODUCT",
3835
product
3936
}
4037
}
4138

39+
export const editMyColor = product => {
40+
console.log("ACTION returned product is", product);
41+
return {
42+
type: "EDIT_COLOR",
43+
product
44+
}
45+
}
46+
47+
4248
export const fetchProducts = () => {
4349
return dispatch => {
4450
return fetch("http://localhost:3001/api/v1/products", {
@@ -155,3 +161,27 @@ export const setMyProducts = products => {
155161
.catch(console.log)
156162
}
157163
}
164+
165+
export const editColor = (data) => {
166+
// console.log("create action data" , data)
167+
return dispatch => {
168+
return fetch(`http://localhost:3001/api/v1/products/${data.product_id}/colors/${data.color_id}`, {
169+
credentials: "include",
170+
method: "PATCH",
171+
headers: {
172+
"Content-Type": "application/json"
173+
},
174+
body: JSON.stringify(data)
175+
})
176+
.then(r => r.json())
177+
.then(response => {
178+
console.log(response);
179+
if (response.error) {
180+
alert(response.error)
181+
} else {
182+
dispatch(editMyColor(response.data))
183+
}
184+
})
185+
.catch(console.log)
186+
}
187+
}

‎src/components/businesses/BusinessProduct.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import { connect } from 'react-redux'
33
import { Link } from 'react-router-dom'
44
import { deleteProduct, fetchProducts } from '../../actions/product'
5+
import { fetchColors} from '../../actions/color'
56
import { Redirect } from 'react-router-dom'
67

78

@@ -14,6 +15,7 @@ class BusinessProduct extends Component {
1415

1516
componentDidMount() {
1617
this.props.fetchProducts()
18+
this.props.fetchColors()
1719
}
1820

1921
handleDelete = (productId) => {
@@ -97,4 +99,4 @@ const mapStateToProps = state => {
9799
};
98100
}
99101

100-
export default connect(mapStateToProps, { deleteProduct, fetchProducts })(BusinessProduct);
102+
export default connect(mapStateToProps, { deleteProduct, fetchProducts, fetchColors })(BusinessProduct);

‎src/components/products/ProductColorEdit.js‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,10 @@ class ProductColorEdit extends Component {
88
super(props);
99

1010
console.log("color edit", props)
11-
12-
let currentProduct = this.props ? this.props.products.products.filter(product => product.attributes.id === parseInt(this.props.match.params.id))[0] : null
13-
console.log("currentProduct", currentProduct)
14-
15-
// debugger;
1611

1712
this.state = {
18-
color_name: "",
19-
available_qty: "",
13+
color_name: `${this.props.color ? this.props.color.color_name : ""}` ,
14+
available_qty: `${this.props.color ? this.props.color.available_qty : ""}` ,
2015
}
2116
}
2217

@@ -29,23 +24,32 @@ class ProductColorEdit extends Component {
2924

3025
handleSubmit = (e) => {
3126
e.preventDefault();
32-
// let product_id = this.props.match.params.id
33-
// let businessId = this.props.product.attributes.business_id
34-
// // console.log(business_id)
35-
// // console.log(product_id)
36-
// let color = {...this.state, product_id}
37-
// // console.log("color" , color)
38-
// this.props.createColor(color)
39-
// this.props.history.push(`/businesses/${businessId}/products/${product_id}`);
40-
// this.setState({
41-
// color_name: "",
42-
// available_qty: "",
43-
// })
27+
let product_id = this.props.color.product_id
28+
console.log(product_id)
29+
30+
let businessId = this.props.productId.attributes.business_id
31+
let color_id = this.props.color.id
32+
33+
let color = {...this.state, color_id, product_id}
34+
console.log("color" , color)
35+
36+
this.props.editColor(color);
37+
38+
this.props.history.push(`/businesses/${businessId}/products/${product_id}`);
39+
// this.props.history.push(`/businesses`);
40+
this.setState({
41+
color_name: "",
42+
available_qty: "",
43+
})
4444
}
4545

4646

4747

4848
render() {
49+
50+
const { loggedIn } = this.props;
51+
if (!loggedIn) return <Redirect to='/' />
52+
4953
return (
5054
<div className="container-form">
5155
<div className="middle-container">
@@ -57,14 +61,14 @@ class ProductColorEdit extends Component {
5761
<div className="label">
5862
<label htmlFor="color_name">Color name: </label>
5963
</div>
60-
<input type="text" name="color_name" id="color_name" placeholder="Enter Color Name" onChange={this.handleChange} required/>
64+
<input type="text" name="color_name" id="color_name" placeholder="Enter Color Name" value={this.state.color_name} onChange={this.handleChange} required/>
6165
</div>
6266

6367
<div className="row">
6468
<div className="label">
6569
<label htmlFor="available_qty">Available Quantity: </label>
6670
</div>
67-
<input type="text" name="available_qty" id="available_qty" placeholder="available qty" onChange={this.handleChange} required/>
71+
<input type="text" name="available_qty" id="available_qty" placeholder="available qty" value={this.state.available_qty} onChange={this.handleChange} required/>
6872
</div>
6973

7074
<div className="row">
@@ -81,9 +85,10 @@ class ProductColorEdit extends Component {
8185

8286
const mapStateToProps = state => {
8387
return {
84-
products: state.productReducer,
85-
loggedIn: !!state.currentUser
86-
}
87-
}
88+
loggedIn: !!state.currentUser,
89+
businesses: state.businessReducer,
90+
};
91+
}
92+
8893

89-
export default connect(mapStateToProps)(ProductColorEdit);
94+
export default connect(mapStateToProps, { editColor })(ProductColorEdit);

‎src/components/products/ProductColorNew.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ class ProductColorNew extends Component {
4141
}
4242

4343
render() {
44+
45+
const { loggedIn } = this.props;
46+
if (!loggedIn) return <Redirect to='/' />
47+
4448
return (
4549
<div className="container-form">
4650
<div className="middle-container">
@@ -74,5 +78,14 @@ class ProductColorNew extends Component {
7478

7579
}
7680
}
81+
82+
const mapStateToProps = ({ currentUser }) => {
83+
return {
84+
currentUser,
85+
loggedIn: !!currentUser
86+
}
87+
}
88+
89+
7790

78-
export default connect(null, { createColor })(ProductColorNew);
91+
export default connect(mapStateToProps, { createColor })(ProductColorNew);

‎src/reducers/productReducer.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,17 @@ export default (state = {products: []}, action) => {
1717
return {...state, products: productTwo}
1818

1919

20+
case 'EDIT_COLOR':
21+
let productThree = state.products.map(product => {
22+
if (product.id === action.product.id) {
23+
return action.product
24+
} else {
25+
return product
26+
}
27+
})
28+
29+
return {...state, products: productThree}
30+
2031
default:
2132
return state
2233
}

0 commit comments

Comments
 (0)