text: import React, { Component } from 'react';
  import './SMSForm.css';
  
  class SMSForm extends Component {
    constructor(props) {
      super(props);
      this.state = {
        message: {
          to: [],
          body: ''
        },
        submitting: false,
        error: false
      };
      this.onSubmit = this.onSubmit.bind(this);
      this.onHandleChange = this.onHandleChange.bind(this);
    }
  
    onSubmit(event) {
      event.preventDefault();
      this.setState({ submitting: true });
      fetch('/api/messages', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state.message)
      })
        .then(res => res.json())
        .then(data => {
          if (data.success) {
            this.setState({
              error: false,
              submitting: false,
              message: {
                body: ''
              }
            });
          } else {
            this.setState({
              error: true,
              submitting: false
            });
          }
        });
    }
  
    onHandleChange(event) {
      const name = event.target.getAttribute('name');
      this.setState({
        message: { ...this.state.message, [name]: event.target.value }
      });
    }
  
    render() {
      return (
        <form
          onSubmit={this.onSubmit}
          className={this.state.error ? 'error sms-form' : 'sms-form'}
        >
          <div>
            <label htmlFor="to">To:</label>
            <select
              required
              type="tel"
              id="to"
              name="to"
              onChange={this.onHandleChange}
              value={this.state.message.to}>
              <option value={null}>-</option>
              <option value={'+33660681565'}>Equipe A</option>
              <option value={'+33660681565'}>Equipe B</option>
            </select>
          </div>
          <div>
            <label htmlFor="body">Body:</label>
            <textarea
              name="body"
              id="body"
              value={this.state.message.body}
              onChange={this.onHandleChange}
            />
          </div>
          <button type="submit" disabled={this.state.submitting}>
            Send message
          </button>
        </form>
      );
    }
  }
  
  export default SMSForm;
  