components struct changes -> admin && user && public

src/PrivateRouter.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router';
-import * as routes from './constants/routes';
-
-export default ({ component: Component, user, ...rest }) => (
-    <Route
-        {...rest}
-        render={props => (
-            user
-                ? <Component {...props} />
-                : <Redirect to={routes.SIGN_IN} />
-        )}
-    />
-)

src/actions/auth/index.js

@@ -1,7 +1,9 @@
 import * as signInActions from './signIn';
 import * as signUpActions from './signUp';
+import * as signOutActions from './signOut';
 
 export default {
     ...signInActions,
-    ...signUpActions
+    ...signUpActions,
+    ...signOutActions
 }

src/actions/index.js

@@ -1,4 +1,4 @@
-import authActions from './auth/logIn';
+import authActions from './auth';
 
 export default {
     ...authActions

src/components/admin-components/createTestPage/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import Form from './form';
-
-export default class createTestPage extends React.Component {
-    render() {
-        return (
-            <div className="page create-test">
-                <Form /> 
-            </div>
-        )
-    }
-}

src/components/common/privateAdminRouter/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router';
+import * as routes from '../../../constants/routes';
+import { connect } from 'react-redux';
+import PermissionDenied from './../../public-components/permissionDenied'
+
+const PrivateAdminRouter = ({ component: Component, user, ...rest }) => {
+    console.log("Protected user", user);
+    alert();
+    return (
+        <Route
+            {...rest}
+            render={props => (
+                user.isAdmin
+                    ? <Component {...props} />
+                    : user.data
+                        ? <PermissionDenied />
+                        : <Redirect to={routes.SIGN_IN} />
+            )}
+        />
+    )
+}
+
+const
+    mapStateToProps = state => ({
+        user: state.user
+    })
+
+export default connect(mapStateToProps)(PrivateAdminRouter)

src/components/common/privateRouter/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router';
+import * as routes from '../../../constants/routes';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+const PrivateRouter = ({ component: Component, user, ...rest }) => {
+
+    return (
+        <Route
+            {...rest}
+            render={props => (
+                user
+                    ? <Component {...props} />
+                    : <Redirect to={routes.SIGN_IN} />
+            )}
+        />
+    )
+}
+
+const
+    mapStateToProps = state => ({
+        user: state.user
+    })
+
+export default connect(mapStateToProps)(PrivateRouter)

src/components/auth/signInForm/index.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Field, reduxForm } from 'redux-form'
 
 import validate from './validate'
-import formInput from './../../common/formInput'
+import formInput from './../../../common/formInput'
 
 import { Link } from 'react-router-dom'
