package-lock.json

@@ -2487,6 +2487,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2778,6 +2783,11 @@
         "lodash.uniq": "^4.5.0"
       }
     },
+    "caniuse-db": {
+      "version": "1.0.30000928",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000928.tgz",
+      "integrity": "sha512-nAoeTspAEzLjqGSeibzM09WojORi08faeOOI5GBmFWC3/brydovb9lYJWM+p48rEQsdevfpufK58gPiDtwOWKw=="
+    },
     "caniuse-lite": {
       "version": "1.0.30000927",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000927.tgz",
@@ -3457,6 +3467,37 @@
         }
       }
     },
+    "css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
+    "css-keyframer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-keyframer/-/css-keyframer-1.0.1.tgz",
+      "integrity": "sha1-RBAX8+LWjJKnpQuLZ2a8ucjvCQ8=",
+      "requires": {
+        "exenv": "^1.2.1",
+        "hyphenate-style-name": "^1.0.2",
+        "inline-style-prefixer": "^2.0.5",
+        "is-plain-object": "^2.0.1"
+      },
+      "dependencies": {
+        "inline-style-prefixer": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz",
+          "integrity": "sha1-wVPH6I/YT+9cYC6VqBaLJ3BnH+c=",
+          "requires": {
+            "bowser": "^1.0.0",
+            "hyphenate-style-name": "^1.0.1"
+          }
+        }
+      }
+    },
     "css-loader": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz",
@@ -4859,6 +4900,11 @@
         }
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -7308,6 +7354,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7443,6 +7494,15 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
     },
+    "inline-style-prefixer": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=",
+      "requires": {
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "inquirer": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.2.1.tgz",
@@ -14535,6 +14595,49 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-loader-spinner": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-2.3.0.tgz",
+      "integrity": "sha512-Nu7RXMyAnvdGoZLH5boXaHbqLkgBEIPO1u75zOZkZNp2V+Dg8RvvlZ05SU3ajtmsFNteFe8BJbFd0samH0tXcw==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-md-spinner": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/react-md-spinner/-/react-md-spinner-0.3.0.tgz",
+      "integrity": "sha512-7MZx3eSCjUNocTQuYFzt2BF3J69s9UNSnOG2I6R+Yg2okbi3VzRVY0Ers7C7dTXHhpNMYeQoaI1juIz72r3bng==",
+      "requires": {
+        "caniuse-api": "^1.6.1",
+        "css-keyframer": "1.0.1",
+        "exenv": "^1.2.1",
+        "inline-style-prefixer": "^3.0.3",
+        "prop-types": "^15.5.8"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "1.7.7",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
+          "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
+          "requires": {
+            "caniuse-db": "^1.0.30000639",
+            "electron-to-chromium": "^1.2.7"
+          }
+        },
+        "caniuse-api": {
+          "version": "1.6.1",
+          "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
+          "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
+          "requires": {
+            "browserslist": "^1.3.6",
+            "caniuse-db": "^1.0.30000529",
+            "lodash.memoize": "^4.1.2",
+            "lodash.uniq": "^4.5.0"
+          }
+        }
+      }
+    },
     "react-redux": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.0.tgz",
@@ -15075,6 +15178,11 @@
         }
       }
     },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",

package.json

@@ -8,12 +8,16 @@
     "node-sass": "^4.11.0",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-loader-spinner": "^2.3.0",
+    "react-md-spinner": "^0.3.0",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.3",
     "redux": "^4.0.1",
     "redux-form": "^8.1.0",
+    "redux-thunk": "^2.3.0",
     "sass": "^1.16.0"
+
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/addNewStaffAction.js

@@ -0,0 +1,32 @@
+import * as types from '../constants/actionTypes';
+
+const axios = require('axios')
+
+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
+})
+
+export const closeModal  = payload =>({
+    type: types.CLOSE_MODAL_WINDOW,
+    payload
+})
+
+export const AddNewStaff = payload =>{
+    return dispatch=>{
+        dispatch(addNewStaffRequest())
+        axios.post(`http://127.0.0.1:2000/api/staffs`, payload )
+             .then(res => 
+                    setTimeout(() => dispatch(addNewStaffRequestSuccess(res)),1000))
+             .catch(err =>
+                    dispatch(addNewStaffRequestFail(err)))
+    }
+}

src/actions/index.js

@@ -1,5 +0,0 @@
-import * as types from "../constants/actionTypes";
-
-export const getUsersData = (payload)=>({
-    type: types.GETDATA, payload
-});

src/actions/searchStaffAction.js

