reza finished filter

master
RezaAshrafi77 3 years ago
parent bc0046172b
commit c30b10857e
  1. 23
      src/Redux/reducers/book.js
  2. 34
      src/views/Products/List/index.js
  3. 20
      src/views/Products/Select/index.js
  4. 54
      src/views/Products/index.js

@ -20,24 +20,15 @@ export default function book(state = initialState, action) {
case "book/delete":
return { ...state, loading: false, error: null };
case "book/search":
return {
...state,
loading: false,
error: null,
searchResult: state.list.filter(
(item) =>
item.product[0].name.indexOf(data) !== -1 ||
item.product[1].name.indexOf(data) !== -1 ||
item.name.indexOf(data) !== -1
),
};
return { ...state };
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) {
const search = data.search;
if (level.length > 0 || subject.length > 0 || sort || search) {
localStorage.setItem("filter", "ON");
}
let finalSort;
@ -53,12 +44,16 @@ export default function book(state = initialState, action) {
(item) => item.name.indexOf(subject.map((item) => item)) !== -1
)
: byLevelFilter;
console.log(bySubjectFilter);
const bySearchFilter = search
? bySubjectFilter.filter((item) => item.name.indexOf(search) !== -1)
: bySubjectFilter;
if (sort === "گران ترین") {
finalSort = bySubjectFilter.sort((item1, item2) => {
finalSort = bySearchFilter.sort((item1, item2) => {
return item1.product[0].price - item2.product[0].price;
});
} else {
finalSort = bySubjectFilter;
finalSort = bySearchFilter;
}
return {
...state,

@ -32,24 +32,22 @@ class List extends React.Component {
</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>
)}
<div className="mobile-products-list d-flex flex-wrap">
{list.length > 0 ? (
filterResult.length > 0 || localStorage.getItem("filter") ? (
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>
</>
);
}

@ -41,7 +41,6 @@ const useStyles = makeStyles((theme) => ({
export default function CustomizedSelects(props) {
const classes = useStyles();
console.log(props);
return (
<div style={{ position: "relative" }}>
<FormControl className={classes.marginLeft}>
@ -49,7 +48,24 @@ export default function CustomizedSelects(props) {
id="demo-customized-select-native"
value={props.parent.state[props.name]}
onChange={(e) =>
props.parent.setState({ [props.name]: e.target.value })
e.target.value !== "نام کتاب" &&
e.target.value !== "مرتب سازی" &&
e.target.value !== "پایه تحصیلی"
? props.parent.setState({
selectedFilters: {
...props.parent.state.selectedFilters,
[props.name]:
props.name === "sort"
? e.target.value
: new Array(e.target.value),
},
})
: props.parent.setState({
selectedFilters: {
...props.parent.state.selectedFilters,
[props.name]: props.name === "sort" ? null : new Array(),
},
})
}
input={<BootstrapInput />}
>

@ -32,36 +32,45 @@ class Products extends Component {
subject: [],
sort: null,
},
firstFilters: [
{ id: 0, value: "محبوب ترین" },
{ id: 1, value: "جدیدترین" },
{ id: 2, value: "ارزان ترین" },
sortFilters: [
{ id: 0, value: "مرتب سازی" },
{ id: 1, value: "محبوب ترین" },
{ id: 2, value: "جدیدترین" },
{ id: 3, value: "ارزان ترین" },
],
dateFilters: [
{ id: 0, value: "1400" },
{ id: 1, value: "`1399" },
{ id: 2, value: "1398" },
subjectFilters: [
{ id: 0, value: "نام کتاب" },
{ id: 1, value: "ریاضی" },
{ id: 2, value: "شیمی" },
{ id: 3, value: "علوم" },
],
degreeFilters: [
{ id: 0, value: "اول" },
{ id: 1, value: "دوم" },
{ id: 2, value: "سوم" },
levelFilters: [
{ id: 0, value: "پایه تحصیلی" },
{ id: 1, value: "اول" },
{ id: 2, value: "دوم" },
{ id: 3, value: "سوم" },
{ id: 4, value: "چهارم" },
{ id: 5, value: "دهم" },
{ id: 6, value: "هفتم" },
],
first: "",
date: "",
degree: "",
};
handleProductSearch = (val) => {
this.setState({
search: val,
});
this.props.searchBook(val);
// this.props.searchBook(val);
};
componentDidUpdate(prevProps, prevState) {
if (prevState.selectedFilters !== this.state.selectedFilters) {
this.props.filterBook(this.state.selectedFilters);
if (
prevState.selectedFilters !== this.state.selectedFilters ||
prevState.search !== this.state.search
) {
this.props.filterBook({
...this.state.selectedFilters,
search: this.state.search,
});
}
}
@ -70,8 +79,7 @@ class Products extends Component {
}
render() {
const { dateFilters, degreeFilters, firstFilters } = this.state;
const { loading, list, page } = this.props;
const { levelFilters, subjectFilters, sortFilters } = this.state;
return (
<>
{window.innerWidth > 1000 ? (
@ -108,9 +116,9 @@ class Products extends Component {
</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} />
<Select name="sort" options={sortFilters} parent={this} />
<Select name="level" options={subjectFilters} parent={this} />
<Select name="subject" options={levelFilters} parent={this} />
</div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div>

Loading…
Cancel
Save