2 Revize b0819b0eea ... 442eff56c2

Autor SHA1 Zpráva Datum
  Vlad 442eff56c2 fix2 před 5 roky
  Vlad 81e41e87d4 leftMenu před 5 roky
37 změnil soubory, kde provedl 845 přidání a 604 odebrání
  1. 18 40
      public/index.html
  2. 34 0
      src/actions/addNewCategoryAction.js
  3. 2 0
      src/actions/addNewStaffAction.js
  4. 39 0
      src/actions/categoryAction.js
  5. 3 0
      src/actions/getStaffByIdAction.js
  6. 3 0
      src/actions/searchStaffAction.js
  7. 3 5
      src/actions/searchStaffByIdAction.js
  8. 4 2
      src/actions/staffsAction.js
  9. 5 5
      src/actions/usersAuthActions.js
  10. 10 9
      src/components/AllStaffs/FullInfoAboutStaff.js
  11. 14 16
      src/components/AllStaffs/index.js
  12. 2 2
      src/components/Auth/authButtons.js
  13. 33 29
      src/components/Auth/authorisation.js
  14. 0 38
      src/components/Auth/index.js
  15. 66 72
      src/components/Auth/registration.js
  16. 0 66
      src/components/FormAddNewStaff/SendingStaffForm.js
  17. 62 0
      src/components/FormsAdd/FormAddNewCategory/SendingCategoryForm.js
  18. 21 0
      src/components/FormsAdd/FormAddNewCategory/index.js
  19. 64 0
      src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js
  20. 5 7
      src/components/FormAddNewStaff/index.js
  21. 1 1
      src/components/Header/searchLine.js
  22. 14 55
      src/components/LeftMenu/DrawCategory.js
  23. 33 0
      src/components/LeftMenu/PodCategory.js
  24. 14 78
      src/components/LeftMenu/index.js
  25. 53 27
      src/constants/actionTypes.js
  26. 51 0
      src/container/AddNewCategory.js
  27. 28 25
      src/container/AddNewStaff.js
  28. 42 0
      src/container/LeftMenu.js
  29. 22 19
      src/container/MainPage.js
  30. 43 0
      src/reducer/addCategory.js
  31. 48 0
      src/reducer/category.js
  32. 10 2
      src/reducer/index.js
  33. 25 30
      src/reducer/staffs.js
  34. 12 19
      src/router.js
  35. 55 57
      src/style/components/_formLogin.scss
  36. 5 0
      src/style/components/auth.scss
  37. 1 0
      src/style/index.scss

+ 18 - 40
public/index.html

@@ -1,43 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-
-	<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+  	<head>
+	    <meta charset="utf-8">
+	    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	    <meta name="theme-color" content="#000000">
+	    
+	    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+		<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
+	    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	    
+	    <title>Bazar.com</title>
+  	</head>
+	  <body>
+		    <noscript>
+		      	You need to enable JavaScript to run this app.
+		    </noscript>
+		    <div id="root"></div>
+	  </body>
 </html>

+ 34 - 0
src/actions/addNewCategoryAction.js

@@ -0,0 +1,34 @@
+import * as types from '../constants/actionTypes';
+
+const axios = require('axios')
+
+const addNewCategoryRequest = payload => ({
+    type: types.ADD_NEW_CATEGORY_REQUEST,
+    payload
+})
+
+const addNewCategoryRequestSuccess = payload => ({
+    type: types.ADD_NEW_CATEGORY_REQUEST_SUCCESS,
+    payload
+})
+
+const addNewCategoryRequestFail = payload => ({
+    type: types.ADD_NEW_CATEGORY_REQUEST_FAIL,
+    payload
+})
+
+export const closeModal = payload => ({
+    type: types.CLOSE_MODAL_WINDOW,
+    payload
+})
+
+export const AddNewCategory = payload => {
+    return dispatch => {
+        dispatch(addNewCategoryRequest())
+        axios.post(`http://127.0.0.1:2000/api/categories`, payload)
+            .then(res =>
+                setTimeout(() => dispatch(addNewCategoryRequestSuccess(res)), 1000))
+            .catch(err =>
+                dispatch(addNewCategoryRequestFail(err)))
+    }
+}

+ 2 - 0
src/actions/addNewStaffAction.js

@@ -6,10 +6,12 @@ const addNewStaffRequest = payload => ({
     type: types.ADD_NEW_STAFF_REQUEST,
     payload
 })
+
 const addNewStaffRequestSuccess = payload => ({
     type: types.ADD_NEW_STAFF_REQUEST_SUCCESS,
     payload
 })
