add functional search bar in navbar

diskuy/src/Navbar.js

@@ -3,18 +3,26 @@ import {ReactComponent as DiskuyLogo} from './Logo.svg';
 import './Navbar.css';
 import { useState } from "react";
 import AuthService from './services/auth.service'
+import { useInput } from './hooks/input-hook';
 import {
-    Link
+    Link, withRouter
   } from "react-router-dom"
 
-const Navbar = () => {
+const Navbar = (props) => {
     const [loggedIn, setLoggedIn] = useState(AuthService.getCurrentUser() && 1)
+    const { value: search, bind: bindSearch, reset: resetSearch } = useInput('')
     
-    const handleLogout = (event) => {
+    const handleLogout = () => {
         AuthService.logout()
         setLoggedIn(false)
         window.location.reload()
     }
+
+    const handleSearch = (event) => {
+        event.preventDefault()
+        props.history.push(`/search/${search}`)
+        resetSearch()
+    }
     return (
         <nav id = "navbar" className='navbar navbar-expand-lg navbar-light position-sticky fixed-top'>
             <div className="navbar-brand">
@@ -31,15 +39,20 @@ const Navbar = () => {
                 </li>
                 {loggedIn ?  (
                     <li className='nav-item ml-auto' onClick={handleLogout}>
-                    <Link to='/login' className='nav-link'><b>Logout</b></Link>
+                        <Link to='/login' className='nav-link'><b>Logout</b></Link>
                     </li>
                     ):
                     <li className='nav-item ml-auto'>
-                    <Link to='/login' className='nav-link'><b>Login</b></Link>
-                    </li>}
+                        <Link to='/login' className='nav-link'><b>Login</b></Link>
+                    </li>
+                }
             </ul>
+            <form className='form-inline my-2 my-lg-0' onSubmit={handleSearch}>
+                <input className='form-control mr-sm-2' type='search' placholder='search threads' aria-label="Search" {...bindSearch}/>
+                <button className='btn btn-outline-success my-2 my-sm-0' type='submit'>Search</button>
+            </form>
         </nav>
     );
 }
 
-export default Navbar;
+export default withRouter(Navbar);