tocken auth && signIn/Up changes

src/components/common/protectedRoute/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
-import config from './config';
 import * as routes from './../../../constants/routes';
 import PermissionDenied from './../../public-components/permissionDenied';
 

src/components/public-components/header/index.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import { Link } from "react-router-dom";
+
 import * as routes from './../../../constants/routes';
 import { UserContext } from './../../../containers/header';
+import token from './../../../utils/token';
 
 export default class header extends Component {
 
@@ -9,97 +11,98 @@ export default class header extends Component {
         togglerClosed: true,
     }
 
-    handleToggle = (event) => {
+    handleToggle = event => {
         this.setState((prevState) => ({ togglerClosed: !prevState.togglerClosed }))
     }
 
+    handleSignOut = () => {
+        console.log("signOut", this.props);
+        this.props.signOut();
+        localStorage.removeItem(token);
+    }
+
     render() {
         const { togglerClosed } = this.state;
+        const { user } = this.props;
         const toggleStatus = togglerClosed ? "toggle-status--closed" : "toggle-status--opened"
 
         return (
-            <UserContext.Consumer>
-                {
-                    ({ user, signOut }) => (
-                        <header className="header">
-                            <Link to={routes.LANDING}>
-                                <h1 className="header__logo">Test.<span className="header__logo--i-letter">i</span>o</h1>
-                            </Link>
-                            <hr className="header__logo--divider" />
-                            <span className="header__toggle-trigger" onClick={this.handleToggle} >
-                                <span />
-                            </span>
-                            <div className="header__flex-wrapper">
-                                <nav className={`header__nav ${toggleStatus}`}>
-                                    <ul className="header__nav nav__list"  >
-                                        <li>
-                                            <Link className="header__nav nav__list-item" to={routes.HOME}>
-                                                Home
-                                            </Link>
-                                        </li>
+            <header className="header">
+                <Link to={routes.LANDING}>
+                    <h1 className="header__logo">Test.<span className="header__logo--i-letter">i</span>o</h1>
+                </Link>
+                <hr className="header__logo--divider" />
+                <span className="header__toggle-trigger" onClick={this.handleToggle} >
+                    <span />
+                </span>
+                <div className="header__flex-wrapper">
+                    <nav className={`header__nav ${toggleStatus}`}>
+                        <ul className="header__nav nav__list"  >
+                            <li>
+                                <Link className="header__nav nav__list-item" to={routes.HOME}>
+                                    Home
+                                </Link>
+                            </li>
+                            <li>
+                                <Link className="header__nav nav__list-item" to={routes.PROFILE}>
+                                    Profile
+                                </Link>
+                            </li>
+                            <li>
+                                <Link className="header__nav nav__list-item" to={routes.TESTS}>
+                                    Test
+                                </Link>
+                            </li>
+                            <li>
+                                <Link className="header__nav nav__list-item" to={routes.CATEGORIES}>
+                                    Categories
+                                </Link>
+                            </li>
+                            {
+                                user && user.isAdmin && (
+                                    <React.Fragment>
                                         <li>
-                                            <Link className="header__nav nav__list-item" to={routes.PROFILE}>
-                                                Profile
+                                            <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
+                                                Create test
                                             </Link>
                                         </li>
                                         <li>
-                                            <Link className="header__nav nav__list-item" to={routes.TESTS}>
-                                                Test
+                                            <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
+                                                Create category
                                             </Link>
                                         </li>
                                         <li>
-                                            <Link className="header__nav nav__list-item" to={routes.CATEGORIES}>
-                                                Categories
+                                            <Link className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
+                                                Delete user
                                             </Link>
                                         </li>
-                                        {
-                                            user && user.isAdmin && (
-                                                <React.Fragment>
-                                                    <li>
-                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
-                                                            Create test
-                                                        </Link>
-                                                    </li>
-                                                    <li>
-                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
-                                                            Create category
-                                                        </Link>
-                                                    </li>
-                                                    <li>
-                                                        <Link className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
-                                                            Delete user
-                                                        </Link>
-                                                    </li>
-                                                </React.Fragment>
-                                            )
-                                        }
-                                    </ul>
-                                </nav>
+                                    </React.Fragment>
+                                )
+                            }
+                        </ul>
+                    </nav>
 
-                                <div className="header__links">
-                                    {
-                                        !user.data
-                                            ? (
-                                                <React.Fragment>
-                                                    <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
-                                                    <Link className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
-                                                </React.Fragment>
-                                            )
-                                            : (
-                                                <button
-                                                    className="header__links--sign-in link--btn link--btn25"
-                                                    onClick={signOut}
-                                                >
-                                                    Sign out
-                                                </button>
-                                            )
-                                    }
-                                </div>
-                            </div>
-                        </header>
-                    )
-                }
-            </UserContext.Consumer>
+                    <div className="header__links">
+                        {
+                            !user.data
+                                ? (
+                                    <React.Fragment>
+                                        <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
+                                        <Link className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
+                                    </React.Fragment>
+                                )
+                                : (
+                                    <button
+                                        className="header__links--sign-in link--btn link--btn25"
+                                        onClick={this.handleSignOut}
+                                    >
+                                        Sign out
+                                    </button>
+                                )
+                        }
+                    </div>
+                </div>
+            </header>
         )
     }
 }

src/constants/index.js

@@ -1,9 +1,9 @@
-export const SIGN_IN_URL = 'https://project-test-32e60.firebaseio.com/signIn.json';
+export const SIGN_IN_URL = 'https://quiz.maxcrc.de/api/v1/user';
 export const SIGN_IN_REQUEST = 'SIGN_IN_REQUEST';
 export const SIGN_IN_REQUEST_SUCCESS = 'SIGN_IN_REQUEST_SUCCESS';
 export const SIGN_IN_REQUEST_FAILURE = 'SIGN_IN_REQUEST_FAILURE';
 
-export const SIGN_UP_URL = 'https://project-test-32e60.firebaseio.com/signUp.json';
+export const SIGN_UP_URL = 'https://quiz.maxcrc.de/api/v1/user';
 export const SIGN_UP_REQUEST = 'SIGN_UP_REQUEST';
 export const SIGN_UP_REQUEST_SUCCESS = 'SIGN_UP_REQUEST_SUCCESS';
 export const SIGN_UP_REQUEST_FAILURE = 'SIGN_UP_REQUEST_FAILURE';

src/containers/header/index.js

@@ -1,36 +1,11 @@
 import React, { Component } from "react";
 import { connect } from 'react-redux';
 import { func, object } from 'prop-types';
-import { bindActionCreators } from 'redux' 
+import { bindActionCreators } from 'redux'
 
 import HeaderComponent from './../../components/public-components/header';
 
-import {signOut} from './../../actions/auth/signOut'
-
-const UserContext = React.createContext();
-
-class Header extends Component {
-    static propTypes = {
-        user: object,
-        signOut: func,
-    }
-
-    render() {
-        const { user, signOut } = this.props;
-
-        return (
-            <UserContext.Provider
-                value={{
-                    user,
-                    signOut
-                }}
-            >
-                <HeaderComponent />;
-            </UserContext.Provider>
-        )
-        
-    }
-}
+import { signOut } from './../../actions/auth/signOut'
 
 const
     mapStateToProps = ({ user }) => ({
@@ -40,5 +15,4 @@ const
         signOut
     }, dispatch);
 
-export { UserContext };
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+export default connect(mapStateToProps, mapDispatchToProps)(HeaderComponent);

src/router.js

@@ -22,7 +22,7 @@ class Router extends React.Component {
         const storagedUser = localStorage.getItem(fakeToken);
         const { tokenAuth } = this.props;
 
-        storagedUser && tokenAuth(storagedUser);
+        storagedUser && tokenAuth(JSON.parse(storagedUser));
     }
 
     render() {

src/saga/auth/signIn/index.js

@@ -1,21 +1,24 @@
 import { put, call } from "redux-saga/effects";
 import * as actions from './../../../actions/auth/signIn'
 import axios from 'axios';
+import token from './../../../utils/token';
 
+import { SIGN_IN_URL } from './../../../constants/index'
 
 // worker-saga for signing in
 
 export default function* ({ payload: requestBody }) {
     try {
-        // console.log('received request body from sign-in worker saga', requestBody);
         const payload = yield call(() =>
-            axios.post(`https://quiz.maxcrc.de/api/v1/user`, {...requestBody})
+            axios.post(SIGN_IN_URL, requestBody)
                 .then(({ data }) => data)
         );
-        // console.log("Payload", payload);
+        
         yield put(actions.signInRequestSucces(payload));
+        yield call(localStorage.setItem, token, payload);
     }
     catch ({ message }) {
         yield put(actions.signInRequestFailure(message))
+        yield call(localStorage.removeItem, token);
     }
 }

src/saga/auth/signUp/index.js

@@ -4,20 +4,22 @@ import axios from 'axios';
 
 import { SIGN_UP_URL } from '../../../constants'
 
+import token from './../../../utils/token';
+
 // worker-saga for signing up
 
 export default function* ({ payload: requestBody }) {
     try {
-        const payload = yield call(() => 
-        axios.post(`https://quiz.maxcrc.de/api/v1/user`, {
-            ...requestBody
-        })
-            .then(({ data }) => data)
+        const payload = yield call(() =>
+            axios.post(SIGN_UP_URL, requestBody)
+                .then(({ data }) => data)
+        );
 
-    );
         yield put(actions.signUpRequestSucces(payload));
+        yield call(() => {localStorage.setItem(token, JSON.stringify(payload))});
     }
     catch (exception) {
-        yield put(actions.signUpRequestFailure(exception.message))
+        yield put(actions.signUpRequestFailure(exception.message));
+        yield call(() => {localStorage.removeItem(token)});
     }
 }

src/saga/auth/users/users.js

@@ -6,12 +6,11 @@ import axios from 'axios';
 
 export default function* ({ payload: requestBody }) {
     try {
-        // console.log('received request body from sign-in worker saga', requestBody);
         const payload = yield call(() =>
             axios.get(`https://quiz.maxcrc.de/api/v1/user`)
                 .then(({ data }) => data)
         );
-        // console.log("Payload", payload);
+        
         yield put(actions.usersGetRequestSucces(payload));
     }
     catch ({ message }) {