Add react-bootstrap to the party

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",

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}/>
-          <NavBar {...this.props}/>
-        </div>
         <Error {...this.props}/>
         <div className="container-fluid">
           <div className="container">

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>
-        <div className="navbar-header">
+        <Navbar inverse fixedTop collapseOnSelect>
-          <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+          <Navbar.Header>
-            <span className="sr-only">Toggle navigation</span>
+            <LinkContainer to="/">
-            <span className="icon-bar"></span>
+              <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
-            <span className="icon-bar"></span>
+            </LinkContainer>
-            <span className="icon-bar"></span>
+            <Navbar.Toggle />
-          </button>
+          </Navbar.Header>
-          <a className="navbar-brand" href="#">Canapé</a>
+          <Navbar.Collapse>
-        </div>
+            <Nav>
-        <div className="collapse navbar-collapse">
+              <LinkContainer to="/movies/popular">
-          <ul className="nav navbar-nav">
+                <NavItem>Movies</NavItem>
-            <li><Link to="/movies/popular">Movies</Link></li>
+              </LinkContainer>
-          </ul>
+            </Nav>
-          <ul className="nav navbar-nav navbar-right">
+            <Nav pullRight>
-            {isLoggedIn &&
+              {isLoggedIn ||
-              <li><Link to="/users/details">{username} / Edit</Link></li>
+                <LinkContainer to="/users/login">
-            }
+                  <NavItem>Login</NavItem>
-            {isLoggedIn ||
+                </LinkContainer>
-              <li><Link to="/users/login">Login</Link></li>
+              }
-            }
+              {isLoggedIn &&
-            {isLoggedIn &&
+                  <NavDropdown title={username} id="navbar-dropdown-right">
-              <li><a onClick={this.props.userLogout}>Logout</a></li>
+                    <LinkContainer to="/users/edit">
-            }
+                      <MenuItem>Edit</MenuItem>
-          </ul>
+                    </LinkContainer>
-        </div>
+                    <LinkContainer to="/users/logout" onClick={this.props.userLogout}>
+                      <MenuItem>Logout</MenuItem>
+                    </LinkContainer>
+                  </NavDropdown>
+              }
+            </Nav>
+          </Navbar.Collapse>
+        </Navbar>
       </div>
+
     );
   }
 }

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"