merge Maxim -> dev

debug.log

@@ -0,0 +1 @@
+[0109/234712.714:ERROR:settings.cc(319)] Settings magic is not 1129342067

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
     "firebase": "^5.7.0",
     "node-sass": "^4.11.0",
@@ -13,7 +14,7 @@
     "react-loader-spinner": "^2.3.0",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.1",
+    "react-scripts": "^2.1.3",
     "redux": "^4.0.1",
     "redux-form": "^8.0.4",
     "redux-logger": "^3.0.6",

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,11 @@
 import * as signInActions from './signIn';
 import * as signUpActions from './signUp';
+import * as signOutActions from './signOut';
+import * as usersGetActions from './signOut';
 
 export default {
     ...signInActions,
-    ...signUpActions
+    ...signUpActions,
+    ...signOutActions,
+    ...usersGetActions
 }

src/actions/auth/users/users.js

@@ -0,0 +1,18 @@
+import * as types from '../../../constants';
+
+// all actions for signing up
+
+export const usersGetRequest= payload => ({
+    type: types.USERS_GET_REQUEST,
+    payload
+})
+
+export const usersGetRequestSucces = payload => ({
+    type: types.USERS_GET_REQUEST_SUCCESS,
+    payload
+})
+
+export const usersGetRequestFailure = error => ({
+    type: types.USERS_GET_REQUEST_SUCCESS_FAILURE ,
+    error
+})

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/protectedRoute/config.js

