package-lock.json

@@ -916,6 +916,33 @@
         }
       }
     },
+    "@material-ui/lab": {
+      "version": "3.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-3.0.0-alpha.28.tgz",
+      "integrity": "sha512-uERqo8W2RhWDDaO1FMmvWS9GHBX3Sdhu1F7o+Z2M8wQ6viKcvONVlN4oC80VP6fgze8p5cnjmNhFLuCypLRHTg==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@material-ui/utils": "^3.0.0-alpha.2",
+        "classnames": "^2.2.5",
+        "keycode": "^2.1.9",
+        "prop-types": "^15.6.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
+          "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "@material-ui/system": {
       "version": "3.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.1.tgz",
@@ -4008,13 +4035,11 @@
         "cssom": "0.3.x"
       }
     },
-
     "csstype": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.1.tgz",
       "integrity": "sha512-wv7IRqCGsL7WGKB8gPvrl+++HlFM9kxAM6jL1EXNPNTshEJYilMkbfS2SnuHha77uosp/YVK0wAp2jmlBzn1tg=="
     },
-
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -6163,13 +6188,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6182,18 +6205,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6296,8 +6316,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6307,7 +6326,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6320,7 +6338,6 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6332,7 +6349,6 @@
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6421,8 +6437,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6432,7 +6447,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6538,7 +6552,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7645,7 +7658,6 @@
       "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
     },
-
     "indefinite-observable": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
@@ -7654,7 +7666,6 @@
         "symbol-observable": "1.2.0"
       }
     },
-
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -16188,7 +16199,6 @@
         }
       }
     },
-
     "sass": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.16.0.tgz",
@@ -16197,7 +16207,6 @@
         "chokidar": "^2.0.0"
       }
     },
-
     "sass-graph": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",

package.json

@@ -19,7 +19,6 @@
     "redux-form": "^8.1.0",
     "redux-thunk": "^2.3.0",
     "sass": "^1.16.0"
-
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/getStaffByCategoryIdAction.js

@@ -0,0 +1,35 @@
+import * as types from '../constants/actionTypes'
+
+const axios = require('axios')
+
+const CategoryRequestById = payload => ({
+	type: types.CATEGORY_REQUEST_BY_ID,
+	payload
+});
+
+const CategoryRequestSuccessById = payload => ({
+	type: types.CATEGORY_REQUEST_SUCCESS_BY_ID,
+	payload
+});
+
+const CategoryRequestFailById = payload => ({
+	type: types.CATEGORY_REQUEST_FAIL_BY_ID,
+	payload
+});
+
+export const getCategorysDataById = (payload) => {
+	console.log(payload)
+	return dispatch => {
+		dispatch(CategoryRequestById());
+		return axios.get(`http://127.0.0.1:2000/api/categories?id=${payload}`)
+			.then(res => {
+				setTimeout(() => {
+					dispatch(CategoryRequestSuccessById(res))
+				}, Math.random() * 1000);
+			})
+			.catch(err => {
+				dispatch(CategoryRequestFailById(err));
+			})
+
+	};
+};

src/common/authRenderField.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const authRenderField = ({input, meta: {touched, error}, label, type, placeholder }) => (
+    <div className={touched && error ? "form__input-box":"error"}> 
+        {console.log(input.value)} 
+        <label className="form__input-label" htmlFor="origin">
+            {label}
+            <input  className="input" type = {type} placeholder = {placeholder} {...input} />
+        </label>
+        {touched && error && <span>{error}</span>}
+    </div>
+);

src/common/formFunc.js

@@ -1,11 +1,10 @@
 import React from "react";
 