-import * as routes from './../../../constants/routes'
+import * as routes from './../../../../constants/routes'
 
 class Form extends React.Component {
     sendRequest = values => {

src/components/auth/signUpForm/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Field, reduxForm } from 'redux-form'
 import validate from './validate'
-import formInput from './../../common/formInput'
+import formInput from './../../../common/formInput'
 
 class Form extends React.Component {
 

src/components/footer/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import store from './../../../state';
 
 export default props => (
     <div className="footer">
@@ -7,5 +8,6 @@ export default props => (
             "<span className="footer__us us__inline--red">T</span>est.<span className="footer__us us__inline--green">i</span>o"
         </p>
         <p className="footer__copyright">&copy; 2018, "Test.io", all right reserved</p>
+        <button style={{"z-index": 4000, "color": "red"}} onClick={() => console.log(store.getState())}>Redux - State</button>
     </div>
 )

src/components/header/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Link } from "react-router-dom";
-import * as routes from './../../constants/routes';
-import { UserContext } from './../../containers/Header';
+import * as routes from './../../../constants/routes';
+import { UserContext } from './../../../containers/Header';
 
 export default class header extends Component {
 

src/components/landingPage/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import * as routes from './../../constants/routes'
+import * as routes from './../../../constants/routes'
 
 export default props => (
     <div className="page landing-page">

src/components/notFound/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { HOME } from './../../constants/routes'
+import { HOME } from './../../../constants/routes'
 
 export default props => (
     <div className="page not-found">

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+
+export default () => (
+    <div className="page permission-denied-page">
+        <h1 className="permission-denied-page__header">
+            Sorry, but looks like u are not the admin...
+        </h1>
+        <p>Buy our superior premium pack to be able to create new tests!</p>
+        <Link className="">Buy!</Link>
+    </div>
+)

src/components/admin-components/createTestPage/form/index.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import { reduxForm, Field } from 'redux-form';
 import validate from './validate';
-import fieldInput from './../../../common/formInput';
+import formInput from './../../../common/formInput'
 
 class Form extends React.Component {
-    handleSubmit(event) {
-        event.preventDefault();
-        alert("lol");
+    sendRequest(values) {
+        console.log('sendRequest createTestForm page values:', values);
     }
 
     render() {
+        const { handleSubmit } = this.props;
+
         return (
-            <form action="">
+            <form onSubmit={handleSubmit(this.sendRequest)}>
                 <h2>Make a title-page for your test!</h2>
 
                 <div className="title-page__block">
@@ -21,13 +22,13 @@ class Form extends React.Component {
                         name="title"
                         type="input"
                         placeholder=""
-                        component={fieldInput}
+                        component={formInput}
                     />
                 </div>
 
                 <div className="title-page__block">
                     <p className="titles">Description</p>
-                    <Field name="description" type="input" placeholder="" className="" component={fieldInput} />
+                    <Field name="description" type="input" placeholder="" className="" component={formInput} />
                 </div>
 
                 <div className="title-page__block">
@@ -38,7 +39,7 @@ class Form extends React.Component {
                 <button className="">Create card</button>
             </form>
         )
-    }
+    }   
 }
 
 export default reduxForm({

src/constants/routes.js

@@ -10,4 +10,5 @@ export const CREATE_CATEGORY = '/create-category';
 export const DELETE_USER = '/delete-user'
 export const TESTS = '/test';
 export const CATEGORIES = '/categories';
-export const PROFILE = '/profile';
+export const PROFILE = '/profile';
+// export const PERMISSON_DENIED = '/permisson-denied'

src/containers/auth/SignInPage/index.js

@@ -3,22 +3,34 @@ import { signInRequest } from './../../../actions/auth/signIn'
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import SignInForm from './../../../components/auth/signInForm'
+import { Redirect } from 'react-router';
+import { HOME } from './../../../constants/routes';
+
+import SignInForm from './../../../components/public-components/auth/signInForm'
 
 class SignInPage extends React.Component {
 
     render() {
         console.log("SignInPage containers props:", this.props);
-        const { signInRequest } = this.props;
+        const { signInRequest, user } = this.props;
         return (
-            <div className="page sign-in">
-                <SignInForm actions={{ signInRequest }} />
-            </div>
+            !(user.data)
+                ? (
+                    <div className="page sign-in">
+                        <SignInForm actions={{ signInRequest }} />
+                    </div>
+                )
+                : (
+                    <Redirect to={HOME} />
+                )
         )
     }
 }
 
 const
+    mapStateToProps = ({ user }) => ({
+        user
+    }),
     mapDispatchToProps = dispatch => bindActionCreators({ signInRequest }, dispatch)
 
-export default connect(null, mapDispatchToProps)(SignInPage)
+export default connect(mapStateToProps, mapDispatchToProps)(SignInPage)

src/containers/auth/SignUpPage/index.js

@@ -1,24 +1,36 @@
 import React from 'react';
-import { signUpRequest } from './../../../actions/auth/signUp'
+import { signUpRequest } from './../../../actions/auth/signUp';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import SignUpForm from './../../../components/auth/signUpForm'
+import { Redirect } from 'react-router'
+import { HOME } from './../../../constants/routes';
+
+import SignUpForm from './../../../components/public-components/auth/signInForm';
 
 class SignUpPage extends React.Component {
 
     render() {
         console.log("SignInPage containers props:", this.props);
-        const { signUpRequest } = this.props;
+        const { signUpRequest, user } = this.props;
         return (
-            <div className="page sign-up">
-                <SignUpForm actions={{ signUpRequest }} />
-            </div>
+            !(user.data)
+                ? (
+                    <div className="page sign-up">
+                        <SignUpForm actions={{ signUpRequest }} />
+                    </div>
+                )
+                : (
+                    <Redirect to={HOME} />
+                )
         )
     }
 }
 
 const
+    mapStateToProps = ({ user }) => ({
+        user
+    }),
     mapDispatchToProps = dispatch => bindActionCreators({ signUpRequest }, dispatch)
 
-export default connect(null, mapDispatchToProps)(SignUpPage)
+export default connect(mapStateToProps, mapDispatchToProps)(SignUpPage)

src/containers/header/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { func, object } from 'prop-types';
 import { bindActionCreators } from 'redux' 
 
-import HeaderComponent from './../../components/header';
+import HeaderComponent from './../../components/public-components/header';
 
 import {signOut} from './../../actions/auth/signOut'
 
@@ -25,7 +25,7 @@ class Header extends Component {
                     signOut
                 }}
             >
-                <HeaderComponent />
+                <HeaderComponent />;
             </UserContext.Provider>
         )
         

src/reducers/user/index.js

@@ -23,6 +23,9 @@ export default function (state = initialState.user, { type, error, payload: data
                 error
             }
         }
+
+        //
+
         case types.SIGN_IN_REQUEST: {
             return {
                 ...state,
@@ -36,13 +39,16 @@ export default function (state = initialState.user, { type, error, payload: data
                 data                
             }
         }
-        case types.SIGN_UP_REQUEST_FAILURE: {
+        case types.SIGN_IN_REQUEST_FAILURE: {
             return {
                 ...state,
                 gettingUser: false,
                 error
             }
         }
+
+        //
+
         case types.SIGN_OUT: {
             return initialState.user
         }
@@ -51,4 +57,9 @@ export default function (state = initialState.user, { type, error, payload: data
             
         }
     }
-}
+}
+
+
+
+
+

src/router.js

@@ -1,42 +1,68 @@
 import React, { Suspense, lazy } from "react";
 import { Switch, Route } from "react-router-dom";
 
-import * as routes from './constants/routes'
+import * as routes from './constants/routes';
 
-import Header from "./containers/Header"
-import landingPage from './components/landingPage'
-import Footer from './components/footer'
-import PrivateRouter from './PrivateRouter'
+import Header from "./containers/Header";
+import landingPage from './components/public-components/landingPage';
+import Footer from './components/public-components/footer';
+import PrivateRouter from './components/common/privateRouter';
+import PrivateAdminRouter from './components/common/privateAdminRouter';
 
 import Spinner from "./components/common/spinner";
 
-const notFound   = lazy(() => import("./components/notFound"));
-const homePage   = lazy(() => import("./components/homePage"));
+const notFound = lazy(() => import("./components/public-components/notFound"));
+// const permissionDenied = lazy(() => import("./components/public-components/permissionDenied"));
+
+const homePage = lazy(() => import("./components/user-components/homePage"));
 const signInPage = lazy(() => import("./containers/auth/SignInPage"));
 const signUpPage = lazy(() => import("./containers/auth/SignUpPage"));
-const createTestPage = lazy(() => import("./components/admin-components/createTestPage"));
-
-export default () => (
-    <div className="app">
-        <Header />
-        <Suspense fallback={<Spinner />}>
-            <Switch>
-                <Route path={routes.LANDING} exact component={landingPage} />
-                <Route path={routes.SIGN_IN} exact component={signInPage} />
-                <Route path={routes.SIGN_UP} exact component={signUpPage} />
-
-                <PrivateRouter path={routes.HOME} user={false} component={homePage}/>
-                <PrivateRouter path={routes.TESTS} user={false} component={null}/>
-                <PrivateRouter path={routes.CATEGORIES} user={false} component={null}/>
-                <PrivateRouter path={routes.PROFILE} user={false} component={null} />
-
-                <PrivateRouter path={routes.CREATE_TEST} user={true} component={createTestPage} />
-                <PrivateRouter path={routes.CREATE_CATEGORY} user={false} component={createTestPage} />
-                <PrivateRouter path={routes.DELETE_USER} user={false} component={createTestPage} />
-                
-                <Route component={notFound} />
-            </Switch>
-        </Suspense>
-        <Footer />
-    </div>
-);
+const createTestForm = lazy(() => import("./components/user-components/admin-components/createTestForm"));
+
+class Router extends React.Component {
+
+    checkUserInLocalStorage = () => {
+        // localStorage.getItem(token)
+    }
+
+    getSomeUsers() {
+        fetch('localhost:3306')
+            .then(res => console.log(res))
+            .catch(exc => console.warn(exc.message))
+    }
+
+    componentDidMount() {
+        this.getSomeUsers();
+    }
+
+    render() {
+        return (
+            <div className="app">
+                <Header />
+                <Suspense fallback={<Spinner />}>
+                    <Switch>
+                        <Route path={routes.LANDING} exact component={landingPage} />
+                        <Route path={routes.SIGN_IN} exact component={signInPage} />
+                        <Route path={routes.SIGN_UP} exact component={signUpPage} />
+                        <Route path={routes.HOME} exact component={homePage} />
+
+                        <PrivateRouter path={routes.HOME} exact component={homePage} />
+                        <PrivateRouter path={routes.TESTS} exact component={null} />
+                        <PrivateRouter path={routes.CATEGORIES} exact component={null} />
+                        <PrivateRouter path={routes.PROFILE} exact component={null} />
+
+                        <PrivateAdminRouter path={routes.CREATE_TEST} exact component={createTestForm} />
+                        <PrivateAdminRouter path={routes.CREATE_CATEGORY} exact component={null} />
+                        <PrivateAdminRouter path={routes.DELETE_USER} exact component={null} />
+
+                        {/* <Route path={routes.PERMISSON_DENIED} exact component={permissionDenied} /> */}
+                        <Route component={notFound} />
+                    </Switch>
+                </Suspense>
+                <Footer />
+            </div>
+        )
+    }
+}
+
+export default Router;