reza added filter for desktop

src/History/index.js

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

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;

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

src/views/Product/MaterialModal/index.js

@@ -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={{

src/views/Product/MaterialModal/index.scss

@@ -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;
+  }
 }

src/views/Products/Filters/index.js

@@ -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>
     );
   }
-}
+}

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 ? (
       <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);

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 (
       <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>

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 ? (
-            <>
-              <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: [