added cards page -> card preview proto

src/actions/cards/index.js

@@ -0,0 +1,15 @@
+import * as actionTypes from './../../constants';
+
+export const getCards = () => ({
+    type: actionTypes.GET_CARDS
+})
+
+export const getCardsSuccess = (payload) => ({
+    type: actionTypes.GET_CARDS_SUCCESS,
+    payload
+})
+
+export const getCardsFailure = (error) => ({
+    type: actionTypes.GET_CARDS_FAILURE,
+    error
+})

src/components/common/protectedRoute/config.js

@@ -1,49 +1,55 @@
+import React from 'react';
 import * as routes from './../../../constants/routes';
 import { lazy } from 'react';
 
-const landingPage = lazy(() => import('./../../public-components/landingPage'));
-const homePage = lazy(() => import('./../../user-components/homePage'));
-const signInPage = lazy(() => import('./../../../containers/auth/SignInPage'));
-const signUpPage = lazy(() => import('./../../../containers/auth/SignUpPage'));
-const createTestForm = lazy(() => import('./../../user-components/admin-components/createTestForm'));
-const profilePage = lazy(() => import('./../../user-components/profilePage'));
-const categoriesPage = lazy(() => import('./../../user-components/categoriesPage'));
-
+const LandingPage =    lazy(() => import('./../../public-components/landingPage'));
+const HomePage =       lazy(() => import('./../../user-components/homePage'));
+const SignInPage =     lazy(() => import('./../../../containers/auth/SignInPage'));
+const SignUpPage =     lazy(() => import('./../../../containers/auth/SignUpPage'));
+const CreateTestForm = lazy(() => import('./../../user-components/admin-components/createTestForm'));
+const ProfilePage =    lazy(() => import('./../../user-components/profilePage'));
+const CategoriesPage = lazy(() => import('./../../user-components/categoriesPage'));
+const CardsPage =      lazy(() => import('./../../user-components/CardsPage'));
+const NotFound =       lazy(() => import('./../../public-components/notFound'));
 
 export default [
     {
         path: routes.LANDING,
         access: 'public',
-        component: landingPage
+        component: LandingPage
     },
     {
         path: routes.SIGN_IN,
         access: 'public',
-        component: signInPage
+        component: SignInPage
     },
     {
         path: routes.SIGN_UP,
         access: 'public',
-        component: signUpPage
+        component: SignUpPage
     },
     {
         path: routes.HOME,
         access: 'user-only',
-        component: homePage
+        component: HomePage
     },
     {
         path: routes.CATEGORIES,
         access: 'user-only',
-        component: categoriesPage
+        component: CategoriesPage
     },
     {
         path: routes.PROFILE,
         access: 'user-only',
-        component: profilePage
+        component: ProfilePage
+    },
+    {
+        path: routes.TESTS,
+        access: 'user-only',
+        component: CardsPage
     },
     {
-        path: routes.CREATE_TEST,
-        access: 'admin-only',
-        component: createTestForm
-    }
+        access: 'public',
+        component: NotFound
+    },
 ]

src/components/common/protectedRoute/index.js

@@ -3,7 +3,7 @@ import { Route, Redirect } from 'react-router-dom';
 import * as routes from './../../../constants/routes';
 import PermissionDenied from './../../public-components/permissionDenied';
 
