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. 42
      src/views/Product/MaterialModal/index.scss
  6. 41
      src/views/Products/Filters/index.js
  7. 107
      src/views/Products/List/index.js
  8. 20
      src/views/Products/Sort/index.js
  9. 128
      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) => {
dispatch({ type: "book/search", data: data });
},
filterBook: (data) => async (dispatch) => {
dispatch({ type: "book/filter", data: data });
},
};
export default book;

@ -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":

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

@ -1,23 +1,25 @@
textarea {
width: 100%;
font-family: numeralLight;
border-radius: 10px;
border: 1px solid #c4c4c5;
padding: 10px 8px;
color: #6f7074;
&::placeholder {
color: #797979;
.material-modal {
textarea {
width: 100%;
font-family: numeralLight;
border-radius: 10px;
border: 1px solid #c4c4c5;
padding: 10px 8px;
color: #6f7074;
&::placeholder {
color: #797979;
}
&:focus {
outline: 0px;
}
}
&:focus {
outline: 0px;
}
}
button {
width: 100%;
font-family: numeralLight;
background-color: #00cc69;
color: white;
border: 0px;
margin-top: 20px;
button {
width: 100%;
font-family: numeralLight;
background-color: #00cc69;
color: white;
border: 0px;
margin-top: 20px;
}
}

@ -1,21 +1,36 @@
import React from 'react';
import React from "react";
import AppliedFiltesrs from './AppliedFilters/index';
import TypicalFilters from './TypicalFilters/index';
import AppliedFiltesrs from "./AppliedFilters/index";
import TypicalFilters from "./TypicalFilters/index";
import './index.scss';
import "./index.scss";
export default class Filtesrs extends React.Component {
render() {
const {parent} = this.props;
return(
const { parent } = this.props;
return (
<div className="products-filters d-flex flex-column">
{
parent.state.selectedFilters.level.length !== 0 || parent.state.selectedFilters.subject.length !== 0 ?
<AppliedFiltesrs parent={parent} data={parent.state.selectedFilters} />: 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" />
{parent.state.selectedFilters.level.length !== 0 ||
parent.state.selectedFilters.subject.length !== 0 ? (
<AppliedFiltesrs
parent={parent}
data={parent.state.selectedFilters}
/>
) : 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>
);
}
}
}

@ -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 ? (
<div className="products-list d-flex flex-wrap">
{filterList.length > 0
? filterList.map((item, i) => <Product product={item} key={i} />)
: null}
{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>
) : (
<>
{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 {
render() {
const { parent } = this.props;
const { parent, selectedSort } = this.props;
return (
<div className="products-sort d-flex align-items-center">
<SortIcon style={{ fontSize: 30, color: "#A5A5A5", marginLeft: 10 }} />
<span style={{ fontSize: fontSize.span }}>مرتب سازی بر اساس</span>
<ul className="d-flex justify-content-between align-items-center mr-2">
{parent.props.sortItems.map((item, i) => (
<Item data={item} key={i} parent={parent} />
<Item
data={item}
key={i}
parent={parent}
selectedSort={selectedSort}
/>
))}
</ul>
</div>
@ -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}
</li>

@ -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 ? (
<>
<div className="products d-flex flex-column">
<Navbar page={"products"} />
<Breadcrumbs />
<div className="products__body d-flex">
<Filters parent={this} />
<div className="products__body--left d-flex flex-column">
<Sort
parent={this}
selectedSort={this.state.selectedSort}
/>
<List parent={this} />
</div>
<>
<div className="products d-flex flex-column">
<Navbar page={"products"} />
<Breadcrumbs />
<div className="products__body d-flex">
<Filters parent={this} />
<div className="products__body--left d-flex flex-column">
<Sort
parent={this}
selectedSort={this.state.selectedFilters.sort}
/>
<List />
</div>
</div>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
list ? (
<>
<div className="mobile-products d-flex flex-column">
<Navbar page={"products"} />
<div className="mobile-products__search d-flex">
<input
type="search"
style={{ fontSize: fontSize.mobile.input }}
placeholder={"جستجو"}
onChange={(e) => this.handleProductSearch(e.target.value)}
/>
<img src={navbarSearch} alt="جستجو" />
</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}
/>
</div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div>
<div className="mobile-products__list d-flex flex-wrap">
{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 className="mobile-products d-flex flex-column">
<Navbar page={"products"} />
<div className="mobile-products__search d-flex">
<input
type="search"
style={{ fontSize: fontSize.mobile.input }}
placeholder={"جستجو"}
onChange={(e) => this.handleProductSearch(e.target.value)}
/>
<img src={navbarSearch} alt="جستجو" />
</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} />
</div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div>
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
<List search={this.state.search} />
</div>
)
</>
) : null}
</>
);
}
}
export default connect(
(state) => ({
list: state.book.list,
searchResult: state.book.searchResult,
loading: state.book.loading,
// status: state.user.status,
}),
{ getList: book.list, searchBook: book.searchBook }
)(Products);
export default connect((state) => ({}), {
searchBook: book.searchBook,
filterBook: book.filterBook,
})(Products);
Products.defaultProps = {
sortItems: [

Loading…
Cancel
Save