Update Component

In this last lesson, we'll refactor the UsersList component remove the add user form and display a Bootstrap-styled table of users....


In the terminal, navigate to the flask-microservices-users project, activate a virtual environment, and then run the Flask server:

(env)$ python manage.py runserver

Then, in a new terminal window, navigate to the flask-microservices-client project, set the environment variable, and run the React app:

$ export REACT_APP_USERS_SERVICE_URL=http://127.0.0.1:5000
$ npm start

Make sure all is well!

Remove Form

To remove the form, update UsersList.jsx:

import React from 'react';

const UsersList = (props) => {
  return (
    <div>
      <h1>All Users</h1>
      <hr/><br/>
      {
        props.users.map((user) => {
          return <h4 key={user.id} className="well"><strong>{user.username}</strong> - <em>{user.created_at}</em></h4>
        })
      }
    </div>
  )
}

export default UsersList;

Update the route in the App component:

<Route exact path='/' render={() => (
  <UsersList
    users={this.state.users}
  />
)} />

Make sure to remove the AddUser import at the top of the file, and the test it out.

Table

Next, let's use React-Bootstrap to add a table in the UsersList component:

import React from 'react';
import { Table } from 'react-bootstrap';

const UsersList = (props) => {
  return (
    <div>
      <h1>All Users</h1>
      <hr/><br/>
      <Table striped bordered condensed hover>
        <thead>
          <tr>
            <th>User ID</th>
            <th>Email</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          {
            props.users.map((user) => {
              return (
                <tr key={user.id}>
                  <td>{user.id}</td>
                  <td>{user.email}</td>
                  <td>{user.username}</td>
                  <td>{user.created_at}</td>
                </tr>
              )
            })
          }
        </tbody>
      </Table>
    </div>
  )
}

export default UsersList;

That's it. Short lesson. Commit you code.

You may have noticed that we are not handling errors on the client. We'll tackle that in the next part 4!



Update Component

In this last lesson, we'll refactor the UsersList component remove the add user form and display a Bootstrap-styled table of users....


In the terminal, navigate to the flask-microservices-users project, activate a virtual environment, and then run the Flask server:

(env)$ python manage.py runserver

Then, in a new terminal window, navigate to the flask-microservices-client project, set the environment variable, and run the React app:

$ export REACT_APP_USERS_SERVICE_URL=http://127.0.0.1:5000
$ npm start

Make sure all is well!

Remove Form

To remove the form, update UsersList.jsx:

import React from 'react';

const UsersList = (props) => {
  return (
    <div>
      <h1>All Users</h1>
      <hr/><br/>
      {
        props.users.map((user) => {
          return <h4 key={user.id} className="well"><strong>{user.username}</strong> - <em>{user.created_at}</em></h4>
        })
      }
    </div>
  )
}

export default UsersList;

Update the route in the App component:

<Route exact path='/' render={() => (
  <UsersList
    users={this.state.users}
  />
)} />

Make sure to remove the AddUser import at the top of the file, and the test it out.

Table

Next, let's use React-Bootstrap to add a table in the UsersList component:

import React from 'react';
import { Table } from 'react-bootstrap';

const UsersList = (props) => {
  return (
    <div>
      <h1>All Users</h1>
      <hr/><br/>
      <Table striped bordered condensed hover>
        <thead>
          <tr>
            <th>User ID</th>
            <th>Email</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          {
            props.users.map((user) => {
              return (
                <tr key={user.id}>
                  <td>{user.id}</td>
                  <td>{user.email}</td>
                  <td>{user.username}</td>
                  <td>{user.created_at}</td>
                </tr>
              )
            })
          }
        </tbody>
      </Table>
    </div>
  )
}

export default UsersList;

That's it. Short lesson. Commit you code.

You may have noticed that we are not handling errors on the client. We'll tackle that in the next part 4!