import React, { Component } from "react";
import SignUpForm from '../../components/forms/signUpForm/signUpForm';
import {connect} from "react-redux";
import {errorsSignUp} from "../../constants/errors/signUp";
import style from "./registration.module.sass";
import Header from "../../components/header/header";

const SignUp = (props) => {

    return(
        <div className={style.mainContainer}>
            <div className={style.container}>
                <Header/>
            </div>
            <div className={style.contentContainer}>
                <div className={style.container}>
                   <SignUpForm/>
                </div>
                {
                    props.error && errorsSignUp[props.error.status]
                }
            </div>
        </div>

    );
};

const mapStateToProps = state => {
  const {token, isFetching, error} = state.signUpReducers;

  return {
      token, isFetching, error
  }
};


export default connect(mapStateToProps)(SignUp);