user storaging via redux is done -> router works correctly

src/components/common/protectedRoute.js

@@ -25,7 +25,7 @@ export default ({ component: Component, user, tokenAuth, access, ...rest }) => (
 
             console.log('Component', Component);
             console.log('Access', access);
-            console.log('User Data', checkedData);
+            console.log('User Data', user);
 
             if (access === 'public') {
                 return <Component {...props} />

src/components/common/spinner.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default () => (
-    <div class="d-flex justify-content-center">
+    <div className="container d-flex align-items-center justify-content-center">
         <div class="spinner-border" role="status">
             <span class="sr-only">Loading...</span>
         </div>

src/components/public/Header.js

@@ -5,54 +5,54 @@ import * as routes from '../../constants/routes'
 export default class Header extends React.Component {
     render() {
         return (
-            <div className="row">
-                <div className="container-fluid">
-                    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-2">
-                        <a class="navbar-brand" href="#">Test.io</a>
-                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                            <span class="navbar-toggler-icon"></span>
-                        </button>
+            <nav class="navbar navbar-expand-lg navbar-dark bg-dark p-3">
+                <a class="navbar-brand" href="#">Test.io</a>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
 
-                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                            <ul class="navbar-nav mr-auto p-3">
-                                <li class="nav-item active">
-                                <Link onClick={this.handleClick} class="nav-link font-ci font-ci-bold" to={routes.HOME}>Home <span class="sr-only">(current)</span></Link>
-                                </li>
-                                <li class="nav-item">
-                                <Link onClick={this.handleClick}  class="nav-link font-ci font-ci-bold"  to={routes.PROFILE}>Profile</Link>
-                                </li>
-                                <li class="nav-item">
-                                <Link onClick={this.handleClick}  class="nav-link font-ci font-ci-bold "  to={routes.TESTS}>Tests</Link>
-                                </li>
-                                <li class="nav-item">
-                                <Link onClick={this.handleClick}  class="nav-link font-ci font-ci-bold "  to={routes.CATEGORIES}>Catigories</Link>
-                                </li>
-                                {/* TODO: admin-only ! */}
-                                <li class="nav-item dropdown">
-                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                        Dropdown
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav mr-auto">
+                        <li class="nav-item active">
+                            <Link onClick={this.handleClick} class="nav-link font-ci font-ci-bold" to={routes.HOME}>Home <span class="sr-only">(current)</span></Link>
+                        </li>
+                        <li class="nav-item">
+                            <Link onClick={this.handleClick} class="nav-link font-ci font-ci-bold" to={routes.PROFILE}>Profile</Link>
+                        </li>
+                        <li class="nav-item">
+                            <Link onClick={this.handleClick} class="nav-link font-ci font-ci-bold " to={routes.TESTS}>Tests</Link>
+                        </li>
+                        <li class="nav-item">
+                            <Link onClick={this.handleClick} class="nav-link font-ci font-ci-bold " to={routes.CATEGORIES}>Catigories</Link>
+                        </li>
+                        {/* TODO: admin-only ! */}
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                Dropdown
                                     </a>
-                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                                        <a class="dropdown-item" href="#">Action</a>
-                                        <a class="dropdown-item" href="#">Another action</a>
-                                        <div class="dropdown-divider"></div>
-                                        <a class="dropdown-item" href="#">Something else here</a>
-                                    </div>
-                                </li>
-                               
-                            </ul>
-                            <form class="form-inline my-2 my-lg-0">
-                                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
-                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-                            </form>
-                            <div className="btn-group ml-2" role="group">
-                                <button className="btn btn-secondary">Sign In</button>
-                                <button className="btn btn-secondary">Sign Up</button>
+                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <a class="dropdown-item" href="#">Action</a>
+                                <a class="dropdown-item" href="#">Another action</a>
+                                <div class="dropdown-divider"></div>
+                                <a class="dropdown-item" href="#">Something else here</a>
                             </div>
-                        </div>
-                    </nav>
+                        </li>
+
+                    </ul>
+                    <form class="form-inline my-2 my-lg-0">
+                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
+                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+                    </form>
+                    <div className="pl-2">
+                        <Link to={routes.SIGN_IN}>
+                            <button className="btn btn-outline-primary">Sign In</button>
+                        </Link>
+                        <Link to={routes.SIGN_UP}>
+                            <button className="btn btn-outline-primary ml-2">Sign Up</button>
+                        </Link>
+                    </div>
                 </div>
-            </div>
+            </nav>
         )
     }
 }

src/components/public/SignIn/Form/index.js

@@ -18,29 +18,37 @@ class Form extends React.Component {
 
     render() {
         const { handleSubmit, error } = this.props;
+        console.log('Auth error', error);
 
         return (
-            <form className="text-center" onSubmit={handleSubmit(this.submit)}>
-                {
-                    error
-                        ?
-                        <p className="text-af text-uppercase">{error}</p>
-                        :
-                        null
-                }
-
-                <div className="form-group">
-                    <label className="text-uppercase">Email address</label>
-                    <Field type="email" name='email' className="form-control" placeholder="name@example.com" component={formInput} />
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-8 col-10 col-lg-6 m-auto p-4 border rounded">
+
+                        <form className="text-center" onSubmit={handleSubmit(this.submit)}>
+                            {
+                                error
+                                    ?
+                                    <p className="text-af text-uppercase">{error}</p>
+                                    :
+                                    null
+                            }
+
+                            <div className="form-group">
+                                <label className="text-uppercase">Email address</label>
+                                <Field type="email" name='email' className="form-control" placeholder="name@example.com" component={formInput} />
+                            </div>
+
+                            <div className="form-group">
+                                <label className="text-uppercase">Password</label>
+                                <Field type="password" name='password' className="form-control" placeholder="example123" component={formInput} />
+                            </div>
+
+                            <button type="submit" className="btn btn-primary">Sign In!</button>
+                        </form>
+                    </div>
                 </div>
-
-                <div className="form-group">
-                    <label className="text-uppercase">Password</label>
-                    <Field type="password" name='password' className="form-control" placeholder="example123" component={formInput} />
-                </div>
-
-                <button type="submit" className="btn btn-primary">Sign In!</button>
-            </form>
+            </div>
         )
     }
 }

src/components/public/SignIn/index.js

@@ -8,25 +8,17 @@ import Spinner from './../../common/spinner';
 import { signIn } from './../../../actions/auth/signIn';
 
 const SignIn = ({ signIn, user }) => (
-    <div className="row">
-        <div className="container">
-            <div className="col-4 m-auto p-4 border rounded">
-                {
-                    user.isFetching
-                        ?
-                        <Spinner />
-                        : user.data
-                            ?
-                            <Redirect to='/' />
-                            : user.error
-                                ?
-                                <Form error={user.error} signIn={signIn} />
-                                :
-                                <Form signIn={signIn} />
-                }
-            </div>
-        </div>
-    </div>
+    user.isFetching
+        ?
+        <Spinner />
+        : user.data
+            ?
+            <Redirect to='/' />
+            : user.error
+                ?
+                <Form error={user.error} signIn={signIn} />
+                :
+                <Form signIn={signIn} />
 )
 
 const mapStateToProps = state => ({

src/index.js

@@ -7,8 +7,6 @@ import Router from './router'
 import reduxStore from './state'
 
 import 'bootstrap/dist/css/bootstrap.min.css';
-import $ from 'jquery';
-import Popper from 'popper.js';
 import 'bootstrap/dist/js/bootstrap.bundle.min';
 
 import './styles/_index.scss';

src/reducers/auth/signIn.js

@@ -1,8 +1,8 @@
 import * as actionTypes from './../../constants/auth';
 import initialState from './../initialState';
 
-export default function signInReducer(state = initialState.signIn, {type, payload: data, error}) {
-    switch(type) {
+export default function signInReducer(state = initialState.signIn, { payload, token, type }) {
+    switch (type) {
         case actionTypes.SIGN_IN_REQUEST: {
             return {
                 ...state,
@@ -10,13 +10,18 @@ export default function signInReducer(state = initialState.signIn, {type, payloa
             }
         }
         case actionTypes.SIGN_IN_REQUEST_SUCCESS: {
+            const { user, token } = payload;
+
             return {
                 ...state,
                 isFetching: false,
-                data
+                data: user,
+                token
             }
         }
         case actionTypes.SIGN_IN_REQUEST_FAILURE: {
+            const { error } = payload;
+
             return {
                 ...state,
                 isFetching: false,

src/reducers/initialState.js

@@ -2,7 +2,8 @@ export default {
     signIn: {
         isFetching: false,
         data: null,
-        error: null
+        error: null,
+        token: null
     },
     signUp: {
         isFetching: false,

src/router.js

@@ -6,24 +6,20 @@ import ProtectedRoute from './components/common/protectedRoute';
 import config from './configs/routerConfig';
 
 import Header from './components/public/Header';
+import Spinner from './components/common/spinner';
 
 import { bindActionCreators } from "redux";
 
 class Router extends React.Component {
     render() {
         const { user, tokenAuth } = this.props;
+        console.log(user);
 
         // TODO: add footer
         return (
             <div className="app">
                 <Header />
-                <Suspense fallback={
-                    <div class="text-center">
-                        <div class="spinner-border" role="status">
-                            <span class="sr-only">Loading...</span>
-                        </div>
-                    </div>
-                }>
+                <Suspense fallback={<Spinner />}>
                     <Switch>
                         {config.map(route =>
                             <ProtectedRoute
@@ -43,7 +39,7 @@ class Router extends React.Component {
 }
 
 const mapStateToProps = state => ({
-    user: state.user
+    user: state.signIn
 })
 // const mapDispatchToProps = dispatch => bindActionCreators({ tokenAuth }, dispatch);
 

src/sagas/auth/index.js

@@ -5,7 +5,6 @@ import * as actionTypes from './../../constants/auth'
 import { takeEvery } from 'redux-saga/effects';
 
 export default function* () {
-    console.log('takeEvery');
     yield takeEvery(actionTypes.SIGN_IN_REQUEST, signIn)
     yield takeEvery(actionTypes.SIGN_UP_REQUEST, signUp)
 }

src/sagas/auth/signIn.js

@@ -18,7 +18,6 @@ export default function* ({payload}) {
                 .then(({ data }) => data)
         )
 
-
         yield put(signInSuccess(user));
     }
     catch ({ message }) {

src/styles/_index.scss

@@ -1,3 +1,4 @@
 @import 'abstracts/variables';
+@import 'abstracts/theme';
+
 @import 'base/typography';
-@import 'base/theme';