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.
 
 
 

178 lines
5.2 KiB

import React, { Component } from "react";
import FilterListIcon from "@material-ui/icons/FilterList";
import { connect } from "react-redux";
import { book } from "~/Redux/actions";
import { Link } from "react-router-dom";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Select from "./Select/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";
import { toast } from "react-toastify";
class Products extends Component {
state = {
search: null,
selectedFilters: {
level: [],
subject: [],
sort: null,
},
};
handleProductSearch = (val) => {
this.setState({
search: val,
});
// this.props.searchBook(val);
};
componentDidUpdate(prevProps, prevState) {
if (
prevState.selectedFilters !== this.state.selectedFilters ||
prevState.search !== this.state.search
) {
this.props.filterBook({
...this.state.selectedFilters,
search: this.state.search,
});
}
}
componentDidMount() {
window.scrollTo(0, 0);
localStorage.removeItem("filter");
if (
window.location.search.slice(
window.location.search.lastIndexOf("?") + 1,
window.location.search.length
) === "cart"
) {
toast.info(window.t("ابتدا یک محصول به سبد خریدتان اضافه کنید."));
}
}
render() {
const { sortFilters, levels, subjects } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div
className={`products d-flex flex-column ${
window.lang === "en" ? "align-items-end" : ""
}`}
>
<Navbar page={"products"} />
<Breadcrumbs />
<div
className={`products__body d-flex ${
window.lang === "en" ? "flex-row-reverse" : ""
}`}
>
{this.props.subjects.length > 0 ? (
<Filters parent={this} />
) : null}
<div
className={`products__body--left d-flex flex-column ${
window.lang === "en" ? "align-items-end" : ""
}`}
>
<Sort
parent={this}
selectedSort={this.state.selectedFilters.sort}
/>
<List />
</div>
</div>
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-products d-flex flex-column">
<Navbar page={"products"} />
<div className="mobile-products__search d-flex">
<input
type="search"
style={{
fontSize: 15,
textAlign: window.lang === "en" ? "left" : "",
}}
placeholder={window.t("جستجو")}
onChange={(e) => this.handleProductSearch(e.target.value)}
/>
<img src={navbarSearch} alt={window.t("جستجو")} />
</div>
<div className="mobile-products__filters d-flex">
<div
className={`d-flex ${
window.lang === "en" ? "flex-row-reverse" : ""
}`}
>
<Select name="sort" options={sortFilters} parent={this} />
<Select name="subject" options={subjects} parent={this} />
<Select name="level" options={levels} parent={this} />
</div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div>
<List search={this.state.search} />
<div
className="d-flex"
style={{
position: "fixed",
bottom: 1,
width: "100%",
height: "40px",
left: 0,
}}
>
<Link
to={"/cart"}
style={{
width: "100%",
color: "white",
backgroundColor: "#7fc75d",
cursor: "pointer",
borderRadius: 8,
textDecoration: "none",
padding: "5px 10px",
margin: "5px 10px 1px",
textAlign: "center",
}}
>
{window.t("سبد خرید")}{" "}
</Link>
</div>
</div>
</>
) : null}
</>
);
}
}
export default connect(
(state) => ({
subjects: state.book.subjects,
levels: state.book.levels,
sortFilters: state.book.sortFilters,
}),
{
searchBook: book.searchBook,
filterBook: book.filterBook,
}
)(Products);
Products.defaultProps = {
sortItems: [window.t("پرفروش ترین"), window.t("جدیدترین")],
};