orderHistory done component in basket for test

Author: revolalex

src/Api/database/db.js

@@ -26,6 +26,11 @@ connection.connect(function(err) {
  connection.query(productTable, function(err, results) {
  if (err) throw err;
  });
+ let basketTable =
+ "CREATE TABLE IF NOT EXISTS basket (id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,category VARCHAR(30) NOT NULL, name VARCHAR(200) NOT NULL, description VARCHAR(500) NOT NULL, prices FLOAT(10) NOT NULL, url VARCHAR(200) NOT NULL, quantity INT(10) NOT NULL,id_product INT(10) NOT NULL, id_user_affiliate INT(10) NOT NULL)";
+ connection.query(basketTable, (err) => {
+ if (err) throw err;
+ });
 });
 
 module.exports = connection;

src/Api/routes/route.js

@@ -197,7 +197,16 @@ const appRouter = async function(app, connection) {
  // POST /productEdit/:id => Update this specific product from the database
  await app.post("/productEdit/:id", auth, (req, res) => {
  if (req.body.idUser === req.body.id_user_affiliate) {
- let sql = `UPDATE products SET category = '${req.body.category.charAt(0).toUpperCase() + req.body.category.slice(1)}', name = '${req.body.name.charAt(0).toUpperCase() + req.body.name.slice(1)}', description = '${req.body.description}', prices = '${req.body.prices}',url = '${req.body.url}' WHERE id = ${req.params.id}`;
+ let sql = `UPDATE products SET category = '${req.body.category
+ .charAt(0)
+ .toUpperCase() +
+ req.body.category.slice(1)}', name = '${req.body.name
+ .charAt(0)
+ .toUpperCase() + req.body.name.slice(1)}', description = '${
+ req.body.description
+ }', prices = '${req.body.prices}',url = '${req.body.url}' WHERE id = ${
+ req.params.id
+ }`;
  connection.query(sql, (err) => {
  if (err) {
  console.log(err);
@@ -236,5 +245,44 @@ const appRouter = async function(app, connection) {
  res.send("Id incorrect");
  }
  });
+
+ /**************************** API BASKET ***********************************/
+ /*****************************************************************************/
+
+ /* Get All Order History where id_user_affiliate = */
+ await app.get("/basketHistory/:id", (req, res) => {
+ let getHistory = `SELECT * FROM basket where id_user_affiliate = ${req.params.id};`
+ connection.query(getHistory, (err, results)=>{
+ if (err) throw err
+ res.send(results);
+ })
+ });
+
+
+
+ await app.post("/panier/", (req, res) => {
+ let update = `DELETE FROM basket WHERE id_user_affiliate = ${req.body[0].id_user_affiliate}`;
+ connection.query(update, (err) => {
+ if (err) console.log(err);
+ });
+ let sql =
+ "INSERT INTO basket (category,name,description,prices,url,quantity,id_product,id_user_affiliate) VALUES (?)";
+ for (i = 0; i < req.body.length; i++) {
+ let product = [
+ req.body[i].category,
+ req.body[i].name,
+ req.body[i].description,
+ req.body[i].prices,
+ req.body[i].url,
+ req.body[i].quantity,
+ req.body[i].id,
+ req.body[i].id_user_affiliate,
+ ];
+ connection.query(sql, [product], (err) => {
+ if (err) console.log(err);
+ });
+ }
+ res.send("Stockés");
+ });
 };
 module.exports = appRouter;

src/Components/Basket/BasketComponent.js

@@ -2,10 +2,13 @@ import React, { Component } from "react";
 import {
  deleteProductFromCart,
  increaseCounter,
- decreaseCounter, resetCart
+ decreaseCounter,
 } from "../../store/actions/cart";
 import { connect } from "react-redux";
 import "../../Styles/BasketComponent.css";
+import Buttton from "../Small/ButtonComponent";
+import OrderComponent from '../OrderComponent'
+import axios from "axios";
 import {
  Card,
  Col,
@@ -15,21 +18,29 @@ import {
  Form,
  ListGroup,
 } from "react-bootstrap";
-
 class BasketComponent extends Component {
  deleteClick(index) {
  this.props.deleteProductFromCart(this.props.productBasket[index]);
- alert(`${this.props.productBasket[index].name} has been deleted from your basket`)
+ alert(
+ `${this.props.productBasket[index].name} has been deleted from your basket`
+ );
  }
 
- increase(product){
- this.props.increaseCounter(product)
+ increase(product) {
+ this.props.increaseCounter(product);
+ }
+ decrease(product) {
+ this.props.decreaseCounter(product);
  }
- decrease(product){
- this.props.decreaseCounter(product)
+ storeBasket(e) {
+ console.log(this.props.productBasket);
+ e.preventDefault();
+ axios.post("http://localhost:8080/panier", this.props.productBasket);
+ setTimeout(function() {
+ alert("Basket Validate");
+ }, 1000);
  }
  renderProduct(product, index) {
- console.log(product);
  return (
  <Container className="basketCard" key={index}>
  <Row>
@@ -55,8 +66,18 @@ class BasketComponent extends Component {
  </ListGroup.Item>
  </ListGroup>
  <Form inline>
- <Button variant="info" onClick={this.increase.bind(this,product)}>+1</Button>
- <Button variant="warning" onClick={this.decrease.bind(this,product)}>-1</Button>
+ <Button
+ variant="info"
+ onClick={this.increase.bind(this, product)}
+ >
+ +1
+ </Button>
+ <Button
+ variant="warning"
+ onClick={this.decrease.bind(this, product)}
+ >
+ -1
+ </Button>
  <Button variant="danger">
  <img
  className="trashBasket"
@@ -74,32 +95,34 @@ class BasketComponent extends Component {
  }
 
  render() {
- console.log(this.props);
- if(this.props.productBasket){
- return (
- <div>
- {this.props.productBasket.map((product, index) =>
- this.renderProduct(product, index)
- )}
- </div>
- );} else {
- return(
- <div></div>
- )
+ if (this.props.productBasket.length !== 0) {
+ return (
+ <div>
+ {this.props.productBasket.map((product, index) =>
+ this.renderProduct(product, index)
+ )}
+ <Buttton
+ text="Save Basket"
+ link="/paiement"
+ click={this.storeBasket.bind(this)}
+ />
+ <OrderComponent/>
+ </div>
+ );
+ } else {
+ return <div></div>;
  }
-
  }
 }
 
 const mapDispatchToProps = {
  deleteProductFromCart,
  increaseCounter,
  decreaseCounter,
- resetCart
 };
 
 const mapStateToProps = (state) => ({
  productBasket: state.cartReducer.productBasket,
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(BasketComponent);
+export default connect(mapStateToProps, mapDispatchToProps)(BasketComponent);

src/Components/OrderComponent.css

@@ -0,0 +1,83 @@
+import React, { Component } from "react";
+import { Card, Col, Row, Button } from "react-bootstrap";
+import axios from "axios";
+import "./OrderComponent.css";
+import "../Styles/ListOfProduct.css";
+import { setHistoryOrders, resetHistoryOrders } from "../store/actions/orders";
+import { connect } from "react-redux";
+
+class OrderComponent extends Component {
+ componentDidMount() {
+ axios
+ .get(`http://localhost:8080/basketHistory/${20}`)
+ .then((result) => {
+ console.log("ICI", result.data);
+ this.props.setHistoryOrders(result.data);
+ console.log(this.props.old_Orders);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ }
+
+ ButtonIsClick() {
+ this.props.resetHistoryOrders();
+ }
+
+ renderProduct(product, index) {
+ console.log(product);
+ return (
+ <div className="login-box-Edit" key={index}>
+ <Row className="changeUrlP">
+ <Col sm={2}>
+ <img
+ className="basketImg2"
+ src={product.url}
+ alt={product.name}
+ ></img>
+ </Col>
+ <Col sm={5}>
+ <Card.Body>
+ <Card.Title className="productNameTitle">
+ Commande n°:{product.id}
+ </Card.Title>
+ <Card.Text>
+ Category:
+ <br />
+ {product.name}
+ </Card.Text>
+ </Card.Body>
+ </Col>
+ <Col sm={5}>
+ <Card.Body>
+ <Card.Text className="productNameTitle">
+ Price: {product.prices} $
+ </Card.Text>
+ <Button onClick={this.ButtonIsClick.bind(this)} />
+ </Card.Body>
+ </Col>
+ </Row>
+ </div>
+ );
+ }
+
+ render() {
+ return (
+ <div>
+ {this.props.old_Orders.map((product, index) =>
+ this.renderProduct(product, index)
+ )}
+ </div>
+ );
+ }
+}
+const mapDispatchToProps = {
+ setHistoryOrders,
+ resetHistoryOrders,
+};
+
+const mapStateToProps = (state) => ({
+ old_Orders: state.ordersReducer.old_Orders,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(OrderComponent);

src/Components/OrderComponent.js

@@ -12,10 +12,11 @@ class ProductCardComponent2 extends Component {
  axios
  .get(`http://localhost:8080/products/${this.props.id}`)
  .then((result) => {
+ result.data[0].id_user_affiliate = this.props.idUser
  this.props.setProduct(result.data);
  })
- .catch(() => {
- console.log("Oops, request failed!");
+ .catch((err) => {
+ console.log(err);
  });
  }
  addButtonIsClick(e) {
@@ -109,6 +110,7 @@ const mapStateToProps = (state) => ({
  counter: state.cartReducer.counter,
  product: state.productReducer.product,
  id: state.productReducer.id,
+ idUser: state.userReducer.id,
  productBasket: state.cartReducer.productBasket,
 });
 

src/Components/Product/ProductCardComponent2.js

@@ -34,49 +34,49 @@ class MyRouter extends Component {
  </Route>
  <Route path="/addProduct">
  {this.props.auth === false || undefined ? (
- <Redirect to="/sign-in" />
+ <Redirect to="/sign-up" />
  ) : (
  <CreateProductPage />
  )}
  </Route>
  <Route path="/Users-List">
  {this.props.auth === false || undefined ? (
- <Redirect to="/sign-in" />
+ <Redirect to="/sign-up" />
  ) : (
  <UserListComponent />
  )}
  </Route>
  <Route path="/editProfil">
  {this.props.auth === false || undefined ? (
- <Redirect to="/sign-in" />
+ <Redirect to="/sign-up" />
  ) : (
  <EditProfileComponent />
  )}
  </Route>
  <Route path="/edit-product">
  {this.props.auth === false || undefined ? (
- <Redirect to="/sign-in" />
+ <Redirect to="/sign-up" />
  ) : (
  <EditProductComponent />
  )}
  </Route>
  <Route path="/list-of-products">
  {this.props.auth === false || undefined ? (
- <Redirect to="/sign-in" />
+ <Redirect to="/sign-up" />
  ) : (
  <ListOfProducts />
  )}
  </Route>
  <Route path="/productCard2">
  {this.props.auth === false || undefined ? (
- <Redirect to="/sign-in" />
+ <Redirect to="/sign-up" />
  ) : (
  <ProductCardComponent2 />
  )}
  </Route>
  <Route path="/basket">
  {this.props.auth === false || undefined ? (
- <Redirect to="/sign-in" />
+ <Redirect to="/sign-up" />
  ) : (
  <BasketComponent />
  )}

src/Components/Router.js

@@ -26,3 +26,6 @@ Form Button{
  margin-top: 20px;
  margin-right: 20px;
 }
+
+
+/* ARNAUD */

src/Styles/BasketComponent.css

@@ -0,0 +1,8 @@
+export const setHistoryOrders = (orders) => ({
+ type: "SET_HISTORY_ORDERS",
+ old_Orders: orders,
+});
+
+export const resetHistoryOrders = () => ({
+ type: " RESET_HYSTORY_ORDERS",
+});

src/store/actions/orders.js

@@ -2,9 +2,11 @@ import { combineReducers } from "redux";
 import userReducer from "./user";
 import productReducer from "./product";
 import cartReducer from "./cart"
+import ordersReducer from './orders'
 
 export default combineReducers({
  userReducer,
  productReducer,
- cartReducer
+ cartReducer,
+ ordersReducer
 });