From 544d4c82398686cda297fbfa918747dbb1cd603d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Wed, 16 Nov 2016 15:04:49 +0100
Subject: [PATCH] Add react-bootstrap to the party

---
 package.json                        |  2 +
 src/public/js/app.js                |  4 +-
 src/public/js/components/navbar.jsx | 63 +++++++++++++++++------------
 yarn.lock                           | 57 ++++++++++++++++++++++++++
 4 files changed, 97 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 2b630ea..1b9b7ee 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,11 @@
         "jquery": "^2.2.4",
         "jwt-decode": "^2.1.0",
         "react": "^15.3.2",
+        "react-bootstrap": "^0.30.6",
         "react-dom": "^15.3.2",
         "react-redux": "^4.4.6",
         "react-router": "^3.0.0",
+        "react-router-bootstrap": "^0.23.1",
         "react-router-redux": "^4.0.7",
         "redux": "^3.6.0",
         "redux-auth-wrapper": "^0.9.0",
diff --git a/src/public/js/app.js b/src/public/js/app.js
index c4ba719..2082f3b 100644
--- a/src/public/js/app.js
+++ b/src/public/js/app.js
@@ -28,9 +28,7 @@ class Main extends React.Component {
   render() {
     return (
       <div>
-        <div className="navbar navbar-inverse navbar-fixed-top">
-          <NavBar {...this.props}/>
-        </div>
+        <NavBar {...this.props}/>
         <Error {...this.props}/>
         <div className="container-fluid">
           <div className="container">
diff --git a/src/public/js/components/navbar.jsx b/src/public/js/components/navbar.jsx
index 1b55918..bc56983 100644
--- a/src/public/js/components/navbar.jsx
+++ b/src/public/js/components/navbar.jsx
@@ -3,38 +3,49 @@ import { Link } from 'react-router'
 import { store } from '../store'
 import { isUserLoggedIn } from '../actions/actionCreators'
 
+import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
+import { LinkContainer } from 'react-router-bootstrap'
+
 export default class NavBar extends React.Component {
   render() {
     const username = this.props.userStore.username;
     const isLoggedIn = username !== "" ? true : false;
     return (
-      <div className="container-fluid">
-        <div className="navbar-header">
-          <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-            <span className="sr-only">Toggle navigation</span>
-            <span className="icon-bar"></span>
-            <span className="icon-bar"></span>
-            <span className="icon-bar"></span>
-          </button>
-          <a className="navbar-brand" href="#">Canapé</a>
-        </div>
-        <div className="collapse navbar-collapse">
-          <ul className="nav navbar-nav">
-            <li><Link to="/movies/popular">Movies</Link></li>
-          </ul>
-          <ul className="nav navbar-nav navbar-right">
-            {isLoggedIn &&
-              <li><Link to="/users/details">{username} / Edit</Link></li>
-            }
-            {isLoggedIn ||
-              <li><Link to="/users/login">Login</Link></li>
-            }
-            {isLoggedIn &&
-              <li><a onClick={this.props.userLogout}>Logout</a></li>
-            }
-          </ul>
-        </div>
+      <div>
+        <Navbar inverse fixedTop collapseOnSelect>
+          <Navbar.Header>
+            <LinkContainer to="/">
+              <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
+            </LinkContainer>
+            <Navbar.Toggle />
+          </Navbar.Header>
+          <Navbar.Collapse>
+            <Nav>
+              <LinkContainer to="/movies/popular">
+                <NavItem>Movies</NavItem>
+              </LinkContainer>
+            </Nav>
+            <Nav pullRight>
+              {isLoggedIn ||
+                <LinkContainer to="/users/login">
+                  <NavItem>Login</NavItem>
+                </LinkContainer>
+              }
+              {isLoggedIn &&
+                  <NavDropdown title={username} id="navbar-dropdown-right">
+                    <LinkContainer to="/users/edit">
+                      <MenuItem>Edit</MenuItem>
+                    </LinkContainer>
+                    <LinkContainer to="/users/logout" onClick={this.props.userLogout}>
+                      <MenuItem>Logout</MenuItem>
+                    </LinkContainer>
+                  </NavDropdown>
+              }
+            </Nav>
+          </Navbar.Collapse>
+        </Navbar>
       </div>
+
     );
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 297bd59..d116c89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -859,6 +859,10 @@ chokidar@^1.0.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
+classnames@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 cliui@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1036,6 +1040,10 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
+dom-helpers@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-2.4.0.tgz#9bb4b245f637367b1fa670274272aa28fe06c367"
+
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -1692,6 +1700,12 @@ invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1:
   dependencies:
     loose-envify "^1.0.0"
 
+invariant@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  dependencies:
+    loose-envify "^1.0.0"
+
 is-absolute@^0.2.3:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb"
@@ -1913,6 +1927,10 @@ jwt-decode:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-2.1.0.tgz#d3079cef1689d82d56bbb7aedcfea28b12f0e36a"
 
+keycode@^2.1.2:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.1.7.tgz#7b9255919f6cff562b09a064d222dca70b020f5c"
+
 kind-of@^3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.0.4.tgz#7b8ecf18a4e17f8269d73b501c9f232c96887a74"
@@ -2579,10 +2597,39 @@ rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~1.0.4"
 
+react-bootstrap:
+  version "0.30.6"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.30.6.tgz#288662a245f9dbb79f7740ee595e4ec931d6a4a9"
+  dependencies:
+    babel-runtime "^6.11.6"
+    classnames "^2.2.5"
+    dom-helpers "^2.4.0"
+    invariant "^2.2.1"
+    keycode "^2.1.2"
+    react-overlays "^0.6.10"
+    react-prop-types "^0.4.0"
+    uncontrollable "^4.0.1"
+    warning "^3.0.0"
+
 react-dom@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
 
+react-overlays@^0.6.10:
+  version "0.6.10"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.6.10.tgz#e7e52dad47f00a0fc784eb044428c3a9e874bfa3"
+  dependencies:
+    classnames "^2.2.5"
+    dom-helpers "^2.4.0"
+    react-prop-types "^0.4.0"
+    warning "^3.0.0"
+
+react-prop-types@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0"
+  dependencies:
+    warning "^3.0.0"
+
 react-redux:
   version "4.4.6"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.6.tgz#4b9d32985307a11096a2dd61561980044fcc6209"
@@ -2602,6 +2649,10 @@ react-router:
     loose-envify "^1.2.0"
     warning "^3.0.0"
 
+react-router-bootstrap:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/react-router-bootstrap/-/react-router-bootstrap-0.23.1.tgz#a1e0b82f49d25a6083c72202ad16aaa64bba0e0c"
+
 react-router-redux:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.7.tgz#9b1fde4e70106c50f47214e12bdd888cfb96e2a6"
@@ -3116,6 +3167,12 @@ unc-path-regex@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
 
+uncontrollable@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-4.0.3.tgz#06ec76cb9e02914756085d9cea0354fc746b09b4"
+  dependencies:
+    invariant "^2.1.0"
+
 unique-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"