|
|
import React, { Component } from "react"; |
|
|
import FilterListIcon from "@material-ui/icons/FilterList"; |
|
|
import Loader from "~/components/Loader/index"; |
|
|
import { connect } from "react-redux"; |
|
|
import { book } from "~/Redux/actions"; |
|
|
|
|
|
import Navbar from "../Home/Navbar/index"; |
|
|
import Footer from "../Home/Footer/index"; |
|
|
import Select from "./Select/index"; |
|
|
import Product from "./Product/index"; |
|
|
import Breadcrumbs from "./BreadCrumb/index"; |
|
|
import List from "./List/index"; |
|
|
import Sort from "./Sort/index"; |
|
|
import Filters from "./Filters/index"; |
|
|
|
|
|
import navbarSearch from "../../assets/icons/navbarSearch.png"; |
|
|
|
|
|
import "./index.scss"; |
|
|
|
|
|
const maxMobileSize = 1250; |
|
|
|
|
|
const fontSize = { |
|
|
mobile: { |
|
|
input: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27, |
|
|
}, |
|
|
}; |
|
|
|
|
|
class Products extends Component { |
|
|
state = { |
|
|
selectedSort: null, |
|
|
selectedFilters: { |
|
|
level: [], |
|
|
subject: [], |
|
|
}, |
|
|
firstFilters: [ |
|
|
{ id: 0, value: "محبوب ترین" }, |
|
|
{ id: 1, value: "جدیدترین" }, |
|
|
{ id: 2, value: "ارزان ترین" }, |
|
|
], |
|
|
dateFilters: [ |
|
|
{ id: 0, value: "1400" }, |
|
|
{ id: 1, value: "`1399" }, |
|
|
{ id: 2, value: "1398" }, |
|
|
], |
|
|
degreeFilters: [ |
|
|
{ id: 0, value: "اول" }, |
|
|
{ id: 1, value: "دوم" }, |
|
|
{ id: 2, value: "سوم" }, |
|
|
], |
|
|
first: "", |
|
|
date: "", |
|
|
degree: "", |
|
|
}; |
|
|
|
|
|
componentDidMount() { |
|
|
this.props.getList(); |
|
|
} |
|
|
|
|
|
render() { |
|
|
const { dateFilters, degreeFilters, firstFilters } = this.state; |
|
|
const { loading, list, page } = this.props; |
|
|
return ( |
|
|
<> |
|
|
{window.innerWidth > 1000 ? ( |
|
|
list ? ( |
|
|
<> |
|
|
<div className="products d-flex flex-column"> |
|
|
<Navbar page={"products"} /> |
|
|
<Breadcrumbs /> |
|
|
<div className="products__body d-flex"> |
|
|
<Filters parent={this} /> |
|
|
<div className="products__body--left d-flex flex-column"> |
|
|
<Sort |
|
|
parent={this} |
|
|
selectedSort={this.state.selectedSort} |
|
|
/> |
|
|
<List parent={this} /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<Footer /> |
|
|
</> |
|
|
) : ( |
|
|
<div |
|
|
className="d-flex justify-content-center align-items-center" |
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
> |
|
|
<Loader /> |
|
|
</div> |
|
|
) |
|
|
) : null} |
|
|
{window.innerWidth < 1000 ? ( |
|
|
list ? ( |
|
|
<> |
|
|
<div className="mobile-products d-flex flex-column"> |
|
|
<Navbar page={"products"} /> |
|
|
<div className="mobile-products__search d-flex"> |
|
|
<input |
|
|
type="search" |
|
|
style={{ fontSize: fontSize.mobile.input }} |
|
|
placeholder={"جستجو"} |
|
|
/> |
|
|
<img src={navbarSearch} alt="جستجو" /> |
|
|
</div> |
|
|
<div className="mobile-products__filters d-flex"> |
|
|
<div className="d-flex"> |
|
|
<Select name="first" options={firstFilters} parent={this} /> |
|
|
<Select name="date" options={dateFilters} parent={this} /> |
|
|
<Select |
|
|
name="degree" |
|
|
options={degreeFilters} |
|
|
parent={this} |
|
|
/> |
|
|
</div> |
|
|
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> |
|
|
</div> |
|
|
<div className="mobile-products__list d-flex flex-wrap"> |
|
|
{list.map((item, i) => ( |
|
|
<Product product={item} key={i} id={i} /> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
</> |
|
|
) : ( |
|
|
<div |
|
|
className="d-flex justify-content-center align-items-center" |
|
|
style={{ height: "100vh", width: "100vw" }} |
|
|
> |
|
|
<Loader /> |
|
|
</div> |
|
|
) |
|
|
) : null} |
|
|
</> |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
export default connect( |
|
|
(state) => ({ |
|
|
list: state.book.list, |
|
|
loading: state.book.loading, |
|
|
// status: state.user.status, |
|
|
}), |
|
|
{ getList: book.list } |
|
|
)(Products); |
|
|
|
|
|
Products.defaultProps = { |
|
|
sortItems: [ |
|
|
"پربازدیدترین", |
|
|
"پرفروش ترین", |
|
|
"گران ترین", |
|
|
"ارزان ترین", |
|
|
"جدیدترین", |
|
|
"بزودی", |
|
|
], |
|
|
subjects: ["فیزیک", "زیست", "شیمی", "روانشناسی", "علوم", "دین و زندگی"], |
|
|
levels: ["اول", "دوم", "سوم", "دهم"], |
|
|
};
|
|
|
|