reza added sort and fillter

src/views/Products/BreadCrumb/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import {Link} from 'react-router-dom';
+import React from "react";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from "react-router-dom";
 
-import './index.scss';
+import "./index.scss";
 
 function handleClick(event) {
   event.preventDefault();
-  console.info('You clicked a breadcrumb.');
+  console.info("You clicked a breadcrumb.");
 }
 
 const maxDesktopSize = 1250;
@@ -14,19 +14,34 @@ const maxMobileSize = 650;
 
 const fontSize = {
   desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
-  mobile : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
+  mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
 };
 
 export default function ActiveLastBreadcrumb() {
   return (
     <Breadcrumbs aria-label="breadcrumb">
-      <Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to={'/'}  onClick={handleClick}>
-         صفحه اصلی
+      <Link
+        to={""}
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+        }}
+        onClick={handleClick}
+      >
+        صفحه اصلی
       </Link>
-      <Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, color: '#00CC69'}} to="/products" onClick={handleClick}>
+      <Link
+        to={"/products"}
+        style={{
+          fontSize:
+            window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
+          color: "#00CC69",
+        }}
+        
+        onClick={handleClick}
+      >
         محصولات
       </Link>
     </Breadcrumbs>
   );
 }
-

src/views/Products/Filters/AppliedFilters/index.js

