· 6 years ago · Dec 15, 2019, 03:50 PM
1import React, { useEffect, useState } from 'react'
2import PropTypes from 'prop-types'
3import { connect } from 'react-redux'
4
5/** ACTIONS */
6import { getCategories, getProductByFilters } from 'store/actions'
7
8/** Layout */
9import { Content, Loading } from 'features/layouts'
10
11/** Component */
12import CheckBox from './components/Categories/CheckBox'
13import Card from 'features/components/Partials/Card'
14
15/** Fixed price*/
16import { price } from './FixedPrice'
17import RadioBox from './components/Price/RadioBox'
18
19const Shop = ({
20 filterProduct,
21 getCategories,
22 getProductByFilters,
23 filterProduct: { filters, more },
24 categoriesShop: { allCategories, loading },
25}) => {
26 /** état */
27 const [myFilters, setMyFilters] = useState({
28 filters: { category: [], price: [] },
29 })
30 const [limit, setLimit] = useState(5)
31 const [skip, setSkip] = useState(0)
32 let [filteredResults, setFilteredResults] = useState([])
33 const [size, setSize] = useState(0)
34
35 /** Charge les categories*/
36 const loadApiCategories = () => {
37 setTimeout(() => getCategories(), 1000)
38 }
39
40 /** Permet le chargement des résultat */
41 const loadFiltersResults = async newFilters => {
42 getProductByFilters(skip, limit, newFilters)
43 setFilteredResults([filters])
44 setSize(size)
45 setSkip(0)
46 }
47
48 // récupère les données en api
49 useEffect(
50 () => {
51 loadApiCategories()
52
53 // Précharge les données Api
54 loadFiltersResults()
55 },
56 [getCategories]
57 )
58
59 /** Permet le chargement du reste des produits */
60 const loadMoreProducts = async () => {
61 let toSkip = skip + limit
62 getProductByFilters(toSkip, limit, myFilters)
63 setFilteredResults(filters)
64 setSize(size)
65 setSkip(toSkip)
66 loadFiltersResults(filters)
67
68 console.log(g)
69 }
70
71 const buttonLoadMore = () => {
72 return (
73 filters.size &&
74 filters.size >= limit && (
75 <button onClick={loadMoreProducts} className="btn btn-dark mb-5">
76 Charger plus de produits
77 </button>
78 )
79 )
80 }
81
82 /** Permet d'afficher un tableau de prix */
83 const handlePrice = value => {
84 const data = price
85 let array = []
86
87 for (let key in data) {
88 if (data[key]._id === parseInt(value)) {
89 array = data[key].array
90 }
91 }
92
93 return array
94 }
95
96 /** Permettra de filtrer par prix catégorie */
97 const handleFilter = (filters, filterBy) => {
98 //console.log(filters, filterBy)
99 const newFilters = { ...myFilters }
100 newFilters.filters[filterBy] = filters
101
102 if (filterBy === 'price') {
103 // extrait le tableau de valeur
104 let priceValue = handlePrice(filters)
105 newFilters.filters[filterBy] = priceValue
106 }
107
108 loadFiltersResults(myFilters.filters)
109 setMyFilters(newFilters)
110 }
111
112 return loading ? (
113 <Loading />
114 ) : (
115 <Content
116 title="Magasin"
117 description="Chercher et trouver le produits de votre choix ?."
118 className="container"
119 >
120 <div className="row">
121 <div className="col-md-3 ">
122 <h2 className="text-muted"> Filtres</h2>
123 <hr />
124 <h4 className="text-muted"> Categories:</h4>
125 <ul>
126 <CheckBox
127 allCategories={allCategories}
128 handleFilter={filters => handleFilter(filters, 'category')}
129 />
130 </ul>
131
132 <h4 className="text-muted"> Prix:</h4>
133
134 <RadioBox
135 price={price}
136 handleFilter={filters => handleFilter(filters, 'price')}
137 />
138 </div>
139 <div className="col-md-9">
140 <h2 className="text-muted"> Filtrer par prix:</h2>
141 <hr />
142 <div className="row">
143 {filters.products.map((product, index) => (
144 <Card key={index} product={product} />
145 ))}
146 </div>
147
148 {buttonLoadMore()}
149 </div>
150 </div>
151 </Content>
152 )
153}
154
155Shop.propTypes = {
156 categoriesShop: PropTypes.object.isRequired,
157 filterProduct: PropTypes.object.isRequired,
158 getCategories: PropTypes.func.isRequired,
159 getProductByFilters: PropTypes.func.isRequired,
160}
161
162const mapStateToProps = state => ({
163 categoriesShop: state.categoriesShop,
164 filterProduct: state.filterProduct,
165})
166
167export default connect(mapStateToProps, { getCategories, getProductByFilters })(Shop)