{"data":{"content":{"fields":{"slug":"/labs/routing-and-components","type":"lab"},"frontmatter":{"title":"Routing and Components"},"html":"

Lab Three - Routing and Components

\n

Switch to Lab03

\n\n
cd ../ # presuming still in previous lab\ncd lab-03\nyarn start
\n

Check it out!

\n\n

 

\n

Creating our Application’s Routes

\n\n
src/App.js
\n
import Projects from './projects/Projects';\nimport Employees from './employees/Employees';\nimport Timesheets from './timesheets/Timesheets';
\n\n
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
\n\n
  render() {\n    return (\n      <BrowserRouter>\n        <div className=\"App\">\n          <div className=\"container\">\n            <Switch>\n              <Route path=\"/projects\" component={Projects}/>\n              <Route path=\"/employees\" component={Employees}/>\n              <Route path=\"/timesheets\" component={Timesheets}/>\n              <Redirect to=\"/employees\"/>\n            </Switch>\n          </div>\n        </div>\n      </BrowserRouter>\n    );\n  }
\n\n
import Navigation from './nav/Navigation';
\n
<Navigation />
\n
\n Click here to see the finished class:\n
import React from 'react';\nimport './App.css';\nimport Projects from './projects/Projects';\nimport Employees from './employees/Employees';\nimport Timesheets from './timesheets/Timesheets';\nimport Navigation from './nav/Navigation';\nimport { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <BrowserRouter>\n        <div className=\"App\">\n          <Navigation />\n          <Switch>\n            <Route path=\"/projects\" component={Projects} />\n            <Route path=\"/employees\" component={Employees} />\n            <Route path=\"/timesheets\" component={Timesheets} />\n            <Redirect to=\"/employees\" />\n          </Switch>\n        </div>\n      </BrowserRouter>\n    );\n  }\n}\n\nexport default App;
\n
\n

 

\n

Implement the Navigation bar

\n\n
src/nav/Navigation.js
\n
import React from 'react';\nimport { Nav, Navbar, NavItem } from 'react-bootstrap';\nimport { NavLink } from 'react-router-dom';
\n\n
  render() {\n    return (\n      <Navbar>\n        <Navbar.Header>\n          <Navbar.Brand>\n            Timesheetz\n          </Navbar.Brand>\n        </Navbar.Header>\n        <Nav>\n          <NavItem><NavLink to=\"/projects\">Projects</NavLink></NavItem>\n          <NavItem><NavLink to=\"/employees\">Employees</NavLink></NavItem>\n          <NavItem><NavLink to=\"/timesheets\">Timesheets</NavLink></NavItem>\n        </Nav>\n      </Navbar>\n    );\n  }
\n\n

 

\n

Test the Navbar

\n\n
src/nav/Navigation.test.js
\n
import React from 'react';\nimport { shallow } from 'enzyme';\nimport Navigation from './Navigation';\n\ndescribe('<Navigation />', () => {\n  let wrapper;\n\n  beforeEach(() => {\n    wrapper = shallow(\n      <Navigation />\n    );\n  });\n\n  it('should instantiate the Navigation Component', () => {\n    expect(wrapper).toHaveLength(1);\n  });\n});
\n

 

\n

Run the tests

\n\n

 

\n

Run the application and see your work.

\n

If you haven’t already done so,

\n\n

 

\n

Composing React Components

\n\n

 

\n

Create the EmployeeRow Component

\n\n
\n When finished, click here to see if your component is similar to the one below:\n
src/employees/EmployeeRow.js
\n
  import React from 'react';\n  import PropTypes from 'prop-types';\n  \n  class EmployeeRow extends React.Component {\n    render() {\n      const { employee } = this.props;\n  \n      return (\n        <tr>\n          <td>{employee.username}</td>\n          <td>{employee.email}</td>\n          <td>{employee.firstName}</td>\n          <td>{employee.lastName}</td>\n          <td>{employee.admin ? 'Yes' : 'No'}</td>\n        </tr>\n      );\n    }\n  }\n  \n  EmployeeRow.propTypes = {\n    employee: PropTypes.object.isRequired\n  };\n  \n  export default EmployeeRow;
\n
\n

 

\n\n
\n When finished, click here to see if your suite is similar to the one below:\n
src/employees/EmployeeRow.test.js
\n
import React from 'react';\nimport EmployeeRow from './EmployeeRow';\nimport { shallow } from 'enzyme';\n\ndescribe('<EmployeeRow />', () => {\n  let wrapper;\n\n  beforeEach(() => {\n    const employee = {\n      username: 'fflintstone',\n      email: 'fred.flintstone@slatequarry.com',\n      firstName: 'Fred',\n      lastName: 'Flintstone',\n      admin: true\n    };\n\n    wrapper = shallow(<EmployeeRow employee={employee} />);\n  });\n\n  it('should render values into expected cells', () => {\n    expect(wrapper.find('td')).toHaveLength(5);\n    expect(wrapper.find('td').at(0).text()).toEqual('fflintstone');\n    expect(wrapper.find('td').at(1).text()).toEqual('fred.flintstone@slatequarry.com');\n    expect(wrapper.find('td').at(2).text()).toEqual('Fred');\n    expect(wrapper.find('td').at(3).text()).toEqual('Flintstone');\n    expect(wrapper.find('td').at(4).text()).toEqual('Yes');\n  });\n});
\n
\n

 

\n\n

Create the EmployeeTable Component

\n\n
\n When finished, click here to see if your component is similar to the one below:\n
src/employees/EmployeeTable.js
\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Table } from 'react-bootstrap';\nimport EmployeeRow from './EmployeeRow';\n\nclass EmployeeTable extends React.Component {\n  render() {\n    const { employees } = this.props;\n\n    return (\n      <Table bordered striped>\n        <thead>\n          <tr>\n            <th>Username</th>\n            <th>Email</th>\n            <th>First Name</th>\n            <th>Last Name</th>\n            <th>Admin</th>\n          </tr>\n        </thead>\n        <tbody>\n          {employees.map(employee => (\n            <EmployeeRow employee={ employee } key={ employee._id }/>\n          ))}\n        </tbody>\n      </Table>\n    );\n  }\n}\n\nEmployeeTable.defaultProps = {\n  employees: []\n};\n\nEmployeeTable.propTypes = {\n  employees: PropTypes.array.isRequired\n};\n\nexport default EmployeeTable;
\n
\n

 

\n\n
\n When finished, click here to see if your suite is similar to the one below:\n \n
src/employees/EmployeeTable.test.js
\n
import React from 'react';\nimport EmployeeTable from './EmployeeTable';\nimport { shallow } from 'enzyme';\nimport EmployeeRow from './EmployeeRow';\n\ndescribe('<EmployeeTable />', () => {\n  let wrapper;\n\n  beforeEach(() => {\n    const employees = [\n      {\n        username: 'fflintstone',\n        email: 'fred.flintstone@slatequarry.com',\n        firstName: 'Fred',\n        lastName: 'Flintstone',\n        admin: true,\n        _id: 1\n      }\n    ];\n\n    wrapper = shallow(<EmployeeTable employees={employees} />);\n  });\n\n  it('should render a row for each employee', () => {\n    expect(wrapper.find(EmployeeRow)).toHaveLength(1);\n  });\n});
\n
\n

 

\n\n

 

\n

Create Employees Component

\n\n
[{\n  _id: 1,\n  username: 'admin',\n  email: 'admin@mixtape.com',\n  password: 'password',\n  admin: true,\n  firstName: 'Admin',\n  lastName: 'User'\n}, {\n  _id: 2,\n  username: 'user',\n  email: 'user@mixtape.com',\n  password: 'password',\n  admin: false,\n  firstName: 'Normal',\n  lastName: 'User'\n}]
\n

 

\n
\n When finished, click here to see if your component is similar to the one below:\n \n
  import React from 'react';\n  import PropTypes from 'prop-types';\n  import EmployeeTable from './EmployeeTable';\n  \n  class Employees extends React.Component {\n    state = {\n      employees: [\n        {\n          _id: 1,\n          username: 'admin',\n          email: 'admin@mixtape.com',\n          password: 'password',\n          admin: true,\n          firstName: 'Admin',\n          lastName: 'User'\n        },\n        {\n          _id: 2,\n          username: 'user',\n          email: 'user@mixtape.com',\n          password: 'password',\n          admin: false,\n          firstName: 'Normal',\n          lastName: 'User'\n        }\n      ]\n    };\n  \n    render() {\n      const { employees } = this.state;\n  \n      return (\n        <div>\n          <h1>Employees</h1>\n          <EmployeeTable employees={ employees }/>\n        </div>\n      );\n    }\n  }\n  \n  Employees.propTypes = {\n      employees: PropTypes.arrayOf(PropTypes.object)\n  };\n  \n  export default Employees;
\n
\n

 

\n\n
\n When finished, click here to see if your component is similar to the one below:\n
src/employees/Employees.test.js
\n
import React from 'react';\nimport Employees from './Employees';\nimport { shallow } from 'enzyme';\nimport EmployeeTable from './EmployeeTable';\n\ndescribe('<Employees />', () => {\n  let wrapper;\n\n  beforeEach(() => {\n    wrapper = shallow(<Employees />);\n  });\n\n  it('should instantiate the Employee Component', () => {\n    expect(wrapper).toHaveLength(1);\n  });\n\n  it('should pass employees down to table', () => {\n    wrapper.setState({\n      employees: [{}, {}, {}, {}]\n    });\n    expect(wrapper.find(EmployeeTable).prop('employees')).toHaveLength(4);\n  });\n});
\n
\n

 

\n\n

Run the application and see your work.

\n

If you haven’t already done so,

\n\n

\n