@@ -7,8 +7,26 @@ const maxDesktopSize = 1250;
 
 const fontSize = {
   h2 : window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
+  button: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 85,
 }
 export default class AppliedFilters extends React.Component {
+  delete = (name, data) => {
+    if (name === "subject") {
+      this.props.parent.setState((prevState) => ({
+        selectedFilters: {
+          ...prevState.selectedFilters,
+          subject: prevState.selectedFilters.subject.filter(item => item !== data),
+        },
+      }));
+    }else if(name === "level"){
+      this.props.parent.setState((prevState) => ({
+        selectedFilters: {
+          ...prevState.selectedFilters,
+          level: prevState.selectedFilters.level.filter(item => item !== data),
+        },
+      }));
+    }
+  };
   render() {
     const {data} = this.props;
     return(
@@ -19,8 +37,13 @@ export default class AppliedFilters extends React.Component {
         </header>
         <div className="products-filters-applied__items d-flex flex-wrap">
           {
-            data.map((item,i) => (
-              <Item data={item} key={i} />
+            data.level.map((item,i) => (
+              <Item name={"level"} data={item} key={i} parent={this} />
+            ))
+          }
+          {
+            data.subject.map((item,i) => (
+              <Item name={"subject"} data={item} key={i} parent={this} />
             ))
           }
         </div>
@@ -30,11 +53,11 @@ export default class AppliedFilters extends React.Component {
 }
 
 const Item = (props) => {
-  const {data} = props;
+  const {data, name, parent} = props;
   return(
-    <button className="d-flex align-items-center">
-      <span>{data.name}</span>
-      <CloseIcon style={{ fontSize: 20 }} />
+    <button className="d-flex align-items-center" onClick={() => parent.delete(name, data)}>
+      <span style={{ fontSize: fontSize.button }}>{data}</span>
+      <CloseIcon style={{ fontSize: 12, marginRight: 10, borderRadius : '50%', border: '1px solid #b5b5b5' }} />
     </button>
   );
 }

src/views/Products/Filters/AppliedFilters/index.scss

@@ -23,5 +23,14 @@
     border-radius: 8px;
     min-height: 30px;
     padding: 10px 5px;
+    button {
+      background-color: white;
+      border : 1px solid #d4d4d4;
+      border-radius: 7px;
+      margin: 3px 4px;
+      font-family: numeralLight;
+      color: #4d4d4d;
+      padding: 2px 7px;
+    }
   }
 }

src/views/Products/Filters/TypicalFilters/index.js

@@ -1,34 +1,55 @@
-import React from 'react';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
+import React from "react";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
 
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
-import CloseIcon from '@material-ui/icons/Close';
+import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@material-ui/icons/CheckBox";
+import CloseIcon from "@material-ui/icons/Close";
 
-import './index.scss';
+import "./index.scss";
 
 const maxDesktopSize = 1250;
 
 const fontSize = {
-  h2 : window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
+  h2: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85,
   strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
-}
+};
 export default class TypicalFilters extends React.Component {
+  onChange = (name, data) => {
+    if (name === "subject") {
+      this.props.parent.setState((prevState) => ({
+        selectedFilters: {
+          ...prevState.selectedFilters,
+          subject:
+            prevState.selectedFilters.subject.indexOf(data) !== -1
+              ? prevState.selectedFilters.subject.filter(item => item !== data)
+              : [...new Set([...prevState.selectedFilters.subject, data])],
+        },
+      }));
+    }else if(name === "level"){
+      this.props.parent.setState((prevState) => ({
+        selectedFilters: {
+          ...prevState.selectedFilters,
+          level:
+            prevState.selectedFilters.level.indexOf(data) !== -1
+              ? prevState.selectedFilters.level.filter(item => item !== data)
+              : [...new Set([...prevState.selectedFilters.level, data])],
+        },
+      }));
+    }
+  };
   render() {
-    const {data, title, theme} = this.props;
-    return(
+    const { data, title, theme, name, parent } = this.props;
+    return (
       <div className="products-filters-typical d-flex flex-column">
         <header className="products-filters-typical__header d-flex align-items-center">
-          <span style={{ background : theme }}></span>
-          <h2 style={{ fontSize : fontSize.h2 }}>{title}</h2>
+          <span style={{ background: theme }}></span>
+          <h2 style={{ fontSize: fontSize.h2 }}>{title}</h2>
         </header>
         <div className="products-filters-typical__items d-flex flex-column">
-          {
-            data.map((item,i) => (
-              <Item data={item} key={i} />
-            ))
-          }
+          {data.map((item, i) => (
+            <Item data={item} key={i} parent={this} />
+          ))}
         </div>
       </div>
     );
@@ -36,14 +57,30 @@ export default class TypicalFilters extends React.Component {
 }
 
 const Item = (props) => {
-  const {data} = props;
-  return(
+  const { data, parent } = props;
+  const checkHandler = (data, name) => {
+    var available;
+    if(name === "subject"){
+      available = props.parent.props.parent.state.selectedFilters.subject.indexOf(data) !== -1 ? true : false;
+    }else if(name === "level"){
+      available = props.parent.props.parent.state.selectedFilters.level.indexOf(data) !== -1 ? true : false;
+    }
+    return available;
+  }
+  return (
     <div className="d-flex align-items-center mt-2">
       <FormControlLabel
-        control={<Checkbox icon={<CheckBoxOutlineBlankIcon style={{ color: '#EAEAEA' }} />} checkedIcon={<CheckBoxIcon style={{ color: '#00CC69' }} />} name="checkedH" />}
-        label=""
+        control={
+          <Checkbox
+            icon={<CheckBoxOutlineBlankIcon style={{ color: "#EAEAEA" }} />}
+            checkedIcon={<CheckBoxIcon style={{ color: "#00CC69" }} />}
+            name="checkedH"
+          />
+        }
+        checked={checkHandler(data,parent.props.name)}
+        onChange={() => parent.onChange(parent.props.name, data)}
       />
       <strong style={{ fontSize: fontSize.strong }}>{data}</strong>
     </div>
   );
-}
+};

src/views/Products/Filters/index.js

@@ -10,11 +10,11 @@ export default class Filtesrs extends React.Component {
     return(
       <div className="products-filters d-flex flex-column">
         {
-          parent.state.selectedFilters.length !== 0 ?
-          <AppliedFiltesrs data={parent.state.selectedFilters} />: null
+          parent.state.selectedFilters.level.length !== 0 || parent.state.selectedFilters.subject.length !== 0   ?
+          <AppliedFiltesrs parent={parent} data={parent.state.selectedFilters} />: null
         }
-        <TypicalFilters data={parent.props.subjects} title="دسته بندی موضوعی" theme="#D7FF17" />
-        <TypicalFilters data={parent.props.levels} title="پایه تحصیلی" theme="#FF8917" />
+        <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,18 +1,34 @@
-import React from 'react';
-import Product from '../Product/index';
+import React from "react";
+import Product from "../Product/index";
 
-import './index.scss';
+import "./index.scss";
 export default class List extends React.Component {
+  state = {
+    sortList: this.props.parent.props.products,
+  };
+  
   render() {
-    const {parent} = this.props;
-    return(
+    const { parent } = this.props;
+    var sortList = parent.props.products;
+    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;
+    for(let j = 0; j <= parent.state.selectedFilters.subject.length; j++) {
+      filterList = sortList.filter(item => parent.state.selectedFilters.subject.indexOf(item.title) === -1);
+    };
+    
+    return (
       <div className="products-list d-flex flex-wrap">
-        {
-          parent.props.products.map((item,i) => (
-            <Product product={item} key={i} />
-          ))
-        }
+        {filterList.length > 0
+          ? filterList.map((item, i) => (
+              <Product product={item} key={i} />
+            ))
+          : null}
       </div>
     );
   }
-}
+}
+ 

src/views/Products/Sort/index.js

@@ -1,28 +1,26 @@
-import React from 'react';
-import SortIcon from '@material-ui/icons/Sort';
+import React from "react";
+import SortIcon from "@material-ui/icons/Sort";
 
-import './index.scss';
+import "./index.scss";
 
 const maxDesktopSize = 1250;
 
 const fontSize = {
-  span : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
+  span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
   li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
-}
+};
 
 export default class Sort extends React.Component {
   render() {
-    const {parent} = this.props;
-    return(
+    const { parent } = this.props;
+    return (
       <div className="products-sort d-flex align-items-center">
-        <SortIcon style={{ fontSize: 30, color : '#A5A5A5', marginLeft : 10}} />
+        <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.props.sortItems.map((item, i) => (
+            <Item data={item} key={i} parent={parent} />
+          ))}
         </ul>
       </div>
     );
@@ -30,7 +28,16 @@ export default class Sort extends React.Component {
 }
 
 const Item = (props) => {
-  return(
-    <li style={{ fontSize: fontSize.li }}>{props.data}</li>
+  return (
+    <li
+      style={{
+        fontSize: fontSize.li,
+        backgroundColor:
+          props.parent.state.selectedSort === props.data ? "#4CE1BE73" : "white",
+      }}
+      onClick={() => props.parent.setState({ selectedSort : props.data })}
+    >
+      {props.data}
+    </li>
   );
-}
+};

src/views/Products/Sort/index.scss

@@ -16,6 +16,8 @@
       font-family: numeralLight;
       color: #373737;
       cursor: pointer;
+      padding: 5px 10px;
+      border-radius: 5px;
     }
   }
 }

src/views/Products/index.js

@@ -20,7 +20,11 @@ import book5 from "../../assets/images/book5.png";
 import "./index.scss";
 export default class Products extends Component {
   state = {
-    selectedFilters : [],
+    selectedSort : null,
+    selectedFilters : { 
+      level : [],
+      subject : [],
+    },
     firstFilters: [
       { id: 0, value: "محبوب ترین" },
       { id: 1, value: "جدیدترین" },
@@ -53,7 +57,7 @@ export default class Products extends Component {
               <div className="products__body d-flex">
                 <Filters parent={this} />
                 <div className="products__body--left d-flex flex-column">
-                  <Sort parent={this} />
+                  <Sort parent={this} selectedSort={this.state.selectedSort} />
                   <List parent={this} />
                 </div>
               </div>
@@ -90,8 +94,8 @@ Products.defaultProps = {
   sortItems : [
     'پربازدیدترین',
     'پرفروش ترین',
-    'گران‌ترین',
-    'ارزان‌ترین',
+    'گران ‌ترین',
+    'ارزان ‌ترین',
     'جدیدترین',
     'بزودی',
   ],