Close the navbar after a search

frontend/js/components/navbar.js

@@ -43,6 +43,7 @@ const AppNavBar = (props) => {
                 placeholder="Search movies"
                 path='/movies/search'
                 history={props.history}
+                setExpanded={setExpanded}
               />
           }/>
           <Route path="/shows" render={(props) =>
@@ -50,6 +51,7 @@ const AppNavBar = (props) => {
                 placeholder="Search shows"
                 path='/shows/search'
                 history={props.history}
+                setExpanded={setExpanded}
               />
           }/>
           <UserDropdown
@@ -70,12 +72,13 @@ AppNavBar.propTypes = {
 
 export default connect(mapStateToProps)(AppNavBar);
 
-const Search = (props) => {
+const Search = ({ path, placeholder, setExpanded, history }) => {
   const [search, setSearch] = useState("");
 
   const handleSearch = (ev) => {
     ev.preventDefault();
-    props.history.push(`${props.path}/${encodeURI(search)}`);
+    history.push(`${path}/${encodeURI(search)}`);
+    setExpanded(false);
   }
 
   return(
@@ -83,7 +86,7 @@ const Search = (props) => {
       <form className="input-group" onSubmit={(ev) => handleSearch(ev)}>
         <input
           className="form-control"
-          placeholder={props.placeholder}
+          placeholder={placeholder}
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
@@ -93,6 +96,7 @@ const Search = (props) => {
 }
 Search.propTypes = {
   placeholder: PropTypes.string.isRequired,
+  setExpanded: PropTypes.func.isRequired,
   path: PropTypes.string.isRequired,
   history: PropTypes.object,
 };