06 add search input and sorting products by price

moelzanaty3 · Apr 5, 2021 · 02045ab · 02045ab
1 parent 527f0f4
commit 02045ab
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 14 deletions.
diff --git a/mz-shop/package.json b/mz-shop/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-scripts": "2.1.1"
+    "react-scripts": "2.1.1",
+    "sort-by": "^1.2.0"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/mz-shop/src/App.js b/mz-shop/src/App.js
@@ -1,10 +1,12 @@
 import React, { Component } from 'react'
+import sortBy from 'sort-by'
 import { getAllProduct } from './api/ProductAPI'
 import Product from './Product'
 
 class App extends Component {
   state = {
-    products: []
+    products: [],
+    query: ''
   }
 
   componentDidMount() {
@@ -16,21 +18,62 @@ class App extends Component {
     })
   }
 
+  handleSearchProduct = query => {
+    this.setState(() => ({
+      query: query.trim()
+    }))
+  }
+
+  clearQuery = () => {
+    this.handleSearchProduct('')
+  }
+
   render() {
+    const { query, products } = this.state
+    const showingProducts =
+      query === ''
+        ? products
+        : products.filter(p => p.title.toLowerCase().includes(query.toLowerCase()))
+
     return (
       <div>
-        <div className="product-list">
-          {this.state.products &&
-            this.state.products.map(product => (
-              <Product
-                key={product.id}
-                title={product.title}
-                image={product.image}
-                price={product.price}
-                category={product.category}
-                description={product.description}
-              />
-            ))}
+        <div className="list-products">
+          <div className="list-products-top">
+            <input
+              className="search-products"
+              type="text"
+              placeholder="Search Products"
+              value={query}
+              onChange={event => {
+                this.handleSearchProduct(event.target.value)
+              }}
+            />
+          </div>
+
+          {showingProducts.length !== products.length && (
+            <div className="showing-products">
+              <span>
+                Now showing {showingProducts.length} of {products.length}
+              </span>
+              <button onClick={this.clearQuery}>Show all</button>
+            </div>
+          )}
+
+          <ol className="product-list">
+            {showingProducts &&
+              showingProducts
+                .sort(sortBy('price'))
+                .map(product => (
+                  <Product
+                    key={product.id}
+                    title={product.title}
+                    image={product.image}
+                    price={product.price}
+                    category={product.category}
+                    description={product.description}
+                  />
+                ))}
+          </ol>
         </div>
       </div>
     )

diff --git a/mz-shop/src/assets/styles/App.css b/mz-shop/src/assets/styles/App.css
@@ -95,3 +95,41 @@ body, .app {
   outline: none;
 }
 
+
+/* ListContacts */
+.list-products {
+  padding-top: 60px;
+}
+
+.list-products-top {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  border-bottom: 1px solid #d5d8df;
+  display: flex;
+}
+
+.search-products {
+  width: 100%;
+  padding: 20px 20px 20px 60px;
+  background-image: url('../images/icons/search.svg');
+  background-repeat: no-repeat;
+  background-position: 20px center;
+  background-size: 1.2em;
+  font-size: 1.2em;
+  border: 0;
+  outline: none;
+}
+
+
+.showing-products {
+  text-align: center;
+  margin: 20px 0;
+}
+.showing-products button {
+  color: gold;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: inherit;
+}