import React from 'react';
import { signInRequest } from './../../../actions/auth/signIn'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { Redirect } from 'react-router';
import { HOME } from './../../../constants/routes';


import Spinner from './../../../components/common/spinner';
import SignInForm from './../../../components/public-components/auth/signInForm';


class SignInPage extends React.Component {

    render() {
        const { signInRequest, user } = this.props;

        return (
            user.isFetching
                ? <Spinner />
                : user.error
                    ? 
                    (
                        <div className="page sign-in">
                            <SignInForm actions={{ signInRequest }} requestError={user.error} />
                        </div>
                    )
                    : user.data
                        ?
                        < Redirect to={HOME} />
                        :
                        (
                            <div className="page sign-in">
                                <SignInForm actions={{ signInRequest }} />
                            </div>
                        )
        )
    }
}

const
    mapStateToProps = ({ user }) => ({
        user
    }),
    mapDispatchToProps = dispatch => bindActionCreators({ signInRequest }, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(SignInPage)