-export const renderField = ({input, meta: {touched, error}, label, type, placeholder }) => (
+export const regRenderField = ({input, meta: {touched, error}, label, type, placeholder }) => (
     <div className="form__input-box">
-    {console.log(input.value)}
         <label className="form__input-label" htmlFor="origin">
             {label}
-            <input  className="form__input" type = {type} placeholder = {placeholder} {...input} />
+            <input  className="input" type = {type} placeholder = {placeholder} {...input} />
         </label>
         {touched && error && <span>{error}</span>}
     </div>

src/components/AllStaffs/index.js

@@ -24,6 +24,7 @@ class AllStaffs extends Component {
                     {inputStaffs.map((el,key)=>(
                         <Link to={`/staff/${el.id}`} key={key}>
                             <div className="staff">
+                                <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />
                                 {el.title} {el.price}
                             </div>
                         </Link> 

src/components/Auth/authButtons.js

@@ -1,15 +1,23 @@
-import React, {Component} from "react"
-import {Link} from "react-router-dom"
+import React, { Component } from "react"
+import { Link } from "react-router-dom"
 
 class Authbuttons extends Component {
-  render() {
-    return (
-        <div className="auth__button">
-          <Link className="Link" to="/auth">Войти</Link>
-          <Link className="Link" to="/registration">Зарегистрироваться</Link>
-        </div>
-    )
-  }
+    render() {
+        return (
+            <div className="auth__button">
+                <Link to="/auth"  >
+                    <button className="button btn1">
+                        Войти
+                    </button>
+                </Link>
+                <Link to="/registration" >
+                    <button className="button btn2">
+                        Зарегистрироваться
+                    </button>
+                </Link>
+            </div>
+        )
+    }
 }
 
 export default Authbuttons;

src/components/Auth/authorisation.js

@@ -1,7 +1,10 @@
 import React from "react";
 import { reduxForm, Field } from "redux-form";
-import authValidate from "../../utils/validate";
-import AuthButtons from './authButtons'
+import Authbuttons from './authButtons'
+
+import {authValidate} from "../../utils/authValidate";
+import {authRenderField} from "../../common/authRenderField"
+
 
 const Form = props => {
     const { handleSubmit, getUsersData, pristine } = props
@@ -9,35 +12,35 @@ const Form = props => {
         getUsersData(values);
     }
     return (
-        <div className=".formdiv">
-            <AuthButtons />
+        <div className="formdiv">
+            <Authbuttons />
             <form className="form" onSubmit={handleSubmit(submit)}>
                 <div>
-                    <div>
-                        <Field
-                            name="email"
-                            component="input"
-                            type="Емейл"
-                            placeholder="email@example.com"
-                            className="input"
-                        />
-                    </div>
-                    <div>
-                        <Field
-                            name="password"
-                            component="input"
-                            type="password"
-                            placeholder="Пароль"
-                            className="input"
-                        />
-                    </div>
+                    <Field
+                        name="email"
+                        component={authRenderField}
+                        type="Емейл"
+                        placeholder="email@example.com"
+                        className="input"
+                    />
                 </div>
                 <div>
-                    <button type="submit" className="button" disabled={pristine}>Отправить</button>
+                    <Field
+                        name="password"
+                        component={authRenderField}
+                        type="password"
+                        placeholder="Пароль"
+                        className="input"
+                    />
                 </div>
+                <button className="auth__submit-button">Войти</button>
             </form>
         </div>
+
+
+
     );
 }
 
-export default reduxForm({ form: "authForm", validate: authValidate })(Form);
+export default reduxForm({ form: "authForm", validate: authValidate })(Form);
+// <button type="submit" className="button" disabled={pristine}>Отправить</button>

src/components/Auth/registration.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form'
 
-import authValidate from "../../utils/validate";
 import Authbuttons from './authButtons'
 
-
+import { regValidate } from '../../utils/regValidate'
+import { regRenderField } from '../../common/regRenderField'
 
 const RegistrForm = props => {
 
@@ -12,20 +12,21 @@ const RegistrForm = props => {
 
     const submit = (values) => {
         values.avatar = "https://site.com"
-        values.isAdmin = 1
-        values.description = "gfdfgdgdf"
+        values.isAdmin = 0
+        values.description = "bad_boy"
         postUsersData(values)
     }
 
-    return (
-        <div>
+    return (   
+        <div className="formdiv">
+            <div>
             <Authbuttons />
             <form onSubmit={handleSubmit(submit)} className="form">
                 <div>
                     <div>
                         <Field
                             name="login"
-                            component="input"
+                            component={regRenderField}
                             type="text"
                             placeholder="Логин"
                             className="input"
@@ -35,7 +36,7 @@ const RegistrForm = props => {
                     <div>
                         <Field
                             name="password"
-                            component="input"
+                            component={regRenderField}
                             type="password"
                             placeholder="Пароль"
                             className="input"
@@ -45,7 +46,7 @@ const RegistrForm = props => {
                     <div>
                         <Field
                             name="name"
-                            component="input"
+                            component={regRenderField}
                             type="text"
                             placeholder="Имя"
                             className="input"
@@ -54,7 +55,7 @@ const RegistrForm = props => {
                     <div>
                         <Field
                             name="phone"
-                            component="input"
+                            component={regRenderField}
                             type="text"
                             placeholder="+380XXXXXXXX"
                             className="input"
@@ -63,7 +64,7 @@ const RegistrForm = props => {
                     <div>
                         <Field
                             name="email"
-                            component="input"
+                            component={regRenderField}
                             type="email"
                             placeholder="email@example.com"
                             className="input"
@@ -71,20 +72,26 @@ const RegistrForm = props => {
                     </div>
                 </div>
                 <div>
-                    <button type="submit" disabled={pristine} className="button">
+                    <button type="submit" 
+                        disabled={pristine} 
+                        className="button"
+                    >
                         Отправить
-          </button>
-                    <button type="button" disabled={pristine} onClick={reset} className="button">
+                    </button>
+                    <button type="button" 
+                        disabled={pristine} 
+                        onClick={reset} 
+                        className="button"
+                    >
                         Очистить поля
-          </button>
+                    </button>
                 </div>
             </form>
+            </div>
         </div>
 
     )
 }
 
-export default reduxForm({
-    form: 'registrForm',
-    validate: authValidate
-})(RegistrForm)
+export default reduxForm({ form: 'registrForm', validate: regValidate })(RegistrForm)
+

src/components/CategoryStaffs/index.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+
+import Loader from 'react-loader-spinner';
+import AddNewStaff from '../../components/BtnAddNewStaff'
+
+class CategoryStaffs extends Component {
+    
+    render() {
+        const { infoCategory, isFetching } = this.props
+        console.log(infoCategory)
+
+        let data;
+            if(isFetching===true){
+                
+                data = <div className="loader"> 
+                    <Loader type="Triangle"
+                        color="#FD7F71"
+                        height="100"	
+                        width="100"
+                    /> 
+                </div> 
+            }
+            else{
+                data = <div className="staffs">
+                    {infoCategory.map((el,key)=>(
+                        <Link to={`/staff/${el.id}`} key={key}>
+                            <div className="staff">
+                                <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />
+                                {el.title} {el.price}
+                            </div>
+                        </Link> 
+                    ))}    
+                </div>
+            }
+        return (
+
+           <div className="content">
+
+                {data}
+                <AddNewStaff/>
+           </div> 
+            
+        );
+    }
+}
+
+export default CategoryStaffs;

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -3,59 +3,66 @@ import { Field, reduxForm } from 'redux-form';
 import { Link } from "react-router-dom";
 
 const SendingForm = props => {
-    const { handleSubmit, pristine, reset, submitting, AddNewStaff } = props
+    const { handleSubmit, pristine, reset, submitting, AddNewStaff, allCategory} = props
     
     const submit = values => {
-        values.img = "http://site.com"
+        values.img = "http://zabavnik.club/wp-content/uploads/vopros_2_14000037-939x1024.jpg"
         values.staff = "Машина"
         values.state = 1
         values.userId = 1
-        values.categoryId = 1
+        
         AddNewStaff(values)
     };
-
+    console.log(allCategory)
     return (
-        <form onSubmit={handleSubmit(submit)}>
+        <div className="formdiv">
             <div>
-
-                <div>
+                <form onSubmit={handleSubmit(submit)} className="form">
                     <Field
                         name="title"
                         component="input"
                         type="text"
                         placeholder="Название"
+                        className="input"
                     />
-                </div>
-            </div>
-            <div>
-                <div>
+
                     <Field
                         name="description"
                         component="input"
                         type="text"
                         placeholder="Описание"
+                        className="input"
                     />
-                </div>
-            </div>
-            <div>
-                <div>
+
                     <Field
                         name="price"
                         component="input"
                         type="number"
                         placeholder="Цена"
+                        className="input"
                     />
-                </div>
-            </div>
-            <div>
-                <button type="submit" disabled={pristine || submitting}>
-                    <Link to="/" >Submit</Link>
-                </button>
-                <button type="button" disabled={pristine || submitting} onClick={reset}>
-                    <Link to="/" >Clear Values</Link>
-                </button>
+
+                    <Field
+                        name="categoryId"
+                        component="select"
+                        
+                        className="input"
+                    >
+                        
+                        {allCategory.map(el => <option value={el.id}> {el.title}</option>)}
+                    </Field>
+
+                    <div>
+                        <button type="submit" disabled={pristine || submitting} className="button" >
+                            Submit
+                        </button>
+                        <button type="button" disabled={pristine || submitting} onClick={reset} className="button" >
+                            Clear Values
+                        </button>
+                    </div>
+                </form>
             </div>
-        </form>
+        </div>
     )
 }
 

src/components/FormsAdd/FormAddNewStaff/index.js

@@ -1,21 +1,47 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../../../actions/categoryAction';
+
+import { bindActionCreators } from 'redux';
 
 import MDSpinner from "react-md-spinner";
 
 import Form from '../FormAddNewStaff/SendingStaffForm'
 
-class FormAddNewCategory extends Component {
-    render() {
+class FormAddNewStaff extends Component {
+    componentDidMount() {
+        this.props.getCategoriesData();
         
-        const { isFetching, AddNewStaff } = this.props
+    }
+    render() {
         
+        const { isFetching, AddNewStaff, allCategory } = this.props
+        let data;
+        if (allCategory.data===undefined){
+            data = []
+        }
+        else{ 
+            const category = allCategory.data.filter(el => el.parentId !== 0)
+            data = <Form AddNewStaff={AddNewStaff} allCategory={category}/>
+        }
         return (
             <div>
-               <Form AddNewStaff={AddNewStaff} />
+               {data}
                {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
+ 
+
             </div>
         );
     }
 }
 
-export default FormAddNewCategory;
+const mapStateToProps = state =>({
+    allCategory: state.category.allCategory,
+})
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default FormAddNewStaff = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(FormAddNewStaff);

src/components/Header/Myprofile.js

@@ -1,25 +1,23 @@
 import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 import { Avatar } from 'antd';
+
 class Myprofile extends Component {
+
     render() {
         return (
-
-
-        <div className="header__auth">
-            <Link to="/auth" className="link" target="_blank">
-                <div className="header__auth__container">
-                    <div className="avatar">
-                        <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>
-                    </div>
-                    <div>
-                        Мой профиль
-                    </div>
-
-
-                </div>    
-            </Link>    
-        </div>
+            <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' }}/>
+                        </div>
+                        <div className="text">
+                            Мой профиль
+                        </div>
+                    </div>    
+                </Link>    
+            </div>
         );
     }
 }

src/components/Header/logo.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from '../../img/logoBazar.png';
 import { Link } from "react-router-dom";
+
 class HeaderLogo extends Component {
     render() {
         return (

src/components/Header/searchLine.js

@@ -2,112 +2,32 @@ import React, { Component } from 'react';
 
 import { Link } from "react-router-dom";
 
-
-
-
-//     axios.post(
-//     'http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Одежда",
-//         "description": "Стыдно, когда видно!",
-//         "parentId": "0"
-//     }
-    
-// )
-
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-
-
-// axios.post(
-//     'http://127.0.0.1:2000/api/staffs',
-//     {
-//         "title": "Куртка зимняя",
-//         "description": "Очень теплая",
-//         "staff": "Стаф. Не знаю, что вы хотите тут, но я сделал",
-//         "price": "80000",
-//         "state": "1",
-//         "img": "https://militarist.ua/upload/tmp/resize_420_420/ed8006d3e4b83a6643cd16a3247463de.jpg",
-//         "userId": "1",
-//         "categoryId": "3"
-//     }
-    
-    
-// )
-
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post(
-//     'http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Женская",
-//         "description": "Стыдно, когда видно!",
-//         "parentId": "1"
-//     }
-    
-// )
-
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post(
-//     'http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Мужская одежда",
-//         "description": "Стыдно, когда видно!",
-//         "parentId": "1"
-//     }
-    
-// )
-
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-
-
-
-
 class SearchLine extends Component {
     
-    changeHandler = (e)=>{
-            const { changeInputValue, searchStaff } = this.props
-            changeInputValue(e.target.value)
-             searchStaff(e.target.value)
-            
-        }
-    send = () =>{
-            const { inputData, searchStaff } = this.props
-            //console.log(this.props)
-            searchStaff(inputData)
+    changeHandler = e => {
+        this.props.changeInputValue(e.target.value)
+        this.props.searchStaff(e.target.value)        
+    }
+    
+    send = () => {
+        const { inputData, searchStaff } = this.props
+        searchStaff(inputData)
     } 
 
-    // <div class="search-input">
-    //     <input type="text">
-    //     <span class="highlight"></span>
-    //     <span class="bar"></span>
-    //     <label>Search here</label>
-    //     <span class="glyphicon glyphicon-search"></span>
-    //     <span class="glyphicon glyphicon-remove"></span>
-    // </div>
-
     render() {
         const { inputData } = this.props
         return (
-
             <div className="header__searchLine">
                 <input onChange={this.changeHandler}  className="searchInput" placeholder="Что будем покупать?"/>
                     <Link to = {`/search/${inputData}`} >
                         <button onClick={this.send} className="searchBtn" > 
-                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" className="icon">
-                                <rect className="fill-none" width="32" height="32"/>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" className="icon">
+                                <rect className="fill-none" width="30" height="30"/>
                                     <path className="fill-currentcolor" d="M29.82861,24.17139,25.56519,19.908A13.0381,13.0381,0,1,0,19.908,25.56525l4.26343,4.26337a4.00026,4.00026,0,0,0,5.65723-5.65723ZM5,14a9,9,0,1,1,9,9A9.00984,9.00984,0,0,1,5,14Z"/>
                             </svg>
                         </button>
                     </Link>
             </div>
-
         );
     }
 }

src/components/LeftMenu/DrawCategory.js

@@ -12,6 +12,7 @@ class DrawCategory extends Component {
         const { allCategory, mainCategory } = this.props;
         
         return (
+
             <div >
                 {mainCategory.map((el,key)=>
                     <Menu key={key} theme="dark" defaultSelectedKeys={['1']} mode="inline" >    

src/components/LeftMenu/PodCategory.js

@@ -15,7 +15,7 @@ class PodCatygory extends Component {
         this.podCaty = allCategory.filter(el => el.parentId === categoryId)
 
         let datacat = this.podCaty.map((el, key) =>
-            <Link to={`/staff/${el.id}`}  key={`podCaty${key}`}>
+            <Link to={`/category/staff/${el.id}`}  key={`podCaty${key}`}>
                 <li key={`${el.id}`} className="ant-menu-item" role="menuitem" style={{"paddingLeft": "48px"}}>
                     {el.title}
                 </li>

src/components/LeftMenu/index.js

@@ -22,7 +22,7 @@ class LeftMenu extends Component {
         
         return (
             <div>
-                <Layout style={{ minHeight: '100vh' }}>
+                <Layout style={{ minHeight: '100vh', 'background': 'red' }}>
                     <Sider collapsible
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}

src/constants/actionTypes.js

@@ -15,6 +15,11 @@
     export const ADD_NEW_CATEGORY_REQUEST_SUCCESS = "ADD_NEW_CATEGORY_REQUEST_SUCCESS";
     export const ADD_NEW_CATEGORY_REQUEST_FAIL = "ADD_NEW_CATEGORY_REQUEST_FAIL";
 
+    //getStaffByCategoryIdAction
+    export const CATEGORY_REQUEST_BY_ID = "CATEGORY_REQUEST_BY_ID";
+    export const CATEGORY_REQUEST_SUCCESS_BY_ID = "CATEGORY_REQUEST_SUCCESS_BY_ID";
+    export const CATEGORY_REQUEST_FAIL_BY_ID = "CATEGORY_REQUEST_FAIL_BY_ID";
+
 //Staff
     //staffAction
     export const GET_STAFF_INFO_DATA = "GET_STAFF_INFO_DATA";

src/container/AddNewStaff.js

@@ -18,6 +18,7 @@ class AddNewStaff extends Component {
         const { showModal, error, isFetching, AddNewStaff } = this.props
         
         return (
+
             <div className="top">
                 <div>
                     <FormAddNewStaff AddNewStaff={AddNewStaff} 
@@ -30,6 +31,7 @@ class AddNewStaff extends Component {
                     error={error}
                 />
             </div>
+
         );
     }
 }

src/container/CategoryStaffInfo.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { connect} from 'react-redux';
+import * as actions from "../actions/getStaffByCategoryIdAction";
+import { bindActionCreators } from "redux";
+
+import CategoryStaffs from '../components/CategoryStaffs'
+import LeftMenu from '../container/LeftMenu'
+import Header from '../container/Header'
+
+class CategoryStaffInfo extends Component {
+    constructor(props){
+        super(props)
+        
+       
+    }
+    componentDidMount(){
+        const { getCategorysDataById, match } = this.props
+        getCategorysDataById(match.params.id)
+        
+        console.log(this.state)
+    }
+
+    componentDidUpdate(prevProps){
+        const { getCategorysDataById, match } = this.props
+        if(prevProps.match.params.id !==match.params.id ){
+            getCategorysDataById(match.params.id)
+        }
+    }
+
+    render() {
+        const {  infoCategory, isFetching  } = this.props
+        console.log(this.props)
+        
+       
+        return (
+            <div>
+                <Header />
+                <div className="contentDiv">
+                    <LeftMenu />
+                    <CategoryStaffs infoCategory={infoCategory} isFetching={isFetching}  />
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+
+    infoCategory: state.categoryById.infoCategory,
+    isFetching: state.categoryById.isFetching,
+    trigger: state.categoryById.trigger,
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  
+  export default CategoryStaffInfo = connect(
+        mapStateToProps,
+        mapDispatchToProps
+  )(CategoryStaffInfo);

src/container/Header.js

@@ -6,14 +6,19 @@ import 'antd/dist/antd.css';
 
 import { connect } from 'react-redux';
 import * as actions from "../actions/searchStaffAction";
+import { getUsersData } from '../actions/usersAuthActions'
 import { bindActionCreators } from "redux";
 
 class Header extends Component {
-    render() {  
+    render() { 
+        const { inputData, searchStaff, changeInputValue } = this.props
         return (
             <div className="header">
                <HeaderLogo />
-               <SearchLine {...this.props}/>
+               <SearchLine inputData={inputData}
+                    searchStaff={searchStaff}
+                    changeInputValue={changeInputValue} 
+                />
                <Myprofile/>
             </div>
         );
@@ -22,10 +27,11 @@ class Header extends Component {
 
 const mapStateToProps = state => ({
         inputData: state.searchStaff.inputData,
-        isFetching: state.searchStaff.isFetching
+        isFetching: state.searchStaff.isFetching,
+        
   });
   
-  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions, getUsersData }, dispatch);
   
   export default Header = connect(
         mapStateToProps,

src/container/MainPage.js

@@ -5,23 +5,19 @@ import * as actions from "../actions/staffsAction";
 
 import { bindActionCreators } from "redux";
 
+import Header from '../container/Header'
 import LeftMenu from '../container/LeftMenu'
 import AllStaffs from "../components/AllStaffs"
-import Header from '../container/Header'
 
 class MainPage extends Component {
 
     componentDidMount() {
-        const { getStaffsData } = this.props
-        getStaffsData()
-
+        this.props.getStaffsData()
     }
-    render() {
 
+    render() {
         const { inputStaffs, isFetching } = this.props
-        
         return (
-
             <Fragment>
                 <Header />
                 <div className="contentDiv">
@@ -29,15 +25,13 @@ class MainPage extends Component {
                     <AllStaffs inputStaffs={inputStaffs} isFetching={isFetching} />
                 </div>
             </Fragment>
-
         );
     }
 }
 
 const mapStateToProps = state => ({
     inputStaffs: state.staffs.inputStaffs,
-    isFetching: state.staffs.isFetching,
-    allCategory: state.addCategory.allCategory,
+    isFetching: state.staffs.isFetching
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);

src/container/MainPageStaffInfo.js

@@ -4,7 +4,7 @@ import * as actions from "../actions/getStaffByIdAction";
 import { bindActionCreators } from "redux";
 
 import FullInfoAboutStaff from '../components/AllStaffs/FullInfoAboutStaff'
-import LeftMenu from '../components/LeftMenu'
+import LeftMenu from '../container/LeftMenu'
 import Header from '../container/Header'
 
 class MainPageStaffInfo extends Component {

src/container/renderRegistration.js

@@ -1,27 +1,27 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { bindActionCreators } from "redux";
-import { connect} from 'react-redux';
+import { connect } from 'react-redux';
 
 import RegistrForm from "../components/Auth/registration";
 import * as actions from "../actions/usersRegistrActions";
 
-class RenderRegistration extends Component {      
-        render() {
-          return (
-            <div>
-              <RegistrForm {...this.props} />
-            </div>       
-          );
-        }
-  }
-  
+class RenderRegistration extends Component {
+    render() {
+        return (
+            <Fragment>
+                <RegistrForm {...this.props} />
+            </Fragment>
+        );
+    }
+}
+
 
 const mapStateToProps = state => ({
-  });
-  
+});
+
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
-  
+
 export default RenderRegistration = connect(
-      mapStateToProps,
-      mapDispatchToProps
-  )(RenderRegistration);
+    mapStateToProps,
+    mapDispatchToProps
+)(RenderRegistration);

src/reducer/categoryById.js

@@ -0,0 +1,38 @@
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    infoCategory: [],
+    isFetching: false,
+    error: null,
+    
+  };
+
+  export default (state = initState, { type, payload }) => {
+      console.log(payload)
+      switch (type) {
+        
+        case types.CATEGORY_REQUEST_BY_ID: {
+          return {
+          ...state,
+          isFetching: true,
+          infoCategory: [],
+          }
+        } 
+        case types.CATEGORY_REQUEST_SUCCESS_BY_ID: { 
+          return {
+          ...state,
+          isFetching: false,
+          infoCategory: payload.data.staffs,
+          
+          }
+        }
+        case types.CATEGORY_REQUEST_FAIL_BY_ID: {
+          return {
+          ...state,
+          isFetching: false,
+          error: "ERROR"
+          }
+        }
+        default: return state;    
+    }
+  };

src/reducer/index.js

@@ -12,6 +12,7 @@ import searchStaffById from './searchStaffById'
 
 import category from './category'
 import addCategory from './addCategory'
+import categoryById from './categoryById'
 
 export default  combineReducers({
     usersRegistr: usersRegistration,
@@ -26,6 +27,7 @@ export default  combineReducers({
 
     category,
     addCategory,
+    categoryById,
 
     form: formReducer
 })

src/router.js

@@ -8,6 +8,7 @@ import MainPage from "./container/MainPage";
 // import Form from './components/Auth/index'
 // import RegistrForm from './components/Auth/registration'
 import MainPageStaffInfo from './container/MainPageStaffInfo'
+import CategoryStaffInfo from './container/CategoryStaffInfo'
 
 import SearchStaffs from './container/SearchStaff'
 
@@ -24,6 +25,7 @@ export default () => (
             <Route path="/authorisation" exact component={RenderAuthorisation} />
             <Route path="/auth" exact component= {RenderAuthorisation}/>
             <Route path="/registration" exact component={RenderRegistration} />
+            <Route path="/category/staff/:id" exact component={CategoryStaffInfo} />
             <Route path="/staff/:id" exact component={MainPageStaffInfo} />
             <Route path="/search/:title" exact component={SearchStaffs} />
                 <Route path="/search/Staff/:id" exact component={SearchStaffsInfo} />

src/style/abstracts/variables.scss

@@ -20,7 +20,4 @@ $color-grey-transparent: rgba(247, 249, 251, 0.7);
 $color-shadow:#d4d4d4;
 $el-color:#FD7F71;
 // BASE
-$color-backgtound: #f5f8fb;
-$box-shadow: 0 0 16px 0 $color-shadow;
-$input-box-shadow: 0 8px 16px rgba($color-black, 0.1);
-$layout-border-radius: 2px;
+$color-backgtound: #f5f8fb;

src/style/base/_base.scss

@@ -3,97 +3,9 @@
 *:before {
 	margin: 0;
 	padding: 0;
-	-webkit-box-sizing: inherit;
-	box-sizing: inherit;
+	box-sizing:border-box;
 }
-
-html {
-	font-size: 62.5%;
-}
-
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-form,
-fieldset,
-input,
-textarea,
-p,
-blockquote,
-th,
-td {
-	padding: 0;
-	margin: 0;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-fieldset,
-img {
-	border: 0;
-}
-address,
-caption,
-cite,
-code,
-dfn,
-em,
-strong,
-th,
-var {
-	font-weight: normal;
-	font-style: normal;
-}
-ol,
-ul {
-	list-style: none;
-}
-caption,
-th {
-	text-align: left;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	font-weight: normal;
-	font-size: 100%;
-}
-
-abbr,
-acronym {
-	border: 0;
-}
-
-body {
-	font-family: "roboto", sans-serif;
-	line-height: 1.7;
-	box-sizing: border-box;
-	background: $color-backgtound;
-	background-color: aqua;
-	min-width: 320px;
-	max-width: 1350px;
-}
-
-a:hover {
-	text-decoration: none;
-}
-
-button {
-	cursor: pointer;
+body{
+	// max-width: 1140px;
+	margin: 0 auto ;
 }

src/style/base/_typography.scss

@@ -1,14 +0,0 @@
-.h1-tag {
-	font-size: 3rem;
-	margin-bottom: 4rem;
-
-	&--add {
-		color: $color-blue-light-dark;
-		cursor: pointer;
-		margin-left: 2rem;
-
-		&:hover {
-			color: $color-blue-dark;
-		}
-	}
-}

src/style/components/_allStaff.scss

@@ -39,9 +39,9 @@
     text-align:center;
     color: #fff;
     border: none;
-    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 rgba(227, 115, 14, 0.7);
+    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 #FD7F71;
     border-radius: 25px;
-    background: #e3730e;
+    background: #FD7F71;
     cursor: pointer;
     transform: translate3d(0, 0, 0);
     animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
@@ -77,6 +77,10 @@
 // }
 
 
-
+.imgStaff{
+    width: 100%;
+    padding: 5px ;
+   
+}
   
 

src/style/components/_formLogin.scss

@@ -13,6 +13,7 @@
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover; 
+    
 }
 
 h1, .input::-webkit-input-placeholder, .button {
@@ -37,7 +38,8 @@ h1 {
     box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
     padding-bottom: 40px;
     border-radius: 3px;
-    background-color: #fff;
+    background-color: rgba(247, 240, 240, 0.7);;
+    
     h1 {
         box-sizing: border-box;
         padding: 20px;
@@ -70,6 +72,8 @@ h1 {
     }
 }
 
+
+
 .button {
     border: none;
     background: $el-color;
@@ -78,7 +82,7 @@ h1 {
     padding: 6px;
     width: 200px;
     color: white;
-    margin-left: 25px;
+    margin: 25px auto;
     box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
     &:hover { 
         transform: translateY(-3px);

src/style/components/_header.scss

@@ -10,19 +10,6 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-			
-		.div{
-			width: 100%;		
-		}
-
-		.input{
-			width: 60%;	
-		}
-
-		.link{
-			width: 20%;
-		}
-
 	}
 
 	&__auth {
@@ -38,7 +25,12 @@
 			align-items: center;
 
 			.avatar{
-				padding: 5px;
+				padding-right: 5px;
+			}
+
+			.text{
+				color: $el-color;
+				font-size: 18px;
 			}
 		}
 	}

src/style/components/auth.scss

@@ -17,22 +17,20 @@ h1 {
 }
 
 .form {
-  
   box-sizing: border-box;
-  width: 260px;
+  width: 460px;
   margin: 100px auto 0;
   box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
   padding-bottom: 40px;
   border-radius: 3px;
-  h1 {
-    box-sizing: border-box;
-    padding: 20px;
-  }
+
+
+
 }
 
 .input {
   margin: 20px 25px;
-  width: 200px;
+  width: 80%;
   display: block;
   border: none;
   padding: 10px 0;
@@ -64,7 +62,7 @@ h1 {
   border-radius: 3px;
   padding: 6px;
   margin-bottom: 10px;
-  width: 200px;
+  width: 80%;
   color: white;
   margin-left: 25px;
   box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
@@ -117,7 +115,32 @@ h1 {
   background-color: #FD7F71
 }
 
+
+
+.auth__button{
+
+  width: 100%;
+  display : flex;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  
+}
+.btn1{
+  width: 180px;
+    margin-left: 0px;
+    border-radius: 0px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+.btn2{
+  width: 180px;
+    margin-left: 0px;
+    border-radius: 0px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
 .ant-layout-sider-children{
   background: #FD7F71;
   
+
 }

src/style/components/searchLine.scss

@@ -87,3 +87,8 @@ color: darken($color,1%);
         @media (min-width: $breakpoint) {
           width: 32px;
           height: 32px; } }
+          
+          
+         
+          
+        

src/utils/authValidate.js

@@ -0,0 +1,19 @@
+export const authValidate =  values => {
+    const { email, password } = values;
+    const error = {};
+
+
+    if(!email) {
+        error.email = "Required"
+    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.]+\.[A-Z]{2,4}$/i.test(email)) {
+        error.email = 'Invalid email address'
+    }
+
+    if(!password) {
+        error.password = "Required"
+    }else if(!/^[a-zA-Z0-9]+$/.test(password)) {
+        error.password = "Invalid password"
+    }
+
+    return error;
+};

src/utils/regValidate.js

@@ -0,0 +1,38 @@
+export const regValidate = values => {
+    const { login, password, name, phone, email } = values;
+    const error = {};
+
+    if (!login) {
+        error.login = "Required" // - true если ничего не надо возвращать
+    } else if (login.length > 15) {
+        error.login = 'Must be 15 characters or less'
+    } else if (!/^[a-zA-Z0-9]+$/.test(login)) {
+        error.login = "invalid login"
+    }
+
+    if (!password) {
+        error.password = "Required"
+    }else if(!/^[a-zA-Z0-9]+$/.test(password)) {
+        error.password = "Invalid password"
+    }
+
+    if (!name) {
+        error.name = "Required"
+    }else if (!/^[a-zA-Z0-9]+$/.test(name)) {
+        error.name = "Invalid login"
+    }
+
+    if (!phone) {
+        error.phone = "Required"
+    }else if(!/^[0-9-+()]+$/.test(phone)) {
+        error.phone = "Invalid phone number"
+    }
+
+    if (!email) {
+        error.email = "Required"
+    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.]+\.[A-Z]{2,4}$/i.test(email)) {
+        error.email = 'Invalid email address'
+    }
+
+    return error;
+};

src/utils/validate.js

@@ -1,7 +1,7 @@
 export default values => {
     const { email, password } = values;
     const error = {};
-
+    console.log(values)
 
     if(!email) {
         error.email = "Required"