@@ -0,0 +1,39 @@
+import  * as types from '../constants/actionTypes';
+
+const axios = require('axios');
+
+export const getInfoSearchStaffData = payload =>({
+    type: types.GET_INFO_SEARCH_STAFF_DATA,
+    payload
+})
+
+export const changeInputValue = payload =>({
+    type: types.CHANGE_INPUT_VALUE,
+    payload
+})
+
+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())
+            return axios.get(`http://127.0.0.1:2000/api/staffs?search=${payload}`)
+                    .then( 
+                        res=>{setTimeout(()=>{dispatch(searchStaffRequestSuccess(res))},1000)
+                        })
+                    .catch(
+                        err=>{dispatch(searchStaffrequestFail(err))
+                        })    
+        
+    }
+}

src/actions/staffsAction.js

@@ -0,0 +1,36 @@
+import * as types from "../constants/actionTypes";
+
+const axios = require('axios');
+
+
+export const getInfoStaffData = payload => ({
+	type: types.GET_STAFF_INFO_DATA,
+	payload
+})
+
+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)=>{
+    return dispatch => {
+		dispatch(StaffRequest());
+		return axios.get(`http://127.0.0.1:2000/api/staffs`)
+                    .then(res => {
+                            setTimeout(()=>{dispatch(StaffRequestSuccess(res))},1000);
+                        })
+                    .catch(err=>{
+                            dispatch(StaffRequestFail(err));
+                    })    
+			
+	};
+};
+

src/components/AllStaffs/FullInfoAboutStaff.js

@@ -0,0 +1,24 @@
+import React, { Component, Fragment } from 'react';
+
+class FullInfoAboutStaff extends Component {
+    render() {
+        const { InfoStaff } = this.props
+        console.log(InfoStaff)
+        return (
+            <Fragment>
+                {InfoStaff.map((el,key)=>(
+                    <div className="staff" 
+                        key={key}
+                    > 
+                        {el.title} 
+                        {el.price} 
+                        {el.description} 
+                        {el.img} 
+                    </div>)
+                )}    
+            </Fragment>
+        );
+    }
+}
+
+export default FullInfoAboutStaff;

src/components/AllStaffs/index.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+
+import Loader from 'react-loader-spinner';
+import AddNewStaff from '../../components/BtnAddNewStaff'
+
+class AllStaffs extends Component {
+    
+    render() {
+            
+        const {inputStaffs,isFetching,getInfoStaffData} = this.props
+        console.log(this.props)
+           
+        let data;
+            if(isFetching===true){
+                data =  <div className="loader" 
+                            style={{ height:"70vh", 
+                                display:"flex", 
+                                "justify-content": "center", 
+                                "align-items": "center"}}
+                        > 
+                            <Loader 
+                                type="Triangle"
+                                color="#1890ff"
+                                height="100"	
+                                width="100"
+                            /> 
+                        </div> 
+            }
+            else{
+                data = <div className="staffs">
+                    {inputStaffs.map((el,key)=>(
+                        <Link to={'/staff'} 
+                            key={key} 
+                            onClick={getInfoStaffData.bind(null,[{description: el.description, title: el.title, price: el.price, img: el.img}])}
+                        >
+                            <div className="staff" > 
+                                <h1>{el.title}</h1> 
+                                <p>{el.price}</p>  
+                            </div>
+                        </Link> )
+                    )}    
+                      </div>
+            }
+        return (
+           <div className="content">
+                {data}
+                <AddNewStaff/>
+           </div> 
+            
+        );
+    }
+}
+
+export default AllStaffs;
+
+// '/staff/'+el.title

src/components/Auth/index.js

@@ -3,33 +3,34 @@ import { reduxForm, Field } from "redux-form";
 import  authValidate  from "../../utils/validate";
 
 const Form = props => {
-  const { handleSubmit,submitting } = props
-    return (
-      <form className="auth__form" onSubmit={handleSubmit}>
-        <label>Login:</label>
-        <div>
-          <Field
-             name="email"
-             component="input"
-             type="email" 
-             label="E-mail:"
-             placeholder="example@email.com"
-
-          />
-        </div>
-        <label>Password:</label>
-        <div>  
-          <Field
-             name="password"
-             component="input" 
-             type="password" 
-              label="Password:" 
-             placeholder ="password"  
-          />
-        </div>
-        <button className="auth__submit-button">Submit</button>
-      </form>
-    );
+  	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);

src/components/Auth/registration.js

@@ -1,81 +1,63 @@
 import React from 'react'
 import { Field, reduxForm } from 'redux-form'
 
