package-lock.json

@@ -2667,6 +2667,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap-slider": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-slider/-/bootstrap-slider-9.9.0.tgz",
+      "integrity": "sha1-ThTsxkAZAdod33aBqiTjOwDa3Og="
+    },
     "bowser": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
@@ -4658,6 +4663,11 @@
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
       "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
     },
+    "es6bindall": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/es6bindall/-/es6bindall-0.0.9.tgz",
+      "integrity": "sha1-ceAK+mn43VmsWsiYoNMcl434F9U="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -14730,6 +14740,15 @@
         }
       }
     },
+    "react-bootstrap-slider": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-slider/-/react-bootstrap-slider-2.1.5.tgz",
+      "integrity": "sha512-7rO3JlCVIpr+XtwiSfg8r+MPqyl9KdLI61pNuSMBYYQZ42IWBC+kk/UDyYevp76aGAMtd9SCW8erxOvq+VpekQ==",
+      "requires": {
+        "bootstrap-slider": "9.9.0",
+        "es6bindall": "^0.0.9"
+      }
+    },
     "react-dev-utils": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-7.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "form-data": "^2.3.3",
     "node-sass": "^4.11.0",
     "react": "^16.6.3",
+    "react-bootstrap-slider": "^2.1.5",
     "react-dom": "^16.6.3",
     "react-dropzone": "^8.0.4",
     "react-loader-spinner": "^2.3.0",

src/actions/addNewStaffAction.js

@@ -34,6 +34,23 @@ export const AddNewStaffAction = payload => {
     }
 }
 
+export const base64 = payload => ({
+    type: types.BASE_64_REQUEST,
+    payload
+})
+export const base641 = payload => ({
+    type: types.BASE1_64_REQUEST,
+    payload
+})
+export const base642 = payload => ({
+    type: types.BASE2_64_REQUEST,
+    payload
+})
+export const base643 = payload => ({
+    type: types.BASE3_64_REQUEST,
+    payload
+})
+
 const addPhotoRequest = payload => ({
     type: types.PUSH_NEW_PHOTO_REQUEST,
     payload
@@ -60,4 +77,54 @@ export const pushPhoto = payload => {
             .catch(err =>
                 dispatch(addNewPhotoRequestFail(err)))
     }
+}
+
+
+
+ export const inputchangeHandler = payload => ({
+    type: types.INPUT_CHANGE_VALUE,
+    payload
+})
+
+export const inputchangeHandler1 = payload => ({
+    type: types.INPUT_CHANGE_VALUE1,
+    payload
+})
+export const inputchangeHandler2 = payload => ({
+    type: types.INPUT_CHANGE_VALUE2,
+    payload
+})
+export const inputchangeHandler3 = payload => ({
+    type: types.INPUT_CHANGE_VALUE3,
+    payload
+})
+
+
+
+
+const editStaffRequest = payload => ({
+    type: types.ADD_NEW_STAFF_REQUEST,
+    payload
+})
+
+const editStaffRequestSuccess = payload => ({
+    type: types.ADD_NEW_STAFF_REQUEST_SUCCESS,
+    payload
+})
+
+const editStaffRequestFail = payload => ({
+    type: types.ADD_NEW_STAFF_REQUEST_FAIL,
+    payload
+})
+
+export const EditStaffAction = payload => {
+    console.log(payload)
+    return dispatch => {
+        dispatch(editStaffRequest())
+        axios.put(`http://127.0.0.1:2000/api/staffs`, payload)
+            .then(res =>
+                setTimeout(() => dispatch(editStaffRequestSuccess(res)), 1000))
+            .catch(err =>
+                dispatch(editStaffRequestFail(err)))
+    }
 }

src/actions/getStaffByIdAction.js

@@ -31,4 +31,9 @@ export const getStaffsDataById = (payload) => {
 			})
 
 	};
-};
+};
+
+export const deleteStaffById = (payload) => {
+	console.log(payload)
+	axios.delete(`http://127.0.0.1:2000/api/staffs?id=${payload}`,).then(res => console.log(res))
+}

src/components/AllStaffs/FullInfoAboutStaff.js

