{"size": 1575, "ext": "js", "max_stars_repo_path": "recipe-box-app/src/components/Login.js", "max_stars_repo_name": "Emi691/recipe-box", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "recipe-box-app/src/components/Login.js", "max_issues_repo_name": "Emi691/recipe-box", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "recipe-box-app/src/components/Login.js", "max_forks_repo_name": "Emi691/recipe-box", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.4032258065, "max_line_length": 133, "alphanum_fraction": 0.5073015873}
import React, {Component} from 'react'
import { login } from '../actions/login'
import { connect } from 'react-redux'

class Login extends Component {
    state = {
        username: '',
        password: '',
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    handleSubmit = (event) => {
        event.preventDefault()
        this.props.login(this.state) 
    }

    componentDidUpdate = () => {
        if (localStorage.getItem("token")) {
        this.props.history.push("/recipes")
        }
    }

    render(){
        return(
           <div>
            <br/>
            <h3>Log In</h3>
            <form onSubmit={event => this.handleSubmit(event)}>
                <div>
                    <label>Username: </label>
                    <input type="text" name="username" onChange={event => this.handleChange(event)} value={this.state.username}/>
                </div><br/>
                <div>
                    <label>Password: </label>
                    <input type="password" name="password" onChange={event => this.handleChange(event)} value={this.state.password}/>
                </div>
                <input type="submit" value="Log In"/>
            </form>
        </div> 
        )
    }
    
}

const mapDispatchToProps = (dispatch) => {
    return {
        login: (user) => dispatch(login(user))
    }
}

const mapStateToProps = (state) => {
    return {
        users: state.users
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)