From 141a2f7e0ce5097b4a81deeaac60b4ded847bf0f Mon Sep 17 00:00:00 2001
From: Punchaya Siriphanthong <p.siriphanthong@gmail.com>
Date: Mon, 7 Oct 2019 03:46:02 +0700
Subject: [PATCH] handle search mentorlist by name

---
 src/App.js               | 16 ++++++++++++++--
 src/components/Header.js | 16 +++++++++++++---
 src/components/Mentor.js |  9 ++++++++-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index ab4f371..f6b9c0d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,13 +9,25 @@ import Status from "./components/Status";
 import Mentor from "./components/Mentor";
 
 class App extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+        search: '',
+    }
+  }
+
+  search = (val) => {
+    this.setState({ search: val });
+  }
+
   render() {
     return (
       <div className="App">
-        <Header />
+        <Header handleSearch={this.search} />
         <Router />
         {/* <Status /> */}
-        <Mentor />
+        <Mentor search={this.state.search} />
       </div>
     );
   }
diff --git a/src/components/Header.js b/src/components/Header.js
index 8d75e00..a9b3e49 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -7,7 +7,8 @@ class Header extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            username: 'Hi!'
+            username: 'Hi!',
+            search: '',
         }
     }
 
@@ -15,6 +16,15 @@ class Header extends Component {
         this.setState({ username: val });
     }
 
+    search = (event) => {
+        this.setState({ search: event.target.value });
+    }
+
+    submit = (event) => {
+        event.preventDefault();
+        this.props.handleSearch(this.state.search);
+    }
+
     render() {
         return (
             <div className="main thememain-header">
@@ -42,8 +52,8 @@ class Header extends Component {
                                     <a className="nav-link disabled" href="#" title="About">About</a>
                                 </li>
                             </ul>
-                            <form className="form-inline my-2 my-lg-0">
-                                <input className="form-control mr-sm-2" type="search" placeholder="Search" />
+                            <form className="form-inline my-2 my-lg-0" onSubmit={this.submit}>
+                                <input className="form-control mr-sm-2" type="search" placeholder="Search" onChange={this.search} />
                                 <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                             </form>
                             <Link to="/login">
diff --git a/src/components/Mentor.js b/src/components/Mentor.js
index 9df2e39..935fc5d 100644
--- a/src/components/Mentor.js
+++ b/src/components/Mentor.js
@@ -36,6 +36,13 @@ class Mentor extends Component {
         });*/
     }
 
+    getSearchedProducts() {
+        const { search } = this.props;
+        return search ? this.state.Product.filter(
+            (data) => data.name.toLowerCase().indexOf(search.toLowerCase()) !== -1
+        ) : this.state.Product;
+    }
+
 
     render() {
         return (
@@ -43,7 +50,7 @@ class Mentor extends Component {
                 <div className="container content-main">
                     <br />
                     <div className="row">
-                        {this.state.Product.map((data) => {
+                        {this.getSearchedProducts().map((data) => {
                             return <MentorList key={data.id} data={data} />
                         })}
                     </div>