feat: Add NavBar component + update docker-compose-dev.yml

- Add react-bootstrap and react-router-bootstrap modules
- Create NavBar.test.js with initial NavBar tests
- Create NavBar.js component
- Update App component to add NavBar
- Update index.html with bootstrap version for react-bootstrap
- Update UsersList component with bootstrap v3 classname
- NOTE. docker-compose-dev.yml has been updated
  - WHY? When adding npm dependencies to react app, the container node_modules directory is not updated.
  - SOLUTION: mount the node_modules directory to volume
  - (docker/compose#4337 (comment))

docker-compose-dev.yml

@@ -50,7 +50,7 @@ services:
  dockerfile: Dockerfile-dev
  volumes:
  - './services/client:/usr/src/app'
- - '/usr/src/app/node_modules'
+ - './services/client/node_modules:/usr/src/app/node_modules'
  ports:
  - '3007:3000'
  environment:

services/client/package.json

@@ -5,7 +5,9 @@
  "dependencies": {
  "axios": "^0.18.0",
  "react": "^16.2.0",
+ "react-bootstrap": "^0.32.1",
  "react-dom": "^16.2.0",
+ "react-router-bootstrap": "^0.24.4",
  "react-router-dom": "^4.2.2",
  "react-scripts": "1.1.1"
  },

services/client/public/index.html

@@ -20,8 +20,7 @@
  Learn how to configure a non-root public URL by running `npm run build`.
  -->
  <link
- href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
- rel="stylesheet"
+ rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  >
  <title>React App</title>
  </head>

services/client/src/components/App.js

@@ -5,12 +5,14 @@ import axios from 'axios'
 import UsersList from './UsersList'
 import AddUser from './AddUser'
 import About from './About'
+import NavBar from './NavBar'
 
 export default class App extends Component {
  state = {
  users: [],
  username: '',
  email: '',
+ title: 'TestDrivenApp',
  }
 
  componentDidMount() {
@@ -53,36 +55,39 @@ export default class App extends Component {
  }
 
  render() {
- const { users, username, email } = this.state
+ const { users, username, email, title } = this.state
 
  return (
  <Router>
- <div className="container">
- <div className="row">
- <div className="col-md-6">
- <br />
- <Switch>
- <Route
- exact={true}
- path="/"
- render={() => (
- <div>
- <h1>{'All Users'}</h1>
- <hr />
- <br />
- <AddUser
- username={username}
- email={email}
- addUser={this.addUser}
- handleChange={this.handleChange}
- />
- <br />
- <UsersList users={users} />
- </div>
- )}
- />
- <Route exact={true} path="/about" component={About} />
- </Switch>
+ <div>
+ <NavBar title={title} />
+ <div className="container">
+ <div className="row">
+ <div className="col-md-6">
+ <br />
+ <Switch>
+ <Route
+ exact={true}
+ path="/"
+ render={() => (
+ <div>
+ <h1>{'All Users'}</h1>
+ <hr />
+ <br />
+ <AddUser
+ username={username}
+ email={email}
+ addUser={this.addUser}
+ handleChange={this.handleChange}
+ />
+ <br />
+ <UsersList users={users} />
+ </div>
+ )}
+ />
+ <Route exact={true} path="/about" component={About} />
+ </Switch>
+ </div>
  </div>
  </div>
  </div>

services/client/src/components/NavBar.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Navbar, Nav, NavItem } from 'react-bootstrap'
+import { LinkContainer } from 'react-router-bootstrap'
+
+NavBar.propTypes = {
+ title: PropTypes.string.isRequired,
+}
+
+export default function NavBar(props) {
+ return (
+ <Navbar inverse={true} collapseOnSelect={true}>
+ <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}>{'User Status'}</NavItem>
+ </LinkContainer>
+ </Nav>
+ <Nav pullRight={true}>
+ <LinkContainer to="/register">
+ <NavItem eventKey={1}>{'Register'}</NavItem>
+ </LinkContainer>
+ <LinkContainer to="/login">
+ <NavItem eventKey={2}>{'Log In'}</NavItem>
+ </LinkContainer>
+ <LinkContainer to="/logout">
+ <NavItem eventKey={3}>{'Log Out'}</NavItem>
+ </LinkContainer>
+ </Nav>
+ </Navbar.Collapse>
+ </Navbar>
+ )
+}

services/client/src/components/UsersList.js

@@ -12,7 +12,7 @@ export default function UsersList(props) {
  <div>
  {users.map((user) => {
  return (
- <h4 key={user.id} className="card card-body bg-light">
+ <h4 key={user.id} className="well">
  {user.username}
  </h4>
  )

services/client/src/components/__tests__/About.test.js

@@ -13,7 +13,7 @@ describe('About Component', () => {
  })
 })
 
-describe('App Component Snapshot', () => {
+describe('About Component Snapshot', () => {
  test('renders', () => {
  const tree = renderer.create(<About />).toJSON()
  expect(tree).toMatchSnapshot()

services/client/src/components/__tests__/NavBar.test.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import renderer from 'react-test-renderer'
+import { MemoryRouter as Router } from 'react-router-dom'
+
+import NavBar from '../NavBar'
+
+const title = 'Hello, World!'
+
+describe('NavBar Component', () => {
+ it('renders properly', () => {
+ const wrapper = shallow(<NavBar title={title} />)
+ const element = wrapper.find('span')
+ expect(element.length).toBe(1)
+ expect(element.get(0).props.children).toBe(title)
+ })
+})
+
+describe('NavBar Component Snapshot', () => {
+ it('renders', () => {
+ const tree = renderer
+ .create(
+ <Router location="/">
+ <NavBar title={title} />
+ </Router>
+ )
+ .toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+})

services/client/src/components/__tests__/UsersList.test.js

@@ -23,7 +23,7 @@ test('UsersList renders properly', () => {
  const wrapper = shallow(<UsersList users={users} />)
  const element = wrapper.find('h4')
  expect(element.length).toBe(2)
- expect(element.get(0).props.className).toBe('card card-body bg-light')
+ expect(element.get(0).props.className).toBe('well')
  expect(element.get(0).props.children).toBe('john_doe')
 })