part3: React Bootstrap - NavBar

Author: repodevs

package-lock.json

@@ -5,7 +5,9 @@
   "dependencies": {
     "axios": "^0.16.2",
     "react": "^16.0.0",
+    "react-bootstrap": "^0.31.0",
     "react-dom": "^16.0.0",
+    "react-router-bootstrap": "^0.24.2",
     "react-router-dom": "^4.1.1"
   },
   "devDependencies": {

package.json

@@ -5,6 +5,7 @@ import axios from 'axios';
 import UsersList from './components/UsersList';
 import AddUser from './components/AddUser';
 import About from './components/About';
+import NavBar from './components/NavBar';
 
 
 class App extends Component {
@@ -13,7 +14,8 @@ class App extends Component {
     this.state = {
       users: [],
       username: '',
-      email: ''
+      email: '',
+      title: 'repodevs - microservices'
     }
   }
 
@@ -48,31 +50,36 @@ class App extends Component {
 
   render() {
     return (
-      <div className="container">
-        <div className="row">
-          <div className="col-md-6">
-            <br/>
-            <Switch>
-              <Route exact path='/' render={() => (
-                <div>
-                  <h1>All User</h1>
-                  <hr/><br/>
-                  <AddUser
-                    username={this.state.username}
-                    email={this.state.email}
-                    handleChange={this.handleChange.bind(this)}
-                    addUser={this.addUser.bind(this)}
-                  />
-                  <br/>
-                  <UsersList users={this.state.users} />
-                </div>
+      <div>
+        <NavBar
+          title={this.state.title}
+          />
+          <div className="container">
+            <div className="row">
+              <div className="col-md-6">
+                <br/>
+                <Switch>
+                  <Route exact path='/' render={() => (
+                    <div>
+                      <h1>All User</h1>
+                      <hr/><br/>
+                      <AddUser
+                        username={this.state.username}
+                        email={this.state.email}
+                        handleChange={this.handleChange.bind(this)}
+                        addUser={this.addUser.bind(this)}
+                      />
+                      <br/>
+                      <UsersList users={this.state.users} />
+                    </div>
 
-              )} />
+                  )} />
 
-              <Route exact path='/about' component={About} />
-            </Switch>
+                  <Route exact path='/about' component={About} />
+                </Switch>
+              </div>
+            </div>
           </div>
-        </div>
       </div>
     )
   }

src/App.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Navbar, Nav, NavItem } from 'react-bootstrap';
+import { LinkContainer} from 'react-router-bootstrap';
+
+const NavBar = (props) => (
+	<Navbar inverse collapseOnSelect>
+		<Navbar.Header>
+			<Navbar.Brand>
+				<span>{props.title}</span>
+			</Navbar.Brand>
+			<Navbar.Toggle />
+		</Navbar.Header>
+		<Navbar.Collapse>
+			<Nav>
+				<LinkContainer to="/">
+					<NavItem eventKey={1}>Home</NavItem>
+				</LinkContainer>
+				<LinkContainer to="/about">
+					<NavItem eventKey={2}>About</NavItem>
+				</LinkContainer>
+				<LinkContainer to="/status">
+					<NavItem eventKey={3}>Status</NavItem>
+				</LinkContainer>
+			</Nav>
+			<Nav pullRight>
+				<LinkContainer to="/register">
+					<NavItem eventKey={1}>Register</NavItem>
+				</LinkContainer>
+				<LinkContainer to="/login">
+					<NavItem eventKey={2}>Login</NavItem>
+				</LinkContainer>
+				<LinkContainer to="/logout">
+					<NavItem eventKey={3}>Logout</NavItem>
+				</LinkContainer>				
+			</Nav>
+		</Navbar.Collapse>
+	</Navbar>
+)
+
+export default NavBar;