From bc0046172b5c22181f75f2dc802cc3a2b03f3e0d Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Sat, 21 Aug 2021 23:16:20 +0430 Subject: [PATCH] reza added filter for desktop --- src/History/index.js | 3 - src/Redux/actions/book.js | 3 + src/Redux/reducers/book.js | 38 +++++- src/views/Product/MaterialModal/index.js | 2 +- src/views/Product/MaterialModal/index.scss | 42 +++---- src/views/Products/Filters/index.js | 41 ++++--- src/views/Products/List/index.js | 107 ++++++++--------- src/views/Products/Sort/index.js | 20 +++- src/views/Products/index.js | 128 ++++++++------------- 9 files changed, 211 insertions(+), 173 deletions(-) delete mode 100644 src/History/index.js diff --git a/src/History/index.js b/src/History/index.js deleted file mode 100644 index ec3d07f..0000000 --- a/src/History/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { createBrowserHistory } from "history"; - -export default createBrowserHistory(); diff --git a/src/Redux/actions/book.js b/src/Redux/actions/book.js index cbd9fb3..09df5ae 100644 --- a/src/Redux/actions/book.js +++ b/src/Redux/actions/book.js @@ -29,6 +29,9 @@ const book = { searchBook: (data) => async (dispatch) => { dispatch({ type: "book/search", data: data }); }, + filterBook: (data) => async (dispatch) => { + dispatch({ type: "book/filter", data: data }); + }, }; export default book; diff --git a/src/Redux/reducers/book.js b/src/Redux/reducers/book.js index 7f24b13..194b19f 100644 --- a/src/Redux/reducers/book.js +++ b/src/Redux/reducers/book.js @@ -1,9 +1,10 @@ const initialState = { loading: true, error: null, - list: null, + list: [], info: null, searchResult: [], + filterResult: [], }; export default function book(state = initialState, action) { let { type, data } = action; @@ -30,6 +31,41 @@ export default function book(state = initialState, action) { 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": return { ...state, loading: true }; case "error": diff --git a/src/views/Product/MaterialModal/index.js b/src/views/Product/MaterialModal/index.js index ab3979f..f7751d1 100644 --- a/src/views/Product/MaterialModal/index.js +++ b/src/views/Product/MaterialModal/index.js @@ -49,7 +49,7 @@ export default function SimpleModal(props) { const [modalStyle] = React.useState(getModalStyle); const body = ( -
+

- { - parent.state.selectedFilters.level.length !== 0 || parent.state.selectedFilters.subject.length !== 0 ? - : null - } - - + {parent.state.selectedFilters.level.length !== 0 || + parent.state.selectedFilters.subject.length !== 0 ? ( + + ) : null} + +

); } -} \ No newline at end of file +} diff --git a/src/views/Products/List/index.js b/src/views/Products/List/index.js index 053ceb4..a430ba6 100644 --- a/src/views/Products/List/index.js +++ b/src/views/Products/List/index.js @@ -1,63 +1,66 @@ import React from "react"; +import { connect } from "react-redux"; +import { book } from "~/Redux/actions"; + import Product from "../Product/index"; +import Loader from "~/components/Loader/index"; import "./index.scss"; -export default class List extends React.Component { - state = { - sortList: this.props.parent.props.list, - }; +class List extends React.Component { + componentDidMount() { + 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 ( + const { list, search, searchResult, filterResult } = this.props; + return window.innerWidth > 1000 ? (
- {filterList.length > 0 - ? filterList.map((item, i) => ) - : null} + {list.length > 0 ? ( + filterResult.length > 0 || localStorage.getItem("filter") ? ( + filterResult.map((item, i) => ) + ) : ( + list.map((item, i) => ) + ) + ) : ( +
+ +
+ )}
+ ) : ( + <> + {list.length > 0 ? ( +
+ {search + ? searchResult.map((item, i) => ( + + )) + : list.map((item, i) => ( + + ))} +
+ ) : ( +
+ +
+ )} + ); } } + +export default connect( + (state) => ({ + list: state.book.list, + searchResult: state.book.searchResult, + loading: state.book.loading, + filterResult: state.book.filterResult, + }), + { getList: book.list } +)(List); diff --git a/src/views/Products/Sort/index.js b/src/views/Products/Sort/index.js index 5d37e53..373e3b5 100644 --- a/src/views/Products/Sort/index.js +++ b/src/views/Products/Sort/index.js @@ -12,14 +12,19 @@ const fontSize = { export default class Sort extends React.Component { render() { - const { parent } = this.props; + const { parent, selectedSort } = this.props; return (
مرتب سازی بر اساس
    {parent.props.sortItems.map((item, i) => ( - + ))}
@@ -33,9 +38,16 @@ const Item = (props) => { style={{ fontSize: fontSize.li, 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} diff --git a/src/views/Products/index.js b/src/views/Products/index.js index 1700cd1..7a66064 100644 --- a/src/views/Products/index.js +++ b/src/views/Products/index.js @@ -1,6 +1,5 @@ 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"; @@ -27,11 +26,11 @@ const fontSize = { class Products extends Component { state = { - selectedSort: null, search: null, selectedFilters: { level: [], subject: [], + sort: null, }, firstFilters: [ { id: 0, value: "محبوب ترین" }, @@ -53,10 +52,6 @@ class Products extends Component { degree: "", }; - componentDidMount() { - this.props.getList(); - } - handleProductSearch = (val) => { this.setState({ search: val, @@ -64,99 +59,74 @@ class Products extends Component { this.props.searchBook(val); }; + componentDidUpdate(prevProps, prevState) { + if (prevState.selectedFilters !== this.state.selectedFilters) { + this.props.filterBook(this.state.selectedFilters); + } + } + + componentDidMount() { + localStorage.removeItem("filter"); + } + render() { const { dateFilters, degreeFilters, firstFilters } = this.state; const { loading, list, page } = this.props; return ( <> {window.innerWidth > 1000 ? ( - list ? ( - <> -
- - -
- -
- - -
+ <> +
+ + +
+ +
+ +
-