reza added filter for desktop

master
RezaAshrafi77 3 years ago
parent 03bc98379a
commit bc0046172b
  1. 3
      src/History/index.js
  2. 3
      src/Redux/actions/book.js
  3. 38
      src/Redux/reducers/book.js
  4. 2
      src/views/Product/MaterialModal/index.js
  5. 2
      src/views/Product/MaterialModal/index.scss
  6. 35
      src/views/Products/Filters/index.js
  7. 107
      src/views/Products/List/index.js
  8. 20
      src/views/Products/Sort/index.js
  9. 68
      src/views/Products/index.js

@ -1,3 +0,0 @@
import { createBrowserHistory } from "history";
export default createBrowserHistory();

@ -29,6 +29,9 @@ const book = {
searchBook: (data) => async (dispatch) => { searchBook: (data) => async (dispatch) => {
dispatch({ type: "book/search", data: data }); dispatch({ type: "book/search", data: data });
}, },
filterBook: (data) => async (dispatch) => {
dispatch({ type: "book/filter", data: data });
},
}; };
export default book; export default book;

@ -1,9 +1,10 @@
const initialState = { const initialState = {
loading: true, loading: true,
error: null, error: null,
list: null, list: [],
info: null, info: null,
searchResult: [], searchResult: [],
filterResult: [],
}; };
export default function book(state = initialState, action) { export default function book(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
@ -30,6 +31,41 @@ export default function book(state = initialState, action) {
item.name.indexOf(data) !== -1 item.name.indexOf(data) !== -1
), ),
}; };
case "book/filter":
const realList =
state.searchResult.length > 0 ? state.searchResult : state.list;
const level = data.level;
const subject = data.subject;
const sort = data.sort;
if (level.length > 0 || subject.length > 0 || sort) {
localStorage.setItem("filter", "ON");
}
let finalSort;
const byLevelFilter =
level.length > 0
? realList.filter(
(item) => item.name.indexOf(level.map((item) => item)) !== -1
)
: realList;
const bySubjectFilter =
subject.length > 0
? byLevelFilter.filter(
(item) => item.name.indexOf(subject.map((item) => item)) !== -1
)
: byLevelFilter;
if (sort === "گران ترین") {
finalSort = bySubjectFilter.sort((item1, item2) => {
return item1.product[0].price - item2.product[0].price;
});
} else {
finalSort = bySubjectFilter;
}
return {
...state,
loading: false,
error: null,
filterResult: finalSort,
};
case "loading": case "loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "error": case "error":

