public/index.html

@@ -6,7 +6,7 @@
 	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	    <meta name="theme-color" content="#000000">
 	    
-	    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+	    
 		<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
 	    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 	    

src/actions/getUserById.js

@@ -0,0 +1,40 @@
+import * as types from "../constants/actionTypes";
+
+const axios = require("axios");
+
+
+
+
+const userAuthRequestById = payload => ({
+    type: types.USER_AUTH_REQUEST_BY_ID,
+    payload
+})
+
+const userAuthRequestSuccessById = payload => ({
+    type: types.USER_AUTH_REQUEST_SUCCESS_BY_ID,
+    payload
+})
+
+const userAuthRequestFailById = payload => ({
+    type: types.USER_AUTH_REQUEST_FAIL_BY_ID,
+    payload
+})
+
+export const getUsersDataById = (payload) => {
+    return dispatch => {
+        dispatch(userAuthRequestById());
+        return axios.get(`http://127.0.0.1:2000/api/users?id=${payload}`)
+            .then(res => {
+                dispatch(userAuthRequestSuccessById(res))
+            })
+            .catch(err => {
+                dispatch(userAuthRequestFailById(err));
+            })
+    }
+}
+
+export const getParams = payload => ({
+    type: types.GET_PARAMS,
+    payload
+})
+

src/actions/searchStaffAction.js

@@ -24,6 +24,7 @@ const searchStaffrequestFail = payload => ({
     payload
 })
 
