Update Component

Part 3, Lesson 10



In this lesson, we'll refactor the UsersList component to 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 then 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>
            <th>Created Date</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 part 4!


Update Component

In this lesson, we'll refactor the UsersList component to 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 then 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>
            <th>Created Date</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 part 4!