import React, { Component } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import  * as authActions from '../../actions/authActions';
import axios from 'axios';


class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            errors: {},
            isLoading: false,
        };
    }

    onChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    onSubmit(e) {
        e.preventDefault();
        this.setState({ errors: {}, isLoading: true });
        this.props.actions.logInUser( { data: { user: { email: this.state.email, password: this.state.password }}})
    }

    render() {
        return(
            <div>
                <form onSubmit={this.onSubmit.bind(this)}>
                    <div className="field">
                        <label className="label"> Email </label>
                        <div className="control">
                            <input type="email"
                                   name="email"
                                   value={this.state.email}
                                   onChange={this.onChange.bind(this)}
                                   className="input" />
                        </div>
                    </div>
                    <div className="field">
                        <label className="label"> Mot de passe </label>
                        <div className="control">
                        <input type="password"
                               ref="password"
                               name="password"
                               value={this.state.password}
                               onChange={this.onChange.bind(this)}
                               className="input" />
                        </div>
                    </div>
                    <div className="form-group">
                        <input type="submit" value="Signup" className="button is-primary" />
                    </div>
                    <Link to={{ pathname: '/register' }}>Inscription</Link>
                </form>
            </div>
        );
    }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(authActions, dispatch)
    };
}

export default connect(null, mapDispatchToProps)(LoginForm);

import axios from 'axios';
import setAuthorizationToken from '../utils/setAuthorizationToken';
import jwtDecode from 'jwt-decode';
import { browserHistory } from 'react-router';
import * as types from './types';
import sessionApi from '../api/SessionApi';

export function loginSuccess() {
    return {
        type: types.LOG_IN_SUCCESS
    }
}


export function loginFailed() {
    return {
        type: types.LOG_IN_FAILED
    }
}

export function logInUser(credentials) {
    return function(dispatch) {
        return sessionApi.login(credentials)
            .then(response => {
                console.log(response);
                if(response.data) {
                    sessionStorage.setItem('jwt', response.data.authentication_token);
                    dispatch(loginSuccess());
                    browserHistory.push('/dashboard/' + response.data.id);
                } else {
                    dispatch(loginFailed());
                }
            })
            .catch(error => {
                throw(error);
            })
    }
}

import React, { Component } from 'react';
import axios from 'axios';
import  * as authActions from '../../actions/authActions';

class Dashboard extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div>
                <h1> Hello user </h1>
            </div>
        );
    }
}

export default Dashboard;

import * as types from '../actions/types';
import initialState from './initialState';
import { browserHistory } from 'react-router';

export default function sessionReducer(state = initialState.session, action) {
    switch(action.type) {
        case types.LOG_IN_SUCCESS:
            return !!sessionStorage.jwt;
        case types.LOG_IN_FAILED:
            console.log('login failed');
            browserHistory.push('/login');
        default:
            return state;
    }
}

import axios from 'axios';
class SessionApi {
    static login(credentials) {
        return axios.post('https://spendin-api.herokuapp.com/api/v1/sessions', credentials)
        .then(response => {
            console.log(response);
            return response;
        })
        .catch(error => {
            return error;
        });
    }
}

export default SessionApi;