text: import React, { Fragment, useState, useEffect } from "react";
  import { Link, withRouter } from "react-router-dom";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { createProfile, getCurrentProfile } from "../../actions/profile";
  
  const EditProfile = ({
    profile: { profile, loading },
    createProfile,
    getCurrentProfile,
    history
  }) => {
    const [formData, setFormData] = useState({
      location: "",
      coins: "",
      travel_distance: "",
      src: "",
      dest: "",
      price: ""
    });
  
    useEffect(() => {
      getCurrentProfile();
  
      setFormData({
        location: loading || !profile.location ? "" : profile.location,
        coins: loading || !profile.coins ? "" : profile.coins,
        travel_distance:
          loading || !profile.travel_distance ? "" : profile.travel_distance
      });
    }, [loading, getCurrentProfile]);
  
    const { location, coins, travel_distance } = formData;
  
    const onChange = e =>
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = e => {
      e.preventDefault();
      createProfile(formData, history, true);
    };
  
    return (
      <Fragment>
        <h1 className="large text-primary">Confirm Ticket Details</h1>
        <p className="lead">
          <i className="fas fa-bus" /> Have a safe journey ahead
        </p>
        <small>* = required field</small>
        <form className="form" onSubmit={e => onSubmit(e)}>
          <div className="form-group">
            <input
              type="number"
              placeholder="Coins"
              name="coins"
              value={coins}
              onChange={e => onChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="number"
              placeholder="Travel Distance"
              name="travel_distance"
              value={travel_distance}
              onChange={e => onChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              placeholder="Location"
              name="location"
              value={location}
              onChange={e => onChange(e)}
            />
            <small className="form-text">
              City & state suggested (eg. Boston, MA)
            </small>
          </div>
  
          <input type="submit" className="btn btn-primary my-1" />
          <Link className="btn btn-light my-1" to="/dashboard">
            Go Back
          </Link>
        </form>
      </Fragment>
    );
  };
  
  EditProfile.propTypes = {
    createProfile: PropTypes.func.isRequired,
    getCurrentProfile: PropTypes.func.isRequired,
    profile: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state => ({
    profile: state.profile
  });
  
  export default connect(
    mapStateToProps,
    { createProfile, getCurrentProfile }
  )(withRouter(EditProfile));
  