text: import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import { compose } from 'redux';
  import { connect } from 'react-redux';
  import { firestoreConnect } from 'react-redux-firebase';
  import PropTypes from 'prop-types';
  
  class AddClient extends Component {
    state = {
      firstName: '',
      lastName: '',
      email: '',
      phone: '',
      balance: ''
    };
  
    onSubmit = e => {
      e.preventDefault();
  
      const newClient = this.state;
      const { firestore, history } = this.props;
  
      if (newClient.balance === '') {
        newClient.balance = 0;
      }
  
      firestore
        .add({ collection: 'clients' }, newClient)
        .then(() => history.push('/'));
    };
  
    onChange = e => this.setState({ [e.target.name]: e.target.value });
  
    render() {
      const { disableBalanceOnAdd } = this.props.settings;
      return (
        <div>
          <div className="row">
            <div className="col-md-6">
              <Link to="/" className="btn btn-link text-success">
                <span className="fas fa-arrow-circle-left" /> Back to Dashboard
              </Link>
            </div>
          </div>
          <div className="card">
            <div className="card-header">
              <h2>Add Client</h2>
            </div>
            <div className="card-body">
              <form onSubmit={this.onSubmit}>
                <div className="form-group">
                  <label htmlFor="firstName">First Name</label>
                  <input
                    type="text"
                    className="form-control"
                    name="firstName"
                    id="firstName"
                    required
                    onChange={this.onChange}
                    value={this.state.firstName}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="lastName">Last Name</label>
                  <input
                    type="text"
                    className="form-control"
                    name="lastName"
                    id="lastName"
                    required
                    onChange={this.onChange}
                    value={this.state.lastName}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="email">Email</label>
                  <input
                    type="email"
                    className="form-control"
                    name="email"
                    id="email"
                    required
                    onChange={this.onChange}
                    value={this.state.email}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="phone">Phone</label>
                  <input
                    type="text"
                    className="form-control"
                    name="phone"
                    id="phone"
                    required
                    onChange={this.onChange}
                    value={this.state.phone}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="balance">Balance</label>
                  <input
                    type="text"
                    className="form-control"
                    name="balance"
                    id="balance"
                    onChange={this.onChange}
                    value={this.state.balance}
                    disabled={disableBalanceOnAdd}
                  />
                </div>
                <input
                  type="submit"
                  value="Add New Client"
                  className="btn btn-success btn-block"
                />
              </form>
            </div>
          </div>
        </div>
      );
    }
  }
  
  AddClient.protoTypes = {
    firestore: PropTypes.object.isRequired,
    settings: PropTypes.object.isRequired
  };
  
  export default compose(
    firestoreConnect(),
    connect((state, props) => ({
      settings: state.settings
    }))
  )(AddClient);
  