@@ -6,83 +6,36 @@ import { Menu, Icon, Carousel } from 'antd';
 class FullInfoAboutStaff extends Component {
     constructor(props) {
         super(props)
-        
+
         this.state = {
             count: 0,
         }
     }
 
-    // nextCount = () => {
-    //     // console.log(this.arr)
-    //     // console.log(this.arr.length)
-
-    //     if (this.state.count == this.arr.length - 1) {
-    //         this.setState({ count: 0 })
-    //         console.log("sdgdfg")
-    //     }
-    //     else {
-    //         this.setState({ count: this.state.count + 1 })
-    //     }
-
-    // }
-
-    // backCount = () => {
-    //     if (this.state.count === 0) {
-    //         this.setState({ count: this.arr.length - 1 })
-    //     }
-    //     else {
-    //         this.setState({ count: this.state.count - 1 })
-    //     }
-
-    // }
-
-    // componentDidMount(){
-    //     const { InfoStaff } = this.props
-    //     let str;
-
-    //     str = InfoStaff.map(el => {
-    //         console.log(el.img)
-    //         let str1 = el.img.substr(29)
-    //         for (var i = 0, b = 24; i < str1.length; i = i + 25) {
-
-    //             this.arr.push(str1.substr(i, b))
-    //         }
-
-    //     })
-    // }
-
     render() {
-        console.log(this.arr)
+
         const { InfoStaff, isFetching } = this.props
         let arr = [];
         let str;
-        // let str1
-        // let str2
-        // str = InfoStaff.map(el=> el.img.substr(0,29));
-        // str1 = InfoStaff.map(el=> el.img.substr(29,24));
-        // str2 = InfoStaff.map(el=> el.img.substr(54));
-        // console.log(str[0])
-        // console.log(str1[0])
-        // console.log(str2[0])
-
-
 
         str = InfoStaff.map(el => {
             console.log(el.img)
-            let str1 = el.img.substr(29)
-            for (var i = 0, b = 24; i < str1.length; i = i + 25) {
 
-                arr.push(str1.substr(i, b))
+            if (el.state) {
+                let str1 = el.img.substr(29)
 
+                for (var i = 0, b = 24; i < str1.length; i = i + 25) {
+                    arr.push({ newStr: str1.substr(i, b), state: el.state, defaultStr: el.img })
+                }
+            } else {
+                arr.push({ state: el.state, defaultStr: el.img })
             }
 
         })
 
+        let data1
+        let data;
 
-
-
-
-        let data, data1;
         if (isFetching === true) {
             data = <div className="loader">
                 <Loader type="Triangle"
@@ -91,44 +44,33 @@ class FullInfoAboutStaff extends Component {
                     width="100"
                 />
             </div>
-        }
-        else {
-            data = InfoStaff.map((el, key) => (
-
-                <div>
-                    {/* <img src={str+str1} width="325" height="190" className="imgStaff"  alt="lorem" />
-                    <img src={str+str2} width="325" height="190" className="imgStaff"  alt="lorem" /> */}
-
-                    {el.title} {el.price} {el.description}
-                </div>)
-
+        } else {
+            data = InfoStaff.map((el, key) => <div className="divCenter">
+                <div className="flex-around">
+                    <p><b>Название: </b>{el.title} </p>
+                    <p><b>Цена: </b>{el.price}</p>
+                    <p><b>Описание: </b>{el.description}</p>
+                    <p><b>Контактное лицо: </b>{el.user.name}</p> 
+                    <p><b>Номер телефона: </b>{el.user.phone}</p>
+                </div>
+                {console.log(el.user)}
+            </div>
             )
             data1 = <div className="carusel">
-                    <Carousel effect="fade">
-                        {arr.map(el => <div>
-                            <img src={`http://127.0.0.1:2000/static/${el}`} className="fullImgStaff" alt="lorem" />
-                        </div>)}   
-                    </Carousel>
-                </div>
-            
-            // arr.map(el => <div><img src={`http://127.0.0.1:2000/static/${el}`} className="fullImgStaff" alt="lorem" /></div>)
-            // data1 = arr.map(el => console.log() )
+                <Carousel effect="fade">
+                    {arr.map(el => <div>
+                        {el.state ? <img src={`http://127.0.0.1:2000/static/${el.newStr}`} className="fullImgStaff" alt="lorem" /> :
+                            <img src={`${el.defaultStr}`} width="325" height="190" className="imgStaff" alt="lorem" />}
+                    </div>)}
+                </Carousel>
+            </div>
         }
 
+
         return (
 
             <div className="staffinfo" >
-
-                {/* <div class="carusel">
-                    <div class="back but" onClick={this.backCount} ><Icon type="left" /></div>
-                    <div class="el-carusel">
-                        <img src={`http://127.0.0.1:2000/static/${this.arr[this.state.count]}`} width="325" height="190" className="fullImgStaff" alt="lorem" />
-                    </div>
-                    <div class="next but" onClick={this.nextCount} ><Icon type="left" /></div>
-                </div> */}
-
                 {data1}
-
                 {data}
             </div>
         );

src/components/AllStaffs/index.js

@@ -10,8 +10,10 @@ class AllStaffs extends Component {
         const { inputStaffs, isFetching, isAdmin, getUser } = this.props
         let data;
 
+
         if (isFetching === true) {
 
+
             data = <div className="loader">
                 <Loader type="Triangle"
                     color="#FD7F71"
@@ -24,7 +26,7 @@ class AllStaffs extends Component {
                 {inputStaffs.map((el, key) => (
                     <Link to={`/staff/${el.id}`} key={key}>
                         <div className="staff">
-                            <img src={el.img.substr(0, 53)} width="325" height="190" className="imgStaff" alt="lorem" />
+                        {el.state ?  <img src={el.img.substr(0,53)} width="325" height="190" className="imgStaff"  alt="lorem" /> : <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />}
                             <div className="titlleAndPrice">
                                 <h4>{el.title}</h4>
                                 <h4>Цена: {el.price}</h4>

src/components/Auth/authButtons.js

@@ -6,13 +6,13 @@ class Authbuttons extends Component {
         return (
             <div className="auth__button">
                 <Link to="/auth" >
-                    <button className="button btn1">
-                        Войти
+                    <button className="buttonAuth">
+                        Вход
                     </button>
                 </Link>
                 <Link to="/registration" >
-                    <button className="button btn2">
-                        Зарегистрироваться
+                    <button className="buttonAuth">
+                        Регистрация
                     </button>
                 </Link>
             </div>

src/components/Auth/authorisation.js

@@ -1,28 +1,28 @@
 import React from "react";
 import { reduxForm, Field } from "redux-form";
-import Authbuttons from './authButtons'
+import { Link } from "react-router-dom"
 
-import { Link, Redirect} from "react-router-dom"
+import Authbuttons from './authButtons'
 
-import {authValidate} from "../../utils/authValidate";
-import {authRenderField} from "../../common/authRenderField"
+import { authValidate } from "../../utils/authValidate";
+import { authRenderField } from "../../common/authRenderField"
 
 
 const Form = props => {
 
-    const { handleSubmit, getUsersData, pristine, inputData } = props
+    const { handleSubmit, getUsersData } = props
 
     const submit = (values) => {
-        
+
         getUsersData(values);
-       
-        
+
+
     }
     return (
         <div className="formdiv">
-            <Authbuttons />
-            <form className="form" >
-                <div>
+            <div>
+                <Authbuttons />
+                <form className="formAuth" >
                     <Field
                         name="email"
                         component={authRenderField}
@@ -30,8 +30,6 @@ const Form = props => {
                         placeholder="email@example.com"
                         className="input"
                     />
-                </div>
-                <div>
                     <Field
                         name="password"
                         component={authRenderField}
@@ -39,10 +37,13 @@ const Form = props => {
                         placeholder="Пароль"
                         className="input"
                     />
-                </div>
-               <button className="auth__submit-button" onClick={handleSubmit(submit)}><Link to="/">Войти</Link> </button>
-               
-            </form>
+                    <div className="center">
+                        <button className="buttonInAuth" onClick={handleSubmit(submit)}>
+                            <Link to="/" className="colorLink" >Войти</Link>
+                        </button>
+                    </div>
+                </form>
+            </div>
         </div>
 
 
@@ -50,5 +51,4 @@ const Form = props => {
     );
 }
 
-export default reduxForm({ form: "authForm", validate: authValidate })(Form);
-// <button type="submit" className="button" disabled={pristine}>Отправить</button>
+export default reduxForm({ form: "authForm", validate: authValidate })(Form);

src/components/Auth/registration.js

@@ -20,67 +20,67 @@ const RegistrForm = props => {
     return (
         <div >
             <Authbuttons />
-            <form onSubmit={handleSubmit(submit)} className="form">
+            <form onSubmit={handleSubmit(submit)} className="formRegistr">
                 <div>
-                    <div>
-                        <Field
-                            name="login"
-                            component={regRenderField}
-                            type="text"
-                            placeholder="Логин"
-                            className="input"
-                        />
+                    <div className="divName">
+                        <div style={{ "width": "270px" }} >
+                            <Field
+                                name="name"
+                                component={regRenderField}
+                                type="text"
+                                placeholder="Имя"
+                                className="inputName"
+                            />
+                        </div>
+                        <div style={{ "width": "270px" }} >
+                            <Field
+                                name="login"
+                                component={regRenderField}
+                                type="text"
+                                placeholder="Логин"
+                                className="inputName"
+                            />
+                        </div>
                     </div>
-
-                    <div>
-                        <Field
-                            name="password"
-                            component={regRenderField}
-                            type="password"
-                            placeholder="Пароль"
-                            className="input"
-                        />
-                    </div>
-
-                    <div>
-                        <Field
-                            name="name"
-                            component={regRenderField}
-                            type="text"
-                            placeholder="Имя"
-                            className="input"
-                        />
-                    </div>
-                    <div>
-                        <Field
-                            name="phone"
-                            component={regRenderField}
-                            type="text"
-                            placeholder="+380XXXXXXXX"
-                            className="input"
-                        />
-                    </div>
-                    <div>
-                        <Field
-                            name="email"
-                            component={regRenderField}
-                            type="email"
-                            placeholder="email@example.com"
-                            className="input"
-                        />
+                    <div className="divName">
+                        <div style={{ "width": "270px" }} >
+                            <Field
+                                name="email"
+                                component={regRenderField}
+                                type="email"
+                                placeholder="email@example.com"
+                                className="inputName"
+                            />
+                        </div>
+                        <div style={{ "width": "270px" }} >
+                            <Field
+                                name="phone"
+                                component={regRenderField}
+                                type="text"
+                                placeholder="+380XXXXXXXX"
+                                className="inputName"
+                            />
+                        </div>
                     </div>
+                    <Field
+                        name="password"
+                        component={regRenderField}
+                        type="password"
+                        placeholder="Пароль"
+                        className="input"
+                    />
                 </div>
-                <div>
+                <div className="center">
                     <button type="submit"
+                        className="buttonInRegistration"
                         disabled={pristine}
-                        className="button"
                     >
-                        Отправить
+                        Зарегистрироваться
                     </button>
                     <button type="button"
+                        className="buttonInRegistration"
                         disabled={pristine}
                         onClick={reset}
-                        className="button"
                     >
                         Очистить поля
                     </button>

src/components/Btn/linkHome.js

@@ -0,0 +1,19 @@
+import React, { Component, Fragment } from 'react';
+
+import { Icon } from 'antd';
+import { Link } from "react-router-dom";
+
+class LinkHome extends Component {
+    render() {
+    
+        return (
+            <div>
+                <Link to="/" className="linkTopButton">
+                    <Icon type="home" style={{ fontSize: '30px' }} />
+                </Link>
+            </div>
+        );
+    }
+}
+
+export default LinkHome;

src/components/CategoryStaffs/index.js

@@ -7,8 +7,8 @@ import AddNewStaff from '../../components/BtnAddNewStaff'
 class CategoryStaffs extends Component {
     
     render() {
-        const { infoCategory, isFetching } = this.props
-        console.log(infoCategory)
+        const { infoCategory, isFetching, getUser } = this.props
+        console.log(this.props)
 
         let data;
             if(isFetching===true){
@@ -23,26 +23,32 @@ class CategoryStaffs extends Component {
             }
             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}
+                {infoCategory.map((el,key)=>(
+                    <Link to={`/staff/${el.id}`} key={key}>
+                        <div className="staff">
+                           <img src={el.img.substr(0,53)} width="325" height="190" className="imgStaff"  alt="lorem" />
+                            <div className="titlleAndPrice">
+                                <h4>{el.title}</h4>
+                                <h4>Цена: {el.price}</h4>
                             </div>
-                        </Link> 
-                    ))}    
-                </div>
+
+                        </div>
+                    </Link> 
+                ))}    
+            </div>
             }
         return (
 
            <div className="content">
 
                 {data}
-                <AddNewStaff/>
+                <AddNewStaff   getUser={ getUser }/>
            </div> 
             
         );
     }
 }
 
-export default CategoryStaffs;
+export default CategoryStaffs;
+
+

src/components/FormsAdd/FormAddNewCategory/SendingCategoryForm.js

@@ -1,59 +1,53 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form'
 
-
-
-
 const SendingForm = props => {
-    const { handleSubmit, pristine, reset, submitting, AddNewCategory } = props
+    const { handleSubmit, pristine, reset, submitting, AddNewCategory, allCategory, podcategory } = props
 
     const submit = values => {
         AddNewCategory(values)
     };
 
     return (
-        <form onSubmit={handleSubmit(submit)}>
-            <div>
-
-                <div>
-                    <Field
-                        name="title"
-                        component="input"
-                        type="text"
-                        placeholder="Название"
-                    />
-                </div>
-            </div>
-            <div>
-
-                <div>
-                    <Field
-                        name="description"
-                        component="input"
-                        type="text"
-                        placeholder="Описание"
-                    />
-                </div>
-            </div>
-            <div>
-                <div>
-                    <Field
-                        name="parentId"
-                        component="input"
-                        type="number"
-                        placeholder="Цена"
-                    />
+        <div className="formdiv">
+            <form onSubmit={handleSubmit(submit)} className="form">
+                <Field name="title"
+                    className="input"
+                    component="input"
+                    type="text"
+                    placeholder="Наименование Заголовка"
+                />
+                <Field name="description"
+                    className="input"
+                    component="input"
+                    type="text"
+                    placeholder="Icon"
+                />
+                <Field name="parentId"
+                    className="input"
+                    component="select"  
+                >
+                    <option >Выберите рубрику</option>
+                    <option value={0}> Новая рубрика</option>
+                    {podcategory.map(el => <option value={el.id}> {el.title}</option>)}
+                </Field>
+                <div className="buttonConteiner">
+                    <button type="submit"
+                        className="button"
+                        disabled={pristine || submitting}
+                    >
+                        Добавить
+                    </button>
+                    <button type="button"
+                        className="button"
+                        disabled={pristine || submitting}
+                        onClick={reset}
+                    >
+                        Очистить
+                    </button>
                 </div>
-            </div>
-            <div>
-                <button type="submit" disabled={pristine || submitting}>
-                    Submit
-        </button>
-                <button type="button" disabled={pristine || submitting} onClick={reset}>
-                    Clear Values
-        </button>
-            </div>
-        </form>
+            </form>
+        </div >
     )
 }
 

src/components/FormsAdd/FormAddNewCategory/index.js

@@ -1,21 +1,38 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import * as actions from '../../../actions/categoryAction';
 
-import MDSpinner from "react-md-spinner";
+import { bindActionCreators } from 'redux';
 
+import MDSpinner from "react-md-spinner";
 import Form from '../FormAddNewCategory/SendingCategoryForm'
 
 class FormAddNewStaff extends Component {
+    componentDidMount() {
+        this.props.getCategoriesData(); 
+    }
+
     render() {
         
-        const { isFetching, AddNewCategory } = this.props
+        const { isFetching, AddNewCategory, allCategory, podcategory } = this.props
         
         return (
             <div>
-               <Form AddNewCategory={AddNewCategory} />
+               <Form AddNewCategory={AddNewCategory} allCategory={allCategory} podcategory={podcategory} />
                {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
             </div>
         );
     }
 }
 
-export default FormAddNewStaff;
+const mapStateToProps = state =>({
+    allCategory: state.category.allCategory,
+    podcategory: state.category.podcategory,
+})
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default FormAddNewStaff = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(FormAddNewStaff);;

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -6,114 +6,166 @@ import FormData from 'form-data'
 class SendingForm extends Component {
     constructor(props) {
         super(props)
-        this.state = { image: 'http://zabavnik.club/wp-content/uploads/vopros_2_14000037-939x1024.jpg' }
 
+        this.state = { trig: false }
     }
 
     onChange = e => {
-        const { pushPhoto, photo } = this.props
-        //this.setState({image: e.target.files[0]})
+        const { pushPhoto, base64 } = this.props
+        this.setState({ trig: true })
         let data = new FormData();
         data.append('image', e.target.files[0], e.target.files[0].name);
-
         pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base64(reader.result)
+        }
+        reader.readAsDataURL(file);
+    }
+    onChange1 = e => {
+        const { pushPhoto, base641 } = this.props
+        this.setState({ trig: true })
+        let data = new FormData();
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base641(reader.result)
+        }
+        reader.readAsDataURL(file);
+    }
+    onChange2 = e => {
+        const { pushPhoto, base642 } = this.props
+        this.setState({ trig: true })
+        let data = new FormData();
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base642(reader.result)
+        }
+        reader.readAsDataURL(file);
+    }
+    onChange3 = e => {
+        const { pushPhoto, base643 } = this.props
+        this.setState({ trig: true })
+        let data = new FormData();
+        if (e.target.files[0] == undefined) {
+            return
+        }
+        data.append('image', e.target.files[0], e.target.files[0].name);
+        pushPhoto(data)
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.onloadend = function () {
+            base643(reader.result)
+        }
+        reader.readAsDataURL(file);
+
     }
 
     submit = values => {
         const { AddNewStaffAction, getUser, photo } = this.props
         //const { image } = this.state
 
-        let massive = []
-        // massive = photo.map(el => el.data.fileName)
-        // console.log(photo)
-        values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`
+        if (!this.state.trig) {
+            values.img = "http://rs.img.com.ua/crop?v2=1&w=600&h=0&url=%2F%2Fbm.img.com.ua%2Fberlin%2Fstorage%2Forig%2Fd224d3bd9bfe8bcb6b561da523d87364.jpg";
+            values.state = 0
+        } else {
+            values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`;
+            values.state = 1
+        }
+        //values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`  
+
         values.staff = "Машина"
-        values.state = 1
+
         values.userId = getUser.id
         console.log(values)
         AddNewStaffAction(values)
-    }
 
+    };
     render() {
 
-        const { handleSubmit, pristine, reset, submitting, allCategory, photo } = this.props
-        console.log(photo)
-
+        const { handleSubmit, pristine, reset, submitting, allCategory, base64Photo, addOrnot, base64Photo1, base64Photo2, base64Photo3, addOrnot1, addOrnot2, addOrnot3 } = this.props
 
         return (
 
+
             <div className="formdiv">
                 <form onSubmit={handleSubmit(this.submit)} className="form">
-                    <Field
-                        name="title"
+                    <Field name="title"
                         component="input"
                         type="text"
                         placeholder="Название"
                         className="input"
                     />
 
-                    <Field
-                        name="description"
+                    <Field name="description"
                         component="textarea"
                         type="text"
                         placeholder="Описание"
                         className="textarea"
                     />
 
-                    <Field
-                        name="price"
+                    <Field name="price"
                         component="input"
                         type="number"
                         placeholder="Цена"
                         className="input"
                     />
 
-
-                    <Field
-                        name="categoryId"
+                    <Field name="categoryId"
                         component="select"
-
                         className="input"
                     >
                         <option >Выберите рубрику</option>
                         {allCategory.map(el => <option value={el.id}> {el.title}</option>)}
                     </Field>
 
+
                     <div className="file">
-                        <label className='upload-zone'>
-                            <i>&nbsp;</i>
+                        <label className='upload-zone zone1'>
+                            {addOrnot ? <img src={base64Photo} style={{ "width": "80px", "height": "80px" }}></img> : <i>&nbsp;</i>}
                             <input type='file' className='files' onChange={this.onChange} />
 
                         </label>
                         <label className='upload-zone zone2'>
-                            <i>&nbsp;</i>
-                            <input type='file' className='files' onChange={this.onChange} />
+                            {addOrnot1 ? <img src={base64Photo1} style={{ "width": "80px", "height": "80px" }}></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange1} />
 
                         </label>
                         <label className='upload-zone zone3'>
-                            <i>&nbsp;</i>
-                            <input type='file' className='files' onChange={this.onChange} />
+                            {addOrnot2 ? <img src={base64Photo2} style={{ "width": "80px", "height": "80px" }}></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange2} />
 
                         </label>
                         <label className='upload-zone zone4'>
-                            <i>&nbsp;</i>
-                            <input type='file' className='files' onChange={this.onChange} />
+                            {addOrnot3 ? <img src={base64Photo3} style={{ "width": "80px", "height": "80px" }}></img> : <i>&nbsp;</i>}
+                            <input type='file' className='files' onChange={this.onChange3} />
 
                         </label>
                     </div>
 
+
                     <div className="buttonConteiner">
-                        <button type="submit" disabled={pristine || submitting} className="button" >
-                            Submit
+                        <button type="submit"
+                            className="button"
+                            disabled={pristine || submitting}
+                        >
+                            Добавить
                         </button>
-                        <button type="button" disabled={pristine || submitting} onClick={reset} className="button" >
-                            Clear Values
+                        <button type="button"
+                            className="button"
+                            disabled={pristine || submitting}
+                            onClick={reset}
+                        >
+                            Очистить
                         </button>
                     </div>
-
-
                 </form>
-
             </div>
 
         )
@@ -122,4 +174,11 @@ class SendingForm extends Component {
 
 export default reduxForm({
     form: 'SendingForm'
-})(SendingForm)
+})(SendingForm)
+// const mapStateToProps = (state, props) => ({
+//     form: props.formId
+//   });
+
+//   const component = reduxForm({ enableReinitialize: true })(SendingForm);
+
+//   export default connect(mapStateToProps)(component);

src/components/FormsAdd/FormAddNewStaff/index.js

@@ -15,14 +15,14 @@ class FormAddNewStaff extends Component {
     }
     render() {
         
-        const { isFetching, AddNewStaffAction, allCategory, getUser, photo, pushPhoto } = this.props
+        const { isFetching, AddNewStaffAction, allCategory, getUser, photo, pushPhoto, base64Photo, base64, addOrnot } = this.props
         let data;
         if (allCategory.data===undefined){
             data = []
         }
         else{ 
             const category = allCategory.data.filter(el => el.parentId !== 0)
-            data = <Form AddNewStaffAction={AddNewStaffAction} allCategory={category}  getUser={ getUser } photo={ photo } pushPhoto={ pushPhoto } />
+            data = <Form {...this.props} allCategory={ category }/>
         }
         return (
             <Fragment>
@@ -33,12 +33,12 @@ class FormAddNewStaff extends Component {
     }
 }
 
+
 const mapStateToProps = state =>({
     allCategory: state.category.allCategory,
 })
 
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
-
 export default FormAddNewStaff = connect(
     mapStateToProps,
     mapDispatchToProps

src/components/FormsAdd/redForm/index.js

@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import { Field, reduxForm } from 'redux-form';
+
+import FormData from 'form-data'
+
+
+class FormRedactorStaff extends  Component  {
+
+    constructor(props){
+        super(props)
+       this.state = { trig:false }
+    }
+    // componentDidUpdate(prevProps){
+    //     const {  match } = this.props
+    //     if(prevProps.InfoStaff[0].id !==this.props.InfoStaff[0].id ){
+    //         this.props.getStaffsDataById(this.props.InfoStaff[0].id)
+    //     }
+    //     console.log("prevProps.InfoStaff", prevProps.InfoStaff, "this.props.InfoStaff", this.props.InfoStaff)
+    // }
+    onChange = e =>{
+        const { pushPhoto,photo } = this.props
+        //this.setState({image: e.target.files[0]})
+        this.setState({trig:true})
+        let data = new FormData();
+        data.append('image',e.target.files[0], e.target.files[0].name);
+          
+          pushPhoto(data)
+    }
+    
+    changeHandler = (e) =>{
+          const { inputchangeHandler } = this.props
+          inputchangeHandler(e.target.value)
+    }
+    changeHandler1 = (e) =>{
+        const { inputchangeHandler1 } = this.props
+        inputchangeHandler1(e.target.value)
+    }
+    changeHandler2 = (e) =>{
+         const { inputchangeHandler2 } = this.props
+        inputchangeHandler2(e.target.value)
+        
+    }
+    changeHandler3 = (e) =>{
+         const { inputchangeHandler3 } = this.props
+        inputchangeHandler3(e.target.value)
+        
+    }
+    send = () =>{
+        const { inputData, inputData1, inputData2, inputData3, match, photo, EditStaffAction, InfoStaff, getUser } = this.props
+        
+        let values = {}
+   
+        if(!this.state.trig){
+            values.img = "http://rs.img.com.ua/crop?v2=1&w=600&h=0&url=%2F%2Fbm.img.com.ua%2Fberlin%2Fstorage%2Forig%2Fd224d3bd9bfe8bcb6b561da523d87364.jpg";
+            values.state = 0
+        }
+        else{
+            values.img = `http://127.0.0.1:2000/static/${photo.map(el => el.data.fileName)}`; 
+            values.state = 1 
+         }
+        values.staff = "Машина"
+        values.title = inputData
+        values.description = inputData1
+        values.price = inputData2
+        values.categoryId = inputData3
+        values.userId = getUser.id
+        values.id = InfoStaff[0].id
+          //EditStaffAction(values)
+          console.log(values)
+    }
+    render(){
+        
+        
+         const { handleSubmit, pristine, reset, submitting, InfoStaff, photo, allCategory } = this.props
+         console.log("InfoStaff", InfoStaff)
+         const category = allCategory.data.filter(el => el.parentId !== 0)
+         let data;
+         if(this.props.InfoStaff[0].id === this.props.match.params.id){
+             data = []
+         }
+         else{
+            data = InfoStaff.map(el => <form  className="form">
+            <input type="text"  name="title" defaultValue ={el.title} className="input" onChange={this.changeHandler}/>
+            <textarea type="text"  name="description" defaultValue ={el.description} className="input" onChange={this.changeHandler1}/>
+            <input type="number"  name="price" defaultValue ={el.price} className="input" onChange={this.changeHandler2}/>
+            <select type="number"  name="categoryId"  className="input" onChange={this.changeHandler3}>
+
+              <option >Выберите рубрику</option>
+                    {category.map(el => <option value={el.id}> {el.title}</option>)}
+                </select>         
+                            <label className='upload-zone'>
+                               <i>&nbsp;</i>
+                                <input type='file' className='files'  onChange={this.onChange}/>
+                                
+                            </label>
+                            <label className='upload-zone zone2'>
+                            <i>&nbsp;</i>
+                                <input type='file' className='files'  onChange={this.onChange}/>
+                                
+                            </label>
+                            <label className='upload-zone zone3'>
+                            <i>&nbsp;</i>
+                                <input type='file' className='files'  onChange={this.onChange}/>
+                                
+                            </label>
+                            <label className='upload-zone zone4'>
+                            <i>&nbsp;</i>
+                                <input type='file' className='files'  onChange={this.onChange}/>
+                                
+                            </label>
+                            
+                        
+               
+                <div className="buttonConteiner">
+                    <button type="button" className="button" onClick={this.send}>
+                        Submit
+                    </button>
+                    <button type="button" disabled={pristine || submitting} onClick={reset} className="button" >
+                        Clear Values
+                    </button>
+                   
+                </div>
+                
+                
+            </form>
+          )
+         }
+    return (
+        
+            <div className="formdiv">
+              {data}  
+            </div>
+        
+    )
+  }
+}
+
+export default reduxForm({
+    form: 'RedactorForm'
+})(FormRedactorStaff)

src/components/Modal/index.js

@@ -2,14 +2,14 @@ import React, { Component } from "react";
 import { Modal } from "antd";
 
 export default class EditModal extends Component {
-	render() {
-		
-		
-		const { visible, onOk, onCancel, error } = this.props;
-		  return (
-			<Modal title="" visible={visible} onCancel={onCancel} onOk={onOk} >
-				{error==="error" ? <h4>Не все поля были заполнены</h4> : <h4>Ваше объявление успешно добавлено</h4>}
-			</Modal>
-		  );
-	}
+    render() {
+
+        const { visible, onOk, onCancel, error } = this.props;
+        
+        return (
+            <Modal title="" visible={visible} onCancel={onCancel} onOk={onOk} >
+                {error === "error" ? <h4>Не все поля были заполнены</h4> : <h4>Ваше объявление успешно добавлено</h4>}
+            </Modal>
+        );
+    }
 }

src/constants/actionTypes.js

@@ -34,6 +34,19 @@
     export const PUSH_NEW_PHOTO_REQUEST = "PUSH_NEW_PHOTO_REQUEST";
     export const PUSH_NEW_PHOTO_REQUEST_SUCCESS = "PUSH_NEW_PHOTO_REQUEST_SUCCESS";
     export const PUSH_NEW_PHOTO_REQUEST_FAIL = "PUSH_NEW_PHOTO_REQUEST_FAIL";
+    export const BASE_64_REQUEST = "BASE_64_REQUEST";
+    export const BASE1_64_REQUEST = "BASE1_64_REQUEST";
+    export const BASE2_64_REQUEST = "BASE2_64_REQUEST";
+    export const BASE3_64_REQUEST = "BASE3_64_REQUEST";
+    //addNewStaffAction(PUT)
+    export const INPUT_CHANGE_VALUE = "INPUT_CHANGE_VALUE";
+    export const INPUT_CHANGE_VALUE1 = "INPUT_CHANGE_VALUE1";
+    export const INPUT_CHANGE_VALUE2 = "INPUT_CHANGE_VALUE2";
+    export const INPUT_CHANGE_VALUE3 = "INPUT_CHANGE_VALUE3";
+    export const EDIT_STAFF_REQUEST = "EDIT_STAFF_REQUEST";
+    export const EDIT_STAFF_REQUEST_SUCCESS = "EDIT_STAFF_REQUEST_SUCCESS";
+    export const EDIT_STAFF_REQUEST_FAIL = "EDIT_STAFF_REQUEST_FAIL";
+
     //searchStaffAction
     export const CHANGE_INPUT_VALUE = "CHANGE_INPUT_VALUE";
     export const SEARCH_STAFF_REQUEST = "SEARCH_STAFF_REQUEST";

src/container/AddNewStaff.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 
 import { connect } from 'react-redux';
-import { AddNewStaffAction, closeModal, pushPhoto } from "../actions/addNewStaffAction";
+import { AddNewStaffAction, closeModal, pushPhoto, base64, base641, base642, base643 } from "../actions/addNewStaffAction";
 
 import { getUsersDataById } from "../actions/getUserById"
 
@@ -27,17 +27,13 @@ class AddNewStaff extends Component {
         closeModal();
     }
     render() {
-        const { showModal, error, isFetching, AddNewStaffAction, getUser, photo, pushPhoto } = this.props
-
+        const { showModal, error, isFetching, AddNewStaffAction, getUser, photo, pushPhoto, base64, base64Photo, addOrnot } = this.props
+        console.log(base64Photo)
         return (
 
             <Fragment>
                 <Fragment>
-                    <FormAddNewStaff AddNewStaffAction={AddNewStaffAction} 
-                        isFetching={isFetching}
-                        getUser={ getUser }
-                        photo={ photo } 
-                        pushPhoto={ pushPhoto }
+                    <FormAddNewStaff {...this.props}
 
                     />
                 </Fragment>
@@ -60,9 +56,17 @@ const mapStateToProps = state => ({
     showModal: state.addStaff.showModal,
     error: state.addStaff.error,
     getUser: state.getUserById.getUser,
+    base64Photo: state.addStaff.base64Photo,
+    base64Photo1: state.addStaff.base64Photo1,
+    base64Photo2: state.addStaff.base64Photo2,
+    base64Photo3: state.addStaff.base64Photo3,
+    addOrnot: state.addStaff.addOrnot,
+    addOrnot1: state.addStaff.addOrnot1,
+    addOrnot2: state.addStaff.addOrnot2,
+    addOrnot3: state.addStaff.addOrnot3
 });
 
-const mapDispatchToProps = dispatch => bindActionCreators({ AddNewStaffAction, getUsersDataById, closeModal, pushPhoto }, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({ AddNewStaffAction, getUsersDataById, closeModal, pushPhoto, base64, base641, base642,base643 }, dispatch);
 
 export default AddNewStaff = connect(
     mapStateToProps,

src/container/CategoryStaffInfo.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { connect} from 'react-redux';
-import * as actions from "../actions/getStaffByCategoryIdAction";
+import { getCategorysDataById } from "../actions/getStaffByCategoryIdAction";
+import { getUsersDataById } from "../actions/getUserById"
 import { bindActionCreators } from "redux";
 
 import CategoryStaffs from '../components/CategoryStaffs'
@@ -10,10 +11,18 @@ import Header from '../container/Header'
 class CategoryStaffInfo extends Component {
     
     componentDidMount(){
-        const { getCategorysDataById, match } = this.props
+        const { getCategorysDataById, match, getUsersDataById } = this.props
         getCategorysDataById(match.params.id)
+       
+        //getStaffsDataById(match.params.id)
+        let localS = JSON.parse(localStorage.getItem("login"));
+            if(localS===null){
+
+            }
+            else{
+                getUsersDataById(localS)
+            }
         
-        console.log(this.state)
     }
 
     componentDidUpdate(prevProps){
@@ -24,16 +33,21 @@ class CategoryStaffInfo extends Component {
     }
 
     render() {
+        const { getUser } = this.props
         const {  infoCategory, isFetching  } = this.props
         console.log(this.props)
         
        
         return (
+
             <Fragment>
-                <Header />
+  
+            
+                <Header  getUser={ getUser }/>
                 <div className="menuAndContent">
-                    <LeftMenu />
-                    <CategoryStaffs infoCategory={infoCategory} isFetching={isFetching}  />
+                    <LeftMenu  getUser={ getUser }/>
+                    <CategoryStaffs infoCategory={infoCategory} isFetching={isFetching}  getUser={ getUser }  />
+
                 </div>
             </Fragment>
         );
@@ -45,9 +59,11 @@ const mapStateToProps = state => ({
     infoCategory: state.categoryById.infoCategory,
     isFetching: state.categoryById.isFetching,
     trigger: state.categoryById.trigger,
+    getUser: state.getUserById.getUser,
+
   });
   
-  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  const mapDispatchToProps = dispatch => bindActionCreators({ getCategorysDataById, getUsersDataById }, dispatch);
   
   export default CategoryStaffInfo = connect(
         mapStateToProps,

src/container/Header.js

@@ -11,31 +11,32 @@ import { bindActionCreators } from "redux";
 
 class Header extends Component {
 
-    render() { 
+    render() {
         const { inputData, searchStaff, changeInputValue, name, getUser, id } = this.props
         return (
             <div className="header">
-               <HeaderLogo />
-               <SearchLine inputData={inputData}
+                <HeaderLogo />
+                <SearchLine inputData={inputData}
                     searchStaff={searchStaff}
-                    changeInputValue={changeInputValue} 
+                    changeInputValue={changeInputValue}
+                />
+                <Myprofile name={name}
+                    getUser={getUser}
+                    id={id}
                 />
-                <Myprofile name = {name} getUser={ getUser } id={ id } />
-
             </div>
         );
     }
 }
 
 const mapStateToProps = state => ({
-        inputData: state.searchStaff.inputData,
-        isFetching: state.searchStaff.isFetching,
-        
-  });
-  
-  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions, getUsersData }, dispatch);
-  
-  export default Header = connect(
-        mapStateToProps,
-        mapDispatchToProps
-  )(Header);
+    inputData: state.searchStaff.inputData,
+    isFetching: state.searchStaff.isFetching,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions, getUsersData }, dispatch);
+
+export default Header = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Header);

src/container/MainPage.js

@@ -29,7 +29,26 @@ class MainPage extends Component {
     }
 
     render() {
-
+        // const axios = require('axios')
+        // axios.post(
+        //             'http://127.0.0.1:2000/api/staffs',
+        //             {
+        //                 "title": "Авто",
+        //                 "description": "Током бахнет!",
+        //                 "staff": "Стаф. Не знаю, что вы хотите тут, но я сделал",
+        //                 "price": 4,
+        //                 "state": 1,
+        //                 "img": "http://site.com",
+        //                 "userId":  1,
+        //                 "categoryId": 4
+        //             }
+                    
+        //         )
+                
+        //         .then(function (response) { console.log(response) })
+        //         .catch((err)=>console.log(err))
+      
+        
         const { inputStaffs, isFetching, getUser } = this.props
         const {  name, isAdmin, id } = this.props
 

src/container/MainPageStaffInfo.js

@@ -26,11 +26,13 @@ class MainPageStaffInfo extends Component {
             const { getUser } = this.props
         return (
             <Fragment>
+
                 <Header getUser={ getUser } />
                 <div className="menuAndContent">
                     <LeftMenu getUser={ getUser }/>
                     <FullInfoAboutStaff {...this.props} />
                 </div>
+
             </Fragment>
         );
     }

src/container/SearchStaff.js

@@ -1,7 +1,9 @@
 import React, { Component, Fragment } from 'react';
+
 import { connect } from 'react-redux';
 import { searchStaff } from "../actions/searchStaffAction";
 
+
 import { getUsersDataById } from "../actions/getUserById"
 
 import { bindActionCreators } from "redux";
@@ -31,13 +33,14 @@ class SearchStaff extends Component {
         const { getUser } = this.props
 
         console.log(this.props)
-        return (
-            <Fragment>
-                <Header getUser={getUser} />
-                <div className="menuAndContent">
-                    <LeftMenu getUser={getUser} />
-                    <SearchStaffsPage {...this.props} />
-                </div>  
+
+        return ( 
+          <Fragment>
+          <Header  getUser={ getUser } />
+          <div className="menuAndContent">
+              <LeftMenu    getUser={ getUser }/>
+              <SearchStaffsPage {...this.props} />
+          </div>
           </Fragment>       
         );
     }

src/container/UserProfile.js

@@ -36,19 +36,30 @@ class UserProfile extends Component {
         }
     }
     render() {
-        console.log(this.props)
+
         const { getUser } = this.props
         const { staffs } = this.props.getUser
+
         return (
+
             <Fragment>
-                <Header getUser={ getUser } />
+                <Header getUser={getUser} />
                 <div className="menuAndContent">
-                    {staffs !== undefined && <div className="profil"><h2>{getUser.name}</h2>
-                        {staffs.map((el, key) => <div key={key}> {el.title} </div>)}
-                        <button onClick={this.singOut}><Link to="/">Выход</Link></button>
-                    </div>}
+                    <div className="profil">
+                        <h2>{getUser.name}</h2>
+                        <div className="profilData">
+                            <p>{getUser.login}</p>
+                            <p>{getUser.email}</p>
+                            <p>{getUser.phone}</p>
+                            <div className="buttonConteiner">
+                                <Link to="/activeStaffs"><button className="profilLink">Активные Товары</button></Link>
+                                <button className="profilBtn" onClick={this.singOut}><Link to="/">Выход</Link></button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </Fragment>
+
         );
     }
 }

src/container/activeStaffs.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+
+import { getUsersDataById } from "../actions/getUserById"
+import { deleteStaffById } from "../actions/getStaffByIdAction"
+import { Link } from "react-router-dom";
+import { Menu, Icon, Carousel } from 'antd';
+import { connect } from 'react-redux';
+
+import { bindActionCreators } from "redux";
+
+import Header from '../container/Header'
+
+const axios = require('axios')
+
+class activeStaffs extends Component {
+
+    componentDidMount() {
+        const { getUsersDataById } = this.props
+
+        let localS = JSON.parse(localStorage.getItem("login"));
+        if (localS === null) {
+
+        }
+        else {
+            getUsersDataById(localS)
+        }
+    }
+    deleteStaff = (id) => {
+        axios.delete(`http://127.0.0.1:2000/api/staffs`, id).then(res => console.log(res))
+    }
+    render() {
+
+        const { getUser, deleteStaffById } = this.props
+        const { name, isAdmin, id } = this.props
+        const { staffs } = getUser
+
+        return (
+            <div >
+                <Header name={name} getUser={getUser} id={id} />
+
+                <div className="menuAndContent">
+                    <div className="contentStaffs">
+                        <div className="staffs">
+                            {staffs !== undefined && staffs.reverse().map((el, key) => <div className="staff" key={key}>
+                                {el.state ? <img src={el.img.substr(0, 53)} width="325" height="190" className="imgStaff" alt="lorem" /> : <img src={el.img} width="325" height="190" className="imgStaff" alt="lorem" />}
+                                <div className="titlleAndPrice">
+                                    <h4>{el.title}</h4>
+                                    <h4>Цена: {el.price}</h4>
+                                </div>
+                                <div className="titlleAndPrice">
+                                    <Link to={`/activeStaffs/${el.id}`} className="allMyStaff">
+                                        <Icon type="edit" style={{ fontSize: '30px' }} />
+                                    </Link>
+                                    <button className="Exit" onClick={() => this.deleteStaff(el.id)} >
+                                        <Icon type="delete" style={{ fontSize: '30px' }} />
+                                    </button>
+                                </div>
+                            </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    getUser: state.getUserById.getUser,
+    params: state.getUserById.params,
+
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ getUsersDataById, deleteStaffById }, dispatch);
+
+export default activeStaffs = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(activeStaffs);

src/container/redactorForm.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import { getUsersDataById } from "../actions/getUserById"
+import { getCategoriesData } from '../actions/categoryAction';
+import { getStaffsDataById } from "../actions/getStaffByIdAction"
+import { pushPhoto, inputchangeHandler, inputchangeHandler1, inputchangeHandler2, inputchangeHandler3, EditStaffAction } from "../actions/addNewStaffAction"; 
+import FormRedactorStaff from '../components/FormsAdd/redForm'
+
+import { connect} from 'react-redux';
+import { bindActionCreators } from "redux";
+
+class redactorForm extends Component {
+    // componentDidUpdate(prevProps){
+    //     const {getStaffsDataById, match } = this.props
+    //     console.log(prevProps.match.params.id, match.params.id)
+    //     if(prevProps.match.params.id !==match.params.id ){
+    //         getStaffsDataById(match.params.id)
+    //     }
+    // }
+    componentDidMount(){
+        const { getStaffsDataById, match, getUsersDataById } = this.props
+        getStaffsDataById(match.params.id)
+            this.props.getCategoriesData();
+            let localS = JSON.parse(localStorage.getItem("login"));
+        if(localS===null){
+        }
+        else{
+            getUsersDataById(localS)
+        }     
+
+    }
+    render() {
+        const { allCategory } = this.props
+        let data; 
+        if (allCategory.data===undefined){
+            data = []
+        }
+        else{ 
+            const category = allCategory.data.filter(el => el.parentId !== 0)
+            data = <FormRedactorStaff {...this.props}/>
+        }
+       
+        return (
+            <div>
+              {data}  
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    allCategory: state.category.allCategory,
+    InfoStaff: state.staffById.infoStaffs,
+    isFetching: state.staffById.isFetching,
+    getUser: state.getUserById.getUser,
+    photo: state.addStaff.photo,
+    inputData: state.addStaff.inputData,
+    inputData1: state.addStaff.inputData1,
+    inputData2: state.addStaff.inputData2,
+    inputData3: state.addStaff.inputData3
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({ getUsersDataById, getStaffsDataById, getCategoriesData, pushPhoto, inputchangeHandler, inputchangeHandler1, inputchangeHandler2, inputchangeHandler3, EditStaffAction }, dispatch);
+  
+  export default redactorForm = connect(
+        mapStateToProps,
+        mapDispatchToProps
+  )(redactorForm);

src/container/renderAuthorisation.js

@@ -1,16 +1,18 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { bindActionCreators } from "redux";
 import { connect} from 'react-redux';
 
 import Form from "../components/Auth/authorisation";
+import LinkHome from "../components/Btn/linkHome"
 import { getUsersData } from "../actions/usersAuthActions";
 
 class RenderAuthorisation extends Component {      
     render() {
       return (
-        <div>
+        <Fragment>
+          <LinkHome />
           <Form {...this.props} />
-        </div>       
+        </Fragment>       
       );
     }
 }

src/container/renderRegistration.js

@@ -2,13 +2,16 @@ import React, { Component, Fragment } from "react";
 import { bindActionCreators } from "redux";
 import { connect } from 'react-redux';
 
-import RegistrForm from "../components/Auth/registration";
 import * as actions from "../actions/usersRegistrActions";
 
+import RegistrForm from "../components/Auth/registration";
+import LinkHome from "../components/Btn/linkHome"
+
 class RenderRegistration extends Component {
     render() {
         return (
             <div className="formdiv">
+                <LinkHome />
                 <RegistrForm {...this.props} />
             </div>
         );

src/reducer/addStaff.js

@@ -1,15 +1,28 @@
 import * as types from '../constants/actionTypes';
 
 const initState = {
+    addOrnot: false,
+    addOrnot1: false,
+    addOrnot2: false,
+    addOrnot3: false,
+    base64Photo: "",
+    base64Photo1: "",
+    base64Photo2: "",
+    base64Photo3: "",
+    inputData: '',
+    inputData1: '',
+    inputData2: null,
+    inputData3: null,
     staffData: [],
     photo: [],
+    editData: [],
     isFetching: false,
     error: null,
     showModal: false
 }
 
 export default ( state = initState, { type, payload } ) => {
-    console.log(payload)
+    
     switch (type){
         case types.ADD_NEW_STAFF_REQUEST: {
             return {
@@ -61,6 +74,96 @@ export default ( state = initState, { type, payload } ) => {
                 
             }
         }
+        case types.INPUT_CHANGE_VALUE: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "error",
+                inputData: payload
+                
+            }
+        }
+        case types.INPUT_CHANGE_VALUE1: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "error",
+                inputData1: payload
+                
+            }
+        }
+        case types.INPUT_CHANGE_VALUE2: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "error",
+                inputData2: payload
+                
+            }
+        }
+        case types.INPUT_CHANGE_VALUE3: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "error",
+                inputData3: payload
+                
+            }
+        }
+        case types.EDIT_STAFF_REQUEST: {
+            return {
+                ...state,
+                isFetching: true
+            }
+        }
+        case types.EDIT_STAFF_REQUEST_SUCCESS: {
+            return {
+                ...state,
+               
+                isFetching:false,
+                showModal: true
+            }
+        }
+        case types.EDIT_STAFF_REQUEST_FAIL: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "error",
+                showModal: true
+            }
+        }
+        case types.BASE_64_REQUEST: {
+            return {
+            ...state,
+            isFetching: false,
+            base64Photo: payload,
+            addOrnot: true
+            }
+          }
+          case types.BASE1_64_REQUEST: {
+            return {
+            ...state,
+            isFetching: false,
+            base64Photo1: payload,
+            addOrnot1: true
+            }
+          }
+          case types.BASE2_64_REQUEST: {
+            return {
+            ...state,
+            isFetching: false,
+            base64Photo2: payload,
+            addOrnot2: true
+            }
+          }
+          case types.BASE3_64_REQUEST: {
+            return {
+            ...state,
+            isFetching: false,
+            base64Photo3: payload,
+            addOrnot3: true
+            }
+          }
          default: return state;
     }
 }

src/reducer/category.js

@@ -24,7 +24,8 @@ export default (state = initState, { type, payload }) => {
                 ...state,
                 isFetching: false,
                 allCategory: payload,
-                mainCategory: payload.data.filter(el => el.parentId === 0)
+                mainCategory: payload.data.filter(el => el.parentId === 0),
+                podcategory: payload.data.filter(el => el.parentId === 0),
             }
         }
 

src/router.js

@@ -4,10 +4,6 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from "redux";
 
 
-
-
-
-
 import MainPage from "./container/MainPage";
 
 import RenderAuthorisation from "./container/renderAuthorisation"
@@ -18,15 +14,13 @@ import SearchStaffs from './container/SearchStaff'
 import SearchStaffsInfo from './container/SearchStaffsInfo'
 import AddNewStaff from './container/AddNewStaff'
 import AddNewCategory from './container/AddNewCategory'
-
+import ActiveStaffs from './container/activeStaffs'
+import redactorForm from './container/redactorForm'
 // import Form from './components/Auth/index'
 // import RegistrForm from './components/Auth/registration'
 // 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"
@@ -42,7 +36,7 @@ class Router extends Component {
        const { inputData, trig, params} = this.props
       
        return (
-    <div>
+    <Fragment>
 	    <Switch>
             <PrivateRoute path="/"   data= { inputData } params = {params} exact component={MainPage} />
             {/* <Route path="/" exact component={MainPage} /> */}
@@ -56,8 +50,11 @@ class Router extends Component {
                 <Route path="/search/Staff/:id" exact component={SearchStaffsInfo} />
             <Route path="/newStaff" exact component={AddNewStaff} />
             <Route path="/addCategory" exact component={AddNewCategory} />
+            <Route path="/activeStaffs" exact component={ ActiveStaffs } />
+            <Route path="/activeStaffs/:id" exact component={ redactorForm } />
+           
 	    </Switch>
-    </div>
+    </Fragment>
        )
    }
 

src/style/base/_base.scss

@@ -7,7 +7,7 @@
 }
 body{
 	min-width: 980px;
-	max-width: 1400px;
+	max-width: 1520px;
 	width: 100%;
 	margin: 0 auto ;
 	background: $color-backgtound;

src/style/components/_allStaff.scss

@@ -6,7 +6,6 @@
         width: 100%;
         padding: 10px;
     }
-
     .staffs{
         margin: 0 auto;
         display: flex;
@@ -14,7 +13,6 @@
         align-content: center; 
         flex-wrap: wrap;
     }
-
     .staff{
         width: 350px;
         height: 250px;
@@ -39,11 +37,11 @@
 
         }    
     }
-
     .imgStaff{
         width: 100%;
         height: 80%;
         padding: 5px ;
+        border-radius: 15px;
        
     }
     .staffinfo{
@@ -235,6 +233,14 @@
   .ant-carousel .slick-slide h3 {
     color: #fff;
   }
-
+.divCenter{
+    width: 55%;
+    margin: 0 auto;
+}
+.flex-around{
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+}
  
 

src/style/components/_form.scss

@@ -1,24 +1,43 @@
+// All Form 
 .formdiv{
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
-	font-size: 20px;
+	  font-size: 20px;
     background-image: url("../img/depositphotos_80275194-stock-illustration-russian-old-fair-bazaar-vector.jpg");
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover; 
     
-    .form {
+    .form{
+      box-sizing: border-box;
+      width: 500px;
+      box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+      padding: 1px 0 40px 0;
+      border-radius: 3px;
+      background-color: rgba(247, 240, 240, 0.7);
+    }
+
+    .formAuth {
         box-sizing: border-box;
-        width: 500px;
+        width: 625px;
         box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
-        padding-bottom: 40px;
+        padding: 1px 0 40px 0;
         border-radius: 3px;
         background-color: rgba(247, 240, 240, 0.7);
         
     }
+    
+    .formRegistr {
+      box-sizing: border-box;
+      width: 625px;
+      box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+      padding: 1px 0 40px 0;
+      border-radius: 3px;
+      background-color: rgba(247, 240, 240, 0.7);
+  }
 
     .input {
         margin: 20px auto;
@@ -29,8 +48,8 @@
         border-bottom: solid 1px $color;
         transition: all 0.3s cubic-bezier(.64,.09,.08,1);
         background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
-        background-position: -400px 0;
-        background-size: 400px 100%;
+        background-position: -500px 0;
+        background-size: 500px 100%;
         background-repeat: no-repeat;
         color: darken($color, 1%);
         &:focus {
@@ -44,6 +63,7 @@
                 visibility: visible !important;
             }
         }
+
         option{
             background: rgba(247, 240, 240, 0.7);
             border-radius: 3px;
@@ -51,6 +71,7 @@
         select::-ms-expand { /* for IE 11 */
             appearance: none;
         }
+        
     }
     
     .textarea {
@@ -90,26 +111,8 @@
         display: flex;
         justify-content: center;
     }
-
-    .button {
-        border: none;
-        background: $color;
-        cursor: pointer;
-        border-radius: 3px;
-        padding: 6px;
-        margin: 10px 30px;
-        width: 80%;
-        color: white;
-        margin-left: 25px;
-        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
-        &:hover { 
-          transform: translateY(-3px);
-          box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
-        }
-    }
-
 }
-
+  
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
   -webkit-appearance: none; 
@@ -117,11 +120,11 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .upload-zone {
-    padding: 3px;
-    cursor: pointer;
-    position: absolute;
-    left: 33%;
-    top: 60%;
+  padding: 3px;
+  cursor: pointer;
+  position: absolute;
+  left: 38%;
+  top: 70%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
@@ -137,8 +140,18 @@ input[type=number]::-webkit-outer-spin-button {
     -moz-transition: 0.3s;
     -o-transition: 0.3s;
     transition: 0.3s;
-  }
-  .upload-zone:before {
+    img{
+      position: absolute;
+      width: 75px;
+      height: 75px;
+      bottom: 6px;
+      border-radius: 15px;
+      left: 3px;
+      top: 3px;
+    }
+}
+
+.upload-zone:before {
     display: block;
     width: 80px;
     height: 80px;
@@ -156,88 +169,269 @@ input[type=number]::-webkit-outer-spin-button {
     -moz-transition: 0.3s;
     -o-transition: 0.3s;
     transition: 0.3s;
-  }
-  .upload-zone:hover {
+}
+
+.upload-zone:hover {
     background: $color;
-  }
-  .upload-zone:hover:before {
+}
+
+.upload-zone:hover:before {
     border-color: #fff;
-  }
-  .upload-zone:hover i:before, .upload-zone:hover i:after {
-    background: #fff;
-  }
-  .upload-zone i {
-    display: block;
-    width: 20%;
-    height: 20%;
-    -webkit-border-radius: 50%;
-    -ms-border-radius: 50%;
-    -moz-border-radius: 50%;
-    -o-border-radius: 50%;
-    border-radius: 50%;
+}
+
+.upload-zone:hover i:before, .upload-zone:hover i:after {
+  background: #fff;
+}
+  
+.upload-zone i {
+  display: block;
+  width: 20%;
+  height: 20%;
+  -webkit-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -webkit-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -o-transition: 0.3s;
+  transition: 0.3s;
+
+  img{
     position: absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    -webkit-transition: 0.3s;
-    -ms-transition: 0.3s;
-    -moz-transition: 0.3s;
-    -o-transition: 0.3s;
-    transition: 0.3s;
+    width: 75px;
+    height: 75px;
+    bottom: 6px;
+    border-radius: 15px;
+    left: 6px;
   }
-  .upload-zone i:before, .upload-zone i:after {
+}
+  
+.upload-zone i:before, .upload-zone i:after {
+  background: $color;
+  top: 50%;
+  left: 50%;
+  content: " ";
+  display: block;
+  -webkit-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -o-transition: 0.3s;
+  transition: 0.3s;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.upload-zone i:before {
+  width: 100%;
+  height: 3px;
+}
+  
+.upload-zone i:after {
+  width: 3px;
+  height: 100%;
+}
+
+.upload-zone input[type='file'] {
+  display: none;
+}
+  
+.zone2{
+  left: 46%;
+  top: 70%;
+}
+  
+.zone3{
+  left: 54%;
+  top: 70%;
+}
+
+.zone4{
+  left: 62%;
+  top: 70%;
+}
+   
+//Page auth
+  
+  .buttonAuth {
+    border: none;
     background: $color;
-    top: 50%;
-    left: 50%;
-    content: " ";
-    display: block;
-    -webkit-border-radius: 4px;
-    -ms-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -o-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-transition: 0.3s;
-    -ms-transition: 0.3s;
-    -moz-transition: 0.3s;
-    -o-transition: 0.3s;
-    transition: 0.3s;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-  }
-  .upload-zone i:before {
-    width: 100%;
-    height: 3px;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 20px;
+    width: 50%;
+    color: white;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    &:hover { 
+      transform: translateY(-3px);
+      box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+    }
   }
-  .upload-zone i:after {
-    width: 3px;
-    height: 100%;
+  .buttonInAuth {
+    border: none;
+    background: $color;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 5px;
+    width: 50%;
+    color: white;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    &:hover { 
+      transform: translateY(-3px);
+      box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+    }
+    .colorLink{
+      text-decoration: none;
+      color: white;
+    }
   }
-  .upload-zone input[type='file'] {
-    display: none;
+  .center{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
   }
   
-   .zone2{
-    left: 43%;
-    top: 60%;
+  //Page registrateon
+
+  .buttonInRegistration {
+    border: none;
+    background: $color;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 7px;
+    width: 40%;
+    color: white;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    &:hover { 
+      transform: translateY(-3px);
+      box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+    }
+    .colorLink{
+      text-decoration: none;
+      color: white;
+    }
+  }
+  .divName{
+    margin: 0 40px;
+    display: flex;
+    justify-content: space-between;
+
   }
-  .zone3{
-    left: 53%;
-    top: 60%;
+  .inputName{
+    width: 90%;
   }
-  .zone4{
-    left: 63%;
-    top: 60%;
+
+  .form__input-box{
+    span{
+      color: red;
+      position: relative;
+      left: 160px;
+      bottom: 85px;
+    }
   }
-  .auth__button{
+  //all
+  
+  .linkTopButton{
+    position:fixed;
+    top:20px;
+    left:50px;  
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    display: block;
+    width: 50px;
+    height: 50px;
+    line-height:50px;
+    text-align:center;
+    color: #fff;
+    border: none;
+    box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 #FD7F71;
+    border-radius: 25px;
+    background: #FD7F71;
+    cursor: pointer;
+    transform: translate3d(0, 0, 0);
+    animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover > i {
+        color:#fff;
+        text-shadow: 3px 3px 3px rgba(0,0,0,.35);
+      }
+      &:focus > i {
+        color:#fff;
+      }
+      @keyframes pulse {
+        to {
+          box-shadow: 0 0 0 12px transparent, 0 0 0 24px rgba(227, 115, 14, 0);
+        }
+      }
     
-  }
+}
+  // .button {
+    //   border: none;
+    //   background: $color;
+    //   cursor: pointer;
+    //   border-radius: 3px;
+    //   padding: 6px;
+    //   margin-bottom: 10px;
+    //   width: 80%;
+    //   color: white;
+    //   margin-left: 25px;
+    //   box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    //   &:hover { 
+      //     transform: translateY(-3px);
+      //     box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+      //   }
+      // }
+      // .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;
+          //   }
+          
+          .button {
+              border: none;
+              background: $color;
+              cursor: pointer;
+              border-radius: 3px;
+              padding: 6px;
+              margin: 10px 30px;
+              width: 90%;
+              color: white;
+              margin-left: 25px;
+              box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+              &:hover { 
+                transform: translateY(-3px);
+                box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+              }
+          }

src/style/components/_header.scss

@@ -1,5 +1,6 @@
 .header {
 	display:flex;
+	
 
 	&__logo {
 		width: 20%;
@@ -127,4 +128,4 @@
       	width: 32px;
 		height: 32px; 
 	} 
-}
+}

src/style/components/_leftMenu.scss

@@ -1,37 +1,19 @@
 .ant-layout-sider-children{
-    background: $el-color;  
+    background: $el-color; 
+    height: 110%; 
 }
 .ant-menu-submenu-title{
-    background: $el-color;  
+    font-size: 20px;
+    background: $el-color; 
+    margin: 0;
+        &:hover {
+            background: rgb(223, 111, 98);
+            margin: 0;
+        }
 }
 .ant-menu-dark{
-    color: rgba(255, 255, 255, 0.9);
-    background: $el-color;
-
-    &:hover {
-        background: rgb(223, 111, 98);
-    }
-}
-
-.ant-menu .ant-menu-sub .ant-menu-inline{
     background: $el-color;
-    // color: rgba(255, 255, 255, 0.9);
-
-    & a :hover{
-        background: rgb(223, 111, 98);
-    }
-
-    .ant-menu-item{
-        background: $el-color;
-        color: rgba(255, 255, 255, 0.9);
-        
-        .ant-menu-item:hover {
-            background: #f0f0f0;
-        }
-    }
-    
 }
-
 .ant-layout-sider-trigger {
     position: fixed;
     text-align: center;
@@ -44,10 +26,8 @@
     z-index: 1;
     transition: all 0.2s;
 }
-
 .ant-menu .ant-menu-sub .ant-menu-inline{
     & :hover{
-        background: #e06b62;
-    }
-    
-}
+        background: #db5b51d2;
+    }  
+}

src/style/components/_userProfil.scss

@@ -8,7 +8,75 @@
     color: #FD7F71;
     border-radius: 10px;
     background-color: #fff; 
+    font-size: 20px;
     h2{
         text-align: center;
     }
-}
+    .profilData{
+        width: 50%;
+        margin: 0 auto;
+    }
+    .buttonConteiner{
+        display: flex;
+        justify-content: space-around;
+    }
+    .profilLink{
+        border: none;
+        background: rgb(99, 206, 99);
+        cursor: pointer;
+        border-radius: 3px;
+        padding: 20px;
+        width: 210px;
+        color: white;
+        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+        &:hover { 
+        transform: translateY(-3px);
+        box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+        }
+    }
+    .profilBtn{
+        border: none;
+        background: rgb(207, 56, 40);
+        cursor: pointer;
+        border-radius: 3px;
+        padding: 20px;
+        width: 210px;
+        color: black;
+        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+        &:hover { 
+        transform: translateY(-3px);
+        box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+        }
+    }
+
+}
+
+.allMyStaff{
+    border: none;
+    cursor: pointer;
+    border-radius: 35px;
+    padding: 20px;
+    width: 70px;
+    color: black;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    position: relative;
+    top: -12em;
+    &:hover { 
+        background: rgb(99, 206, 99);
+    }
+}
+.Exit{
+    border: none;
+    background: rgba(216, 216, 216, 0.5);
+    cursor: pointer;
+    border-radius: 35px;
+    padding: 20px;
+    width: 70px;
+    color: black;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
+    position: relative;
+    top: -12em;
+    &:hover { 
+        background: rgb(207, 56, 40);    
+    }
+}