-const axios = require('axios');
-const submit = values => {
-   axios.post(`http://127.0.0.1:2000/api/users`,{
-        "name": values.Name,
-        "description": "dfgfdhd",
-        "login": "Johny",
-        "password": values.Login,
-        "isAdmin": "0",
-        "email": values.email,
-        "avatar": "https://git-scm.com/book/ru/v1/",
-        "phone": values.Phone  
-})
-  .then(function (response) {
-    // handle success
-    console.log(response);
-  })
-  .catch((err)=>console.log(err))
-};
+
+
 const RegistrForm = props => {
   const { handleSubmit, pristine, reset, submitting } = props
+  const submit = values => {
+   console.log(props)
+};
   return (
-    <form onSubmit={handleSubmit(submit)}>
-      <div>
-        <label>Login</label>
-        <div>
-          <Field
-            name="Login"
-            component="input"
-            type="text"
-            placeholder="Login"
-          />
-        </div>
-      </div>
-      <div>
-        <label>Name</label>
-        <div>
-          <Field
-            name="Name"
-            component="input"
-            type="text"
-            placeholder="Name"
-          />
-        </div>
-      </div>
-      <div>
-        <label>Phone</label>
-        <div>
+    <div className="formdiv">
+		<form onSubmit={handleSubmit(submit)} className="form">
+		
+			<Field
+				name="Login"
+				component="input"
+				type="text"
+				placeholder="Login"
+				className="input"
+			/>
+		
+		
+			<Field
+				name="Name"
+					component="input"
+					type="text"
+					placeholder="Name"
+					className="input"
+				/>
+			
+        
           <Field
             name="Phone"
             component="input"
             type="text"
-            placeholder="+380XXXXXXXX"
+			placeholder="+380XXXXXXXX"
+			className="input"
           />
-        </div>
-      </div>
-      <div>
-        <label>Email</label>
-        <div>
+        
           <Field
             name="email"
             component="input"
             type="email"
-            placeholder="email@example.com"
+			placeholder="email@example.com"
+			className="input"
           />
+        
+
+      <ul class="tab-group">
+        <li class="tab active"><a href="/signup">Sign Up</a></li>
+        <li class="tab"><a href="/login">Log In</a></li>
+      </ul>
+
+        <div className="tab-group">
+          <button className="button" type="submit" disabled={pristine || submitting}>Submit</button>
+          <button className="button" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</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>
+    </div>
   )
 }
 

src/components/BtnAddNewStaff/index.js

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

src/components/FormAddNewStaff/SendingStaffForm.js

@@ -0,0 +1,66 @@
+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)

