create price filter functionailty.

relates #59

client/src/Components/LandingPage/Products/Filter/Filter.jsx

@@ -4,11 +4,14 @@ import FilterPrice from './FilterPrice';
 
 import('./filter.css');
 
-function Filter({ handleFilterCategory, category }) {
+function Filter({ handleFilterCategory, category, changeFilterPrice }) {
   return (
     <section className="Filter-container">
-      <FilterCategory handleFilterCategory={handleFilterCategory} category={category}/>
-      <FilterPrice />
+      <FilterCategory
+        handleFilterCategory={handleFilterCategory}
+        category={category}
+      />
+      <FilterPrice changeFilterPrice={changeFilterPrice} />
     </section>
   );
 }

client/src/Components/LandingPage/Products/Filter/FilterPrice.jsx

@@ -1,30 +1,17 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 
-function FilterPrice() {
-  const handle = () => 'dadada'
+function FilterPrice({ changeFilterPrice }) {
   return (
     <div className="filter-price-container">
-      <h4>Range Price</h4>
-      <label htmlFor="points">Max Price:</label>
-      <input
-        type="range"
-        name="points"
-        min="0"
-        max="10"
-        value={7}
-        onChange={handle}
-      />
-      <label htmlFor="points">Min Price:</label>
-      <input
-        type="range"
-        name="points"
-        min="0"
-        max="10"
-        value={0}
-        onChange={handle}
-      />
+      <h4>sort :</h4>
+      <button type="button" onClick={changeFilterPrice}>
+        max
+      </button>
+      <button type="button" onClick={changeFilterPrice}>
+        min
+      </button>
     </div>
-  )
+  );
 }
 
-export default FilterPrice
+export default FilterPrice;

client/src/Components/LandingPage/Products/Products.jsx

@@ -8,35 +8,45 @@ import('./Products.css');
 function Products() {
   const [newData, setNewData] = useState([]);
   const [showMoreData, setShowMoreData] = useState([]);
-  const [showMoreCounter, setShowMoreCounter] = useState(3);
+  const [showMoreCounter, setShowMoreCounter] = useState(1);
   const [category, setCategory] = useState('all');
 
   const handleFilterCategory = (e) => setCategory(e.target.textContent);
 
-  const showMoreRequest = ( ) => axios.get(`/api/v1/showMore/${showMoreCounter}`)
-    .then(({ data }) => {
-      setShowMoreData([...showMoreData,...data.data]);
-      setShowMoreCounter(showMoreCounter+1);
+  const changeFilterPrice = (e) => e.target.textContent;
+
+  const showMoreRequest = () =>
+    axios.get(`/api/v1/showMore/${showMoreCounter}`).then(({ data }) => {
+      setShowMoreData([...showMoreData, ...data.data]);
+      setShowMoreCounter(showMoreCounter + 1);
     });
 
   useEffect(() => {
     axios.get('/api/v1/products').then(({ data }) => setNewData(data.data));
   }, []);
 
-
   if (!newData.length) return <p>Loading ...</p>;
   return (
     <section className="products-filter-container">
-      <Filter handleFilterCategory={handleFilterCategory} category={category} />
+      <Filter
+        handleFilterCategory={handleFilterCategory}
+        changeFilterPrice={changeFilterPrice}
+        category={category}
+      />
 
       <div className="products-container">
         {category !== 'all'
-          ? [...showMoreData,...newData]
-            .filter((ele)=> ele.category ===category)
-            .map((ele) => <Product data={ele} key={ele.id} />)
-            : [...showMoreData,...newData].map((ele) => <Product data={ele} key={ele.id} />)}
-      </div> 
-        <button type='button' onClick={showMoreRequest}> Show More </button>
+          ? [...showMoreData, ...newData]
+              .filter((ele) => ele.category === category)
+              .map((ele) => <Product data={ele} key={ele.id} />)
+          : [...showMoreData, ...newData].map((ele) => (
+              <Product data={ele} key={ele.id} />
+            ))}
+      </div>
+      <button type="button" onClick={showMoreRequest}>
+        {' '}
+        Show More{' '}
+      </button>
     </section>
   );
 }