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
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("جدیدترین")], |
|
};
|
|
|