src/components/FormAddNewStaff/index.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+import MDSpinner from "react-md-spinner";
+
+import Form from '../FormAddNewStaff/SendingStaffForm'
+
+class FormAddNewStaff extends Component {
+    render() {
+        console.log(this.props)
+        const { staffData, isFetching } = this.props
+        
+        return (
+            <div>
+               <Form {...this.props}/>
+               {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;

src/components/Header/Myprofile.js

@@ -5,7 +5,7 @@ class Myprofile extends Component {
     render() {
         return (
         <div className="header__auth">
-            <Link to="/registration" className="link" target="_blank">
+            <Link to="/auth" className="link" target="_blank">
                 <div className="header__auth__container">
                     <div className="avatar">
                         <Avatar icon="user" style={{ backgroundColor: '#1890ff' }}/>

src/components/Header/index.js

@@ -1,18 +0,0 @@
-import React, { Component } from 'react';
-import HeaderLogo from '../Header/logo'
-import SearchLine from '../Header/searchLine'
-import Myprofile from './Myprofile'
-import 'antd/dist/antd.css';
-class Header extends Component {
-    render() {
-        return (
-            <div className="header">
-               <HeaderLogo />
-               <SearchLine/>
-               <Myprofile/>
-            </div>
-        );
-    }
-}
-
-export default Header;

src/components/Header/logo.js

@@ -5,7 +5,7 @@ class HeaderLogo extends Component {
     render() {
         return (
             <div className="header__logo">
-               <Link to="/logo"><img src={logo} alt="Logo"/></Link> 
+               <Link to="/"><img src={logo} alt="Logo"/></Link> 
             </div>
         );
     }

src/components/Header/searchLine.js

@@ -1,55 +1,8 @@
 import React, { Component } from 'react';
-import { Input } from 'antd';
-const Search = Input.Search;
-const axios = require('axios');
-
-//Выводит всех пользователей
-// axios.get('http://127.0.0.1:2000/api/users')
-//   .then(function (response) {
-//     // handle success
-//     console.log(response.data);
-//   })
-
-//Добавить пользователя
-// axios.post(`http://127.0.0.1:2000/api/users`,{
-//         "name": "John",
-//         "description": "Крутой перец",
-//         "login": "Johny",
-//         "password": "1234567",
-//         "isAdmin": "0",
-//         "email": "vladbabich@gmail.com",
-//         "avatar": "https://st.kp.yandex.net/images/actor_iphone/iphone360_6245.jpg",
-//         "phone": "+380951242245"  
-// })
-//   .then(function (response) {
-//     // handle success
-//     console.log(response);
-//   })
-
-//Обновление информации пользователя
-// axios.put(`http://127.0.0.1:2000/api/users`,{
-//     "id": "151",
-//         "name": "Joh124",
-//         "description": "dfgfdhd",
-//         "login": "Johny",
-//         "password": "1234567",
-//         "isAdmin": "1",
-//         "email": "dsgdsgdf@gmail.com",
-//         "avatar": "",
-//         "phone": "+380951242245"  
-// })
-//   .then(function (response) {
-//     // handle success
-//     console.log(response);
-//   })
-
-// axios.delete(`http://127.0.0.1:2000/api/users`, {
-//     "id": 151
-// })
-//   .then(function (response) {
-//     // handle success
-//     console.log(response);
-//   })
+import { Link } from "react-router-dom";
+
+
+
 
 //     axios.post(
 //     'http://127.0.0.1:2000/api/categories',
@@ -113,17 +66,34 @@ const axios = require('axios');
 
 
 class SearchLine extends Component {
+    changeHandler = (e)=>{
+            const {changeInputValue} = this.props
+            changeInputValue(e.target.value)
+        }
+    send = () =>{
+            const { inputData, searchStaff } = this.props
+            //console.log(this.props)
+            searchStaff(inputData)
+    } 
+
+    // <div class="search-input">
+    //     <input type="text">
+    //     <span class="highlight"></span>
+    //     <span class="bar"></span>
+    //     <label>Search here</label>
+    //     <span class="glyphicon glyphicon-search"></span>
+    //     <span class="glyphicon glyphicon-remove"></span>
+    // </div>
+
     render() {
         return (
-            <div className="header__searchLine">
-                <Search className="searchInput"
-                    placeholder="input search text"
-                    onSearch={value => console.log(value)}
-                    enterButton
-                />
-            </div>
+            
+                <div className="header__searchLine">
+                    <input className="input" onChange={e=>{this.changeHandler(e)}} />
+                    <Link className="link" to='/search'><button onClick={this.send}>search</button></Link>
+                </div>
         );
     }
 }
 
-export default SearchLine;
+export default SearchLine;

src/components/LeftMenu/DrawCategory.js

@@ -1,98 +1,74 @@
-import React, {Component, Fragment} from 'react'
-import { Layout, Menu, Icon } from 'antd';
+import React, {Component} from 'react'
+import { Menu, Icon } from 'antd';
   
-const { Sider } = Layout;
 const SubMenu = Menu.SubMenu;
 
 const axios = require('axios');
 
-axios.get('http://127.0.0.1:2000/api/categories')
-        .then(function (response) { console.log(response.data) })
 
-class Category extends Component {
-    
 
-    onChange = ()=>{
-        axios.post(
-            'http://127.0.0.1:2000/api/categories',
-            {
-                "title": "Авторио",
-                "description": "Током бахнет!",
-                "parentId": 0
-            }
+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))
-    }
+    //     .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) })
-    }
+    // onChange1 = ()=>{
+    //     axios.get('http://127.0.0.1:2000/api/staffs')
+    //     .then(function (response) { console.log(response.data) })
+    // }
 
     render(){
-        console.log(Layout, Menu, Icon)
+        
+        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)
         return (
-            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">    
-                {/* { test[count].answers.map((el,key) => <Answers test={el} 
-																type={test[count].type} 
-																youMark={youMark} 
-																count={count} 
-																addMark={addMark}
-																allMark={allMark}
-																allMarks={allMarks} 
-																key={key} />) }        */}
-                <Menu.Item key="10">
-                    <Icon type="pie-chart" />
-                    <span>Футболка</span>
-                </Menu.Item>
+            <div>
+                {this.caty.map((el,key)=>
+                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">    
 
-                
-                    <Menu.Item key="1">
-                    <Icon type="pie-chart" />
-                    <span>Option 1</span>
-                    </Menu.Item>
-                    <Menu.Item key="2">
-                    <Icon type="desktop" />
-                    <span>Option 2</span>
-                    </Menu.Item>
-                    <SubMenu
-                    key="sub1"
-                    title={<span><Icon type="user" /><span>Одежда</span></span>}
-                    >
-                    <SubMenu
-                    key="sub6"
-                    title={<span><Icon type="shopping" /><span>Женское белье</span></span>}
-                    >
-                    <Menu.Item key="3"><button onClick={this.onChange}>Post
-        </button></Menu.Item>
-                    <Menu.Item key="4"><button onClick={this.onChange1}>Get
-        </button></Menu.Item>
-                    </SubMenu>
-                    <Menu.Item key="5">Bill</Menu.Item>
-                    <Menu.Item key="6">Alex</Menu.Item>
-                    </SubMenu>
-                    <SubMenu
-                    key="sub2"
-                    title={<span><Icon type="team" /><span>Team</span></span>}
-                    >
-                    <Menu.Item key="7">Team 1</Menu.Item>
-                    <Menu.Item key="8">Team 2</Menu.Item>
-                    </SubMenu>
-                    <Menu.Item key="9">
-                    <Icon type="file" />
-                    <span>File</span>
-                    </Menu.Item>
-                
-                            
-            </Menu>
-                
-            
+                        <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>
+                        
+                    </Menu>     
+                )}
+            </div>
         );
     }
 }
 
-export default Category
+export default DrawCategory
 

src/components/LeftMenu/index.js

@@ -1,10 +1,79 @@
-import React, {Component, Fragment} from 'react';
-import { Layout, Menu, Icon } from 'antd';
+import React, { Component } from 'react';
+import { Layout } from 'antd';
+import DrawCategory from './DrawCategory'
+import Slider from '@material-ui/lab/Slider';
 
-import Category from './DrawCategory'
-  
 const { Sider } = Layout;
-const axios = require('axios');
+// 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 {
     state = {
@@ -15,35 +84,27 @@ class LeftMenu extends Component {
         this.setState({ collapsed });
     }
 
-    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() {
+
+        const { classes } = this.props;
+        const { value } = this.state;
+
         return (
             <div>
                 <Layout style={{ minHeight: '100vh' }}>
                     <Sider collapsible
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}
-                    >  
-                        <Category />   
+                    >
+                        <DrawCategory />
+                        <Slider
+                            classes={{ container: classes.slider }}
+                            value={value}
+                            min={0}
+                            max={6}
+                            step={1}
+                            onChange={this.handleChange}
+                        />
                     </Sider>
                 </Layout>
             </div>

src/components/Modal/index.js

@@ -0,0 +1,15 @@
+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>
+		  );
+	}
+}

src/components/SearchStaffsPage/SearchFullInfoStaff.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+class SearchFullInfoStaff extends Component {
+    render() {
+        console.log(this.props)
+        const {fullInfoSearchData} = this.props
+        return (
+            <div>
+                 {fullInfoSearchData.map((el,key)=>(<div key={key}> {el.title} {el.price} {el.description} </div>)
+                    )}  
+                    
+            </div>
+        );
+    }
+}
+
+export default SearchFullInfoStaff;

src/components/SearchStaffsPage/index.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { Link } from "react-router-dom";
+import MDSpinner from "react-md-spinner";
+
+
+
+class SearchStaffsPage extends Component {
+    render() {
+        
+        const {searchData, getInfoSearchStaffData, isFetching } = this.props
+            
+        let data;
+            if(isFetching===true){
+                data = <div> <MDSpinner size={100} duration={1000} /> </div> 
+            }
+            else{
+                data = <div className="staffs">
+                      {searchData.map((el,key)=>(<Link to="/search/Staff"  key={key} onClick={getInfoSearchStaffData.bind(null,[{description: el.description, title: el.title, price: el.price, img: el.img}])} ><div className="staff" > {el.title} {el.price}  </div></Link> )
+                    )}
+                      </div>
+            }
+        return (
+            <div>
+                
+               {data} 
+                 
+            </div>
+        );
+    }
+}
+
+export default SearchStaffsPage;

src/constants/actionTypes.js

@@ -1 +1,13 @@
-export const GET_DATA = "GET_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";

src/container/AddNewStaff.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { connect} from 'react-redux';
+import * as actions from "../actions/addNewStaffAction";
+
+import { bindActionCreators } from "redux";
+
+import FormAddNewStaff from '../components/FormAddNewStaff'
+
+import EditModal from "../components/Modal";
+
+class AddNewStaff extends Component {
+    
+  	closeEditModal = () => {
+      	const { closeModal } = this.props;
+        	closeModal();
+  	}
+    render() {
+        const { showModal, error } = this.props
+        return (
+			<div className="top">
+            	<div>          
+              		<FormAddNewStaff {...this.props}/>
+            	</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
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default AddNewStaff = connect(
+      mapStateToProps,
+      mapDispatchToProps
+)(AddNewStaff);

src/container/App.js

@@ -1,18 +0,0 @@
-import React, { Component } from 'react';
-
-
-import LeftMenu from '../components/LeftMenu/DrawCategory'
-
-class App extends Component {
-  render() {
-    return (
-      <div className='ras'>
-          <div className='ras1'>
-            <LeftMenu /> 
-          </div>
-      </div>       
-    );
-  }
-}
-
-export default App;

src/container/Header.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import HeaderLogo from '../components/Header/logo'
+import SearchLine from '../components/Header/searchLine'
+import Myprofile from '../components/Header/Myprofile'
+import 'antd/dist/antd.css';
+
+import { connect } from 'react-redux';
+import * as actions from "../actions/searchStaffAction";
+import { bindActionCreators } from "redux";
+
+class Header extends Component {
+    render() {  
+        return (
+            <div className="header">
+               <HeaderLogo />
+               <SearchLine {...this.props}/>
+               <Myprofile/>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+        inputData: state.searchStaff.inputData,
+        isFetching: state.searchStaff.isFetching
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  
+  export default Header = connect(
+        mapStateToProps,
+        mapDispatchToProps
+  )(Header);

src/container/MainPage.js

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

src/container/MainPageStaffInfo.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { connect} from 'react-redux';
+import * as actions from "../actions/staffsAction";
+import { bindActionCreators } from "redux";
+
+import FullInfoAboutStaff from '../components/AllStaffs/FullInfoAboutStaff'
+import LeftMenu from '../components/LeftMenu'
+import Header from '../container/Header'
+
+class MainPageStaffInfo extends Component {
+    render() {
+       
+        return (
+            <div>
+                <Header />
+                <LeftMenu />
+                <FullInfoAboutStaff {...this.props} />
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+
+    InfoStaff: state.staffs.infoStaffs,
+
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  
+  export default MainPageStaffInfo = connect(
+        mapStateToProps,
+        mapDispatchToProps
+  )(MainPageStaffInfo);

src/container/SearchStaffs.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { connect} from 'react-redux';
+import * as actions from "../actions/searchStaffAction";
+
+import { bindActionCreators } from "redux";
+
+import SearchStaffsPage from "../components/SearchStaffsPage"
+import LeftMenu from '../components/LeftMenu'
+import Header from '../container/Header'
+
+
+
+class SearchStaff extends Component {
+ 
+      render() {
+        
+        return (
+          <div>
+            <Header />
+            <LeftMenu />
+            <SearchStaffsPage {...this.props} />
+          </div>       
+        );
+      }
+}
+
+
+const mapStateToProps = state => ({
+    searchData: state.searchStaff.searchData,
+    isFetching: state.searchStaff.isFetching,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+
+export default SearchStaff = connect(
+      mapStateToProps,
+      mapDispatchToProps
+)(SearchStaff);

src/container/SearchStaffsInfo.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { connect} from 'react-redux';
+import * as actions from "../actions/searchStaffAction";
+import { bindActionCreators } from "redux";
+
+import SearchFullInfoStaff from '../components/SearchStaffsPage/SearchFullInfoStaff'
+import LeftMenu from '../components/LeftMenu'
+import Header from '../container/Header'
+
+class SearchInfoStaffsInfo extends Component {
+    render() {
+       
+        return (
+            <div>
+                <Header />
+                <LeftMenu />
+                <SearchFullInfoStaff {...this.props}/>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+
+    fullInfoSearchData: state.searchStaff.fullInfoSearchData
+
+  });
+  
+  const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+  
+  export default SearchInfoStaffsInfo = connect(
+        mapStateToProps,
+        mapDispatchToProps
+  )(SearchInfoStaffsInfo);

src/index.css

@@ -69,3 +69,31 @@ code {
   height: 250px;
   
 }
+.staffs{
+  display:flex;
+ 
+}
+.staff{
+  width: 250px;
+  height: 250px;
+}
+.topbutton {
+  width:50px;
+  border:2px solid #ccc;
+  background:#f7f7f7;
+  text-align:center;
+  padding:10px;
+  position:fixed;
+  bottom:50px;
+  right:50px;
+  cursor:pointer;
+  color:#333;
+  font-family:verdana;
+  font-size:12px;
+  border-radius: 50px;
+  -moz-border-radius: 50px;
+  -webkit-border-radius: 50px;
+  -khtml-border-radius: 50px;
+  }
+
+  

src/index.js

@@ -2,14 +2,14 @@ import React from 'react';
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 import ReactDOM from 'react-dom';
+
 import * as serviceWorker from './serviceWorker';
 
 import Router from "./router";
-
 import store from "./state/state";
 
+import 'antd/dist/antd.css';
 import "./style/index.scss";
-// import "./index.css";
 
 ReactDOM.render(
     <BrowserRouter>
@@ -20,8 +20,4 @@ ReactDOM.render(
     document.getElementById("root")
 );
 
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
 serviceWorker.unregister();

src/reducer/addStaff.js

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

src/reducer/index.js

@@ -1,9 +1,13 @@
 import { combineReducers } from "redux";
 import { reducer as formReducer } from 'redux-form';
 
-import users from './users'
+import staffs from './staffs'
+import searchStaff from './searchStaff'
+import addStaff from './addStaff'
 
 export default  combineReducers({
-    users: users,
+    staffs: staffs,
+    searchStaff,
+    addStaff,
     form: formReducer,
 })

src/reducer/searchStaff.js

@@ -0,0 +1,49 @@
+import * as types from '../constants/actionTypes'
+
+const initState = {
+    inputData: "",
+    searchData: [],
+    fullInfoSearchData: [],
+    isFetching: false,
+    error: null,
+}
+
+export default (state = initState, { type, payload }) => {
+    
+    switch(type) {
+        case types.CHANGE_INPUT_VALUE: {
+            return {
+                ...state,
+                inputData: payload
+            }
+        }
+        case types.SEARCH_STAFF_REQUEST: {
+            return {
+                ...state,
+                isFetching: true
+            }
+        }
+        case types.SEARCH_STAFF_REQUEST_SUCCESS: {
+            return {
+                ...state,
+                isFetching: false,
+                searchData: payload.data
+            }
+        }
+        case types.SEARCH_STAFF_REQUEST_FAIL: {
+            return {
+                ...state,
+                isFetching:false,
+                error: "error"
+            }
+        }
+        case types.GET_INFO_SEARCH_STAFF_DATA: {
+            return {
+                ...state,
+                fullInfoSearchData: payload
+            }
+        }
+
+        default: return state;
+    }
+}

src/reducer/staffs.js

@@ -0,0 +1,45 @@
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    inputStaffs: [],
+    infoStaffs: [],
+    isFetching: false,
+    error: null
+  };
+
+  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()
+          }
+        }
+        case types.STAFF_REQUEST_FAIL: {
+          return {
+          ...state,
+          isFetching: false,
+          error: "ERROR"
+          }
+        }
+        case types.GET_STAFF_INFO_DATA: {
+          return {
+            ...state,
+            infoStaffs: payload
+          }
+        }
+        
+        default: return state;    
+    }
+  };
+
+  

src/reducer/users.js

@@ -1,21 +0,0 @@
-import * as types from "../constants/actionTypes";
-
-const initState = {
-    inputData: [],
-    isFetching: false,
-    error: null
-  };
-
-  export default (state = initState, { type, payload }) => {
-    
-      switch (type) {
-        case types.GET_DATA: {
-          return {
-          ...state,
-          inputData: payload
-          }
-        }
-        
-        default: return state;    
-    }
-  };

src/router.js

@@ -1,18 +1,27 @@
-import React, {Fragment} from "react";
+import React from "react";
 import { Switch, Route } from "react-router-dom";
 
-import App from "./container/App";
-import Header from './components/Header'
+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/SearchStaffs'
+import SearchStaffsInfo from './container/SearchStaffsInfo'
+import AddNewStaff from './container/AddNewStaff'
 
 export default () => (
-    <Fragment>
-        <Header/>
-	        <Switch>
-                    <Route path="/" exact component={App} />
-                    <Route path="/auth" exact component={Form} />
-                    <Route path="/registration" exact component={RegistrForm} />
-	        </Switch>
-    </Fragment>
-);
+	    <Switch>
+            <Route path="/" exact component={()=><MainPage/>} />
+                <Route path="/auth" exact component={()=><Form/>} />
+                <Route path="/registration" exact component={()=><RegistrForm/>} />
+                <Route path="/registration/login" exact component={()=><Form/>} />
+                <Route path="/staff" exact component={()=><MainPageStaffInfo/>} />
+                <Route path="/search" exact component={()=><SearchStaffs/>} />
+                    <Route path="/search/Staff" exact component={()=><SearchStaffsInfo/>} />
+                <Route path="/newStaff" exact component={()=><AddNewStaff/>} />
+            
+	    </Switch>
+);
+
+// /Ортопедическое кресло Austin/Рассрочка
+

src/state/state.js

@@ -1,8 +1,8 @@
-import { createStore} from "redux";
-
-//import thunk from "redux-thunk";
+import { createStore,applyMiddleware} from "redux";
+import thunk from "redux-thunk";
 import reducers from "../reducer/";
 
 export default createStore(
-	reducers
+	reducers,
+	applyMiddleware(thunk)
 );

src/style/abstracts/variables.scss

@@ -17,8 +17,8 @@ $color-grey-the-lightest: #f9fbfd;
 $color-grey-transparent: rgba(247, 249, 251, 0.7);
 
 //BASE COLORS
-$color-shadow: #d4d4d4;
-
+$color-shadow:#d4d4d4;
+$el-color:#FD7F71;
 // BASE
 $color-backgtound: #f5f8fb;
 $box-shadow: 0 0 16px 0 $color-shadow;

src/style/base/base.scss

@@ -85,7 +85,9 @@ body {
 	line-height: 1.7;
 	box-sizing: border-box;
 	background: $color-backgtound;
+	background-color: aqua;
 	min-width: 320px;
+	max-width: 1350px;
 }
 
 a:hover {

src/style/components/_allStaff.scss

@@ -0,0 +1,82 @@
+
+.contentDiv{
+    max-width: 100%;
+    display: flex;
+    
+    .content{
+        width: 100%;
+        padding: 10px;
+    }
+
+    .staffs{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+        align-content: center; 
+    }
+
+    .staff{
+        width: 350px;
+        height: 250px;
+        margin: 10px;
+        background-color: red;
+        border: 4px double black; 
+        background: #fc3;   
+    }
+
+}
+.topbutton{
+    position:fixed;
+    bottom:50px;
+    right: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 rgba(227, 115, 14, 0.7);
+    border-radius: 25px;
+    background: #e3730e;
+    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);
+        }
+      }
+    
+}
+
+// .loader{
+//     position: fixed;
+//     bottom: 0;
+//     left: 50%;
+//     right: 0;
+//     top: 50%;
+//     height: 100%;
+//     width: 100%;
+//     z-index: 9999; 
+
+// }
+
+
+
+  
+

src/style/components/_formLogin.scss

@@ -0,0 +1,89 @@
+.formdiv{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+	  font-size: 20px;
+    margin: 0 auto ;
+    // background-color: #c1bdba;
+    background-image: url("../img/depositphotos_80275194-stock-illustration-russian-old-fair-bazaar-vector.jpg");
+    
+    //height: 500px; /* You must set a specified height */
+    background-position: center; /* Center the image */
+    background-repeat: no-repeat; /* Do not repeat the image */
+    background-size: cover; 
+}
+
+h1, .input::-webkit-input-placeholder, .button {
+  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);
+}
+
+.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;
+  }
+}
+
+.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;
+    }
+  }
+}
+
+// .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);
+  }
+}

src/style/components/_header.scss

@@ -1,14 +1,3 @@
-body {
-	
-	margin: 0;
-	padding: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-	  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-	  sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-  }
-
 .header {
 	display:flex;
 
@@ -20,7 +9,20 @@ body {
 		width: 60%;
 		display: flex;
 		justify-content: center;
-		align-items: center;	
+		align-items: center;
+			
+		.div{
+			width: 100%;		
+		}
+
+		.input{
+			width: 60%;	
+		}
+
+		.link{
+			width: 20%;
+		}
+
 	}
 
 	&__auth {
@@ -40,21 +42,4 @@ body {
 			}
 		}
 	}
-}
-
-
-// import React from "react";
-// import { Link } from "react-router-dom";
-
-// export default () => (
-// 	<header className="header">
-// 		<nav className="header__nav">
-// 			<Link className="header__nav-item" to="/">
-// 				Home
-// 			</Link>
-// 			<Link className="header__nav-item" to="/fetch">
-// 				Weather
-// 			</Link>
-// 		</nav>
-// 	</header>
-// );
+}

