promotion visible in list-of-product

Author: revolalex

src/Components/Basket/BasketComponent.js

@@ -81,12 +81,14 @@ class BasketComponent extends Component {
  >
  -1
  </Button>
- <Button variant="danger">
+ <Button
+ variant="danger"
+ onClick={this.deleteClick.bind(this, index)}
+ >
  <img
  className="trashBasket"
  src="https://img.icons8.com/carbon-copy/100/000000/trash.png"
  alt="trash"
- onClick={this.deleteClick.bind(this, index)}
  />
  </Button>
  </Form>

src/Components/Orders/OrderComponent.js

@@ -8,7 +8,7 @@ import {
  resetHistoryOrders,
 } from "../../store/actions/orders";
 import { connect } from "react-redux";
-import TitleComponent from "../Small/TitleComponent"
+import TitleComponent from "../Small/TitleComponent";
 
 class OrderComponent extends Component {
  componentDidMount() {
@@ -63,6 +63,10 @@ class OrderComponent extends Component {
  <p className="productNameTitle">Description:</p>
  {product.description}
  </Card.Text>
+ <Card.Text>
+ <p className="productNameTitle"> Qty:</p>
+ {product.quantity}
+ </Card.Text>
  </Card.Body>
  </Col>
  </Row>
@@ -71,12 +75,12 @@ class OrderComponent extends Component {
  }
 
  render() {
- let a = "You have"
- let b = "never ordered"
- if (this.props.old_Orders.length>1) {
+ let a = "You have";
+ let b = "never ordered";
+ if (this.props.old_Orders.length > 1) {
  return (
  <div>
- <TitleComponent text1="Orders" text2="&nbsp;History"/>
+ <TitleComponent text1="Orders" text2="&nbsp;History" />
  {/* <h1 className="pageTitle">Orders History</h1> */}
  {this.props.old_Orders.map((product, index) =>
  this.renderProduct(product, index)
@@ -89,7 +93,7 @@ class OrderComponent extends Component {
  <div class="container2">
  <h1>
  <div class="animation">
- <span class="first">{a}</span> 
+ <span class="first">{a}</span>
  <span class="oh">
  <span class="second">&nbsp;{b}</span>
  </span>

src/Components/Product/ListOfProductsComponent.js

@@ -28,30 +28,30 @@ class ProductListPage extends Component {
  }
 
  render() {
- //store in navCategory all te different category of products
+ //store in navCategory all the different category of products
  let product = this.props.products;
  let navCategory = [];
  product.forEach((element) => {
  if (element.category) {
- // if test not contains this category add it
+ // if array not contains this category add it
  if (!navCategory.includes(element.category)) {
  navCategory.push(element.category);
  }
  }
  });
  return (
  <div id="myRow">
- <NavDropdown
- title="Category"
- id="nav-dropdown"
- onSelect={this.categorySet.bind(this)}
- >
- <NavDropdown.Item eventKey="All">All</NavDropdown.Item>
- {navCategory.map((product) => this.renderCategory(product))}
- 
- </NavDropdown>
-
  <TitleComponent text1="Products" text2="&nbsp;list" />
+ <div>
+ <NavDropdown
+ title="Category"
+ id="nav-dropdown"
+ onSelect={this.categorySet.bind(this)}
+ >
+ <NavDropdown.Item eventKey="All">All</NavDropdown.Item>
+ {navCategory.map((product) => this.renderCategory(product))}
+ </NavDropdown>
+ </div>
 
  <Container className="testContainer">
  <Row className="justify-content-md-center">
@@ -62,7 +62,7 @@ class ProductListPage extends Component {
  );
  }
 
- //use to show all the different category of products
+ //use to show all the different category of products in NavDrop
  renderCategory(category) {
  return (
  <div key={category}>
@@ -72,7 +72,10 @@ class ProductListPage extends Component {
  }
 
  renderProduct(product) {
- if (product.category === `${this.props.category}`|| this.props.category === "All") {
+ if (
+ product.category === `${this.props.category}` ||
+ this.props.category === "All"
+ ) {
  return (
  <Col className="testCol" md="auto" key={product.id}>
  <Card
@@ -96,9 +99,8 @@ class ProductListPage extends Component {
  More Info
  </a>
  </Card.Body>
- <Card.Footer id="footerCard" text="light">
- {product.prices} €
- </Card.Footer>
+ <Card.Footer className={product.promotionIsActive === 1 ? "colorSalePrice" : ""} id="footerCard" text="light">{product.promotionIsActive === 1 ? product.promotion : product.prices} €</Card.Footer>
+
  </Card>
  </Col>
  );

src/Components/Product/ProductCardComponent2.js

@@ -49,7 +49,9 @@ class ProductCardComponent2 extends Component {
  )
  }
  }
+ 
  renderProduct(product) {
+ let reducPrice = `${product.promotion} $`
  return (
  <div>
  <div className="login-box2 smallScreen">
@@ -71,7 +73,7 @@ class ProductCardComponent2 extends Component {
  <p>{product.lastName} {product.firstName}</p>
  </div>
  <ButtonComponent
- text={"Buy " + product.prices + " $"}
+ text={"Buy" + product.prices + " $"}
  click={this.addButtonIsClick.bind(this)}
  />
  </form>
@@ -99,7 +101,7 @@ class ProductCardComponent2 extends Component {
  <p>{product.lastName} {product.firstName}</p>
  </Card.Body>
  <ButtonComponent
- text={"Buy" + product.prices + "$"}
+ text={product.promotionIsActive === 1 ? reducPrice: product.prices} 
  click={this.addButtonIsClick.bind(this)}
  className="downButton"
  />

src/Components/Sign/SignInComponent.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+// allow to connect the component to redux store
 import { connect } from "react-redux";
 import "../../Styles/Sign.css";
 import axios from "axios";

src/Styles/EditProfilComponent.css

@@ -15,7 +15,7 @@ body {
 .login-box-Edit {
  margin: auto;
  margin-top: 10vh;
- width: 70%;
+ width: 50%;
  padding: 40px;
  background: rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
@@ -74,6 +74,7 @@ body {
  left: 50%;
  padding: 40px;
  margin-bottom: 40%;
+ width: 70%;
  }
  html {
  height: 150%;
@@ -132,6 +133,6 @@ body {
  margin-left: 40%;
  margin-bottom: 40px;
 }
-.editDiv {
+/* .editDiv {
 
-}
+} */

src/Styles/ListOfProduct.css

@@ -6,9 +6,8 @@ body {
  min-height: 500px;
  max-height: 500px;
  opacity: 0.75;
- 
 }
-#footerCard{
+#footerCard {
  position: absolute;
 }
 .box:hover {
@@ -22,9 +21,14 @@ body {
 }
 .testCol {
  padding-bottom: 10vh;
-
 }
 .testImg {
  height: 200px;
  object-fit: contain;
 }
+.colorSalePrice{
+ color: rgb(38, 247, 10);
+ font-weight: bolder;
+}
+
+

src/index.js

@@ -1,47 +1,49 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import{Provider} from "react-redux"
-import { BrowserRouter } from 'react-router-dom'
-import {persistStore,persistReducer} from "redux-persist";
-import {PersistGate} from "redux-persist/integration/react";
-import { createStore } from 'redux'
-import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
+import { persistStore, persistReducer } from "redux-persist";
+import { PersistGate } from "redux-persist/integration/react";
+import { createStore } from "redux";
+import storage from "redux-persist/lib/storage"; // defaults to localStorage for web
+// all th reducer
 import indexReducer from "./store/reducer/index";
 
- 
+//PersistData
 const persistConfig = {
- key: 'root',
+ key: "root",
  storage,
-}
- 
-const persistedReducer = persistReducer(persistConfig, indexReducer)
-
-let store = createStore(persistedReducer,
- window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
-)
+};
+const persistedReducer = persistReducer(persistConfig, indexReducer);
 
+let store = createStore(
+ persistedReducer,
+ //window dev extension
+ window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
 const persistor = persistStore(store);
 
 ReactDOM.render(
- // we need to make the store available to our app. 
- // To do this, we wrap our app with the <Provider /> 
+ // we need to make the store available to our app.
+ // To do this, we wrap our app with the <Provider />
  // API provided by React Redux. store is passed in as a prop
- <Provider store={store}>
- <PersistGate persistor={persistor}>
- <BrowserRouter>
+
+
+ <Provider store={store}>{/* Attach the store so all the component have acces */}
+ <PersistGate persistor={persistor}>{/* Attach persit */}
+ <BrowserRouter> {/* Attach Router */}
  <App />
  </BrowserRouter>
  </PersistGate>
  </Provider>,
- document.getElementById('root')
+ document.getElementById("root")
 );
 
-
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();

src/store/reducer/cart.js

@@ -2,11 +2,13 @@ const initialState = {
  productBasket: [],
  total: 0,
 };
+
+// to handle the qty of the same product
 let item = {};
+
 const cartReducer = (state = initialState, action) => {
  switch (action.type) {
  case "ADD_PRODUCT_TO_CART":
- console.log("ICI",action.productBasket); // undefined
  item = state.productBasket.find(
  (element) => element.id === action.productBasket.id
  );