text: import React, {Component} from 'react'
  import Avatar from '@material-ui/core/Avatar'
  import Button from '@material-ui/core/Button'
  import CssBaseline from '@material-ui/core/CssBaseline'
  import TextField from '@material-ui/core/TextField'
  import FormControlLabel from '@material-ui/core/FormControlLabel'
  import Checkbox from '@material-ui/core/Checkbox'
  import Link from '@material-ui/core/Link'
  import Grid from '@material-ui/core/Grid'
  import Box from '@material-ui/core/Box'
  import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
  import Typography from '@material-ui/core/Typography'
  import Container from '@material-ui/core/Container'
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
  import {connect} from 'react-redux'
  import {auth, clearUser} from '../store'
  import {withStyles} from '@material-ui/core/styles'
  
  const styles = theme => ({
    '@global': {
      body: {
        backgroundColor: theme.palette.common.white
      }
    },
    paper: {
      marginTop: theme.spacing(8),
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main
    },
    form: {
      width: '100%', // Fix IE 11 issue.
      marginTop: theme.spacing(1)
    },
    submit: {
      margin: theme.spacing(3, 0, 2)
    }
  })
  
  class SignIn extends Component {
    constructor(props) {
      super(props)
      this.state = {
        email: '',
        password: ''
      }
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    handleEmailChange = event => {
      this.setState({
        email: event.target.value
      })
    }
  
    handlePasswordChange = event => {
      this.setState({
        password: event.target.value
      })
    }
  
    componentDidMount() {}
  
    //This method alerts the user that they have an incorrect field, and then clears the singleUser:{error: authError} so that the alert does not display every single time the react component updates
    componentDidUpdate() {
      if (this.props.singleUser) {
        if (this.props.singleUser.error) {
          alert('Incorrect username and/or password')
          this.props.clearUser()
        }
      }
    }
  
    handleSubmit = event => {
      event.preventDefault()
      const email = event.target.email.value
      const password = event.target.password.value
      this.props.signInUser(email, password)
    }
  
    render() {
      const {classes} = this.props
      return (
        <div>
          <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
              <Avatar className={classes.avatar}>
                <LockOutlinedIcon />
              </Avatar>
              <Typography component="h1" variant="h5">
                Sign in
              </Typography>
              <form className={classes.form} onSubmit={this.handleSubmit}>
                <TextField
                  type="text"
                  name="email"
                  onChange={this.handleEmailChange}
                  value={this.state.email}
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  id="email"
                  label="Email Address"
                  autoComplete="email"
                  autoFocus
                />
                <TextField
                  type="password"
                  name="password"
                  onChange={this.handlePasswordChange}
                  value={this.state.password}
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  label="Password"
                  id="password"
                  autoComplete="current-password"
                />
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                >
                  Sign In
                </Button>
                <Grid container>
                  <Grid item xs />
                  <Grid item>
                    <Link href="#" variant="body2">
                      {"Don't have an account? Sign Up"}
                    </Link>
                  </Grid>
                </Grid>
              </form>
            </div>
          </Container>
        </div>
      )
    }
  }
  
  const mapStateToProps = state => {
    return {
      singleUser: state.user.singleUser
    }
  }
  
  const mapDispatchToProps = dispatch => {
    return {
      signInUser: (email, password, method = 'login') => {
        dispatch(auth(email, password, method))
      },
      clearUser: () => {
        dispatch(clearUser())
      }
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(
    withStyles(styles)(SignIn)
  )
  