src/style/header/logo.scss

@@ -1,3 +0,0 @@
-.logo{
-    width: 20%;
-}

src/style/index.scss

@@ -5,11 +5,37 @@
 @import "base/base";
 @import "base/typography";
 
-// @import "layout/container";
+@import "layout/container";
 
-// @import "components/list";
 @import "components/header";
-// @import "components/form";
+@import "components/formLogin";
+@import "components/allStaff";
 
+// *, *:before, *:after{
+//   box-sizing:border-box; 
+// }
 
-@import "header/logo.scss"
+// body{
+//     max-width: 1400px;
+//     min-width: 300px;
+//     width: 100%;
+// 	font-size: 20px;
+//     margin: 0 auto ;
+//     background-color: aqua;
+//     // background-image: url("../img/pngtree-Analog-Clock-Clock-Timepiece-Time-photo-484074.jpg");
+//     // background-color: #cccccc; /* Used if the image is unavailable */
+//     // height: 500px; /* You must set a specified height */
+//     // background-position: center; /* Center the image */
+//     // background-repeat: no-repeat; /* Do not repeat the image */
+//     // background-size: cover; 
+// }
+
+// .contentDiv{
+//     display: flex;   
+// }
+
+// .content{
+//     width: 80%;
+//     display: flex;
+//     flex-wrap: wrap;
+// }

src/style/layout/container.scss

@@ -0,0 +1,10 @@
+// .container {
+// 	max-width: 192rem;
+// 	width: 100%;
+// 	margin: 0 auto;
+// }
+
+// .todo {
+// 	padding: 3rem;
+// 	display: flex;
+// }