Skip to content

Commit 3a44291

Browse files
revolalexrevolalex
committed
multiple img product
1 parent d247dbf commit 3a44291

File tree

5 files changed

+97
-55
lines changed

5 files changed

+97
-55
lines changed

‎src/Api/routes/route.js‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@ const appRouter = async function(app, connection) {
88
/**************************** API USER ***************************************/
99
/*****************************************************************************/
1010

11-
/*********************** Check if user with this email already exist *************************/
12-
await app.use("/users/sign-up", (req, res, next) => {
13-
console.log(req.body.email);
14-
connection.query(
15-
`SELECT * FROM users WHERE email = '${req.body.email}'`,
16-
(err, results) => {
17-
if (err) throw err;
18-
if (results.length > 0) {
19-
res.status(200).send("this EMAIL already exist");
20-
} else {
21-
next();
22-
}
11+
/*********************** Check if user with this email already exist *************************/
12+
await app.use("/users/sign-up", (req, res, next) => {
13+
console.log(req.body.email);
14+
connection.query(
15+
`SELECT * FROM users WHERE email = '${req.body.email}'`,
16+
(err, results) => {
17+
if (err) throw err;
18+
if (results.length > 0) {
19+
res.status(200).send("this EMAIL already exist");
20+
} else {
21+
next();
2322
}
24-
);
25-
});
23+
}
24+
);
25+
});
2626

2727
// - POST /users/sign-up ⇒ Will add a user in the Users table (of course the
2828
// password will be encrypted...)
@@ -143,21 +143,32 @@ const appRouter = async function(app, connection) {
143143
await app.get("/products/", function(req, res) {
144144
let getProductsInfo = "SELECT * FROM products";
145145
connection.query(getProductsInfo, function(err, results) {
146+
results.forEach((element) => {
147+
element.url = element.url.split(",");
148+
});
146149
if (err) throw err;
147150
res.send(results);
148151
});
149152
});
150153

154+
// POST /products/ ⇒ Will add a product in the Products table (only if the user who create the product has a good JWT...)
151155
// POST /products/ ⇒ Will add a product in the Products table (only if the user who create the product has a good JWT...)
152156
await app.post("/products/", auth, function(req, res) {
153-
let category =
154-
req.body.category.charAt(0).toUpperCase() + req.body.category.slice(1);
157+
let category = req.body.category;
155158
let prices = req.body.prices;
156-
let name = req.body.name.charAt(0).toUpperCase() + req.body.name.slice(1);
159+
let name = req.body.name;
157160
let description = req.body.description;
158-
let url = req.body.url;
161+
let url = "";
159162
let id_user_affiliate = req.body.id_user_affiliate;
160163

164+
for (let i = 0; i < req.body.url.length; i++) {
165+
if (i === 0) {
166+
url = req.body.url[i];
167+
} else {
168+
url = url + "," + req.body.url[i];
169+
}
170+
}
171+
161172
const productObject = {
162173
category: category,
163174
name: name,
@@ -175,14 +186,17 @@ const appRouter = async function(app, connection) {
175186
});
176187
});
177188

178-
//GET /products/:id ⇒ Return all the datas of this specific Product
189+
//GET /products/:id ⇒ Return all the datas of this specific Product
179190
//(including the name of the user who created it, the category, the description etc...)
180191
await app.get("/products/:id", function(req, res) {
181192
let id = req.params.id;
182193
let productInfo = `SELECT users.lastName,users.firstName,products.id, products.name, products.category, products.description, products.prices, products.url, products.promotion, products.promotionIsActive
183194
FROM users INNER JOIN products ON products.id = ${id} && products.id_user_affiliate = users.id`;
184195

185196
connection.query(productInfo, function(err, results) {
197+
results.forEach((element) => {
198+
element.url = element.url.split(",");
199+
});
186200
if (err) throw err;
187201
res.send(results);
188202
});

‎src/Components/Product/CreateProductPage.js‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -59,27 +59,28 @@ class CreateProductPage extends Component {
5959
}
6060

6161
moreImgButton() {
62-
this.setState(
63-
{ allUrlImg: this.state.allUrlImg.concat(this.state.url) },
64-
() => {
65-
this.setState({
66-
url: "",
67-
});
68-
console.log(this.state.allUrlImg);
69-
}
70-
);
71-
alert(`${this.state.allUrlImg.length + 1} pictures added`);
62+
if (this.state.url !== "") {
63+
this.setState(
64+
{ allUrlImg: this.state.allUrlImg.concat(this.state.url) },
65+
() => {
66+
this.setState({
67+
url: "",
68+
});
69+
}
70+
);
71+
alert(`${this.state.allUrlImg.length + 1} pictures added`);
72+
} else {
73+
alert("Veuillez donner une image");
74+
}
7275
}
73-
7476
buttonIsClick(e) {
7577
console.log("HEADER REQUEST POST", this.state.headerWithToken);
7678
e.preventDefault();
7779
let productObject = {
7880
category: this.state.category,
7981
name: this.state.name,
8082
description: this.state.description,
81-
url: this.state.url,
82-
allUrlImg: [],
83+
url: this.state.allUrlImg,
8384
prices: this.state.prices,
8485
id_user_affiliate: this.props.id,
8586
};
@@ -93,7 +94,7 @@ class CreateProductPage extends Component {
9394
case productObject.description.length < 10:
9495
alert("description required min 10 characters");
9596
break;
96-
case productObject.url.length < 10:
97+
case productObject.url.length < 1:
9798
alert("url of product picture required min 10 characters");
9899
break;
99100
case productObject.prices.length < 1:
@@ -133,12 +134,9 @@ class CreateProductPage extends Component {
133134
}
134135
}
135136
renderProductImg(arrayImg) {
136-
{
137-
arrayImg.forEach((elem) => {
138-
console.log(elem);
139-
return <img className="uploadImg" src={elem} alt="" />;
140-
});
141-
}
137+
return arrayImg.map((elem, index) => (
138+
<img key={index} className="uploadImg" src={elem} alt={elem} />
139+
));
142140
}
143141

144142
render() {
@@ -201,10 +199,8 @@ class CreateProductPage extends Component {
201199
More Picture
202200
</Button>{" "}
203201
<img className="uploadImg" src={this.state.url} alt="" />
204-
{this.state.allUrlImg.forEach((elem)=>{
205-
console.log(elem)
206-
return <img className="uploadImg" src={elem} alt="" />
207-
})}
202+
<br />
203+
<br />
208204
{this.renderProductImg(this.state.allUrlImg)}
209205
<ButtonComponent
210206
click={this.buttonIsClick}

‎src/Components/Product/ProductCardComponent.js‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { connect } from "react-redux";
55
import { setProduct } from "../../store/actions/product";
66
import { addProductToCart } from "../../store/actions/cart";
77
import ButtonComponent from "../Small/ButtonComponent";
8-
import { Card, Row, Col, Badge } from "react-bootstrap";
8+
import { Card, Row, Col, Badge, Carousel } from "react-bootstrap";
99
import SalesLogo from "../Small/SalesLogo";
1010

1111
class ProductCardComponent2 extends Component {
@@ -57,17 +57,33 @@ class ProductCardComponent2 extends Component {
5757
);
5858
}
5959
}
60+
renderCarrousel(url,){
61+
return (url.map((elem,index)=> (
62+
<Carousel.Item key={index} interval={1000}>
63+
<img className="imgCarousel" src={elem} alt='error'/>
64+
</Carousel.Item>
65+
)))
66+
}
6067

6168
renderProduct(product) {
6269
let reducPrice = `${product.promotion} $`;
6370
return (
6471
<div>
65-
{/* SMALL SCREEN */}{/* SMALL SCREEN */}{/* SMALL SCREEN */}{/* SMALL SCREEN */}
66-
{/* SMALL SCREEN */}{/* SMALL SCREEN */}{/* SMALL SCREEN */}{/* SMALL SCREEN */}
67-
{/* SMALL SCREEN */}{/* SMALL SCREEN */}{/* SMALL SCREEN */}{/* SMALL SCREEN */}
72+
{/* SMALL SCREEN */}
73+
{/* SMALL SCREEN */}
74+
{/* SMALL SCREEN */}
75+
{/* SMALL SCREEN */}
76+
{/* SMALL SCREEN */}
77+
{/* SMALL SCREEN */}
78+
{/* SMALL SCREEN */}
79+
{/* SMALL SCREEN */}
80+
{/* SMALL SCREEN */}
81+
{/* SMALL SCREEN */}
82+
{/* SMALL SCREEN */}
83+
{/* SMALL SCREEN */}
6884
<div className="login-box2 smallScreen">
6985
<h2>{product.name}</h2>
70-
<img className="cardProductImg2" src={product.url} alt="product" />
86+
{product.url.length === 1 ? <img className="cardProductImg2" src={product.url} alt="product" /> : <Carousel justify="true" >{this.renderCarrousel(product.url)}</Carousel>}
7187
<form>
7288
<div className="user-box2">
7389
<h4>Description:</h4>
@@ -91,20 +107,30 @@ class ProductCardComponent2 extends Component {
91107
/>
92108
</form>
93109
</div>
94-
95-
{/* BIG SCREEN */}{/* BIG SCREEN */}{/* BIG SCREEN */}{/* BIG SCREEN */}
96-
{/* BIG SCREEN */}{/* BIG SCREEN */}{/* BIG SCREEN */}{/* BIG SCREEN */}
97-
{/* BIG SCREEN */}{/* BIG SCREEN */}{/* BIG SCREEN */}{/* BIG SCREEN */}
110+
111+
{/* BIG SCREEN */}
112+
{/* BIG SCREEN */}
113+
{/* BIG SCREEN */}
114+
{/* BIG SCREEN */}
115+
{/* BIG SCREEN */}
116+
{/* BIG SCREEN */}
117+
{/* BIG SCREEN */}
118+
{/* BIG SCREEN */}
119+
{/* BIG SCREEN */}
120+
{/* BIG SCREEN */}
121+
{/* BIG SCREEN */}
122+
{/* BIG SCREEN */}
98123
<div className="bigScreen">
99124
<Card className="mb-3 login-box2">
100125
<Row className="no-gutters">
101126
<Col className="md-4">
102-
<Card.Img className="cardImgProduct" src={product.url} />
127+
{product.url.length === 1 ? <img className="cardProductImg2" src={product.url} alt="product" /> : <Carousel justify="true" >{this.renderCarrousel(product.url)}</Carousel>}
103128
</Col>
104129
<Col className="md-8">
105130
<Card.Body>
106131
<Card.Title className="titleCard">
107132
<h2>{product.name}</h2>
133+
108134
</Card.Title>
109135
<Card.Body className="subTitleCard">
110136
<h4>Description:</h4>
@@ -122,7 +148,7 @@ class ProductCardComponent2 extends Component {
122148
text={
123149
product.promotionIsActive === 1
124150
? reducPrice
125-
: product.prices +" $"
151+
: product.prices + " $"
126152
}
127153
click={this.addButtonIsClick.bind(this)}
128154
className="downButton"

‎src/Styles/ListOfProduct.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ body {
2727
object-fit: contain;
2828
}
2929
.colorSalePrice{
30-
color: rgb(247, 10, 10);
30+
color: rgb(10, 247, 30);
3131
font-weight: bolder;
3232
}
3333

‎src/Styles/ProductCardComponent.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,9 @@ body {
9898
#saleLogoProductCardComponent{
9999
width: 100px;
100100
}
101+
.imgCarousel{
102+
margin: auto;
103+
width: 100%;
104+
object-fit: cover;
105+
height: 500px;
106+
}

0 commit comments

Comments
 (0)