reza finished filter

src/Redux/reducers/book.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 {
+      return { ...state };
-        ...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
-        ),
-      };
     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,

src/views/Products/List/index.js

@@ -32,24 +32,22 @@ class List extends React.Component {
       </div>
     ) : (
       <>
-        {list.length > 0 ? (
+        <div className="mobile-products-list d-flex flex-wrap">
-          <div className="mobile-products__list d-flex flex-wrap">
+          {list.length > 0 ? (
-            {search
+            filterResult.length > 0 || localStorage.getItem("filter") ? (
-              ? searchResult.map((item, i) => (
+              filterResult.map((item, i) => <Product product={item} key={i} />)
-                  <Product product={item} key={i} id={i} />
+            ) : (
-                ))
+              list.map((item, i) => <Product product={item} key={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" }}
-          <div
+            >
-            className="d-flex justify-content-center align-items-center"
+              <Loader />
-            style={{ height: "100vh", width: "100vw" }}
+            </div>
-          >
+          )}
-            <Loader />
+        </div>
-          </div>
-        )}
       </>
     );
   }

src/views/Products/Select/index.js

@@ -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 />}
         >

src/views/Products/index.js

@@ -32,36 +32,45 @@ class Products extends Component {
       subject: [],
       sort: null,
     },
-    firstFilters: [
+    sortFilters: [
-      { id: 0, value: "محبوب ترین" },
+      { id: 0, value: "مرتب سازی" },
-      { id: 1, value: "جدیدترین" },
+      { id: 1, value: "محبوب ترین" },
-      { id: 2, value: "ارزان ترین" },
+      { id: 2, value: "جدیدترین" },
+      { id: 3, value: "ارزان ترین" },
     ],
-    dateFilters: [
+    subjectFilters: [
-      { id: 0, value: "1400" },
+      { id: 0, value: "نام کتاب" },
-      { id: 1, value: "`1399" },
+      { id: 1, value: "ریاضی" },
-      { id: 2, value: "1398" },
+      { id: 2, value: "شیمی" },
+      { id: 3, value: "علوم" },
     ],
-    degreeFilters: [
+    levelFilters: [
-      { id: 0, value: "اول" },
+      { id: 0, value: "پایه تحصیلی" },
-      { id: 1, value: "دوم" },
+      { id: 1, value: "اول" },
-      { id: 2, 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) {
+    if (
-      this.props.filterBook(this.state.selectedFilters);
+      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 { levelFilters, subjectFilters, sortFilters } = this.state;
-    const { loading, list, page } = this.props;
     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="sort" options={sortFilters} parent={this} />
-                  <Select name="date" options={dateFilters} parent={this} />
+                  <Select name="level" options={subjectFilters} parent={this} />
-                  <Select name="degree" options={degreeFilters} parent={this} />
+                  <Select name="subject" options={levelFilters} parent={this} />
                 </div>
                 <FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
               </div>