text: import React, { Component } from 'react';
  import { Message, Button, Form, Select, TextArea } from 'semantic-ui-react';
  import axios from 'axios';
  
  class FormUser extends Component {
  
    constructor(props) {
      super(props);
      
      this.state = {
        name: '',
        mapping: '',
        inventory: []
      }
  
      this.handleInputChange = this.handleInputChange.bind(this);
      this.handleSelectChange = this.handleSelectChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    componentWillMount() {
      // Fill in the form with the appropriate data if user id is provided
      if (this.props.userID) {
        axios.get(`${this.props.server}/api/users/${this.props.userID}`)
        .then((response) => {
          this.setState({
            name: response.data.name,
            mapping: response.data.mapping,
            inventory: response.data.inventory
          });
        })
        .catch((err) => {
          console.log(err);
        });
      }
    }
  
    handleInputChange(e) {
      const target = e.target;
      const value = target.type === 'checkbox' ? target.checked : target.value;
      const name = target.name;
  
      this.setState({ [name]: value });
    }
  
    handleSelectChange(e, data) {
      this.setState({ gender: data.value });
    }
  
    handleSubmit(e) {
      // Prevent browser refresh
      e.preventDefault();
  
      const user = {
        name: this.state.name,
        mapping: this.state.mapping,
      }
  
      // Acknowledge that if the user id is provided, we're updating via PUT
      // Otherwise, we're creating a new data via POST
      const method = this.props.userID ? 'put' : 'post';
      const params = this.props.userID ? this.props.userID : '';
  
      axios({
        method: method,
        responseType: 'json',
        url: `${this.props.server}/api/users/${params}`,
        data: user
      })
      .then((response) => {
        this.setState({
          formClassName: 'success',
          formSuccessMessage: response.data.msg
        });
  
        if (!this.props.userID) {
          this.setState({
            name: '',
            mapping: ''
          });
          this.props.onUserAdded(response.data.result);
          this.props.socket.emit('add', response.data.result);
        }
        else {
          this.props.onUserUpdated(response.data.result);
          this.props.socket.emit('update', response.data.result);
        }
        
      })
      .catch((err) => {
        if (err.response) {
          if (err.response.data) {
            this.setState({
              formClassName: 'warning',
              formErrorMessage: err.response.data.msg
            });
          }
        }
        else {
          this.setState({
            formClassName: 'warning',
            formErrorMessage: 'Something went wrong. ' + err
          });
        }
      });
    }
  
    render() {
      const formClassName = this.state.formClassName;
      const formSuccessMessage = this.state.formSuccessMessage;
      const formErrorMessage = this.state.formErrorMessage;
  
      return (
        <Form className={formClassName} onSubmit={this.handleSubmit}>
          <Form.Input
            label='Provider Name'
            type='text'
            placeholder='Terry White Ford'
            name='name'
            maxLength='40'
            required
            value={this.state.name}
            onChange={this.handleInputChange}
          />
          <Form.Field>
            <label>Mapping YAML</label>
            <TextArea
            label='Mapping'
            placeholder="Make: Brand"
            name='mapping'
            required
            value={this.state.mapping}
            onChange={this.handleInputChange}
          />
          </Form.Field>
          <Message
            success
            color='green'
            header='Nice one!'
            content={formSuccessMessage}
          />
          <Message
            warning
            color='yellow'
            header='Woah!'
            content={formErrorMessage}
          />
          <Button color={this.props.buttonColor} floated='right'>{this.props.buttonSubmitTitle}</Button>
          <br /><br /> {/* Yikes! Deal with Semantic UI React! */}
  
          <div><pre>Inventory: {JSON.stringify(this.state.inventory, null, 2) }</pre></div>
        </Form>
  
      );
    }
  }
  
  export default FormUser;
  