-export default ({ component: Component, user, access, ...rest  }) => (
+export default ({ component: Component, user: {data}, access, ...rest  }) => (
     <Route
         {...rest}
         render={props => {
@@ -12,16 +12,16 @@ export default ({ component: Component, user, access, ...rest  }) => (
                 return <Component {...props} />
             }
             
-            if ( (access === 'user-only' || access === 'admin-only') && !user.data ) {
+            if ( (access === 'user-only' || access === 'admin-only') && !data ) {
                 return <Redirect to={routes.SIGN_IN}/>
             }
             
-            if (access === 'user-only' && user.data) {
+            if (access === 'user-only' && data) {
                 return <Component {...props} />
             }        
 
             if (access === 'admin-only') {
-                if (user.isAdmin) {
+                if (data.is_admin) {
                     return <Component {...props} />
                 } 
 

src/components/common/protectedRoute/validate/index.js

@@ -0,0 +1,6 @@
+export default function validate(values) {
+    const {} = values;
+    const errors = {}
+
+    return errors;
+}

src/components/public-components/auth/signInForm/index.js

@@ -8,34 +8,34 @@ import { Link } from 'react-router-dom'
 import * as routes from './../../../../constants/routes'
 
 class Form extends React.Component {
-    sendRequest = values => {
-        const { actions: { signInRequest } } = this.props;
-        signInRequest(values);
-    }
-
-    render() {
-        const { invalid, handleSubmit, submitting, requestError } = this.props;
-
-        return (
-            <form className="sign-form" onSubmit={handleSubmit(this.sendRequest)}>
-                <h2 className="sign-form__header">Sign In</h2>
-                
-                {requestError && <p className="error-line error-line--warn error-line--no-margin">{requestError}</p>}
-
-                <Field className="sign-form__input sign-form__input--text" placeholder="Login" name="login" component={formInput} type="text" />
-                <Field className="sign-form__input sign-form__input--password" placeholder="Password" name="password" component={formInput} type="password" />
-                
-                <button className="link--btn link--btn60" disabled={invalid || submitting}>Sign In</button>
-                
-                <p className="sign-form__link--forgot-password"><Link className="link--inline" to={routes.PASSWORD_FORGET}>Forgot password ?</Link></p>
-                <hr className="sign-form__divider" />
-                <p className="sign-form__link--sign-up">Still ain't got an account? <Link className="link--inline" to={routes.SIGN_UP}>Sign up</Link> first!</p>
-            </form>
-        )
-    }
+  sendRequest = values => {
+    const { actions: { signInRequest } } = this.props;
+    signInRequest(values);
+  }
+
+  render() {
+    const { invalid, handleSubmit, submitting, requestError } = this.props;
+
+    return (
+      <form className="sign-form" onSubmit={handleSubmit(this.sendRequest)}>
+        <h2 className="sign-form__header">Sign In</h2>
+
+        {requestError && <p className="error-line error-line--warn error-line--no-margin">{requestError}</p>}
+
+        <Field className="sign-form__input sign-form__input--text" placeholder="Login" name="login" component={formInput} type="text" />
+        <Field className="sign-form__input sign-form__input--password" placeholder="Password" name="password" component={formInput} type="password" />
+
+        <button className="link--btn link--btn60" disabled={invalid || submitting}>Sign In</button>
+
+        <p className="sign-form__link--forgot-password"><Link className="link--inline" to={routes.PASSWORD_FORGET}>Forgot password ?</Link></p>
+        <hr className="sign-form__divider" />
+        <p className="sign-form__link--sign-up">Still ain't got an account? <Link className="link--inline" to={routes.SIGN_UP}>Sign up</Link> first!</p>
+      </form>
+    )
+  }
 }
 
 export default reduxForm({
-    form: "signIn",
-    validate
+  form: "signIn",
+  validate
 })(Form)

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

@@ -23,8 +23,8 @@ export default class header extends Component {
 
     render() {
         const { togglerClosed } = this.state;
-        const { user } = this.props;
-        const toggleStatus = togglerClosed ? "toggle-status--closed" : "toggle-status--opened"
+        const { user: { data } } = this.props;
+        const toggleStatus = togglerClosed ? "toggle-status--closed" : "toggle-status--opened";
 
         return (
             <header className="header">
@@ -41,40 +41,40 @@ export default class header extends Component {
                             <li>
                                 <Link className="header__nav nav__list-item" to={routes.HOME}>
                                     Home
-                                </Link>
+                </Link>
                             </li>
                             <li>
                                 <Link className="header__nav nav__list-item" to={routes.PROFILE}>
                                     Profile
-                                </Link>
+                </Link>
                             </li>
                             <li>
                                 <Link className="header__nav nav__list-item" to={routes.TESTS}>
                                     Test
-                                </Link>
+                </Link>
                             </li>
                             <li>
                                 <Link className="header__nav nav__list-item" to={routes.CATEGORIES}>
                                     Categories
-                                </Link>
+                </Link>
                             </li>
                             {
-                                user && user.isAdmin && (
+                                data && data['is_admin'] && (
                                     <React.Fragment>
                                         <li>
                                             <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
                                                 Create test
-                                            </Link>
+                            </Link>
                                         </li>
                                         <li>
                                             <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
                                                 Create category
-                                            </Link>
+                            </Link>
                                         </li>
                                         <li>
                                             <Link className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
-                                                Delete user
-                                            </Link>
+                                                Delete data
+                            </Link>
                                         </li>
                                     </React.Fragment>
                                 )
@@ -84,7 +84,7 @@ export default class header extends Component {
 
                     <div className="header__links">
                         {
-                            !user.data
+                            !data
                                 ? (
                                     <React.Fragment>
                                         <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>

src/components/user-components/CardsPage/cardPreview/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const styles = {
+    img: {
+        display: 'inline-block'
+    },
+    h3: {
+        marginTop: 0
+    },
+    p: {
+
+    }
+}
+
+const CardPreview = ({ description, title, cover }) => (
+    <div className=''>
+        <img src={cover} style={styles.img}/>
+        <h3 style={styles.h3}>{title}</h3>
+    </div>  
+)
+
+export default CardPreview;

src/components/user-components/CardsPage/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { getCards } from './../../../actions/cards'
+
+import CardPreview from './cardPreview';
+import Spinner from './../../common/spinner';
+
+
+class CardsPage extends React.Component {
+    componentDidMount() {
+        const { getCards } = this.props;
+        getCards();
+    }
+
+    render() {
+        const { cards: { isFetching, data, error }, getCards } = this.props;
+        console.log('Pasha lox', isFetching, data, error);
+        console.log('PROPS', this.props);
+
+        return (
+            isFetching
+                ?
+                <Spinner />
+                : data
+                    ?
+                    <div className='page' >
+                        {data.map(card => (
+                            <CardPreview
+                                title={card.name}
+                                cover={card.image}
+                                action={null}
+                            />))}
+                    </div >
+                    : error
+                        ?
+                        <div className='page' >
+                            Error handler
+                        </div >
+                        :
+                        null
+        )
+    }
+}
+
+const mapStateToProps = state => ({
+    cards: state.cards
+});
+const mapDispatchToProps = dispatch => bindActionCreators({ getCards }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(CardsPage);

src/components/user-components/admin-components/createTestForm/validate/index.js

@@ -1,6 +1,3 @@
-export default function validate(values) {
-    const {} = values;
-    const errors = {}
-
-    return errors;
+export default () => {
+  
 }

src/constants/index.js

@@ -18,3 +18,9 @@ export const USERS_GET_REQUEST_SUCCESS = 'USERS_GET_REQUEST_SUCCESS';
 export const USERS_GET_REQUEST_SUCCESS_FAILURE = 'USERS_GET_REQUEST_FAILURE';
 
 export const TOKEN_AUTH = 'TOKEN_AUTH';
+
+export const GET_CARDS_URL = 'https://quiz.maxcrc.de/api/v1/quiz';
+
+export const GET_CARDS = 'GET_CARD';
+export const GET_CARDS_SUCCESS = 'GET_CARDS_SUCCESS';
+export const GET_CARDS_FAILURE = 'GET_CARDS_FAILURE';

src/reducers/cards/index.js

@@ -0,0 +1,35 @@
+import * as actionTypes from './../../constants';
+import initialState from './../initialState';
+
+export default function cards(state = initialState.cards, { type, payload: data, error }) {
+    switch (type) {
+        case actionTypes.GET_CARDS: {
+            return {
+                ...state,
+                isFetching: true,
+                data: null,
+                error: null
+            }
+        }
+        case actionTypes.GET_CARDS_SUCCESS: {
+            return {
+                ...state,
+                isFetching: false,
+                data,
+                error: null
+            }
+        }
+        case actionTypes.GET_CARDS_FAILURE: {
+            return {
+                ...state,
+                isFetching: false,
+                data: null,
+                error
+            }
+        }
+        default: {
+            return state
+        }
+    }
+
+}

src/reducers/index.js

@@ -3,11 +3,13 @@
 import { combineReducers } from 'redux';
 
 import user from './user';
+import cards from './cards';
 import { reducer as form } from 'redux-form';
 
 const combinedReducers = combineReducers({
     form,
-    user
+    user,
+    cards
 })
 
 export default combinedReducers;

src/reducers/initialState/index.js

@@ -2,7 +2,11 @@ export default {
     user: {       
         data: null,
         error: null,
-        isFetching: null,
-        isAdmin: null
+        isFetching: null
+    },
+    cards: {
+        data: null,
+        error: null,
+        isFetching: null
     }
 }

src/router.js

@@ -14,8 +14,6 @@ import config from './components/common/protectedRoute/config';
 import fakeToken from './utils/token'
 import { bindActionCreators } from "redux";
 
-const notFound = lazy(() => import('./components/public-components/notFound'));
-
 class Router extends React.Component {
 
     componentDidMount() {
@@ -27,10 +25,9 @@ class Router extends React.Component {
 
     render() {
         const { user } = this.props;
-
+        
         //map located here because of switch-bag
-
-        const protectedRoutes = config.map(route =>
+        const Router = config.map(route =>
             <ProtectedRoute
                 path={route.path}
                 component={route.component}
@@ -38,15 +35,14 @@ class Router extends React.Component {
                 user={user}
                 exact
             />
-        );
+        )
 
         return (
             <div className="app">
                 <Header />
                 <Suspense fallback={<Spinner />}>
                     <Switch>
-                        {protectedRoutes}
-                        <Route component={notFound} />
+                        {Router}
                     </Switch>
                 </Suspense>
                 <Footer />

src/saga/auth/signIn/index.js

@@ -8,19 +8,19 @@ import { SIGN_IN_URL } from './../../../constants/index'
 // worker-saga for signing in
 
 export default function* ({ payload: { login, password } }) {
-    try {
-        const payload = yield call(() =>
-            axios.get(`${SIGN_IN_URL}login=${login}&password=${password}`)
-                .then(({ data: [payload] }) => payload)
-        );
+  try {
+    const payload = yield call(() =>
+      axios.get(`${SIGN_IN_URL}login=${login}&password=${password}`)
+        .then(({ data: [payload] }) => payload)
+    );
 
-        yield call(() => { if (!payload) throw (new Error("No such email or password")) })
+    yield call(() => { if (!payload) throw (new Error("No such email or password")) });
 
-        yield put(actions.signInRequestSucces(payload));
-        yield call(() => localStorage.setItem(token, JSON.stringify(payload)));
-    }
-    catch ({ message }) {
-        yield put(actions.signInRequestFailure(message))
-        yield call(() => localStorage.removeItem(token));
-    }
+    yield put(actions.signInRequestSucces(payload));
+    yield call(() => localStorage.setItem(token, JSON.stringify(payload)));
+  }
+  catch ({ message }) {
+    yield put(actions.signInRequestFailure(message));
+    yield call(() => localStorage.removeItem(token));
+  }
 }

src/saga/cards/getCards/index.js

@@ -0,0 +1,21 @@
+import { put, call } from "redux-saga/effects";
+import * as actions from '../../../actions/cards';
+import axios from 'axios';
+
+import { GET_CARDS_URL } from './../../../constants/index'
+
+// worker-saga for getting cards
+
+export default function* () {
+    try {
+        const payload = yield call(() =>
+            axios.get(GET_CARDS_URL)
+                .then(({ data }) => data)
+        );
+
+        yield put(actions.getCardsSuccess(payload));
+    }
+    catch ({ message }) {
+        yield put(actions.getCardsFailure(message))
+    }
+}

src/saga/cards/index.js

@@ -0,0 +1,8 @@
+import { takeEvery } from "redux-saga/effects";
+
+import getCards from './getCards';
+import { GET_CARDS } from "./../../constants"
+
+export default function*() {
+    yield takeEvery(GET_CARDS, getCards);
+}

src/saga/index.js

@@ -1,6 +1,10 @@
 import { fork } from "redux-saga/effects";
-import auth from './auth'
+import auth from './auth';
+import cards from './cards';
 
 export default function*() {
-    yield fork(auth)
+    yield [
+        fork(auth),
+        fork(cards)
+    ]
 }