package.json

@@ -11,7 +11,9 @@
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-image": "^2.0.0",
     "react-loader-spinner": "^2.3.0",
+    "react-native": "^0.57.8",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.3",

src/actions/adminActions/index.js

@@ -0,0 +1,16 @@
+import * as types from '../../constants';
+
+export const userGetRequest = payload => ({
+    type: types.USERS_GET_REQUEST,
+    payload
+})
+
+export const userGetRequestSucces = payload => ({
+    type: types.USERS_GET_REQUEST_SUCCESS,
+    payload
+})
+
+export const userGetRequestFailure = error => ({
+    type: types.USERS_GET_REQUEST_FAILURE,
+    error
+})

src/actions/auth/signIn/index.js

@@ -15,4 +15,5 @@ export const signInRequestSucces = payload => ({
 export const signInRequestFailure = error => ({
     type: types.SIGN_IN_REQUEST_FAILURE,
     error
-})
+
+})

src/actions/card/action-card.js

@@ -0,0 +1,15 @@
+import * as types from '../../constants';
+
+export const categoryRequest = () => ({
+    type: types.CATEGORY_URL_REQUEST
+})
+
+export const categoryRequestSucces = payload => ({
+    type: types.CATEGORY_URL_REQUEST_SUCCESS,
+    payload
+})
+
+export const categoryRequestFailure = error => ({
+    type: types.CATEGORY_URL_REQUEST_FAILURE,
+    error
+})

src/actions/card/index.js

@@ -0,0 +1,6 @@
+import * as categoryActions from './action-card';
+
+
+export default {
+    ...categoryActions,
+}

src/actions/index.js

@@ -1,5 +1,8 @@
+
 import authActions from './auth';
 
+
 export default {
-    ...authActions
+    ...authActions,
+    ...categoryActions
 }

src/actions/userFields/changeEmail.js

@@ -0,0 +1,16 @@
+import * as types from '../../constants';
+
+export const userChangeRequest = payload => ({
+    type: types.USERS_CHANGE_REQUEST,
+    payload
+})
+
+export const userChangeRequestSucces = payload => ({
+    type: types.USERS_CHANGE_REQUEST_SUCCESS,
+    payload
+})
+
+export const userChangeRequestFailure = error => ({
+    type: types.USERS_CHANGE_REQUEST_FAILURE,
+    error
+})

src/actions/userFields/changePassword.js

@@ -0,0 +1,16 @@
+import * as types from '../../constants';
+
+export const passwordChangeRequest = payload => ({
+    type: types.PASSWORD_CHANGE_REQUEST,
+    payload
+})
+
+export const passwordChangeRequestSucces = payload => ({
+    type: types.PASSWORD_CHANGE_REQUEST_SUCCESS,
+    payload
+})
+
+export const passwordChangeRequestFailure = error => ({
+    type: types.PASSWORD_CHANGE_REQUEST_FAILURE,
+    error
+})

src/components/common/protectedRoute/index.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
+
+import token from '../../../utils/token'
+
 import * as routes from './../../../constants/routes';
 import PermissionDenied from './../../public-components/permissionDenied';
 
