text: import React, { Fragment, useState } from "react";
  import { Link, withRouter } from "react-router-dom";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { createProfile } from "../../actions/profile";
  
  const CreateProfile = ({ createProfile, history }) => {
    const [formData, setFormData] = useState({
      location: "",
      gender: "",
      birthdate: "",
      fluentLanguages: "",
      learningLanguages: "",
      bio: "",
      twitter: "",
      facebook: "",
      instagram: ""
    });
  
    const [displaySocialInputs, toggleSocialInputs] = useState(false);
  
    const {
      location,
      gender,
      birthdate,
      fluentLanguages,
      learningLanguages,
      bio,
      twitter,
      facebook,
      instagram
    } = formData;
  
    const onChange = e =>
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = e => {
      e.preventDefault();
      createProfile(formData, history);
    };
  
    return (
      <Fragment>
        <h1 className="large text-primary">Create Your Profile</h1>
        <p className="lead">
          <i className="fas fa-user" /> Let's get some information to make your
          profile stand out
        </p>
        <small>* = required field</small>
        <form className="form" onSubmit={e => onSubmit(e)}>
          <div className="form-group">
            <select name="gender" value={gender} onChange={e => onChange(e)}>
              <option value="0">* Select Gender</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <div className="form-group">
            <h4>Birthdate</h4>
            <input
              type="date"
              name="birthdate"
              value={birthdate}
              onChange={e => onChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              placeholder="City"
              name="location"
              value={location}
              onChange={e => onChange(e)}
            />
            <small className="form-text">
              So that you can find LangBuddies in your area, if you prefer!
            </small>
          </div>
          <div className="form-group">
            <input
              type="text"
              placeholder="* I speak fluently"
              name="fluentLanguages"
              value={fluentLanguages}
              onChange={e => onChange(e)}
            />
            <small className="form-text">
              Please use comma separated values (eg. English, Chinese, French)
            </small>
          </div>
          <div className="form-group">
            <input
              type="text"
              placeholder="* I'm learning"
              name="learningLanguages"
              value={learningLanguages}
              onChange={e => onChange(e)}
            />
            <small className="form-text">
              Please use comma separated values (eg. English, Chinese, French)
            </small>
          </div>
          <div className="form-group">
            <textarea
              placeholder="A short bio of yourself"
              name="bio"
              value={bio}
              onChange={e => onChange(e)}
            />
            <small className="form-text">Tell us a little about yourself</small>
          </div>
  
          <div className="my-2">
            <button
              onClick={() => toggleSocialInputs(!displaySocialInputs)}
              type="button"
              className="btn btn-light"
            >
              Add Social Network Links
            </button>
            <span>Optional</span>
          </div>
  
          {displaySocialInputs && (
            <Fragment>
              <div className="form-group social-input">
                <i className="fab fa-twitter fa-2x" />
                <input
                  type="text"
                  placeholder="Twitter URL"
                  name="twitter"
                  value={twitter}
                  onChange={e => onChange(e)}
                />
              </div>
  
              <div className="form-group social-input">
                <i className="fab fa-facebook fa-2x" />
                <input
                  type="text"
                  placeholder="Facebook URL"
                  name="facebook"
                  value={facebook}
                  onChange={e => onChange(e)}
                />
              </div>
  
              <div className="form-group social-input">
                <i className="fab fa-instagram fa-2x" />
                <input
                  type="text"
                  placeholder="Instagram URL"
                  name="instagram"
                  value={instagram}
                  onChange={e => onChange(e)}
                />
              </div>
            </Fragment>
          )}
  
          <input type="submit" className="btn btn-primary my-1" />
          <Link className="btn btn-light my-1" to="/dashboard">
            Go Back
          </Link>
        </form>
      </Fragment>
    );
  };
  
  CreateProfile.propTypes = {
    createProfile: PropTypes.func.isRequired
  };
  
  export default connect(
    null,
    { createProfile }
  )(withRouter(CreateProfile));
  