+
 export const searchStaff = payload => {
     return dispatch => {
         dispatch(searchStaffRequest())

src/actions/usersAuthActions.js

@@ -20,7 +20,7 @@ const userAuthRequestFail = payload => ({
 export const getUsersData = (payload) => {
     return dispatch => {
         dispatch(userAuthRequest());
-        return axios.get(`http://127.0.0.1:2000/api/users`)
+        return axios.post(`http://127.0.0.1:2000/api/users-check`, payload)
             .then(res => {
                 dispatch(userAuthRequestSuccess(res))
             })
@@ -28,4 +28,4 @@ export const getUsersData = (payload) => {
                 dispatch(userAuthRequestFail(err));
             })
     }
-}
+}

src/components/Auth/authorisation.js

@@ -2,6 +2,8 @@ import React from "react";
 import { reduxForm, Field } from "redux-form";
 import Authbuttons from './authButtons'
 
+import {Link} from "react-router-dom"
+
 import {authValidate} from "../../utils/authValidate";
 import {authRenderField} from "../../common/authRenderField"
 
@@ -10,11 +12,12 @@ const Form = props => {
     const { handleSubmit, getUsersData, pristine } = props
     const submit = (values) => {
         getUsersData(values);
+        
     }
     return (
         <div className="formdiv">
             <Authbuttons />
-            <form className="form" onSubmit={handleSubmit(submit)}>
+            <form className="form" >
                 <div>
                     <Field
                         name="email"
@@ -33,7 +36,7 @@ const Form = props => {
                         className="input"
                     />
                 </div>
-                <button className="auth__submit-button">Войти</button>
+               <button className="auth__submit-button" onClick={handleSubmit(submit)}><Link to="/">Войти</Link></button>
             </form>
         </div>
 

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Field, reduxForm } from 'redux-form';
 import { Link } from "react-router-dom";
 
-const SendingForm = props => {
-    const { handleSubmit, pristine, reset, submitting, AddNewStaff, allCategory} = props
+
+class SendingForm extends  Component  {
+    constructor(props){
+        super(props)
+       //this.state = { image: null }
+    }
     
-    const submit = values => {
+    onChange = e =>{
+        //console.log(e.target.files[0])
+        this.setState({image: e.target.files[0].name})
+    }
+    submit = values => {
+        const { AddNewStaff } = this.props
+        //const { image } = this.state
         values.img = "http://zabavnik.club/wp-content/uploads/vopros_2_14000037-939x1024.jpg"
         values.staff = "Машина"
         values.state = 1
@@ -13,11 +23,12 @@ const SendingForm = props => {
         
         AddNewStaff(values)
     };
-    console.log(allCategory)
+    render(){
+         const { handleSubmit, pristine, reset, submitting, allCategory } = this.props
     return (
-        <div className="formdiv">
-            <div>
-                <form onSubmit={handleSubmit(submit)} className="form">
+        
+            <div className="formdiv">
+                <form onSubmit={handleSubmit(this.submit)} className="form">
                     <Field
                         name="title"
                         component="input"
@@ -42,6 +53,7 @@ const SendingForm = props => {
                         className="input"
                     />
 
+
                     <Field
                         name="categoryId"
                         component="select"
@@ -61,9 +73,11 @@ const SendingForm = props => {
                         </button>
                     </div>
                 </form>
+
             </div>
-        </div>
+        
     )
+  }
 }
 
 export default reduxForm({

src/components/Header/Myprofile.js

@@ -5,19 +5,53 @@ import { Avatar } from 'antd';
 class Myprofile extends Component {
 
     render() {
-        return (
-            <div className="header__auth">
+
+        const { name, getUser, id } =this.props
+        let localS = JSON.parse(localStorage.getItem("login"));
+       let data;
+
+       if (!name && !getUser.name || localS===null){
+
+       data = <div className="header__auth">
                 <Link to="/auth" className="link">
                     <div className="header__auth__container">
                         <div className="avatar">
-                            <Avatar icon="user" size={60} style={{ backgroundColor: '#FD7F71' }}/>
+                            <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>
                         </div>
-                        <div className="text">
-                            Мой профиль
+                        <div>
+                             Мой профиль
                         </div>
+                    
                     </div>    
-                </Link>    
-            </div>
+           </Link>
+           </div>   
+       }
+        else{
+            
+            data = <div className="header__auth">
+                    <Link to={`/user/id:${getUser.id || id }`} className="link">
+                        <div className="header__auth__container">
+                            <div className="avatar">
+                                <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>
+                            </div>
+                        <div>
+                            {name || getUser.name }
+                        </div>
+                    
+                        </div>    
+                    </Link> 
+                   </div>  
+
+        }
+        
+       
+        return (
+
+
+        <div className="header__auth">
+           {data}
+        </div>
+
         );
     }
 }

src/components/LeftMenu/index.js

@@ -18,8 +18,10 @@ class LeftMenu extends Component {
 
     render() {
 
-        const { allCategory, mainCategory } = this.props
-        
+        const { allCategory, mainCategory, isAdmin, getUser } = this.props
+            console.log(getUser)
+            let localS = JSON.parse(localStorage.getItem("login")); 
+            
         return (
             <div>
                 <Layout style={{ minHeight: '100vh', 'background': 'red' }}>
@@ -27,14 +29,14 @@ class LeftMenu extends Component {
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}
                     >
-                        <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">    
+                        {Boolean(isAdmin) && Boolean(getUser.isAdmin) || (localS!==null && <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">    
                             <Menu.Item key="addCatigory">
                                 <Link to="/addCategory">
                                     <Icon type="plus" />
                                     <span >Добавить категорию</span>
                                 </Link>
                             </Menu.Item>
-                        </Menu>                       
+                        </Menu>)}                        
                         <DrawCategory allCategory={allCategory} 
                             mainCategory={mainCategory}  
                         />  

src/components/privateRouterComponents/addCategoryIfAdmin.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+
+import { Menu, Icon } from 'antd';
+import { Link } from "react-router-dom";
+
+
+
+
+
+class addCategoryIfAdmin extends Component {
+    render() {
+        return (
+            <div>
+                <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">    
+                            <Menu.Item key="addCatigory">
+                                <Link to="/addCategory">
+                                    <Icon type="plus" />
+                                    <span >Добавить категорию</span>
+                                </Link>
+                            </Menu.Item>
+                        </Menu>          
+            </div>
+        );
+    }
+}
+
+export default addCategoryIfAdmin;
+ 

src/components/usersProtectPage/PrivateRoute.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+import {  Route, Redirect } from "react-router-dom";
+
+export default ({ component: Component, data, params, ...rest }) =>(
+      <Route
+        {...rest}
+        render= {props =>{
+         
+          
+            console.log(data)
+             
+           return <Component {...data}  {...props}  />
+              
+             
+            // else {
+            //   return <Redirect to='/' />
+            // }
+        }}
+      />
+    
+)
+
+ 
+
+	
+    

src/components/usersProtectPage/index.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import { throws } from 'assert';
+
+class UsersProtect extends Component {
+    render() {
+        
+       const { id, name, email } = this.props
+        return (
+            <div>
+               { name } 
+            </div>
+        );
+    }
+}
+
+export default UsersProtect;

src/constants/actionTypes.js

@@ -57,4 +57,10 @@
     //usersRegistrAction
     export const USER_REG_REQUEST = "USER_REG_REQUEST";
     export const USER_REG_REQUEST_SUCCESS = "USER_REG_REQUEST_SUCCESS";
-    export const USER_REG_REQUEST_FAIL = "USER_REG_REQUEST_FAIL";
+    export const USER_REG_REQUEST_FAIL = "USER_REG_REQUEST_FAIL";
+
+    //getUsersById
+    export const USER_AUTH_REQUEST_BY_ID = "USER_AUTH_REQUEST_BY_ID";
+    export const USER_AUTH_REQUEST_SUCCESS_BY_ID = "USER_AUTH_REQUEST_SUCCESS_BY_ID";
+    export const USER_AUTH_REQUEST_FAIL_BY_ID = "USER_AUTH_REQUEST_FAIL_BY_ID";
+    export const GET_PARAMS = "GET_PARAMS";

src/container/Header.js

@@ -10,8 +10,9 @@ import { getUsersData } from '../actions/usersAuthActions'
 import { bindActionCreators } from "redux";
 
 class Header extends Component {
+
     render() { 
-        const { inputData, searchStaff, changeInputValue } = this.props
+        const { inputData, searchStaff, changeInputValue, name, getUser, id } = this.props
         return (
             <div className="header">
                <HeaderLogo />
@@ -19,7 +20,8 @@ class Header extends Component {
                     searchStaff={searchStaff}
                     changeInputValue={changeInputValue} 
                 />
-               <Myprofile/>
+                <Myprofile name = {name} getUser={ getUser } id={ id } />
+
             </div>
         );
     }

src/container/LeftMenu.js

@@ -15,13 +15,15 @@ class LeftMenu extends Component {
 
     render() {
         
-        const { allCategory, mainCategory, podCategory } = this.props
+        const { allCategory, mainCategory, podCategory, isAdmin, getUser } = this.props
         
         return (
             <Fragment>
                 <CategoryMenu allCategory={allCategory.data} 
                     mainCategory={mainCategory} 
-                    podCategory={podCategory} 
+                    podCategory={podCategory}
+                    isAdmin = { isAdmin }
+                    getUser={ getUser } 
                 />
             </Fragment>
         );

src/container/MainPage.js

@@ -1,7 +1,9 @@
 import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 
-import * as actions from "../actions/staffsAction";
+import { getStaffsData } from "../actions/staffsAction";
+
+import { getUsersDataById } from "../actions/getUserById"
 
 import { bindActionCreators } from "redux";
 
@@ -10,18 +12,50 @@ import LeftMenu from '../container/LeftMenu'
 import AllStaffs from "../components/AllStaffs"
 
 class MainPage extends Component {
-
+    constructor(props){
+        super(props)
+        //this.state = {trig:false}
+        
+    }
+    //  componentDidUpdate(prevProps){
+        
+    //     let localS = JSON.parse(localStorage.getItem("login"));
+    //     console.log("prevProps-" ,prevProps, "this.props-", this.props)
+    //     if ( prevProps.isFetching !== this.props.isFetching ){
+    //         console.log(2342)
+    //         this.setState({trig: !this.state.trig})
+    //        //this.props.getStaffsData()
+    //     }
+    
+    // }
     componentDidMount() {
-        this.props.getStaffsData()
+
+        const { getStaffsData, getUsersDataById } = this.props
+        
+        getStaffsData()
+            
+              let localS = JSON.parse(localStorage.getItem("login"));
+                if(localS===null){
+
+                }
+                else{
+                    getUsersDataById(localS)
+                }
+              
     }
 
     render() {
-        const { inputStaffs, isFetching } = this.props
+        console.log(this.state)
+        const { inputStaffs, isFetching, getUser } = this.props
+        const {  name, isAdmin, id } = this.props
+        
+
+
         return (
             <Fragment>
-                <Header />
+                <Header name={ name } getUser={ getUser } id={ id }/>
                 <div className="contentDiv">
-                    <LeftMenu />
+                    <LeftMenu isAdmin = {isAdmin} getUser={ getUser } />
                     <AllStaffs inputStaffs={inputStaffs} isFetching={isFetching} />
                 </div>
             </Fragment>
@@ -31,10 +65,12 @@ class MainPage extends Component {
 
 const mapStateToProps = state => ({
     inputStaffs: state.staffs.inputStaffs,
-    isFetching: state.staffs.isFetching
+    isFetching: state.staffs.isFetching,
+    getUser: state.getUserById.getUser,
+    params: state.getUserById.params,
 });
 
-const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({ getStaffsData, getUsersDataById }, dispatch);
 
 export default MainPage = connect(
     mapStateToProps,

src/container/MainPageStaffInfo.js

@@ -18,7 +18,7 @@ class MainPageStaffInfo extends Component {
             <div>
 
                 <Header />
-                <LeftMenu />
+                <LeftMenu/>
                 <FullInfoAboutStaff {...this.props} />
 
             </div>

src/container/SearchStaff.js

@@ -6,7 +6,7 @@ import { bindActionCreators } from "redux";
 
 
 import SearchStaffsPage from "../components/SearchStaffsPage"
-import LeftMenu from '../components/LeftMenu'
+import LeftMenu from '../container/LeftMenu'
 import Header from '../container/Header'
 
 

src/container/SearchStaffsInfo.js

@@ -4,7 +4,7 @@ import * as actions from "../actions/searchStaffByIdAction";
 import { bindActionCreators } from "redux";
 
 import SearchFullInfoStaff from '../components/SearchStaffsPage/SearchFullInfoStaff'
-import LeftMenu from '../components/LeftMenu'
+import LeftMenu from '../container/LeftMenu'
 import Header from '../container/Header'
 
 class SearchInfoStaffsInfo extends Component {

src/container/UserProfile.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+
+import { Link } from "react-router-dom";
+
+import { connect } from 'react-redux';
+
+import { getUsersData } from "../actions/usersAuthActions";
+
+import { getUsersDataById } from "../actions/getUserById"
+
+import { getParams } from "../actions/getUserById"
+
+import { bindActionCreators } from "redux";
+
+class UserProfile extends Component {
+
+    singOut = () => {
+        const { getParams, match } = this.props
+        localStorage.removeItem("login")
+        getParams(match.params.id)
+    }
+
+    componentDidMount() {
+        const { getUsersDataById } = this.props
+            
+              let localS = JSON.parse(localStorage.getItem("login"));
+                if(localS===null){
+
+                }
+                else{
+                    getUsersDataById(localS)
+                }     
+    }
+    render() {
+        console.log(this.props)
+
+        return (
+            <div>
+                {this.props.getUser.name}
+                <button onClick={this.singOut}><Link to="/">Выход</Link></button>
+            </div>
+        );
+    }
+}
+
+
+const mapStateToProps = state => ({
+    inputData: state.usersAuth.inputData,
+    getUser: state.getUserById.getUser,
+    
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ getUsersData, getUsersDataById, getParams }, dispatch);
+
+export default UserProfile = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(UserProfile);

src/reducer/getUserById.js

@@ -0,0 +1,45 @@
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    getUser: [],
+    isFetching: false,
+    error: null,
+    params: null
+    
+  };
+
+export default (state = initState, {type, payload} ) => {
+    
+    switch(type) {
+        case types.USER_AUTH_REQUEST_BY_ID: {
+            return {
+                ...state,
+                isFetching: true
+            }
+        }
+        case types.USER_AUTH_REQUEST_SUCCESS_BY_ID: {
+            
+            return {
+                ...state,
+                getUser: payload.data,
+                isFetching: false
+            }
+        }
+        case types.USER_AUTH_REQUEST_FAIL_BY_ID: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "ERROR"
+            }
+        }
+        case types.GET_PARAMS: {
+            return {
+                ...state,
+                params: payload
+            }
+        }
+        
+        default: return state;
+
+    }
+};

src/reducer/index.js

@@ -3,6 +3,7 @@ import { reducer as formReducer } from 'redux-form';
 
 import usersRegistration from './usersRegistration'
 import usersAuthorisation from './usersAuthorisation'
+import getUserById from './getUserById'
 
 import staffs from './staffs'
 import searchStaff from './searchStaff'
@@ -17,6 +18,7 @@ import categoryById from './categoryById'
 export default  combineReducers({
     usersRegistr: usersRegistration,
     usersAuth: usersAuthorisation,
+    getUserById,
     
     staffs,
     searchStaff,

src/reducer/usersAuthorisation.js

@@ -3,19 +3,31 @@ import * as types from "../constants/actionTypes";
 const initState = {
     inputData: [],
     isFetching: false,
-    error: null
+    error: null,
+    trig: true
   };
 
 export default (state = initState, {type, payload} ) => {
+    console.log(payload)
     switch(type) {
         case types.USER_AUTH_REQUEST: {
             return {
                 ...state,
-                inputData: payload,
+                
                 isFatching: true
             }
         }
         case types.USER_AUTH_REQUEST_SUCCESS: {
+            
+            if (payload.data===null){
+                payload.data = false
+            }
+            else if (payload.data!==null && payload.data.id !==undefined ){
+                 const { id } = payload.data
+            localStorage.setItem("login",JSON.stringify(id))
+            }
+           
+            
             return {
                 ...state,
                 inputData: payload.data,
@@ -29,6 +41,7 @@ export default (state = initState, {type, payload} ) => {
                 error: "ERROR"
             }
         }
+        
         default: return state;
 
     }

src/router.js

@@ -1,5 +1,8 @@
-import React from "react";
-import { Switch, Route } from "react-router-dom";
+import React, {Component} from "react";
+import { Switch, Route, Redirect, withRouter } from "react-router-dom";
+import { connect } from 'react-redux';    
+import { bindActionCreators } from "redux";
+
 
 import RenderRegistration from "./container/renderRegistration"
 import RenderAuthorisation from "./container/renderAuthorisation"
@@ -17,11 +20,31 @@ import AddNewStaff from './container/AddNewStaff'
 
 import AddNewCategory from './container/AddNewCategory'
 
-export default () => (
+// import UserProtect from './components/usersProtectPage/'
+
+// import UserProfile from './components/Header/Myprofile'
+
+import PrivateRoute from './components/usersProtectPage/PrivateRoute'
+
+import userProfile from  './container/UserProfile'
+
+import { getUsersDataById } from "./actions/getUserById"
 
+import { getUsersData } from './actions/usersAuthActions'
+
+import addCategory from './components/privateRouterComponents/addCategoryIfAdmin'
+
+class Router extends Component{
+   render() {
+       
+       const { inputData, trig, params} = this.props
+       console.log(this.props)
+       return (
     <div>
 	    <Switch>
-            <Route path="/" exact component={MainPage} />
+            <PrivateRoute path="/"   data= { inputData } params = {params} exact component={MainPage} />
+            {/* <Route path="/" exact component={MainPage} /> */}
+            <Route path="/user/:id" exact component={userProfile} />
             <Route path="/authorisation" exact component={RenderAuthorisation} />
             <Route path="/auth" exact component= {RenderAuthorisation}/>
             <Route path="/registration" exact component={RenderRegistration} />
@@ -33,5 +56,16 @@ export default () => (
             <Route path="/addCategory" exact component={AddNewCategory} />
 	    </Switch>
     </div>
-);
+       )
+   }
+}
+
+const mapStateToProps = state => ({
+    inputData: state.usersAuth.inputData,
+    trig: state.usersAuth.trig,
+    params: state.getUserById.params,
+})
+const mapDispatchToProps = dispatch => bindActionCreators({ getUsersData, getUsersDataById }, dispatch);
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Router));