07-submit-email-form

Step 7 - Submit email form

The goal of this step is to actually submit the email for by POSTing the form data to the API.

As always, if you run into trouble with the tasks or exercises, you can take a peek at the final source code.

Restart Setup

If you didn't successfully complete the previous step, you can jump right in by copying the step and installing the dependencies.

Ensure you're in the root folder of the repo:

cd react-workshop

Remove the existing workshop directory if you had previously started elsewhere:

rm -rf workshop

Copy the previous step as a starting point:

cp -r 06-email-form workshop

Change into the workshop directory:

cd workshop

Install all of the dependencies (yarn is preferred):

# Yarn
yarn

# ...or NPM
npm install

Start API server (running at http://localhost:9090/):

# Yarn
yarn run start:api

# ...or NPM
npm run start:api

In a separate terminal window/tab, making sure you're still in the workshop directory, start the app:

# Yarn
yarn start

# ...or NPM
npm start

After the app is initially built, a new browser window should open up at http://localhost:3000/, and you should be able to continue on with the tasks below.

Tasks

Add a submit button and an onSubmit handler to the <form> inside EmailForm:

export default class EmailForm extends PureComponent {
  // initialize state

  // other helper methods

  _handleSubmit(e) {
    e.preventDefault();

    let {from, to, subject, message} = this.state;

    console.log('submitting', {from, to, subject, message});
  }

  render() {
    let {from, to, subject, message} = this.state;

    return (
      <form className="email-form" onSubmit={this._handleSubmit.bind(this)}>
        {/* from, to, subject & message fields */}

        <footer>
          <button type="submit">Send email</button>
        </footer>
      </form>
    );
  }
}

Add a required onSubmit prop to EmailForm and call it within _handleSubmit when all the fields are filled:

export default class EmailForm extends PureComponent {
  static propTypes = {
    onSubmit: PropTypes.func.isRequired
  }

  // initialize state

  // other helper methods

  _handleSubmit(e) {
    e.preventDefault();

    let {from, to, subject, message} = this.state;

    // super simple validation
    if (from && to && subject && message) {
      // call handler with email info
      this.props.onSubmit({
        from,
        to,
        subject,
        message
      });
    } else {
      alert('fill out the form!');
    }
  }
}

After the form is submitted, also clear reset the form fields so that it's easy to send a new email:

const DEFAULT_FORM_VALUES = {
  from: '',
  to: '[email protected]',
  subject: '',
  message: ''
};

export default class EmailForm extends PureComponent {
  // prop types

  state = DEFAULT_FORM_VALUES

  // other helper methods

  _handleSubmit(e) {
    e.preventDefault();

    let {from, to, subject, message} = this.state;

    // super simple validation
    if (from && to && subject && message) {
      // call handler with email info
      this.props.onSubmit({
        from,
        to,
        subject,
        message
      });

      // reset the form to initial values
      this.setState(DEFAULT_FORM_VALUES);
    } else {
      alert('fill out the form!');
    }
  }
}

In the top-level App component, add a handler to <EmailForm /> for its onSubmit prop and make a JSON fetch POST request to http://localhost:9090/emails, passing the new email data:

export default class App extends PureComponent {
  // prop types & default props

  // initialize state

  // lifecycle methods

  // other helper methods

  _handleFormSubmit(newEmail) {
    // Make a JSON POST with the new email
    fetch('//localhost:9090/emails', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newEmail)
    })
      .then(res => res.json())
      .then(({success}) => {
        if (!success) {
          throw new Error('Unable to send email!');
        }
      })
      .catch(ex => console.error(ex));
  }

  render() {
    let {emails, selectedEmailId} = this.state;
    let selectedEmail = emails.find(email => email.id === selectedEmailId);
    let emailViewComponent;

    if (selectedEmail) {
      emailViewComponent = (
        <EmailView
          email={selectedEmail}
          onClose={this._handleEmailViewClose.bind(this)}
        />
      );
    }

    return (
      <main className="app">
        <EmailList
          emails={emails}
          onItemSelect={this._handleItemSelect.bind(this)}
        />
        {emailViewComponent}
        <EmailForm onSubmit={this._handleFormSubmit.bind(this)} />
      </main>
    );
  }
}

Exercises

• After POSTing the new email, "optimistically" update this.state.emails with the new email so that the new email shows up immediately in the email list before the long poll interval comes around

Next

Go to Step 8 - Delete email.

Resources

• Forms
• DOM Elements
• The Power of Not Mutating Data
• Functional setState is the future of React]
• HTTP Methods
• Fetch API & Github's fetch polyfill

Questions

Got questions? Need further clarification? Feel free to post a question in Ben Ilegbodu's AMA!