App.js

import React, { Component } from "react";
import "./App.css";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import Section from "../Section/Section";
import Categories from "../Section/Categories";
import Trademark from "../Section/Trademark";
import Supplier from "../Section/Supplier";
import ProfileProduct from "../Section/ProductProfile";
import Cart from "../Cart/Cart";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import axios from "axios";
import Decorator from "../Header/Decorator";

class App extends Component {
  constructor() {
    super();
    this.state = {
      products: [],
      page: 0,
      categories: [],
      trademarks: [],
      suppliers: [],
      total: 0,
      cart: [],
      money: 0,
      queryFilter: {
        name: "",
        category: "",
        trademark: "",
        supplier: "",
        minprice: "",
        maxprice: "",
        sort: "",
      },
    };
    this.addCart = this.addCart.bind(this);
  }

  addCart(data) {
    this.setState({
      total: this.state.total + 1,
      cart: [...this.state.cart, data],
      money: this.state.money + data.price,
    });
  }

  async componentDidMount() {
    const [
      firstResponse,
      secondResponse,
      thirdResponse,
      fourthResponse,
    ] = await Promise.all([
      axios.get(`http://127.0.0.1:8000/api/v1/products/`),
      axios.get(`http://127.0.0.1:8000/api/v1/categories/`),
      axios.get(`http://127.0.0.1:8000/api/v1/trademarks/`),
      axios.get(`http://127.0.0.1:8000/api/v1/suppliers/`),
    ]);
    this.setState({
      products: firstResponse.data.results,
      categories: secondResponse.data.results,
      trademarks: thirdResponse.data.results,
      suppliers: fourthResponse.data.results,
    });
  }

  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Header total={this.state.total} />
          <Decorator
            categories={this.state.categories}
            trademarks={this.state.trademarks}
            suppliers={this.state.suppliers}
            queryFilter={this.state.queryFilter}
            changeFilter={(value) => this.setState(value)}
          />
          <Switch>
            <Route exact path="/">
              <Section products={this.state.products} addCart={this.addCart} />
            </Route>
            <Route exact path="/product/detail">
              <ProfileProduct />
            </Route>
            <Route exact path="/cart">
              <Cart
                cart={this.state.cart}
                total={this.state.total}
                money={this.state.money}
              />
            </Route>
            <Route exact path="/categories">
              <Categories categories={this.state.categories} />
            </Route>
            <Route exact path="/trademarks">
              <Trademark trademarks={this.state.trademarks} />
            </Route>
            <Route exact path="/suppliers">
              <Supplier suppliers={this.state.suppliers} />
            </Route>
          </Switch>
          <Footer />
        </BrowserRouter>
      </div>
    );
  }
}
export default App;

Cart.js

import React, { Component } from "react";

class Cart extends Component {
  constructor(props) {
    super(props);
    this.renderCart = this.renderCart.bind(this);
  }

  renderCart = () => {
    var cart = [];
    cart = this.props.cart.map((data, index) => (
      <tr>
        <td>{data.id}</td>
        <td>{data.name}</td>
        <td>{data.price}</td>
      </tr>
    ));
    return cart;
  };

  render() {
    return (
      <table striped bordered hover>
        <thead>
          <tr>
            <th>STT</th>
            <th>Tên</th>
            <th>Giá</th>
          </tr>
        </thead>
        <tbody>{this.renderCart()}</tbody>
      </table>
    );
  }
}
export default Cart;

ProductProfile.js

import React, { Component } from "react";
import axios from "axios";

class ProductProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productdetail: {},
    };
  }
  componentDidMount() {
    const urlParam = new URLSearchParams(window.location.search);
    var id = urlParam.get("id");
    console.log(id);
    axios
      .get(`http://127.0.0.1:8000/api/v1/product/${id}/`)
      .then((res) => {
        const persons = res.data;
        this.setState({ productdetail: res.data });
      })
      .catch((err) => console.log(err));
  }

  render() {
    return (
      <div className="section group">
        <div className="cont-desc span_1_of_2">
          <div className="product-details">
            <div className="grid images_3_of_2">
              <div id="container">
                <div id="products_example">
                  <div id="products">
                    <img
                      src={this.state.productdetail.main_image}
                      alt={this.state.productdetail.name}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="desc span_3_of_2">
          <h2>{this.state.productdetail.name}</h2>
          <p>{this.state.productdetail.description}</p>
          <div className="price">
            <p>
              Giá: <span>{this.state.productdetail.price}</span>
            </p>
          </div>
          <div className="available">
            <ul>
              <li>
                Màu:
                <select>
                  <option>Silver</option>
                  <option>Black</option>
                  <option>Dark Black</option>
                  <option>Red</option>
                </select>
              </li>
            </ul>
          </div>
          <div className="share-desc">
            <div className="share">
              <p>Share Product :</p>
              <ul>
                <li>
                  <a href="#">
                    <img src="images/facebook.png" alt="" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/twitter.png" alt="" />
                  </a>
                </li>
              </ul>
            </div>
            <div className="button">
              <span>
                <a href="#">Add to Cart</a>
              </span>
            </div>
            <div className="clear" />
          </div>
          <div className="wish-list">
            <ul>
              <li className="wish">
                <a href="#">Add to Wishlist</a>
              </li>
              <li className="compare">
                <a href="#">Add to Compare</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}
export default ProductProfile;

Section.js

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Section extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      product: [],
    };
    this.renderProducts = this.renderProducts.bind(this);
  }

  renderProducts = () => {
    var products = [];
    products = this.props.products.map((data, index) => (
      <div className="grid_1_of_4 images_1_of_4">
        <Link to={`/product/detail?id=${data.id}`}>
          <img src={data.main_image} alt="" />
        </Link>
        <Link to="/product/detail"> {data.name} </Link>
        <div className="price-details">
          <div className="price-number">
            <p>
              <span className="rupees">
                {Number(data.price)}
                VNĐ
              </span>
            </p>
          </div>
          <div class="add-cart">
            <h4>
              <button onClick={() => this.props.addCart(data)}>
                Add to Cart
              </button>
            </h4>
          </div>
          <div className="clear" />
        </div>
      </div>
    ));
    return products;
  };

  render() {
    return (
      <div className="main">
        <div className="content">
          <div className="content_top">
            <div className="heading">
              <h3> New Products </h3>{" "}
            </div>{" "}
            <div className="see">
              <p>
                <a href="#"> See all Products </a>{" "}
              </p>{" "}
            </div>{" "}
            <div className="clear" />
          </div>{" "}
          <div className="section group"> {this.renderProducts()} </div>{" "}
        </div>{" "}
      </div>
    );
  }
}
export default Section;