@ -49,7 +49,7 @@ export default function SimpleModal(props) {
const [modalStyle] = React.useState(getModalStyle); const [modalStyle] = React.useState(getModalStyle);
const body = ( const body = (
<div style={modalStyle} className={classes.paper}> <div style={modalStyle} className={classes.paper + " material-modal"}>
<h2 <h2
id="simple-modal-title" id="simple-modal-title"
style={{ style={{

@ -1,3 +1,4 @@
.material-modal {
textarea { textarea {
width: 100%; width: 100%;
font-family: numeralLight; font-family: numeralLight;
@ -21,3 +22,4 @@ button {
border: 0px; border: 0px;
margin-top: 20px; margin-top: 20px;
} }
}

@ -1,20 +1,35 @@
import React from 'react'; import React from "react";
import AppliedFiltesrs from './AppliedFilters/index'; import AppliedFiltesrs from "./AppliedFilters/index";
import TypicalFilters from './TypicalFilters/index'; import TypicalFilters from "./TypicalFilters/index";
import './index.scss'; import "./index.scss";
export default class Filtesrs extends React.Component { export default class Filtesrs extends React.Component {
render() { render() {
const { parent } = this.props; const { parent } = this.props;
return ( return (
<div className="products-filters d-flex flex-column"> <div className="products-filters d-flex flex-column">
{ {parent.state.selectedFilters.level.length !== 0 ||
parent.state.selectedFilters.level.length !== 0 || parent.state.selectedFilters.subject.length !== 0 ? parent.state.selectedFilters.subject.length !== 0 ? (
<AppliedFiltesrs parent={parent} data={parent.state.selectedFilters} />: null <AppliedFiltesrs
} parent={parent}
<TypicalFilters name ="subject" parent={parent} data={parent.props.subjects} title="دسته بندی موضوعی" theme="#D7FF17" /> data={parent.state.selectedFilters}
<TypicalFilters name="level" parent={parent} data={parent.props.levels} title="پایه تحصیلی" theme="#FF8917" /> />
) : null}
<TypicalFilters
name="subject"
parent={parent}
data={parent.props.subjects}
title="دسته بندی موضوعی"
theme="#D7FF17"
/>
<TypicalFilters
name="level"
parent={parent}
data={parent.props.levels}
title="پایه تحصیلی"
theme="#FF8917"
/>
</div> </div>
); );
} }

@ -1,63 +1,66 @@
import React from "react"; import React from "react";
import { connect } from "react-redux";
import { book } from "~/Redux/actions";
import Product from "../Product/index"; import Product from "../Product/index";
import Loader from "~/components/Loader/index";
import "./index.scss"; import "./index.scss";
export default class List extends React.Component { class List extends React.Component {
state = { componentDidMount() {
sortList: this.props.parent.props.list, this.props.getList();
};
render() {
const { parent } = this.props;
var sortList = parent.props.list;
if (parent.state.selectedSort === "گران ترین") {
sortList = sortList.sort((a, b) => (a.price > b.price ? -1 : 1));
} else if (parent.state.selectedSort === "ارزان ترین") {
sortList = sortList.sort((a, b) =>
a.price < b.price && (a.price !== "" || b.price !== "") ? -1 : 1
);
}
var filterList = [];
if (
parent.state.selectedFilters.subject.length > 0 &&
parent.state.selectedFilters.level.length > 0
) {
for (let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
filterList = sortList.filter(
(item) =>
item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1
);
}
for (let j = 0; j < parent.state.selectedFilters.level.length; j++) {
filterList = filterList.filter(
(item) =>
item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1
);
}
} else if (parent.state.selectedFilters.level.length > 0) {
for (let j = 0; j < parent.state.selectedFilters.level.length; j++) {
filterList = sortList.filter(
(item) =>
item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1
);
}
} else if (parent.state.selectedFilters.subject.length > 0) {
for (let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
filterList = sortList.filter(
(item) =>
item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1
);
}
} else {
filterList = sortList;
} }
return ( render() {
const { list, search, searchResult, filterResult } = this.props;
return window.innerWidth > 1000 ? (
<div className="products-list d-flex flex-wrap"> <div className="products-list d-flex flex-wrap">
{filterList.length > 0 {list.length > 0 ? (
? filterList.map((item, i) => <Product product={item} key={i} />) filterResult.length > 0 || localStorage.getItem("filter") ? (
: null} filterResult.map((item, i) => <Product product={item} key={i} />)
) : (
list.map((item, i) => <Product product={item} key={i} />)
)
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div> </div>
)}
</div>
) : (
<>
{list.length > 0 ? (
<div className="mobile-products__list d-flex flex-wrap">
{search
? searchResult.map((item, i) => (
<Product product={item} key={i} id={i} />
))
: list.map((item, i) => (
<Product product={item} key={i} id={i} />
))}
</div>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)}
</>
); );
} }
} }
export default connect(
(state) => ({
list: state.book.list,
searchResult: state.book.searchResult,
loading: state.book.loading,
filterResult: state.book.filterResult,
}),
{ getList: book.list }
)(List);

@ -12,14 +12,19 @@ const fontSize = {
export default class Sort extends React.Component { export default class Sort extends React.Component {
render() { render() {
const { parent } = this.props; const { parent, selectedSort } = this.props;
return ( return (
<div className="products-sort d-flex align-items-center"> <div className="products-sort d-flex align-items-center">
<SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} /> <SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} />
<span style={{ fontSize: fontSize.span }}>مرتب سازی بر اساس</span> <span style={{ fontSize: fontSize.span }}>مرتب سازی بر اساس</span>
<ul className="d-flex justify-content-between align-items-center mr-2"> <ul className="d-flex justify-content-between align-items-center mr-2">
{parent.props.sortItems.map((item, i) => ( {parent.props.sortItems.map((item, i) => (
<Item data={item} key={i} parent={parent} /> <Item
data={item}
key={i}
parent={parent}
selectedSort={selectedSort}
/>
))} ))}
</ul> </ul>
</div> </div>
@ -33,9 +38,16 @@ const Item = (props) => {
style={{ style={{
fontSize: fontSize.li, fontSize: fontSize.li,
backgroundColor: backgroundColor:
props.parent.state.selectedSort === props.data ? "#4CE1BE73" : "white", props.selectedSort === props.data ? "#4CE1BE73" : "white",
}} }}
onClick={() => props.parent.setState({ selectedSort : props.data })} onClick={() =>
props.parent.setState({
selectedFilters: {
...props.parent.state.selectedFilters,
sort: props.data,
},
})
}
> >
{props.data} {props.data}
</li> </li>

@ -1,6 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import FilterListIcon from "@material-ui/icons/FilterList"; import FilterListIcon from "@material-ui/icons/FilterList";
import Loader from "~/components/Loader/index";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "~/Redux/actions"; import { book } from "~/Redux/actions";
@ -27,11 +26,11 @@ const fontSize = {
class Products extends Component { class Products extends Component {
state = { state = {
selectedSort: null,
search: null, search: null,
selectedFilters: { selectedFilters: {
level: [], level: [],
subject: [], subject: [],
sort: null,
}, },
firstFilters: [ firstFilters: [
{ id: 0, value: "محبوب ترین" }, { id: 0, value: "محبوب ترین" },
@ -53,10 +52,6 @@ class Products extends Component {
degree: "", degree: "",
}; };
componentDidMount() {
this.props.getList();
}
handleProductSearch = (val) => { handleProductSearch = (val) => {
this.setState({ this.setState({
search: val, search: val,
@ -64,13 +59,22 @@ class Products extends Component {
this.props.searchBook(val); this.props.searchBook(val);
}; };
componentDidUpdate(prevProps, prevState) {
if (prevState.selectedFilters !== this.state.selectedFilters) {
this.props.filterBook(this.state.selectedFilters);
}
}
componentDidMount() {
localStorage.removeItem("filter");
}
render() { render() {
const { dateFilters, degreeFilters, firstFilters } = this.state; const { dateFilters, degreeFilters, firstFilters } = this.state;
const { loading, list, page } = this.props; const { loading, list, page } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
list ? (
<> <>
<div className="products d-flex flex-column"> <div className="products d-flex flex-column">
<Navbar page={"products"} /> <Navbar page={"products"} />
@ -80,25 +84,16 @@ class Products extends Component {
<div className="products__body--left d-flex flex-column"> <div className="products__body--left d-flex flex-column">
<Sort <Sort
parent={this} parent={this}
selectedSort={this.state.selectedSort} selectedSort={this.state.selectedFilters.sort}
/> />
<List parent={this} /> <List />
</div> </div>
</div> </div>
</div> </div>
<Footer /> <Footer />
</> </>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
list ? (
<> <>
<div className="mobile-products d-flex flex-column"> <div className="mobile-products d-flex flex-column">
<Navbar page={"products"} /> <Navbar page={"products"} />
@ -115,48 +110,23 @@ class Products extends Component {
<div className="d-flex"> <div className="d-flex">
<Select name="first" options={firstFilters} parent={this} /> <Select name="first" options={firstFilters} parent={this} />
<Select name="date" options={dateFilters} parent={this} /> <Select name="date" options={dateFilters} parent={this} />
<Select <Select name="degree" options={degreeFilters} parent={this} />
name="degree"
options={degreeFilters}
parent={this}
/>
</div> </div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> <FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div> </div>
<div className="mobile-products__list d-flex flex-wrap"> <List search={this.state.search} />
{this.state.search
? this.props.searchResult.map((item, i) => (
<Product product={item} key={i} id={i} />
))
: list.map((item, i) => (
<Product product={item} key={i} id={i} />
))}
</div>
</div> </div>
</> </>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null} ) : null}
</> </>
); );
} }
} }
export default connect( export default connect((state) => ({}), {
(state) => ({ searchBook: book.searchBook,
list: state.book.list, filterBook: book.filterBook,
searchResult: state.book.searchResult, })(Products);
loading: state.book.loading,
// status: state.user.status,
}),
{ getList: book.list, searchBook: book.searchBook }
)(Products);
Products.defaultProps = { Products.defaultProps = {
sortItems: [ sortItems: [

Loading…
Cancel
Save