From 265eeb1ec35efcdc8c43ab92de8b160eb5485a36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Mon, 5 Jun 2017 13:31:37 +0200
Subject: [PATCH] Close the navbar after a search on a mobile device

---
 src/public/js/components/navbar.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/public/js/components/navbar.js b/src/public/js/components/navbar.js
index 8813c1a..8226f62 100644
--- a/src/public/js/components/navbar.js
+++ b/src/public/js/components/navbar.js
@@ -2,14 +2,16 @@ import React from "react"
 import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from "react-bootstrap"
 import { LinkContainer } from "react-router-bootstrap"
 
-export default class NavBar extends React.PureComponent {
+export default class AppNavBar extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       userLoggedIn: (props.username !== ""),
       displayMoviesSearch: this.shouldDisplayMoviesSearch(props.router),
       displayShowsSearch: this.shouldDisplayShowsSearch(props.router),
+      expanded: false,
     };
+    this.setExpanded = this.setExpanded.bind(this);
   }
   componentWillReceiveProps(nextProps) {
     // Update the state based on the next props
@@ -34,10 +36,14 @@ export default class NavBar extends React.PureComponent {
     const location = router.getCurrentLocation().pathname;
     return (location.indexOf(keyword) !== -1)
   }
+  setExpanded(value) {
+    if (this.state.expanded === value) { return }
+    this.setState({ expanded: value });
+  }
   render() {
     return (
       <div>
-        <Navbar fluid fixedTop collapseOnSelect>
+        <Navbar fluid fixedTop collapseOnSelect expanded={this.state.expanded} onToggle={this.setExpanded}>
           <Navbar.Header>
             <LinkContainer to="/">
               <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
@@ -63,6 +69,7 @@ export default class NavBar extends React.PureComponent {
                 placeholder="Search movies"
                 router={this.props.router}
                 path='/movies/search'
+                setExpanded={this.setExpanded}
               />
             }
             {(this.state.displayShowsSearch && this.state.userLoggedIn) &&
@@ -70,6 +77,7 @@ export default class NavBar extends React.PureComponent {
                 placeholder="Search shows"
                 router={this.props.router}
                 path='/shows/search'
+                setExpanded={this.setExpanded}
               />
             }
           </Navbar.Collapse>
@@ -86,6 +94,7 @@ class Search extends React.Component {
   }
   handleSearch(ev) {
     ev.preventDefault();
+    this.props.setExpanded(false);
     this.props.router.push(`${this.props.path}/${encodeURI(this.input.value)}`);
   }
   render() {