+
 const addNewStaffRequestFail = payload => ({
     type: types.ADD_NEW_STAFF_REQUEST_FAIL,
     payload

+ 39 - 0
src/actions/categoryAction.js

@@ -0,0 +1,39 @@
+import * as types from '../constants/actionTypes';
+
+const axios = require('axios');
+
+export const podCategory = (payload) => ({
+	type: types.POD_CATEGORY,
+	payload
+});
+
+const CategoryRequest = (payload) => ({
+	type: types.CATEGORY_REQUEST,
+	payload
+});
+
+const CategoryRequestSuccess = payload => ({
+	type: types.CATEGORY_REQUEST_SUCCESS,
+	payload
+});
+
+const CategoryRequestFail = payload => ({
+	type: types.CATEGORY_REQUEST_FAIL,
+	payload
+});
+
+export const getCategoriesData = () => {
+    return dispatch => {
+        dispatch(CategoryRequest());
+        return axios.get(`http://127.0.0.1:2000/api/categories`)
+            .then(res => {
+                setTimeout(() => {
+                    dispatch(CategoryRequestSuccess(res))
+                }, 1000);
+            })
+            .catch(err => {
+                dispatch(CategoryRequestFail(err));
+            })
+
+    };
+};

+ 3 - 0
src/actions/getStaffByIdAction.js

@@ -6,14 +6,17 @@ const StaffRequestById = payload => ({
 	type: types.STAFF_REQUEST_BY_ID,
 	payload
 });
+
 const StaffRequestSuccessById = payload => ({
 	type: types.STAFF_REQUEST_SUCCESS_BY_ID,
 	payload
 });
+
 const StaffRequestFailById = payload => ({
 	type: types.STAFF_REQUEST_FAIL_BY_ID,
 	payload
 });
+
 export const getStaffsDataById = (payload) => {
 	return dispatch => {
 		dispatch(StaffRequestById());

+ 3 - 0
src/actions/searchStaffAction.js

@@ -13,14 +13,17 @@ const searchStaffRequest = payload => ({
     type: types.SEARCH_STAFF_REQUEST,
     payload
 })
+
 const searchStaffRequestSuccess = payload => ({
     type: types.SEARCH_STAFF_REQUEST_SUCCESS,
     payload
 })
+
 const searchStaffrequestFail = payload => ({
     type: types.SEARCH_STAFF_REQUEST_FAIL,
     payload
 })
+
 export const searchStaff = payload => {
     return dispatch => {
         dispatch(searchStaffRequest())

+ 3 - 5
src/actions/searchStaffByIdAction.js

@@ -1,23 +1,22 @@
 import * as types from '../constants/actionTypes';
 
-
-
-
-
 const axios = require('axios')
 
 const SeacrhStaffRequestById = payload => ({
 	type: types.SEARCH_STAFF_REQUEST_BY_ID,
 	payload
 });
+
 const SeacrhStaffRequestSuccessById = payload => ({
 	type: types.SEARCH_STAFF_REQUEST_SUCCESS_BY_ID,
 	payload
 });
+
 const SeacrhStaffRequestFailById = payload => ({
 	type: types.SEARCH_STAFF_REQUEST_FAIL_BY_ID,
 	payload
 });
+
 export const getSeacrhStaffsDataById = (payload) => {
 	return dispatch => {
 		dispatch(SeacrhStaffRequestById());
@@ -30,6 +29,5 @@ export const getSeacrhStaffsDataById = (payload) => {
 			.catch(err => {
 				dispatch(SeacrhStaffRequestFailById(err));
 			})
-
 	};
 };

+ 4 - 2
src/actions/staffsAction.js

@@ -2,7 +2,6 @@ import * as types from "../constants/actionTypes";
 
 const axios = require('axios');
 
-
 export const getInfoStaffData = payload => ({
 	type: types.GET_STAFF_INFO_DATA,
 	payload
@@ -12,15 +11,18 @@ const StaffRequest = payload => ({
 	type: types.STAFF_REQUEST,
 	payload
 });
+
 const StaffRequestSuccess = payload => ({
 	type: types.STAFF_REQUEST_SUCCESS,
 	payload
 });
+
 const StaffRequestFail = payload => ({
 	type: types.STAFF_REQUEST_FAIL,
 	payload
 });
-export const getStaffsData = (payload) => {
+
+export const getStaffsData = () => {
 	return dispatch => {
 		dispatch(StaffRequest());
 		return axios.get(`http://127.0.0.1:2000/api/staffs`)

+ 5 - 5
src/actions/usersAuthActions.js

@@ -7,10 +7,10 @@ const userAuthRequest = payload => ({
     payload
 })
 
-//const userAuthRequestSuccess = payload => ({
-//type: types.USER_AUTH_REQUEST_SUCCESS,
-//    payload
-//})
+const userAuthRequestSuccess = payload => ({
+    type: types.USER_AUTH_REQUEST_SUCCESS,
+    payload
+})
 
 const userAuthRequestFail = payload => ({
     type: types.USER_AUTH_REQUEST_FAIL,
@@ -22,7 +22,7 @@ export const getUsersData = (payload) => {
         dispatch(userAuthRequest());
         return axios.get(`http://127.0.0.1:2000/api/users`)
             .then(res => {
-                console.log(res);
+                dispatch(userAuthRequestSuccess(res))
             })
             .catch(err => {
                 dispatch(userAuthRequestFail(err));

+ 10 - 9
src/components/AllStaffs/FullInfoAboutStaff.js

@@ -10,18 +10,19 @@ class FullInfoAboutStaff extends Component {
             if(isFetching===true){
                 data = <div> 
                     <Loader 
-                type="Triangle"
-                color="#1890ff"
-                height="75"	
-                width="75"
-             /> 
-             </div> 
+                        type="Triangle"
+                        color="#1890ff"
+                        height="75"	
+                        width="75"
+                    /> 
+                </div> 
             }
             else {
                 data = InfoStaff.map((el,key)=>(
-                <div className="staff" key={key}> {el.title} {el.price} {el.description} {el.img} </div>
-                                                )
-                                    )
+                    <div className="staff" key={key}>
+                        {el.title} {el.price} {el.description} {el.img} 
+                    </div>)
+                )
             }
         return (
 

+ 14 - 16
src/components/AllStaffs/index.js

@@ -10,27 +10,25 @@ class AllStaffs extends Component {
         const { inputStaffs, isFetching } = this.props
         let data;
             if(isFetching===true){
-
-                data = <div className="loader"> 
-                    <Loader 
-                type="Triangle"
-                color="#FD7F71"
-                height="100"	
-                width="100"
                 
-             /> 
-             </div> 
+                data = <div className="loader"> 
+                    <Loader type="Triangle"
+                        color="#FD7F71"
+                        height="100"	
+                        width="100"
+                    /> 
+                </div> 
             }
             else{
                 data = <div className="staffs">
                     {inputStaffs.map((el,key)=>(
-                    <Link to={`/staff/${el.id}`}  key={key}>
-                    <div className="staff"> {el.title} {el.price}</div>
-                    </Link> 
-                                                )
-
-                                    )}    
-                      </div>
+                        <Link to={`/staff/${el.id}`} key={key}>
+                            <div className="staff">
+                                {el.title} {el.price}
+                            </div>
+                        </Link> 
+                    ))}    
+                </div>
             }
         return (
 

+ 2 - 2
src/components/Auth/authButtons.js

@@ -5,8 +5,8 @@ class Authbuttons extends Component {
   render() {
     return (
         <div className="auth__button">
-          <Link to="/auth">Войти</Link>
-          <Link to="/registration">Зарегистрироваться</Link>
+          <Link className="Link" to="/auth">Войти</Link>
+          <Link className="Link" to="/registration">Зарегистрироваться</Link>
         </div>
     )
   }

+ 33 - 29
src/components/Auth/authorisation.js

@@ -1,39 +1,43 @@
 import React from "react";
 import { reduxForm, Field } from "redux-form";
 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 } = props
-  const submit = (values) => { 
-    getUsersData(values);
-  }
+    const { handleSubmit, getUsersData, pristine } = props
+    const submit = (values) => {
+        getUsersData(values);
+    }
     return (
-      <div>
-        <Authbuttons />
-        <form className="auth__form" onSubmit={handleSubmit(submit)}>
-          <div>
-            <Field
-              name="email"
-              component={authRenderField}
-              type="Емейл" 
-              placeholder="email@example.com"
+        <div className="formdiv">
+            <Authbuttons />
+            <form className="form" onSubmit={handleSubmit(submit)}>
+                <div>
+                    <Field
+                        name="email"
+                        component={authRenderField}
+                        type="Емейл"
+                        placeholder="email@example.com"
+                        className="input"
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="password"
+                        component={authRenderField}
+                        type="password"
+                        placeholder="Пароль"
+                        className="input"
+                    />
+                </div>
+                <button className="auth__submit-button">Войти</button>
+            </form>
+        </div>
 
-            />
-          </div>
-          <div>  
-            <Field
-              name="password"
-              component={authRenderField}
-              type="password" 
-              placeholder ="Пароль"  
-            />
-          </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>

+ 0 - 38
src/components/Auth/index.js

@@ -1,38 +0,0 @@
-import React from "react";
-import { reduxForm, Field } from "redux-form";
-import  authValidate  from "../../utils/validate";
-
-const Form = props => {
-
-  	const { handleSubmit } = props
-    	return (
-      		<div className="formdiv">
-				<form className="form" onSubmit={handleSubmit}>
-					<h1>Material Design Text Input With No Extra Markup</h1>
-				
-					<Field
-						name="email"
-						component="input"
-						type="email" 
-						
-						placeholder="example@email.com"
-						className="input"
-					/>
-					
-					<Field
-						name="password"
-						component="input" 
-						type="password" 
-						placeholder ="password"
-						className="input"  
-					/>
-					
-					<button className="button">Submit</button>
-				</form>	  
-      		</div>
-      
-    	);
-
-}
-
-export default reduxForm({ form: "authForm", validate: authValidate })(Form);

+ 66 - 72
src/components/Auth/registration.js

@@ -1,86 +1,80 @@
 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'
+import { regValidate } from '../../utils/regValidate'
+import { regRenderField } from '../../common/regRenderField'
 
 
 
 const RegistrForm = props => {
 
-  const { handleSubmit, pristine, reset, postUsersData } = props
-  const submit = (values) =>{
-    values.avatar = "https://site.com"
-    values.isAdmin = 1
-    values.description = "gfdfgdgdf"
-    postUsersData(values)
-  
-}
-  return (
-    <div>
-      <Authbuttons />
-      <form onSubmit={handleSubmit(submit)} className="form">
+    const { handleSubmit, pristine, reset, postUsersData } = props
+    const submit = (values) => {
+        values.avatar = "https://site.com"
+        values.isAdmin = 1
+        values.description = "gfdfgdgdf"
+        postUsersData(values)
+
+    }
+    return (
         <div>
-          <div>
-            <Field
-              name="login"
-              component={regRenderField}
-              type="text"
-              placeholder="Логин"
-              className="input"
-            />
-          </div>
+            <Authbuttons />
+            <form onSubmit={handleSubmit(submit)} className="form">
+                <div>
+                    <div>
+                        <Field
+                            name="login"
+                            component={regRenderField}
+                            type="text"
+                            placeholder="Логин"
+                            className="input"
+                        />
+                    </div>
 
-          <div>
-            <Field
-              name="password"
-              component={regRenderField}
-              type="password"
-              placeholder="Пароль"
-              className="input"
-              />
-          </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>
-        </div>
-        <div>
-          <button type="submit" disabled={pristine} className="button">
-            Отправить
-          </button>
-          <button type="button" disabled={pristine} onClick={reset} className="button">
-            Очистить поля
-          </button>
-        </div>
-        </form>
-      </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>
+                </div>
+            </form>
+        </div >
 
-  )
+    )
 }
 
-export default reduxForm({ form: 'registrForm', validate: regValidate})(RegistrForm)
+export default reduxForm({ form: 'registrForm', validate: regValidate })(RegistrForm)

+ 0 - 66
src/components/FormAddNewStaff/SendingStaffForm.js

@@ -1,66 +0,0 @@
-import React from 'react'
-import { Field, reduxForm } from 'redux-form'
-
-
-
-
-const SendingForm = props => {
-  const { handleSubmit, pristine, reset, submitting, AddNewStaff } = props
-  const submit = values => {
-   values.img = "http://site.com"
-   values.staff = "Машина"
-   values.state = 1
-   values.userId = 1
-   values.categoryId = 1
-   AddNewStaff(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="price"
-            component="input"
-            type="number"
-            placeholder="Цена"
-          />
-        </div>
-      </div>
-      <div>
-        <button type="submit" disabled={pristine || submitting}>
-          Submit
-        </button>
-        <button type="button" disabled={pristine || submitting} onClick={reset}>
-          Clear Values
-        </button>
-      </div>
-      </form>
-  )
-}
-
-export default reduxForm({
-  form: 'SendingForm'
-})(SendingForm)

+ 62 - 0
src/components/FormsAdd/FormAddNewCategory/SendingCategoryForm.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form'
+
+
+
+
+const SendingForm = props => {
+    const { handleSubmit, pristine, reset, submitting, AddNewCategory } = 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>
+            </div>
+            <div>
+                <button type="submit" disabled={pristine || submitting}>
+                    Submit
+        </button>
+                <button type="button" disabled={pristine || submitting} onClick={reset}>
+                    Clear Values
+        </button>
+            </div>
+        </form>
+    )
+}
+
+export default reduxForm({
+    form: 'SendingForm'
+})(SendingForm)

+ 21 - 0
src/components/FormsAdd/FormAddNewCategory/index.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import MDSpinner from "react-md-spinner";
+
+import Form from '../FormAddNewCategory/SendingCategoryForm'
+
+class FormAddNewStaff extends Component {
+    render() {
+        
+        const { isFetching, AddNewCategory } = this.props
+        
+        return (
+            <div>
+               <Form AddNewCategory={AddNewCategory} />
+               {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
+            </div>
+        );
+    }
+}
+
+export default FormAddNewStaff;

+ 64 - 0
src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Field, reduxForm } from 'redux-form';
+import { Link } from "react-router-dom";
+
+const SendingForm = props => {
+    const { handleSubmit, pristine, reset, submitting, AddNewStaff } = props
+    
+    const submit = values => {
+        values.img = "http://site.com"
+        values.staff = "Машина"
+        values.state = 1
+        values.userId = 1
+        values.categoryId = 1
+        AddNewStaff(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="price"
+                        component="input"
+                        type="number"
+                        placeholder="Цена"
+                    />
+                </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>
+            </div>
+        </form>
+    )
+}
+
+export default reduxForm({
+    form: 'SendingForm'
+})(SendingForm)

+ 5 - 7
src/components/FormAddNewStaff/index.js

@@ -4,20 +4,18 @@ import MDSpinner from "react-md-spinner";
 
 import Form from '../FormAddNewStaff/SendingStaffForm'
 
-class FormAddNewStaff extends Component {
+class FormAddNewCategory extends Component {
     render() {
-        console.log(this.props)
-        const { staffData, isFetching } = this.props
+        
+        const { isFetching, AddNewStaff } = this.props
         
         return (
             <div>
-               <Form {...this.props}/>
+               <Form AddNewStaff={AddNewStaff} />
                {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
-                {staffData.map((el,key)=>(<div key={key}> {el.description} {el.title} </div>))}
- 
             </div>
         );
     }
 }
 
-export default FormAddNewStaff;
+export default FormAddNewCategory;

+ 1 - 1
src/components/Header/searchLine.js

@@ -72,7 +72,7 @@ import { Link } from "react-router-dom";
 class SearchLine extends Component {
     
     changeHandler = (e)=>{
-            const { changeInputValue, inputData, searchStaff } = this.props
+            const { changeInputValue, searchStaff } = this.props
             changeInputValue(e.target.value)
              searchStaff(e.target.value)
             

+ 14 - 55
src/components/LeftMenu/DrawCategory.js

@@ -1,68 +1,27 @@
 import React, {Component} from 'react'
 import { Menu, Icon } from 'antd';
-  
-const SubMenu = Menu.SubMenu;
-
-const axios = require('axios');
 
+import PodCategory from './PodCategory'
 
+const SubMenu = Menu.SubMenu;
 
 class DrawCategory extends Component {
-    constructor(props){
-        super(props)
-        this.data = []
-        this.caty= []
-        this.fil = []
-    }
-
-    // onChange = ()=>{
-    //     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))
-    // }
-    
-    // onChange1 = ()=>{
-    //     axios.get('http://127.0.0.1:2000/api/staffs')
-    //     .then(function (response) { console.log(response.data) })
-    // }
 
     render(){
-        
-        axios.get('http://127.0.0.1:2000/api/categories')
-        .then((response) => this.data = response.data);
-        this.caty = this.data.filter(el => el.parentId === 0)
-        
 
-        console.log(this.caty)
-        console.log(this.fil)
+        const { allCategory, mainCategory } = this.props;
+        
         return (
-            <div>
-                {this.caty.map((el,key)=>
-                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">    
-
-                        <SubMenu key="sub1"
-                            title={<span key={key}><Icon type={el.description} /><span >{el.title}</span></span>}
-                        >   
-                            {
-                                //  this.fil = this.data.filter(el => {
-                                //     el.parentId === this.caty.id 
-                                //     console.log(this.fil)
-                                // })
-                                // this.fil.map((el,key)=>
-                                    // <Menu.Item key="5" key={key}>{el.title}</Menu.Item>
-                                // )
-                            }
-                        </SubMenu>
-                        
+            <div >
+                {mainCategory.map((el,key)=>
+                    <Menu key={key} theme="dark" defaultSelectedKeys={['1']} mode="inline" >    
+                        <SubMenu key={key} 
+                            title={<span ><Icon type={el.description} /><span >{el.title}</span></span>}
+                        > 
+                            <PodCategory allCategory={allCategory} 
+                                categoryId={el.id}     
+                            />  
+                        </SubMenu> 
                     </Menu>     
                 )}
             </div>

+ 33 - 0
src/components/LeftMenu/PodCategory.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { Link } from "react-router-dom";
+
+class PodCatygory extends Component {
+    constructor(props) {
+        super(props)
+        
+        this.podCaty= [];
+       
+
+    }
+
+    render() {
+        const { allCategory, categoryId } = this.props;
+        this.podCaty = allCategory.filter(el => el.parentId === categoryId)
+
+        let datacat = this.podCaty.map((el, key) =>
+            <Link to={`/staff/${el.id}`}  key={`podCaty${key}`}>
+                <li key={`${el.id}`} className="ant-menu-item" role="menuitem" style={{"paddingLeft": "48px"}}>
+                    {el.title}
+                </li>
+            </Link>
+        ) 
+
+        return (
+            <ul className="ant-menu ant-menu-sub ant-menu-inline" role="menu" >
+                {datacat}
+            </ul>
+        );
+    }
+}
+
+export default PodCatygory

+ 14 - 78
src/components/LeftMenu/index.js

@@ -1,79 +1,10 @@
 import React, { Component } from 'react';
-import { Layout } from 'antd';
 import DrawCategory from './DrawCategory'
 
+import { Layout, Menu, Icon } from 'antd';
+import { Link } from "react-router-dom";
 
 const { Sider } = Layout;
-// const axios = require('axios');
-
-// axios.post('http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Одежда",
-//         "description": "s k i n",
-//         "parentId": 0
-//     }  
-// )
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post('http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Электроника",
-//         "description": "laptop",
-//         "parentId": 0
-//     }  
-// )
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post('http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Инструменты",
-//         "description": "t o l l",
-//         "parentId": 0
-//     }  
-// )
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post('http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Алкоголь",
-//         "description": "Бахнем по 100",
-//         "parentId": 0
-//     }  
-// )
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post('http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Продукты",
-//         "description": "shopping",
-//         "parentId": 0
-//     }  
-// )
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-// axios.post('http://127.0.0.1:2000/api/categories',
-//     {
-//         "title": "Автомобили",
-//         "description": c+"a"+r,
-//         "parentId": 0
-//     }  
-// )
-// .then(function (response) { console.log(response) })
-// .catch((err)=>console.log(err))
-
-const styles = {
-    root: {
-        width: 300,
-    },
-    slider: {
-        padding: '22px 0px',
-    },
-};
 
 class LeftMenu extends Component {
    
@@ -85,23 +16,28 @@ class LeftMenu extends Component {
         this.setState({ collapsed });
     }
 
-
     render() {
 
-
+        const { allCategory, mainCategory } = this.props
         
-
         return (
-
             <div>
                 <Layout style={{ minHeight: '100vh' }}>
                     <Sider collapsible
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}
-
                     >
-                        <DrawCategory />
-                       
+                        <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">    
+                            <Menu.Item key="addCatigory">
+                                <Link to="/addCategory">
+                                    <Icon type="plus" />
+                                    <span >Добавить категорию</span>
+                                </Link>
+                            </Menu.Item>
+                        </Menu>                       
+                        <DrawCategory allCategory={allCategory} 
+                            mainCategory={mainCategory}  
+                        />  
                     </Sider>
                 </Layout>
             </div>

+ 53 - 27
src/constants/actionTypes.js

@@ -1,29 +1,55 @@
+// export const GET_INFO_SEARCH_STAFF_DATA = "GET_INFO_SEARCH_STAFF_DATA"
 
-export const STAFF_REQUEST = "STAFF_REQUEST";
-export const STAFF_REQUEST_SUCCESS = "STAFF_REQUEST_SUCCESS";
-export const STAFF_REQUEST_FAIL = "STAFF_REQUEST_FAIL";
-export const GET_STAFF_INFO_DATA = "GET_STAFF_INFO_DATA";
-export const SEARCH_STAFF_REQUEST = "SEARCH_STAFF_REQUEST";
-export const SEARCH_STAFF_REQUEST_SUCCESS = "SEARCH_STAFF_REQUEST_SUCCESS";
-export const SEARCH_STAFF_REQUEST_FAIL = "SEARCH_STAFF_REQUEST_FAIL";
-export const CHANGE_INPUT_VALUE = "CHANGE_INPUT_VALUE";
-export const GET_INFO_SEARCH_STAFF_DATA = "GET_INFO_SEARCH_STAFF_DATA"
-export const ADD_NEW_STAFF_REQUEST = "ADD_NEW_STAFF_REQUEST";
-export const ADD_NEW_STAFF_REQUEST_SUCCESS = "ADD_NEW_STAFF_REQUEST_SUCCESS";
-export const ADD_NEW_STAFF_REQUEST_FAIL = "ADD_NEW_STAFF_REQUEST_FAIL";
-export const CLOSE_MODAL_WINDOW = "CLOSE_MODAL_WINDOW";
-export const STAFF_REQUEST_BY_ID = "STAFF_REQUEST_BY_ID";
-export const STAFF_REQUEST_SUCCESS_BY_ID = "STAFF_REQUEST_SUCCESS_BY_ID";
-export const STAFF_REQUEST_FAIL_BY_ID = "STAFF_REQUEST_FAIL_BY_ID";
-export const SEARCH_STAFF_REQUEST_BY_ID = "SEARCH_STAFF_REQUEST_BY_ID";
-export const SEARCH_STAFF_REQUEST_SUCCESS_BY_ID = "SEARCH_STAFF_REQUEST_SUCCESS_BY_ID";
-export const SEARCH_STAFF_REQUEST_FAIL_BY_ID = "SEARCH_STAFF_REQUEST_FAIL_BY_ID";
-
-export const USER_REG_REQUEST = "USER_REG_REQUEST";
-export const USER_REG_REQUEST_SUCCESS = "USER_REG_REQUEST_SUCCESS";
-export const USER_REG_REQUEST_FAIL = "USER_REG_REQUEST_FAIL";
-
-export const USER_AUTH_REQUEST = "USER_AUTH_REQUEST";
-export const USER_AUTH_REQUEST_SUCCESS = "USER_AUTH_REQUEST_SUCCESS";
-export const USER_AUTH_REQUEST_FAIL = "USER_AUTH_REQUEST_FAIL";
+//modalWindow
+    export const CLOSE_MODAL_WINDOW = "CLOSE_MODAL_WINDOW";
 
+//Category
+    //categoryAction    
+    export const CATEGORY_REQUEST = "CATEGORY_REQUEST";
+    export const CATEGORY_REQUEST_SUCCESS = "CATEGORY_REQUEST_SUCCESS";
+    export const CATEGORY_REQUEST_FAIL = "CATEGORY_REQUEST_FAIL";
+    export const POD_CATEGORY = "POD_CATEGORY";
+
+    //addNewCategoryAction
+    export const ADD_NEW_CATEGORY_REQUEST = "ADD_NEW_CATEGORY_REQUEST";
+    export const ADD_NEW_CATEGORY_REQUEST_SUCCESS = "ADD_NEW_CATEGORY_REQUEST_SUCCESS";
+    export const ADD_NEW_CATEGORY_REQUEST_FAIL = "ADD_NEW_CATEGORY_REQUEST_FAIL";
+
+//Staff
+    //staffAction
+    export const GET_STAFF_INFO_DATA = "GET_STAFF_INFO_DATA";
+    export const STAFF_REQUEST = "STAFF_REQUEST";
+    export const STAFF_REQUEST_SUCCESS = "STAFF_REQUEST_SUCCESS";
+    export const STAFF_REQUEST_FAIL = "STAFF_REQUEST_FAIL";
+
+    //addNewStaffAction
+    export const ADD_NEW_STAFF_REQUEST = "ADD_NEW_STAFF_REQUEST";
+    export const ADD_NEW_STAFF_REQUEST_SUCCESS = "ADD_NEW_STAFF_REQUEST_SUCCESS";
+    export const ADD_NEW_STAFF_REQUEST_FAIL = "ADD_NEW_STAFF_REQUEST_FAIL";
+
+    //searchStaffAction
+    export const CHANGE_INPUT_VALUE = "CHANGE_INPUT_VALUE";
+    export const SEARCH_STAFF_REQUEST = "SEARCH_STAFF_REQUEST";
+    export const SEARCH_STAFF_REQUEST_SUCCESS = "SEARCH_STAFF_REQUEST_SUCCESS";
+    export const SEARCH_STAFF_REQUEST_FAIL = "SEARCH_STAFF_REQUEST_FAIL";
+
+    //getStaffByIdAction
+    export const STAFF_REQUEST_BY_ID = "STAFF_REQUEST_BY_ID";
+    export const STAFF_REQUEST_SUCCESS_BY_ID = "STAFF_REQUEST_SUCCESS_BY_ID";
+    export const STAFF_REQUEST_FAIL_BY_ID = "STAFF_REQUEST_FAIL_BY_ID";
+
+    //searchStaffByIdAction
+    export const SEARCH_STAFF_REQUEST_BY_ID = "SEARCH_STAFF_REQUEST_BY_ID";
+    export const SEARCH_STAFF_REQUEST_SUCCESS_BY_ID = "SEARCH_STAFF_REQUEST_SUCCESS_BY_ID";
+    export const SEARCH_STAFF_REQUEST_FAIL_BY_ID = "SEARCH_STAFF_REQUEST_FAIL_BY_ID";
+
+//User
+    //usersAuthAction
+    export const USER_AUTH_REQUEST = "USER_AUTH_REQUEST";
+    export const USER_AUTH_REQUEST_SUCCESS = "USER_AUTH_REQUEST_SUCCESS";
+    export const USER_AUTH_REQUEST_FAIL = "USER_AUTH_REQUEST_FAIL";
+
+    //usersRegistrAction
+    export const USER_REG_REQUEST = "USER_REG_REQUEST";
+    export const USER_REG_REQUEST_SUCCESS = "USER_REG_REQUEST_SUCCESS";
+    export const USER_REG_REQUEST_FAIL = "USER_REG_REQUEST_FAIL";

+ 51 - 0
src/container/AddNewCategory.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+
+import { connect } from 'react-redux';
+import * as actions from '../actions/addNewCategoryAction';
+
+import { bindActionCreators } from 'redux';
+
+import FormAddNewCategory from '../components/FormsAdd/FormAddNewCategory';
+import EditModal from '../components/Modal';
+
+
+class AddNewCategory extends Component {
+
+    closeEditModal = () => {
+        const { closeModal } = this.props;
+        closeModal();
+    }
+
+    render() {
+        const { AddNewCategory, isFetching, showModal, error } = this.props
+        
+        return(
+            <div>
+                <div>
+                    <FormAddNewCategory AddNewCategory={AddNewCategory}
+                        isFetching={isFetching}
+                    /> 
+                </div>
+                <EditModal visible={showModal}
+                    onOk={this.closeEditModal}
+                    onCancel={this.closeEditModal}
+                    error={error}
+                />
+            </div>      
+        )
+    }
+}
+
+const mapStateToProps = state =>({
+    categoryData: state.addCategory.categoryData,
+    isFetching: state.addCategory.isFetching,
+    showModal: state.addCategory.showModal,
+    error: state.addCategory.error
+})
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default AddNewCategory = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(AddNewCategory);

+ 28 - 25
src/container/AddNewStaff.js

@@ -1,47 +1,50 @@
 import React, { Component } from 'react';
-import { connect} from 'react-redux';
+
+import { connect } from 'react-redux';
 import * as actions from "../actions/addNewStaffAction";
 
 import { bindActionCreators } from "redux";
 
-import FormAddNewStaff from '../components/FormAddNewStaff'
-
+import FormAddNewStaff from '../components/FormsAdd/FormAddNewStaff';
 import EditModal from "../components/Modal";
 
 class AddNewStaff extends Component {
-    
-  	closeEditModal = () => {
-      	const { closeModal } = this.props;
-        	closeModal();
-  	}
+
+    closeEditModal = () => {
+        const { closeModal } = this.props;
+        closeModal();
+    }
     render() {
-        const { showModal, error } = this.props
+        const { showModal, error, isFetching, AddNewStaff } = this.props
+        
         return (
-			<div className="top">
-            	<div>          
-              		<FormAddNewStaff {...this.props}/>
-            	</div>
-				<EditModal visible={showModal}
-					onOk={this.closeEditModal} 
-					onCancel={this.closeEditModal} 
-					error={error} />     
-          	</div>   
-           
+            <div className="top">
+                <div>
+                    <FormAddNewStaff AddNewStaff={AddNewStaff} 
+                        isFetching={isFetching} 
+                    />
+                </div>
+                <EditModal visible={showModal}
+                    onOk={this.closeEditModal}
+                    onCancel={this.closeEditModal}
+                    error={error}
+                />
+            </div>
         );
     }
 }
 
 
 const mapStateToProps = state => ({
-  staffData: state.addStaff.staffData,
-  isFetching: state.addStaff.isFetching,
-  showModal : state.addStaff.showModal,
-  error: state.addStaff.error
+    staffData: state.addStaff.staffData,
+    isFetching: state.addStaff.isFetching,
+    showModal: state.addStaff.showModal,
+    error: state.addStaff.error
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
 
 export default AddNewStaff = connect(
-      mapStateToProps,
-      mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(AddNewStaff);

+ 42 - 0
src/container/LeftMenu.js

@@ -0,0 +1,42 @@
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import * as actions from "../actions/categoryAction";
+import { bindActionCreators } from "redux";
+
+import CategoryMenu from '../components/LeftMenu';
+
+class LeftMenu extends Component {
+
+    componentWillMount() {
+        this.props.getCategoriesData();
+        // this.props.getAllCategory()
+       
+    }
+
+    render() {
+        
+        const { allCategory, mainCategory, podCategory } = this.props
+        
+        return (
+            <Fragment>
+                <CategoryMenu allCategory={allCategory.data} 
+                    mainCategory={mainCategory} 
+                    podCategory={podCategory} 
+                />
+            </Fragment>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    allCategory: state.category.allCategory,
+    mainCategory: state.category.mainCategory,
+    isFetching: state.category.isFetching,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default LeftMenu = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(LeftMenu);

+ 22 - 19
src/container/MainPage.js

@@ -1,45 +1,48 @@
 import React, { Component, Fragment } from 'react';
-import { connect} from 'react-redux';
+import { connect } from 'react-redux';
+
 import * as actions from "../actions/staffsAction";
 
 import { bindActionCreators } from "redux";
 
-import LeftMenu from '../components/LeftMenu'
+import LeftMenu from '../container/LeftMenu'
 import AllStaffs from "../components/AllStaffs"
 import Header from '../container/Header'
 
 class MainPage extends Component {
- 
-    componentDidMount(){
+
+    componentDidMount() {
         const { getStaffsData } = this.props
         getStaffsData()
-        
+
     }
-      render() {
-      console.log(this.props, 'qwewqrwqr')  
+    render() {
+
+        const { inputStaffs, isFetching } = this.props
+        
         return (
 
             <Fragment>
-              <Header/>
-              <div className="contentDiv">
-                <LeftMenu />
-                <AllStaffs {...this.props}/>
-              </div>
-            </Fragment>       
+                <Header />
+                <div className="contentDiv">
+                    <LeftMenu />
+                    <AllStaffs inputStaffs={inputStaffs} isFetching={isFetching} />
+                </div>
+            </Fragment>
 
         );
-      }
+    }
 }
 
-
 const mapStateToProps = state => ({
-  inputStaffs: state.staffs.inputStaffs,
-  isFetching: state.staffs.isFetching,
+    inputStaffs: state.staffs.inputStaffs,
+    isFetching: state.staffs.isFetching,
+    allCategory: state.addCategory.allCategory,
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
 
 export default MainPage = connect(
-      mapStateToProps,
-      mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(MainPage);

+ 43 - 0
src/reducer/addCategory.js

@@ -0,0 +1,43 @@
+import * as types from '../constants/actionTypes';
+
+const initState = {
+    categoryData: [],
+    isFetching: false,
+    error: null,
+    showModal: false
+}
+
+export default ( state = initState, { type, payload } ) => {
+    
+    switch (type){
+        case types.ADD_NEW_CATEGORY_REQUEST: {
+            return {
+                ...state,
+                isFetching: true
+            }
+        }
+        case types.ADD_NEW_CATEGORY_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                categoryData: state.categoryData.concat(JSON.parse(payload.config.data)),
+                isFetching:false,
+                showModal: true
+            }
+        }
+        case types.ADD_NEW_CATEGORY_REQUEST_FAIL: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "error",
+                showModal: true
+            }
+        }
+        case types.CLOSE_MODAL_WINDOW: {
+            return {
+                ...state,
+                showModal: false
+            }
+        }
+         default: return state;
+    }
+}

+ 48 - 0
src/reducer/category.js

@@ -0,0 +1,48 @@
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    allCategory: [],
+    mainCategory: [],
+    podcategory: [],
+    isFetching: false,
+    error: null
+};
+
+export default (state = initState, { type, payload }) => {
+        
+    switch (type) {
+        
+        case types.CATEGORY_REQUEST: {
+            return {
+                ...state,
+                isFetching: true
+            }
+        }
+
+        case types.CATEGORY_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                isFetching: false,
+                allCategory: payload,
+                mainCategory: payload.data.filter(el => el.parentId === 0)
+            }
+        }
+
+        case types.CATEGORY_REQUEST_FAIL: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "ERROR"
+            }
+        }
+
+        case types.POD_CATEGORY: {
+            return {
+                ...state,
+                podcategory: state.allCategory.filter(el => el.parentId === payload),
+            }
+        }
+
+        default: return state;
+    }
+};

+ 10 - 2
src/reducer/index.js

@@ -10,14 +10,22 @@ import addStaff from './addStaff'
 import staffById from './staffsById'
 import searchStaffById from './searchStaffById'
 
+import category from './category'
+import addCategory from './addCategory'
 
 export default  combineReducers({
     usersRegistr: usersRegistration,
     usersAuth: usersAuthorisation,
-    staffs: staffs,
+    
+    staffs,
     searchStaff,
     addStaff,
+
     staffById,
     searchStaffById,
-    form: formReducer,
+
+    category,
+    addCategory,
+
+    form: formReducer
 })

+ 25 - 30
src/reducer/staffs.js

@@ -5,41 +5,36 @@ const initState = {
     infoStaffs: [],
     isFetching: false,
     error: null
-  };
+};
 
-  export default (state = initState, { type, payload }) => {
-      
-      switch (type) {
-        
+export default (state = initState, { type, payload }) => {
+    switch (type) {
         case types.STAFF_REQUEST: {
-          return {
-          ...state,
-          isFetching: true
-          }
-        } 
-        case types.STAFF_REQUEST_SUCCESS: { 
-          return {
-          ...state,
-          isFetching: false,
-          inputStaffs: payload.data.reverse()
-          }
+            return {
+                ...state,
+                isFetching: true
+            }
+        }
+        case types.STAFF_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                isFetching: false,
+                inputStaffs: payload.data.reverse()
+            }
         }
         case types.STAFF_REQUEST_FAIL: {
-          return {
-          ...state,
-          isFetching: false,
-          error: "ERROR"
-          }
+            return {
+                ...state,
+                isFetching: false,
+                error: "ERROR"
+            }
         }
         case types.GET_STAFF_INFO_DATA: {
-          return {
-            ...state,
-            infoStaffs: payload
-          }
+            return {
+                ...state,
+                infoStaffs: payload
+            }
         }
-        
-        default: return state;    
+        default: return state;
     }
-  };
-
-  
+};  

+ 12 - 19
src/router.js

@@ -4,39 +4,32 @@ import { Switch, Route } from "react-router-dom";
 import RenderRegistration from "./container/renderRegistration"
 import RenderAuthorisation from "./container/renderAuthorisation"
 
-
 import MainPage from "./container/MainPage";
 // import Form from './components/Auth/index'
 // import RegistrForm from './components/Auth/registration'
 import MainPageStaffInfo from './container/MainPageStaffInfo'
 
-
 import SearchStaffs from './container/SearchStaff'
 
-
-
 import SearchStaffsInfo from './container/SearchStaffsInfo'
 import AddNewStaff from './container/AddNewStaff'
 
+import AddNewCategory from './container/AddNewCategory'
 
 export default () => (
 
     <div>
-        
-        
-	        <Switch>
-
-                <Route path="/" exact component={MainPage} />
-                    <Route path="/authorisation" exact component={RenderAuthorisation} />
-                    <Route path="/auth" exact component= {RenderAuthorisation}/>
-                    <Route path="/registration" exact component={RenderRegistration} />
-                    <Route path="/staff/:id" exact component={MainPageStaffInfo} />
-                    <Route path="/search/:title" exact component={SearchStaffs} />
-                        <Route path="/search/Staff/:id" exact component={SearchStaffsInfo} />
-                    <Route path="/newStaff" exact component={AddNewStaff} />
-                
-
-	        </Switch>
+	    <Switch>
+            <Route path="/" exact component={MainPage} />
+            <Route path="/authorisation" exact component={RenderAuthorisation} />
+            <Route path="/auth" exact component= {RenderAuthorisation}/>
+            <Route path="/registration" exact component={RenderRegistration} />
+            <Route path="/staff/:id" exact component={MainPageStaffInfo} />
+            <Route path="/search/:title" exact component={SearchStaffs} />
+                <Route path="/search/Staff/:id" exact component={SearchStaffsInfo} />
+            <Route path="/newStaff" exact component={AddNewStaff} />
+            <Route path="/addCategory" exact component={AddNewCategory} />
+	    </Switch>
     </div>
 );
 

+ 55 - 57
src/style/components/_formLogin.scss

@@ -4,7 +4,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-	  font-size: 20px;
+	font-size: 20px;
     margin: 0 auto ;
     // background-color: #c1bdba;
     background-image: url("../img/depositphotos_80275194-stock-illustration-russian-old-fair-bazaar-vector.jpg");
@@ -16,74 +16,72 @@
 }
 
 h1, .input::-webkit-input-placeholder, .button {
-  font-family: 'roboto', sans-serif;
-  transition: all 0.3s ease-in-out;
+    font-family: 'roboto', sans-serif;
+    transition: all 0.3s ease-in-out;
 }
 
 h1 {
-  height: 100px;
-  width: 100%;
-  font-size: 18px;
-  background: darken($el-color, 4%);
-  color: #fff;
-  line-height: 150%;
-  border-radius: 3px 3px 0 0;
-  box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
+    height: 100px;
+    width: 100%;
+    font-size: 18px;
+    background: darken($el-color, 4%);
+    color: #fff;
+    line-height: 150%;
+    border-radius: 3px 3px 0 0;
+    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
 }
 
 .form {
-  box-sizing: border-box;
-  width: 260px;
-  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
-  padding-bottom: 40px;
-  border-radius: 3px;
-  background-color: #fff;
-  h1 {
     box-sizing: border-box;
-    padding: 20px;
-  }
+    width: 260px;
+    box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+    padding-bottom: 40px;
+    border-radius: 3px;
+    background-color: #fff;
+    h1 {
+        box-sizing: border-box;
+        padding: 20px;
+    }
 }
 
 .input {
-  margin: 40px 25px;
-  width: 200px;
-  display: block;
-  border: none;
-  padding: 10px 0;
-  border-bottom: solid 1px $el-color;
-  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
-  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $el-color 4%);
-  background-position: -200px 0;
-  background-size: 200px 100%;
-  background-repeat: no-repeat;
-  color: darken($el-color, 20%);
-  &:focus {
-    box-shadow: none;
-    outline: none;
-    background-position: 0 0;
-    &::-webkit-input-placeholder {
-      color: $el-color;
-      font-size: 11px;
-      transform: translateY(-20px);
-      visibility: visible !important;
+    margin: 40px 25px;
+    width: 200px;
+    display: block;
+    border: none;
+    padding: 10px 0;
+    border-bottom: solid 1px $el-color;
+    transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+    background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $el-color 4%);
+    background-position: -200px 0;
+    background-size: 200px 100%;
+    background-repeat: no-repeat;
+    color: darken($el-color, 20%);
+    &:focus {
+        box-shadow: none;
+        outline: none;
+        background-position: 0 0;
+        &::-webkit-input-placeholder {
+        color: $el-color;
+        font-size: 11px;
+        transform: translateY(-20px);
+        visibility: visible !important;
+        }
     }
-  }
 }
 
-// .input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.9s ease;}
-
 .button {
-  border: none;
-  background: $el-color;
-  cursor: pointer;
-  border-radius: 3px;
-  padding: 6px;
-  width: 200px;
-  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);
-  }
+    border: none;
+    background: $el-color;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 6px;
+    width: 200px;
+    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);
+    }
 }

+ 5 - 0
src/style/components/auth.scss

@@ -111,4 +111,9 @@ h1 {
 }
 .sider{
   background-color: #FD7F71
+}
+
+.ant-layout-sider-children{
+  background: #FD7F71;
+  
 }

+ 1 - 0
src/style/index.scss

@@ -15,6 +15,7 @@
 @import './components/auth.scss';
 @import './components/searchLine.scss'
 
+
 // *, *:before, *:after{
 //   box-sizing:border-box; 
 // }