You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

158 lines
4.6 KiB

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: ["اول", "دوم", "سوم", "دهم"],
};