wAYpKqbQ

1import React from 'react';
2import { Link } from 'react-router-dom';
3
4import Search from './Search';
5import ProductCard from './ProductCard';
6import * as api from '../services/api';
7import NotFound from './NotFound';
8import CategoryList from './CategoryList';
9import Loading from './Loading';
10
11import shoppingCart from '../images/shopping-cart-svgrepo-com.svg';
12import logo4em1 from '../images/4em1.svg';
13
14import '../styles/home.css';
15
16class Home extends React.Component {
17  constructor(props) {
18    super(props);
19    this.state = {
20      category: '',
21      inputText: '',
22      productsList: [],
23      haveProduct: false,
24      productLoad: false,
25      count: null,
26    };
27    this.searchText = this.searchText.bind(this);
28    this.categorieSelected = this.categorieSelected.bind(this);
29    this.onClick = this.onClick.bind(this);
30    this.countProductsCart = this.countProductsCart.bind(this);
31  }
32
33  componentDidMount() {
34    this.countProductsCart();
35  }
36
37  async onClick() {
38    const { inputText, category } = this.state;
39    const getListodProducts = await api
40      .getProductsFromCategoryAndQuery(category, inputText);
41    if (getListodProducts.results !== null) {
42      this.setState({
43        productsList: getListodProducts.results,
44        haveProduct: true,
45        productLoad: true,
46      });
47    } else {
48      return <NotFound />;
49    }
50  }
51
52  searchText(event) {
53    const { target } = event;
54    this.setState({
55      inputText: target.value,
56    });
57  }
58
59  async categorieSelected(category) {
60    const getproducts = await api.getProductsFromCategoryAndQuery(category);
61    this.setState({
62      category,
63      productsList: getproducts.results,
64      haveProduct: true,
65      productLoad: true,
66    });
67  }
68
69  countProductsCart() {
70    const storage = JSON.parse(localStorage.getItem('cart'));
71    if (storage) {
72      this.setState({
73        count: (storage.length),
74      });
75    }
76  }
77
78  render() {
79    const { productsList, haveProduct, count, productLoad } = this.state;
80
81    return (
82      <div className="main-div">
83        <div className="top-section">
84          <img className="logo-4em1" src={ logo4em1 } alt="4 em 1 logo" />
85          <Search
86            clasName="search-bar"
87            searchText={ this.searchText }
88            onClick={ this.onClick }
89          />
90          <div>
91            <Link
92              className="shopping-cart-button"
93              to="/cart"
94              data-testid="shopping-cart-button"
95            >
96              <div data-testid="shopping-cart-size" className="number-cart">{count}</div>
97              <img className="cart-icon" src={ shoppingCart } alt="cart icon" />
98            </Link>
99          </div>
100        </div>
101
102        <div className="main-content-list-cards">
103          <div className="category-list">
104            <CategoryList categorieSelected={ this.categorieSelected } />
105          </div>
106          {haveProduct ? (
107            <div className="product-card">
108              {productsList.map((product) => (
109                <ProductCard
110                  className="card"
111                  key={ product.id }
112                  product={ product }
113                  countProductsCart={ this.countProductsCart }
114                  data-testid="product-detail-link"
115                />
116              ))}
117            </div>
118          ) : (
119            <div className="text-main-page" data-testid="home-initial-message">
120              Digite algum termo de pesquisa ou escolha uma categoria.
121            </div>
122          )}
123        </div>
124      </div>
125    );
126  }
127}
128
129export default Home;
130