content: import React, { Component } from 'react';
  import ErrorAlert from '../ErrorAlert/ErrorAlert';
  import SpinnerOnly from '../Spinner/SpinnerOnly';
  
  class UpdateEmail extends Component {
  	constructor(props) {
  		super(props);
  
  		this.state = {
  			showEmailForm: false,
  			newEmail: '',
  		}
  	}
  
  	displayEmailForm = () => {
  		this.setState({
  			showEmailForm: true,
  		});
  	}
  
  	hideEmailForm = () => {
  		this.setState({
  			showEmailForm: false,
  		});
  	}
  
  	emailInput = (e) => {
  		this.setState({
  			newEmail: e.target.value,
  		});
  	}
  
  	updateEmail = (e) => {
  		e.preventDefault();
  		this.props.updateEmail(this.props.id, this.state.newEmail)		
  		this.hideEmailForm();
  	}
  
  	viewOrUpdateEmail = () => {
  		if (this.props.loading) {
  			return <SpinnerOnly />
  		}
  		if (!this.state.showEmailForm) {
  			return (
  				<div>
  					{this.props.email}
  					<button onClick={this.displayEmailForm} className="btn btn-link">Change Email</button>
  				</div>
  			);
  		}
  		return (
  			<form className="form-group" onSubmit={this.updateEmail}>
  				<input className="form-control" type="email" placeholder="johndoe@example.com" onChange={this.emailInput} />
  				<br />
  				<button className="btn btn-primary" type="submit">Submit</button>&nbsp;
  				<button className="btn btn-default" onClick={this.hideEmailForm}>Cancel</button>
  				<ErrorAlert errorMessage={this.props.errorMessage} />
  			</form>
  		);
  	}
  
  	render() {
  		return (
  			<div>
  				{this.viewOrUpdateEmail()}
  			</div>
  		);
  	}
  }
  
  export default UpdateEmail;
  