-export default ({ component: Component, user: {data}, access, ...rest  }) => (
+export default ({ component: Component, user, access, ...rest  }) => (
     <Route
         {...rest}
         render={props => {
+            const storagedUser = JSON.parse(localStorage.getItem(token));
+            const data = user.data || storagedUser || null;
 
             if (access === 'public') {
                 return <Component {...props} />

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

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

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

@@ -12,6 +12,7 @@ class Form extends React.Component {
     }
 
     render() {
+
         const { invalid, handleSubmit, requestError } = this.props;
 
         return (

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

@@ -11,6 +11,7 @@ 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";
     }
+
     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)) {
         errors.login = "Invalid login, try another one";

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

@@ -32,9 +32,10 @@ export default class header extends Component {
                     <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 className="header__toggle-trigger" onClick={this.handleToggle} >
                     <span />
-                </span>
+                </span> */}
+                <button style={{ position: "absolute", top: '85px', left: 0 }} onClick={this.handleToggle}>HEADER TOGGLE</button>
                 <div className="header__flex-wrapper">
                     <nav className={`header__nav ${toggleStatus}`}>
                         <ul className="header__nav nav__list"  >
@@ -59,7 +60,7 @@ export default class header extends Component {
                 </Link>
                             </li>
                             {
-                                data && data['is_admin'] && (
+                                data && data.is_admin && (
                                     <React.Fragment>
                                         <li>
                                             <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>

src/components/user-components/admin-components/createDeleteUser/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+
+import formInput from '../../..//common/formInput';
+ submit=()=>{
+     
+ }
+
+class createDeleteUser extends React.Component {
+
+    render() {
+        const {  handleSubmit  } = this.props;
+        return (
+            <form  className="page">
+                <Field name="login"  type="email" placeholder="Enter new login" component={formInput} />
+                <button >Search</button>
+            </form >
+        )
+    }
+}
+
+
+const mapDispatchToProps = dispatch => bindActionCreators({ userGetRequest }, dispatch);
+
+
+export default connect(mapDispatchToProps)(reduxForm({
+    form: "createDeleteUser",   
+})(createDeleteUser))

src/components/user-components/profilePage/LoginFild/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Field } from 'redux-form';
+
+import ChangeLoginForm from './loginChangeForm';
+
+export default class ChangeLogin extends React.Component {
+
+    state = {
+        clicked: false,
+        newLogin: null
+    }
+
+    submit = ({ login }) => {
+        console.log('handleSubmit->submit', this.props)
+        const { actions: { userChangeRequest },  data: { id }  } = this.props;
+
+        console.log('id', id);
+
+        userChangeRequest({
+            login,
+            id
+        })
+    }
+
+    handleClick = () => {
+        this.setState((prevState) => ({ clicked: !prevState.clicked }));
+    }
+
+    render() {
+        const { handleClick, submit } = this;
+        const { clicked } = this.state;
+        const { children } = this.props;
+
+        return (
+            !clicked
+                ?
+                (
+                    <React.Fragment>
+                        <div>{children}</div>
+                        <button className="link link--btn right"onClick={handleClick}>Change Email</button>
+                    </React.Fragment>
+                )
+                : (
+                    <React.Fragment>
+                        <div>{children}</div>
+                        <ChangeLoginForm handlers={{ handleClick, submit }} />
+                    </React.Fragment>
+                )
+        )
+    }
+}

src/components/user-components/profilePage/LoginFild/loginChangeForm/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+
+import formInput from '../../../../common/formInput';
+import validate from '../../../../public-components/auth/signUpForm/validate';
+
+class ChangeLoginForm extends React.Component {
+
+    render() {
+        const { children, handleSubmit, handlers: { handleClick, submit } } = this.props;
+        return (
+            <form onSubmit={handleSubmit(submit)} >
+                <Field name="login" type="email" placeholder="Enter new login" component={formInput} />
+                <button
+                    type="button" className="link link--btn right"
+                    onClick={
+                        function() {
+                            handleClick();
+                            handleSubmit(submit)();
+                        }    
+                    }
+                >
+                    Change
+                </button>
+            </form >
+        )
+    }
+}
+
+export default reduxForm({
+    form: "changeLogin",
+    validate
+})(ChangeLoginForm);

src/components/user-components/profilePage/PasswordFields/PasswordChangeForm/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+
+import formInput from '../../../../common/formInput';
+import validate from '../PasswordChangeForm/validate/index';
+
+class ChangePasswordForm extends React.Component {
+
+    render() {
+        const { children, handleSubmit, handlers: { handleClick, submit } } = this.props;
+        return (
+            <form onSubmit={handleSubmit(submit)} >
+                <Field name="passwordConfirmation" type="password" placeholder="Enter password" component={formInput} />
+                <Field name="password" type="password" placeholder="Enter new password" component={formInput} />
+                <button className="link link--btn right" onClick={function(){handleSubmit(submit)}}>Change</button>
+            </form >
+        )
+    }
+}
+
+export default reduxForm({
+    form: "changePassword",
+    validate
+})(ChangePasswordForm);

src/components/user-components/profilePage/PasswordFields/PasswordChangeForm/validate/index.js

@@ -0,0 +1,24 @@
+export default function validate(values) {
+    const {  password, passwordConfirmation } = values;
+    const errors = {};
+
+if (!password) {
+    errors.password = "Required"
+}
+else if (/[,]/.test(password)) {
+    errors.password = "Invalid symbol: \",\" is not allowed!";
+}
+else if (password.length < 8 || password.length > 20) {
+    errors.password = "Invalid password length: password should be from 8 to 20 symbols";
+}
+else if (!/^[a-z0-9_-]{8,20}$/i.test(password)) {
+    errors.password = "Invalid password, try another one";
+}
+
+if (!passwordConfirmation) {
+    errors.passwordConfirmation = "Required";
+}
+else if (password !== passwordConfirmation) {
+    errors.passwordConfirmation = "Passwords don't match each other!";
+}
+    }

src/components/user-components/profilePage/PasswordFields/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Field } from 'redux-form';
+
+import ChangePasswordForm from './PasswordChangeForm'
+
+export default class ChangePassword extends React.Component {
+
+    state = {
+        clicked: false
+    }
+    
+    submit = ({ password }) => {
+        console.log('handleSubmit->submit', this.props)
+        const { actions: { passwordChangeRequest },  data: { id } }  = this.props;
+
+        console.log('id', id);
+
+         passwordChangeRequest({
+            password,
+            id
+        })
+    }
+
+    handleClick = () => {
+        this.setState((prevState) => ({ clicked: !prevState.clicked }));
+    }
+
+    render() {
+        const { handleClick, submit } = this;
+        const { clicked } = this.state;
+        const { children } = this.props;
+
+        return (
+            !clicked
+                ?
+                (
+                    <React.Fragment>
+                        <div>{children}</div>
+                        <button className="link link--btn right" onClick={handleClick}>Change password</button>
+                    </React.Fragment>
+                    
+                )
+                : (
+                    <React.Fragment>
+                        <div>{children}</div>
+                        <ChangePasswordForm handlers={{ handleClick, submit }} />
+                    </React.Fragment>
+                )
+        )
+    }
+}

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

@@ -1,68 +1,89 @@
 import React from 'react';
+import { AppRegistry, View, Image } from 'react';
 import { connect } from 'react-redux';
-// import { bindActionCreators } from 'redux'
+import { bindActionCreators } from 'redux'
 // import {} from './../../../actions'
 import axios from 'axios';
+import { userChangeRequest } from '../../../actions/userFields/changeEmail'
+import {passwordChangeRequest} from '../../../actions/userFields/changePassword'
+
+import ChangeLogin from './LoginFild';
+import ChangePassword from './PasswordFields'
 
 // redux-connected container
 
 class profilePage extends React.Component {
 
     state = {
-        user: {}
+        files: null,
+        photo: null
     }
+    change = e => {
+        const reader = new FileReader();
+
+        const file = e.target.files[0];
+        this.setState({ file });
+
+        reader.onloadend = () => {
+            this.setState({
+                photo: reader.result
+            });
+        };
+        reader.readAsDataURL(file);
+    };
 
-    getUser = () => {
-        const randomUserId = Math.ceil(Math.random() * 10);
+    post = () => {
+        const file = new FormData();
 
-        axios.post(`https://quiz.maxcrc.de/api/v1/user`,{
-            "login": 'ddd',
-            "password":"jhgfhgg"
+        file.append("profilePhoto", this.state.file);
+    };
 
+    lol = () => {
+        const { user: { data: { id } }, userChangeRequest } = this.props;
+
+        userChangeRequest({
+            id,
+            login: "lol wtf"
         })
-            .then(({ data }) => this.setState({
-                user: data
-            }))
-            .catch(({ message }) => console.warn(message))
     }
 
-    componentDidMount() {
-        this.getUser();
-    }
 
     render() {
-        const { user } = this.state;
+        const { user:{data}, userChangeRequest,passwordChangeRequest } = this.props;
 
-        console.log(user);
+        // console.log('User', user);
+        // console.log('Props', this.props);
+        // console.log('State', this.state);
 
         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" />
+                    {/* <h2 className="section__element section__element--header">{data.login}</h2> */}
+        
                     <div className="sedtion__element section__element--login">
-                        <h3>Login</h3>
-                        <p>{user.login}<button className="link link--btn right">Change login</button></p>
+                        <h3>Email</h3>
+                        {/* <p>{user.login}<button className="link link--btn right" >Change login</button></p> */}
+                        <ChangeLogin className="link link--btn right" data={data} actions={{ userChangeRequest }}>{data.login}</ChangeLogin>
                     </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>
+                        <h3>Password</h3>
+                        <ChangePassword className="link link--btn right" data={data} actions={{ passwordChangeRequest }}>{data.password}</ChangePassword>
                     </div>
                     <div className="section__element section__element--">
                         <h3>Status</h3>
-                        <p>{user.description}</p>
+                        <p>{data.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>
+                        <p>{new Date(data.createdAt).toLocaleString()}</p>
                     </div>
                     <div className="section__element section__element--comments">
                         <h3>Last comments</h3>
                         <p className="comments-block">
                             {
-                                user.comments && user.comments
+                                data.comments && data.comments
                                     .slice(0, 60)
                                     .map(el =>
                                         <p>
@@ -82,8 +103,9 @@ class profilePage extends React.Component {
 const
     mapStateToProps = state => ({
         user: state.user
-    })
-// mapDispatchToProps = dispatch => bindActionCreators({}, dispatch)
+    });
+
+const mapDispatchToProps = dispatch => bindActionCreators({ userChangeRequest, passwordChangeRequest }, dispatch);
 
-export default connect(mapStateToProps)(profilePage);
+export default connect(mapStateToProps, mapDispatchToProps)(profilePage);
 

src/constants/index.js

@@ -1,9 +1,9 @@
-export const SIGN_IN_URL = 'https://quiz.maxcrc.de/api/v1/user?';
+export const SIGN_IN_URL = 'http://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://quiz.maxcrc.de/api/v1/user';
+export const SIGN_UP_URL = 'http://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';
@@ -19,6 +19,15 @@ export const USERS_GET_REQUEST_SUCCESS_FAILURE = 'USERS_GET_REQUEST_FAILURE';
 
 export const TOKEN_AUTH = 'TOKEN_AUTH';
 
+export const USERS_CHANGE_URL = 'http://quiz.maxcrc.de/api/v1/user/';
+export const USERS_CHANGE_REQUEST = 'USERS_CHANGE_REQUEST';
+export const USERS_CHANGE_REQUEST_SUCCESS = 'USERS_CHANGE_REQUEST_SUCCESS';
+export const USERS_CHANGE_REQUEST_FAILURE = 'USERS_CHANGE_REQUEST_FAILURE';
+
+export const PASSWORD_CHANGE_REQUEST = 'PASSWORD_CHANGE_REQUEST';
+export const PASSWORD_CHANGE_REQUEST_SUCCESS = 'PASSWORD_CHANGE_REQUEST_SUCCESS';
+export const PASSWORD_CHANGE_REQUEST_FAILURE = 'PASSWORD_CHANGE_REQUEST_FAILURE';
+
 export const GET_CARDS_URL = 'https://quiz.maxcrc.de/api/v1/quiz';
 
 export const GET_CARDS = 'GET_CARD';

src/containers/AuthPage/index.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { signInRequest,userIsNotSignedIn  } from './../../actions/auth/signIn';
+import { signUpRequest } from './../../actions/auth/signUp';
+import { categoryRequest} from '../../actions/card/action-card'
+
+class AuthPage extends Component {
+    constructor(props) {
+        super(props);
+    }
+    
+
+    render() {
+        const { isFetching, error, user } = this.props.auth;
+        const { signInRequest } = this.props; 
+        
+
+        console.log("<AuthPage> - props",this.props);
+
+        return (
+            <div className="auth-page">
+                <button onClick={signInRequest} disabled={user ? true : false}>Auth</button>
+                <h2>{isFetching ? 'wait a moment...' : error ? 'Looks like we\'ve in trouble...' : user && user.displayName}</h2>
+            </div>
+        )
+    }
+}
+
+const
+    mapStateToProps = state => ({
+        auth: {
+            ...state.signIn,
+            
+        },
+        ...state.card
+    }),
+    mapDispatchToProps = dispatch => bindActionCreators({ 
+        signInRequest,
+        signUpRequest,
+        categoryRequest,
+        userIsNotSignedIn 
+    }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(AuthPage)

src/containers/auth/SignInPage/index.js

@@ -6,9 +6,11 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router';
 import { HOME } from './../../../constants/routes';
 
+
 import Spinner from './../../../components/common/spinner';
 import SignInForm from './../../../components/public-components/auth/signInForm';
 
+
 class SignInPage extends React.Component {
 
     render() {

src/containers/auth/SignUpPage/index.js

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router'
 import { HOME } from './../../../constants/routes';
 
+
 import Spinner from './../../../components/common/spinner';
 import SignUpForm from './../../../components/public-components/auth/signUpForm';
 
@@ -14,6 +15,7 @@ class SignUpPage extends React.Component {
     render() {
         const { signUpRequest, user } = this.props;
 
+
         return (
             user.isFetching
                 ? <Spinner />

src/containers/header/index.js

@@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux'
 
 import HeaderComponent from './../../components/public-components/header';
 
+
 import { signOut } from './../../actions/auth/signOut'
 
 const

src/containers/new-card/add-card.js

@@ -0,0 +1,18 @@
+import React, { Component,Fragment } from "react";
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import LoadForm from "../../components/common/input-form";
+
+
+class AddCard extends Component {
+   
+    render() {
+      
+        return (
+<div></div>
+        )
+    }
+}
+
+export default AddCard

src/reducers/card-category/reduser-card.js

@@ -0,0 +1,27 @@
+import * as types from "../../constants";
+import initialState from '../initialState';
+
+export default function cardS(state = initialState.category, {type, payload: category, error}) {
+    switch (type) {
+        case types.CATEGORY_URL_REQUEST: {
+            return {
+                ...state
+            }
+        }
+        case types.CATEGORY_URL_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                category
+            }
+        }
+        case types.CATEGORY_URL_REQUEST_FAILURE: {
+            return {
+                ...state,
+                error
+            }
+        }
+        default: {
+            return state
+        }
+    }
+}

src/reducers/index.js

@@ -3,12 +3,19 @@
 import { combineReducers } from 'redux';
 
 import user from './user';
+import changeEmail from './userFields/changeEmail/index';
+import changePassword from './userFields/changePassword/index'
 import cards from './cards';
+
 import { reducer as form } from 'redux-form';
 
+
+
 const combinedReducers = combineReducers({
     form,
     user,
+    changeEmail,
+    changePassword,
     cards
 })
 

src/reducers/initialState/index.js

@@ -2,6 +2,12 @@ export default {
     user: {       
         data: null,
         error: null,
+    },
+    changeEmail: {
+        login: null
+    },  
+    changePassword: {
+        password: null,
         isFetching: null
     },
     cards: {

src/reducers/user/index.js

@@ -16,6 +16,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST: {
             return {
                 ...state,
+
                 isFetching: true,
                 error: null,
                 data: null
@@ -24,6 +25,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST_SUCCESS: {
             return {
                 ...state,
+
                 isFetching: false,
                 error: null,
                 data
@@ -32,6 +34,7 @@ export default function (state = initialState.user, { type, error, payload: data
         case types.SIGN_UP_REQUEST_FAILURE: {
             return {
                 ...state,
+
                 isFetching: false,
                 data: null,
                 error

src/reducers/userFields/changeEmail/index.js

@@ -0,0 +1,25 @@
+import * as types from "../../../constants";
+import initialState from '../../initialState';
+
+export default function changeEmail(state = initialState.changeEmail, {type, payload: login, error }) {
+    switch (type) {
+        case types.USERS_CHANGE_REQUEST: {
+            return state
+        }
+        case types.USERS_CHANGE_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                login
+            }
+        }
+        case types.USERS_CHANGE_REQUEST_FAILURE: {
+            return {
+                ...state,
+                error
+            }
+        }
+        default: {
+            return state
+        }
+    }
+}

src/reducers/userFields/changePassword/index.js

@@ -0,0 +1,25 @@
+import * as types from "../../../constants";
+import initialState from '../../initialState';
+
+export default function changePassword(state = initialState.changePassword, {type, payload: password, error }) {
+    switch (type) {
+        case types.PASSWORD_CHANGE_REQUEST: {
+            return state
+        }
+        case types.PASSWORD_CHANGE_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                password
+            }
+        }
+        case types.PASSWORD_CHANGE_REQUEST_FAILURE: {
+            return {
+                ...state,
+                error
+            }
+        }
+        default: {
+            return state
+        }
+    }
+}

src/router.js

@@ -1,3 +1,4 @@
+
 import React, { Suspense, lazy } from "react";
 import { Switch, Route, withRouter } from "react-router-dom";
 import { connect } from 'react-redux';
@@ -25,24 +26,22 @@ class Router extends React.Component {
 
     render() {
         const { user } = this.props;
-        
-        //map located here because of switch-bag
-        const Router = config.map(route =>
-            <ProtectedRoute
-                path={route.path}
-                component={route.component}
-                access={route.access}
-                user={user}
-                exact
-            />
-        )
 
         return (
             <div className="app">
                 <Header />
                 <Suspense fallback={<Spinner />}>
                     <Switch>
-                        {Router}
+                        {config.map(route =>
+                            <ProtectedRoute
+                                path={route.path}
+                                component={route.component}
+                                access={route.access}
+                                user={user}
+                                key={route}
+                                exact
+                            />
+                        )}
                     </Switch>
                 </Suspense>
                 <Footer />
@@ -56,4 +55,5 @@ const mapStateToProps = state => ({
 })
 const mapDispatchToProps = dispatch => bindActionCreators({ tokenAuth }, dispatch);
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Router));
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Router));
+

src/saga/auth/signIn/index.js

@@ -1,26 +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'
+import { SIGN_IN_URL } from '../../../constants/index'
+import token from '../../../utils/token'
 
 // 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)
-    );
-
-    yield call(() => { if (!payload) throw (new Error("No such email or password")) });
+    try {
+        const payload = yield call(() =>
+            axios.get(`${SIGN_IN_URL}login=${login}&password=${password}`)
+                .then(({ data: [payload] }) => payload)
+        );
 
-    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 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));
+    }
 }

src/saga/index.js

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

src/saga/userFields/changeEmail/index.js

@@ -0,0 +1,18 @@
+import { put, call } from "redux-saga/effects";
+import * as actions from './../../../actions/userFields/changeEmail'
+import axios from 'axios';
+import { USERS_CHANGE_URL } from '../../../constants/index'
+
+export default function* ({payload:{id, login}}) {
+    try {
+        console.log("payload inside the saga", id);
+        const payloads = yield call(() =>
+            axios.put(`${USERS_CHANGE_URL}${id}`, {body:{login}})
+                .then(({ data }) => data)
+        );
+        yield put(actions.userChangeRequestSucces(payloads));
+    }
+    catch ({ message }) {
+        yield put(actions.userChangeRequestFailure(message))
+    }
+}

src/saga/userFields/changePassword/index.js

@@ -0,0 +1,22 @@
+import { put, call } from "redux-saga/effects";
+import * as actions from './../../../actions/userFields/changePassword'
+import axios from 'axios';
+import { USERS_CHANGE_URL } from '../../../constants/index'
+
+export default function* ({payload:{id , password}}) {
+    try {
+        console.log("payload inside the saga", password);
+        const payloads = yield call(() =>
+            fetch(`${USERS_CHANGE_URL}${id}`, {
+            method:"PUT",
+            body:JSON.stringify({password})
+            }
+            )
+                .then(({ data }) => data.json)
+        );
+        yield put(actions.passwordChangeRequestSucces(payloads));
+    }
+    catch ({ message }) {
+        yield put(actions.passwordChangeRequestFailure(message))
+    }
+}

src/saga/userFields/createDeleteUser/index.js

@@ -0,0 +1,18 @@
+import { put, call } from "redux-saga/effects";
+import * as actions from './../../../actions/adminActions/index'
+import axios from 'axios';
+import { SIGN_UP_URL } from '../../../constants/index'
+
+export default function* (payload) {
+    try {
+        console.log("payload inside the saga", payload);
+        const payloads = yield call(() =>
+            axios.get(SIGN_UP_URL)
+                .then(({ data }) => data)
+        );
+        yield put(actions.userGetRequestSucces(payloads));
+    }
+    catch ({ message }) {
+        yield put(actions.userGetRequestFailure(message))
+    }
+}

src/saga/userFields/index.js

@@ -0,0 +1,11 @@
+import { takeEvery } from "redux-saga/effects";
+import * as types from "./../../constants"
+
+import changeEmail from './changeEmail/index';
+import changePassword from "./changePassword";
+
+
+export default function*() {
+    yield takeEvery(types.USERS_CHANGE_REQUEST, changeEmail);
+    yield takeEvery(types.PASSWORD_CHANGE_REQUEST, changePassword)
+}

src/state/index.js

@@ -14,9 +14,8 @@ const logger = createLogger({
 const store = createStore(
     combinedReducers,
     initialState,
-    applyMiddleware(sagaMiddleware, logger)
+    applyMiddleware(sagaMiddleware)
 );
-
 export default store;
 
 sagaMiddleware.run(saga);