@@ -9,6 +9,7 @@ const createTestForm = lazy(() => import('./../../user-components/admin-componen
 const profilePage = lazy(() => import('./../../user-components/profilePage'));
 const categoriesPage = lazy(() => import('./../../user-components/categoriesPage'));
 
+
 export default [
     {
         path: routes.LANDING,

src/components/common/protectedRoute/index.js

@@ -1,6 +1,6 @@
 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/header/index.js

@@ -1,105 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from "react-router-dom";
-import * as routes from './../../constants/routes';
-import { UserContext } from './../../containers/Header';
-
-export default class header extends Component {
-
-    state = {
-        togglerClosed: true,
-    }
-
-    handleToggle = (event) => {
-        this.setState((prevState) => ({ togglerClosed: !prevState.togglerClosed }))
-    }
-
-    render() {
-        const { togglerClosed } = this.state;
-        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>
-                                        <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--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>
-
-                                <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>
-        )
-    }
-}

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 => {
@@ -14,11 +14,13 @@ class Form extends React.Component {
     }
 
     render() {
-        const { invalid, handleSubmit, submitting } = this.props;
+        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" />

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 {
 
@@ -12,13 +12,16 @@ class Form extends React.Component {
     }
 
     render() {
-        const { invalid, handleSubmit } = this.props;
+
+        const { invalid, handleSubmit, requestError } = this.props;
 
         return (
             <form className="sign-form" onSubmit={handleSubmit(this.sendRequest)}>
 
                 <h2 className="sign-form__header">Sign Up</h2>
 
+                {requestError && <p className="error-line error-line--warn error-line--no-margin">{requestError}</p>}
+
                 <Field name="login" className="sign-form__input sign-form__input--text" placeholder="Login" component={formInput} type="text" />
 
                 <div className="sign-form__password-container">

src/components/auth/signUpForm/validate/index.js

@@ -11,12 +11,9 @@ export default function validate(values) {
     else if (login.length < 8 || login.length > 20) {
         errors.login = "Invalid login length: login should be from 8 to 20 symbols";
     }
-<<<<<<< HEAD:src/components/auth/signUpForm/validate/index.js
-    else if (!/^[a-z0-9_-]{8,20}$/i.test(login)) {
-=======
+
     else if (
         !/^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@(([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(login)) {
->>>>>>> 86c9135... merged Sveta -> signIn/Up changes, getting user prototype:src/components/public-components/auth/signUpForm/validate/index.js
         errors.login = "Invalid login, try another one";
     }
     

src/components/footer/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import store from './../../../state';
 
 export default props => (
     <div className="footer">
@@ -6,6 +7,7 @@ export default props => (
             TOP-company
             "<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>
+        <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/public-components/header/index.js

@@ -0,0 +1,108 @@
+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 {
+
+    state = {
+        togglerClosed: true,
+    }
+
+    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 (
+            <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--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>
+
+                    <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/components/landingPage/index.js

@@ -1,10 +1,10 @@
 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">
-        <div className="landing-page__about">
+        <div className="container landing-page__about">
             <h1 className="description__header">
                 We are the powerfull servise providing you the ability to create and manage
                 your own tests, in any categories, choosing your own marking methods.
@@ -16,7 +16,7 @@ export default props => (
                 can easily pass them, get marks and <span className="description__inline--pretty">share</span> ones!
             </p>
         </div>
-        <div className="landing-page__links-container">
+        <div className="container landing-page__links-container">
             <Link to={routes.SIGN_IN} className="landing-page__links landing-page__links--sign-in">
                 Sign in
             </Link>

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,33 +1,34 @@
 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 className="page" onSubmit={handleSubmit(this.sendRequest)}>
                 <h2>Make a title-page for your test!</h2>
 
                 <div className="title-page__block">
                     <p className="titles">Title</p>
                     <Field
-                        className="title-page__block--"
+                        className="title-page__block"
                         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/components/user-components/profilePage/index.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { connect } from 'react-redux';
+// import { bindActionCreators } from 'redux'
+// import {} from './../../../actions'
+import axios from 'axios';
+
+// redux-connected container
+
+class profilePage extends React.Component {
+
+    state = {
+        user: {}
+    }
+
+    getUser = () => {
+        const randomUserId = Math.ceil(Math.random() * 10);
+
+        axios.post(`https://quiz.maxcrc.de/api/v1/user`,{
+            "login": 'ddd',
+            "password":"jhgfhgg"
+
+        })
+            .then(({ data }) => this.setState({
+                user: data
+            }))
+            .catch(({ message }) => console.warn(message))
+    }
+
+    componentDidMount() {
+        this.getUser();
+    }
+
+    render() {
+        const { user } = this.state;
+
+        console.log(user);
+
+        return (
+            <div className="page page--bottom-only profile-page">
+                <section className="container section section--about">
+                    <h2 className="section__element section__element--header">{user.login}</h2>
+                    <img className="section__element section__element--image" src={user.avatar} alt="avatar" />
+                    <div className="sedtion__element section__element--login">
+                        <h3>Login</h3>
+                        <p>{user.login}<button className="link link--btn right">Change login</button></p>
+                    </div>
+                    <div className="section__element section__element--">
+                        <h3>E-mail</h3>
+                        <p>{user.email}<button className="link link--btn right">Change e-mail</button></p>
+                    </div>
+                    <div className="section__element section__element--">
+                        <h3>Status</h3>
+                        <p>{user.description}</p>
+                    </div>
+                </section>
+                <section className="container section section--stats">
+                    <div className="section__element section__element--">
+                        <h3>Member Since</h3>
+                        <p>{new Date(user.createdAt).toLocaleString()}</p>
+                    </div>
+                    <div className="section__element section__element--comments">
+                        <h3>Last comments</h3>
+                        <p className="comments-block">
+                            {
+                                user.comments && user.comments
+                                    .slice(0, 60)
+                                    .map(el =>
+                                        <p>
+                                            <h4>{new Date(el.createdAt).toLocaleString()}</h4>
+                                            {el.text}
+                                        </p>)
+                            }
+                        </p>
+                    </div>
+                </section>
+            </div>
+        )
+    }
+
+}
+
+const
+    mapStateToProps = state => ({
+        user: state.user
+    })
+// mapDispatchToProps = dispatch => bindActionCreators({}, dispatch)
+
+export default connect(mapStateToProps)(profilePage);
+

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';
@@ -12,12 +12,9 @@ export const USER_IS_SIGNED_IN = 'USER_IS_SIGNED_IN';
 export const USER_IS_NOT_SIGNED_IN = 'USER_IS_NOT_SIGNED_IN';
 
 export const SIGN_OUT = 'SIGN_OUT';
-<<<<<<< HEAD
-=======
 
 export const USERS_GET_REQUEST = 'USERS_GET_REQUEST';
 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';
->>>>>>> 86c9135... merged Sveta -> signIn/Up changes, getting user prototype

src/containers/auth/SignInPage/index.js

@@ -6,22 +6,34 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router';
 import { HOME } from './../../../constants/routes';
 
-import SignInForm from './../../../components/auth/signInForm'
+
+import Spinner from './../../../components/common/spinner';
+import SignInForm from './../../../components/public-components/auth/signInForm';
 
 class SignInPage extends React.Component {
 
     render() {
         const { signInRequest, user } = this.props;
+
         return (
-            !(user.data)
-                ? (
-                    <div className="page sign-in">
-                        <SignInForm actions={{ signInRequest }} />
-                    </div>
-                )
-                : (
-                    <Redirect to={HOME} />
-                )
+            user.isFetching
+                ? <Spinner />
+                : user.error
+                    ? 
+                    (
+                        <div className="page sign-in">
+                            <SignInForm actions={{ signInRequest }} requestError={user.error} />
+                        </div>
+                    )
+                    : user.data
+                        ?
+                        < Redirect to={HOME} />
+                        :
+                        (
+                            <div className="page sign-in">
+                                <SignInForm actions={{ signInRequest }} />
+                            </div>
+                        )
         )
     }
 }

src/containers/auth/SignUpPage/index.js

@@ -6,22 +6,35 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router'
 import { HOME } from './../../../constants/routes';
 
-import SignUpForm from './../../../components/auth/signUpForm'
+
+import Spinner from './../../../components/common/spinner';
+import SignUpForm from './../../../components/public-components/auth/signUpForm';
 
 class SignUpPage extends React.Component {
 
     render() {
         const { signUpRequest, user } = this.props;
+
+
         return (
-            !(user.data)
-                ? (
-                    <div className="page sign-up">
-                        <SignUpForm actions={{ signUpRequest }} />
-                    </div>
-                )
-                : (
-                    <Redirect to={HOME} />
-                )
+            user.isFetching
+                ? <Spinner />
+                : user.error
+                    ? 
+                    (
+                        <div className="page sign-up">
+                            <SignUpForm actions={{ signUpRequest }} requestError={user.error} />
+                        </div>
+                    )
+                    : user.data
+                        ?
+                        < Redirect to={HOME} />
+                        :
+                        (
+                            <div className="page sign-up">
+                                <SignUpForm actions={{ signUpRequest }} />
+                            </div>
+                        )
         )
     }
 }

src/containers/header/index.js

@@ -1,36 +1,9 @@
-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/header';
+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 +13,4 @@ const
         signOut
     }, dispatch);
 
-export { UserContext };
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+export default connect(mapStateToProps, mapDispatchToProps)(HeaderComponent);

src/reducers/initialState/index.js

@@ -1,9 +1,8 @@
 export default {
-    user: {
-        
+    user: {       
         data: null,
         error: null,
-        gettingUser: null,
+        isFetching: null,
         isAdmin: null
     }
 }

src/reducers/user/index.js

@@ -16,7 +16,8 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST: {
             return {
                 ...state,
-                gettingUser: true,
+
+                isFetching: true,
                 error: null,
                 data: null
             }
@@ -24,7 +25,8 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST_SUCCESS: {
             return {
                 ...state,
-                gettingUser: false,
+
+                isFetching: false,
                 error: null,
                 data
             }
@@ -32,21 +34,19 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST_FAILURE: {
             return {
                 ...state,
-                gettingUser: false,
+
+                isFetching: false,
                 data: null,
                 error
             }
         }
-<<<<<<< HEAD
-=======
 
         // SIGN_IN
 
->>>>>>> 86c9135... merged Sveta -> signIn/Up changes, getting user prototype
         case types.SIGN_IN_REQUEST: {
             return {
                 ...state,
-                gettingUser: true,
+                isFetching: true,
                 error: null,
                 data: null
             }
@@ -54,25 +54,22 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_IN_REQUEST_SUCCESS: {
             return {
                 ...state,
-                gettingUser: false,
+                isFetching: false,
                 error: null,
                 data                
             }
         }
-        case types.SIGN_UP_REQUEST_FAILURE: {
+        case types.SIGN_IN_REQUEST_FAILURE: {
             return {
                 ...state,
-                gettingUser: false,
+                isFetching: false,
                 data: null,
                 error
             }
         }
-<<<<<<< HEAD
-=======
 
         // SIGN_OUT
 
->>>>>>> 86c9135... merged Sveta -> signIn/Up changes, getting user prototype
         case types.SIGN_OUT: {
             return initialState.user
         }
@@ -84,4 +81,9 @@ export default function (state = initialState.user, { type, error, payload: data
             
         }
     }
-}
+}
+
+
+
+
+

src/router.js

@@ -22,7 +22,8 @@ class Router extends React.Component {
         const storagedUser = localStorage.getItem(fakeToken);
         const { tokenAuth } = this.props;
 
-        storagedUser && tokenAuth(storagedUser);
+
+        storagedUser && tokenAuth(JSON.parse(storagedUser));
     }
 
     render() {
@@ -61,3 +62,4 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => bindActionCreators({ tokenAuth }, dispatch);
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Router));
+

src/saga/auth/index.js

@@ -3,10 +3,12 @@ import * as types from "./../../constants"
 
 import signIn from './signIn';
 import signUp from './signUp';
+import getUsers from './users/users';
 
 export default function*() {
     yield takeEvery(types.SIGN_IN_REQUEST, signIn);
     yield takeEvery(types.SIGN_UP_REQUEST, signUp);
+    yield takeEvery(types.USERS_GET_REQUEST, getUsers);
 }
 
 

src/saga/auth/signIn/index.js

@@ -1,24 +1,26 @@
 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'
+import { SIGN_IN_URL } from './../../../constants/index'
 
 // worker-saga for signing in
 
-export default function* ({ payload: requestBody }) {
+export default function* ({ payload: { login, password } }) {
     try {
-        // console.log('received request body from sign-in worker saga', requestBody);
-        const payload = yield call(() => 
-            fetch(SIGN_IN_URL, {
-                method: 'POST',
-                body: JSON.stringify(requestBody)
-            })
-                .then(res => res.json())
+        const payload = yield call(() =>
+            axios.get(`${SIGN_IN_URL}login=${login}&password=${password}`)
+                .then(({ data: [payload] }) => payload)
         );
-        // console.log("Payload", payload);
+
+        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 (exception) {
-        yield put(actions.signInRequestFailure(exception.message))
+    catch ({ message }) {
+        yield put(actions.signInRequestFailure(message))
+        yield call(() => localStorage.removeItem(token));
     }
 }

src/saga/auth/signUp/index.js

@@ -1,22 +1,25 @@
 import { put, call } from "redux-saga/effects";
 import * as actions from './../../../actions/auth/signUp'
+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(() => 
-        fetch(SIGN_UP_URL, {
-            method: 'POST',
-            body: JSON.stringify(requestBody)
-        })
-            .then(res => res.json())
-    );
+        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

@@ -0,0 +1,19 @@
+import { put, call } from "redux-saga/effects";
+import * as actions from './../../../actions/auth/users/users'
+import axios from 'axios';
+
+
+
+export default function* ({ payload: requestBody }) {
+    try {
+        const payload = yield call(() =>
+            axios.get(`https://quiz.maxcrc.de/api/v1/user`)
+                .then(({ data }) => data)
+        );
+        
+        yield put(actions.usersGetRequestSucces(payload));
+    }
+    catch ({ message }) {
+        yield put(actions.usersGetRequestFailure(message))
+    }
+}

src/styles/components/_button.scss

@@ -31,6 +31,9 @@
             padding: 3vh 6vh;
             font-weight: 400;
         }
+        &-right {
+            float: right;
+        }
     }
     
 }

src/styles/components/_categoriesPage.scss

@@ -0,0 +1,31 @@
+
+
+.categories {
+    &-page {
+        width: 95%;
+        margin: auto;
+    }
+    &-grid {
+        display: flex;
+        flex-wrap: wrap;
+        font-family: 'Cormorant Infant', serif;
+        text-align: center;
+        &__element {
+            min-width: 250px;
+            max-width: 370px;
+            margin: 1vw auto;
+            border: 2px solid lightsteelblue;
+            height: 300px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        &__content-wrapper {
+            width: 80%;
+            height: 80%;
+        }
+        .divider {
+            width: 60%;
+        }
+    }
+}

src/styles/components/_container.scss

@@ -0,0 +1,5 @@
+.container {
+    margin: auto;
+    background: $color-lightgrey-transparent;
+    box-shadow: 0 0 10px grey;
+}

src/styles/components/_error-line.scss

@@ -0,0 +1,17 @@
+.error-line {
+    color: $color-red;
+    font-size: 18px;
+    font-family: 'Poiret One', cursive;
+    font-weight: bold;
+    text-align: center;
+    text-transform: uppercase;
+
+    &--warn {
+        &::before {
+            content: '⚠ ';
+        }
+    }
+    &--no-margin {
+        margin: 0;
+    }
+}

src/styles/components/_landingPage.scss

@@ -5,12 +5,6 @@
     background-size: cover;
     background-position: top center;
     font-family: 'Cormorant Infant', serif;
-    &__about,
-    &__links-container, {
-        margin: auto;
-        background: rgba(211,211,211, .9);
-        box-shadow: 0 0 10px grey;
-    }
     &__about {
         width: 65%;
         text-align: center;

src/styles/components/_page.scss

@@ -1,5 +1,16 @@
 .page {
     padding-top: $padding-top-fixed;
     padding-bottom: $padding-bottom-fixed;
+    &--bottom-only {
+        padding-top: $padding-top-fixed - 40px;
+    }
 }
+
+// .app {
+//     background-image: url('https://structureofintellect.files.wordpress.com/2017/09/bubble-test.jpg');
+//     background-attachment: fixed;
+//     background-repeat: no-repeat;
+//     background-size: cover;
+//     background-position: top center;
+// }
     

src/styles/components/_profilePage.scss

@@ -0,0 +1,30 @@
+.profile-page {
+    display: flex;
+    flex-wrap: wrap;
+    font-family: 'Cormorant Infant', serif;
+    font-size: 20px;
+    .section {
+        flex-grow: 1;
+        flex-basis: 400px;
+        margin: 10px;
+        padding: 10px;
+        &__element {
+            &--image {
+                border: 3px solid $color-lightsteelblue;
+                margin-bottom: 20px;
+            }
+            p {
+                margin-top: 5px;
+            }
+            .comments-block {
+                height: 250px;
+                overflow: auto;
+            }
+            
+        }
+    }
+    .right {
+        float: right;
+    }
+}
+

src/styles/components/_signPage.scss

@@ -1,5 +1,6 @@
 .sign {
     &-form {
+        // background: $color-lightgrey-transparent;
         font-size: 18px;
         font-family: 'Poiret One', cursive;
         font-weight: bold;

src/styles/index.scss

@@ -4,6 +4,9 @@
 @import "base/typography";
 
 @import "components/page";
+@import "components/error-line";
+
+@import "components/container";
 @import "components/button";
 @import "components/header";
 @import "components/spinner";
@@ -11,4 +14,6 @@
 @import "components/footer";
 @import "components/signPage";
 @import "components/notFound";
+@import "components/profilePage";
+@import "components/categoriesPage";
 

грабли.txt

@@ -0,0 +1,6 @@
+1. Редакс ломает роутер.
+Возможный костыль:
+https://github.com/ReactTraining/react-router/blob/v4.0.0-beta.8/packages/react-router/docs/guides/blocked-updates.md
+2. Анимация на кнопках хэдэра и нотфаунд не работает, хотя работает на кнопках формы.
+ХЗ
+3. Нету адекватного способа прокинуть юзера в роутер -> см. пункт 1.

костыли.txt

@@ -0,0 +1 @@
+Все еще впереди...