merge

package-lock.json

@@ -4008,11 +4008,13 @@
         "cssom": "0.3.x"
       }
     },
+
     "csstype": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.1.tgz",
       "integrity": "sha512-wv7IRqCGsL7WGKB8gPvrl+++HlFM9kxAM6jL1EXNPNTshEJYilMkbfS2SnuHha77uosp/YVK0wAp2jmlBzn1tg=="
     },
+
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -6161,11 +6163,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6178,15 +6182,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6289,7 +6296,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6299,6 +6307,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6311,6 +6320,7 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6322,6 +6332,7 @@
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6410,7 +6421,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6420,6 +6432,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6525,6 +6538,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7631,6 +7645,7 @@
       "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
     },
+
     "indefinite-observable": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
@@ -7639,6 +7654,7 @@
         "symbol-observable": "1.2.0"
       }
     },
+
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -16172,6 +16188,7 @@
         }
       }
     },
+
     "sass": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.16.0.tgz",
@@ -16180,6 +16197,7 @@
         "chokidar": "^2.0.0"
       }
     },
+
     "sass-graph": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",

src/actions/getStaffByIdAction.js

@@ -0,0 +1,29 @@
+import * as types from '../constants/actionTypes'
+
+const axios = require('axios')
+
+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());
+		return axios.get(`http://127.0.0.1:2000/api/staffs?id=${payload}`)
+                    .then(res => {
+                            setTimeout(()=>{dispatch(StaffRequestSuccessById(res))},Math.random()*1000);
+                        })
+                    .catch(err=>{
+                            dispatch(StaffRequestFailById(err));
+                    })    
+			
+	};
+};

src/actions/searchStaffAction.js

@@ -2,10 +2,7 @@ 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,
@@ -29,7 +26,7 @@ export const searchStaff = payload =>{
         dispatch(searchStaffRequest())
             return axios.get(`http://127.0.0.1:2000/api/staffs?search=${payload}`)
                     .then( 
-                        res=>{setTimeout(()=>{dispatch(searchStaffRequestSuccess(res))},1000)
+                        res=>{setTimeout(()=>{dispatch(searchStaffRequestSuccess(res))},1)
                         })
                     .catch(
                         err=>{dispatch(searchStaffrequestFail(err))

src/actions/searchStaffByIdAction.js

@@ -0,0 +1,33 @@
+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());
+		return axios.get(`http://127.0.0.1:2000/api/staffs?id=${payload}`)
+                    .then(res => {
+                            setTimeout(()=>{dispatch(SeacrhStaffRequestSuccessById(res))},Math.random()*1000);
+                        })
+                    .catch(err=>{
+                            dispatch(SeacrhStaffRequestFailById(err));
+                    })    
+			
+	};
+};

src/components/AllStaffs/FullInfoAboutStaff.js

@@ -1,22 +1,34 @@
 import React, { Component, Fragment } from 'react';
 
+import Loader from 'react-loader-spinner'
+
 class FullInfoAboutStaff extends Component {
     render() {
-        const { InfoStaff } = this.props
-        console.log(InfoStaff)
+        const { InfoStaff, isFetching } = this.props
+        
+        let data;
+            if(isFetching===true){
+                data = <div> 
+                    <Loader 
+                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>)
+                    )
+            }
         return (
+
             <Fragment>
-                {InfoStaff.map((el,key)=>(
-                    <div className="staff" 
-                        key={key}
-                    > 
-                        {el.title} 
-                        {el.price} 
-                        {el.description} 
-                        {el.img} 
-                    </div>)
-                )}    
+                
+             {data} 
+                    
             </Fragment>
+
         );
     }
 }

src/components/AllStaffs/index.js

@@ -7,43 +7,31 @@ import AddNewStaff from '../../components/BtnAddNewStaff'
 class AllStaffs extends Component {
     
     render() {
-            
-        const {inputStaffs,isFetching,getInfoStaffData} = this.props
-        console.log(this.props)
-           
+        const { inputStaffs, isFetching } = 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> 
+
+                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'} 
-                            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> )
+                    {inputStaffs.map((el,key)=>(<Link to={`/staff/${el.id}`}  key={key}  ><div className="staff" > {el.title} {el.price}  </div></Link> )
+
                     )}    
                       </div>
             }
         return (
+
            <div className="content">
+
                 {data}
                 <AddNewStaff/>
            </div> 
@@ -53,5 +41,3 @@ class AllStaffs extends Component {
 }
 
 export default AllStaffs;
-
-// '/staff/'+el.title

src/components/Auth/index.js

@@ -3,6 +3,7 @@ import { reduxForm, Field } from "redux-form";
 import  authValidate  from "../../utils/validate";
 
 const Form = props => {
+
   	const { handleSubmit } = props
     	return (
       		<div className="formdiv">
@@ -31,6 +32,7 @@ const Form = props => {
       		</div>
       
     	);
+
 }
 
 export default reduxForm({ form: "authForm", validate: authValidate })(Form);

src/components/Auth/registration.js

@@ -9,55 +9,58 @@ const RegistrForm = props => {
    console.log(props)
 };
   return (
-    <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"
-				/>
-			
+
+    <form onSubmit={handleSubmit(submit)} className="form">
+     <h1>Material Design Text Input With No Extra Markup</h1>
+     
+          <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"
-			className="input"
+
+            placeholder="+380XXXXXXXX"
+            className="input"
           />
-        
+       
+
           <Field
             name="email"
             component="input"
             type="email"
-			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>
+            placeholder="email@example.com"
+            className="input"
+          />
+      
+        <button type="submit" disabled={pristine || submitting} className="button">
+          Submit
+        </button>
+        <button type="button" disabled={pristine || submitting} onClick={reset} className="button">
+          Clear Values
+        </button>
+      
 
-        <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>
       </form>
-    </div>
+    
   )
 }
 

src/components/Header/Myprofile.js

@@ -4,6 +4,7 @@ import { Avatar } from 'antd';
 class Myprofile extends Component {
     render() {
         return (
+
         <div className="header__auth">
             <Link to="/auth" className="link" target="_blank">
                 <div className="header__auth__container">
@@ -13,6 +14,7 @@ class Myprofile extends Component {
                     <div>
                         Мой профиль
                     </div>
+
                 </div>    
             </Link>    
         </div>

src/components/Header/searchLine.js

@@ -65,10 +65,15 @@ import { Link } from "react-router-dom";
 // .catch((err)=>console.log(err))
 
 
+
+
 class SearchLine extends Component {
+    
     changeHandler = (e)=>{
-            const {changeInputValue} = this.props
+            const { changeInputValue, inputData, searchStaff } = this.props
             changeInputValue(e.target.value)
+             searchStaff(e.target.value)
+            
         }
     send = () =>{
             const { inputData, searchStaff } = this.props
@@ -86,12 +91,18 @@ class SearchLine extends Component {
     // </div>
 
     render() {
+        const { inputData } = this.props
         return (
-            
-                <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>
+
+            <div className="header__searchLine">
+            <input onChange={this.changeHandler}  className="searchInput" placeholder="Что будем покупать?"/>
+            <Link to = {`/search/${inputData}`} ><button onClick={this.send} className="searchBtn" > <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" className="icon">
+    <rect className="fill-none" width="32" height="32"/>
+    <path className="fill-currentcolor" d="M29.82861,24.17139,25.56519,19.908A13.0381,13.0381,0,1,0,19.908,25.56525l4.26343,4.26337a4.00026,4.00026,0,0,0,5.65723-5.65723ZM5,14a9,9,0,1,1,9,9A9.00984,9.00984,0,0,1,5,14Z"/>
+  </svg></button></Link>
+  
+            </div>
+
         );
     }
 }

src/components/LeftMenu/index.js

@@ -76,6 +76,7 @@ const styles = {
 };
 
 class LeftMenu extends Component {
+   
     state = {
         collapsed: false,
     };
@@ -84,16 +85,20 @@ class LeftMenu extends Component {
         this.setState({ collapsed });
     }
 
+
     render() {
 
+
         
 
         return (
+
             <div>
                 <Layout style={{ minHeight: '100vh' }}>
                     <Sider collapsible
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}
+
                     >
                         <DrawCategory />
                        

src/components/SearchStaffsPage/SearchFullInfoStaff.js

@@ -1,13 +1,28 @@
 import React, { Component } from 'react';
-
+import Loader from 'react-loader-spinner'
 class SearchFullInfoStaff extends Component {
     render() {
-        console.log(this.props)
-        const {fullInfoSearchData} = this.props
+        
+        const { fullInfoSearchData, isFetching } = this.props
+
+        let data;
+            if(isFetching===true){
+                data = <div> 
+                    <Loader 
+                type="Triangle"
+                color="#1890ff"
+                height="75"	
+                width="75"
+             /> 
+             </div>
+            }
+            else {
+                data = fullInfoSearchData.map((el,key)=>(<div key={key}> {el.title} {el.price} {el.description} </div>)
+                    )
+            } 
         return (
             <div>
-                 {fullInfoSearchData.map((el,key)=>(<div key={key}> {el.title} {el.price} {el.description} </div>)
-                    )}  
+                 {data}  
                     
             </div>
         );

src/components/SearchStaffsPage/index.js

@@ -1,21 +1,26 @@
 import React, { Component } from 'react';
 import { Link } from "react-router-dom";
-import MDSpinner from "react-md-spinner";
+import Loader from 'react-loader-spinner'
 
-
-
-class SearchStaffsPage extends Component {
+class searchStaffs extends Component {
     render() {
         
-        const {searchData, getInfoSearchStaffData, isFetching } = this.props
+        const {searchData, isFetching } = this.props
             
         let data;
             if(isFetching===true){
-                data = <div> <MDSpinner size={100} duration={1000} /> </div> 
+                data = <div> <div> 
+                <Loader 
+            type="Triangle"
+            color="#1890ff"
+            height="75"	
+            width="75"
+         /> 
+         </div> </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> )
+                      {searchData.map((el,key)=>(<Link to = {`/search/Staff/${el.id}`}  key={key}  ><div className="staff" > {el.title} {el.price}  </div></Link> )
                     )}
                       </div>
             }
@@ -29,4 +34,5 @@ class SearchStaffsPage extends Component {
     }
 }
 
-export default SearchStaffsPage;
+
+export default searchStaffs;

src/constants/actionTypes.js

@@ -10,4 +10,10 @@ 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 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";

src/container/MainPage.js

@@ -18,6 +18,7 @@ class MainPage extends Component {
       render() {
       console.log(this.props, 'qwewqrwqr')  
         return (
+
             <Fragment>
               <Header/>
               <div className="contentDiv">
@@ -25,6 +26,7 @@ class MainPage extends Component {
                 <AllStaffs {...this.props}/>
               </div>
             </Fragment>       
+
         );
       }
 }

src/container/MainPageStaffInfo.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect} from 'react-redux';
-import * as actions from "../actions/staffsAction";
+import * as actions from "../actions/getStaffByIdAction";
 import { bindActionCreators } from "redux";
 
 import FullInfoAboutStaff from '../components/AllStaffs/FullInfoAboutStaff'
@@ -8,13 +8,19 @@ import LeftMenu from '../components/LeftMenu'
 import Header from '../container/Header'
 
 class MainPageStaffInfo extends Component {
+        componentDidMount(){
+            const { getStaffsDataById, match } = this.props
+            getStaffsDataById(match.params.id)
+        }
     render() {
        
         return (
             <div>
+
                 <Header />
                 <LeftMenu />
                 <FullInfoAboutStaff {...this.props} />
+
             </div>
         );
     }
@@ -22,7 +28,8 @@ class MainPageStaffInfo extends Component {
 
 const mapStateToProps = state => ({
 
-    InfoStaff: state.staffs.infoStaffs,
+    InfoStaff: state.staffById.infoStaffs,
+    isFetching: state.staffById.isFetching,
 
   });
   

src/container/SearchStaffs.js

@@ -4,16 +4,21 @@ 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 {
- 
+    componentDidMount(){
+        const { searchStaff, match } = this.props
+        searchStaff(match.params.title)
+      }
       render() {
-        
+        console.log(this.props)
         return (
           <div>
             <Header />

src/container/SearchStaffsInfo.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect} from 'react-redux';
-import * as actions from "../actions/searchStaffAction";
+import * as actions from "../actions/searchStaffByIdAction";
 import { bindActionCreators } from "redux";
 
 import SearchFullInfoStaff from '../components/SearchStaffsPage/SearchFullInfoStaff'
@@ -8,6 +8,10 @@ import LeftMenu from '../components/LeftMenu'
 import Header from '../container/Header'
 
 class SearchInfoStaffsInfo extends Component {
+        componentDidMount(){
+            const { getSeacrhStaffsDataById, match } = this.props
+            getSeacrhStaffsDataById(match.params.id)
+        }
     render() {
        
         return (
@@ -22,7 +26,8 @@ class SearchInfoStaffsInfo extends Component {
 
 const mapStateToProps = state => ({
 
-    fullInfoSearchData: state.searchStaff.fullInfoSearchData
+    fullInfoSearchData: state.searchStaffById.fullInfoSearchData,
+    isFetching: state.searchStaffById.isFetching,
 
   });
   

src/index.js

@@ -8,7 +8,8 @@ import * as serviceWorker from './serviceWorker';
 import Router from "./router";
 import store from "./state/state";
 
-import 'antd/dist/antd.css';
+
+
 import "./style/index.scss";
 
 ReactDOM.render(

src/reducer/index.js

@@ -4,10 +4,15 @@ import { reducer as formReducer } from 'redux-form';
 import staffs from './staffs'
 import searchStaff from './searchStaff'
 import addStaff from './addStaff'
+import staffById from './staffsById'
+import searchStaffById from './searchStaffById'
+
 
 export default  combineReducers({
     staffs: staffs,
     searchStaff,
     addStaff,
+    staffById,
+    searchStaffById,
     form: formReducer,
 })

src/reducer/searchStaff.js

@@ -2,8 +2,7 @@ import * as types from '../constants/actionTypes'
 
 const initState = {
     inputData: "",
-    searchData: [],
-    fullInfoSearchData: [],
+    searchData: [], 
     isFetching: false,
     error: null,
 }
@@ -24,25 +23,23 @@ export default (state = initState, { type, payload }) => {
             }
         }
         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/searchStaffById.js

@@ -0,0 +1,41 @@
+
+
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    fullInfoSearchData: [],
+    isFetching: false,
+    error: null
+  };
+
+  export default (state = initState, { type, payload }) => {
+      
+      switch (type) {
+        
+        case types.SEARCH_STAFF_REQUEST_BY_ID: {
+          return {
+          ...state,
+          isFetching: true,
+           
+          
+          }
+        } 
+        case types.SEARCH_STAFF_REQUEST_SUCCESS_BY_ID: { 
+          return {
+          ...state,
+          isFetching: false,
+          fullInfoSearchData: [payload.data]
+          }
+        }
+        case types.SEARCH_STAFF_REQUEST_FAIL_BY_ID: {
+          return {
+          ...state,
+          isFetching: false,
+          error: "ERROR"
+          }
+        }
+        default: return state;    
+    }
+  };
+
+  

src/reducer/staffsById.js

@@ -0,0 +1,39 @@
+
+
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    infoStaffs: [],
+    isFetching: false,
+    error: null
+  };
+
+  export default (state = initState, { type, payload }) => {
+      
+      switch (type) {
+        
+        case types.STAFF_REQUEST_BY_ID: {
+          return {
+          ...state,
+          isFetching: true,
+          }
+        } 
+        case types.STAFF_REQUEST_SUCCESS_BY_ID: { 
+          return {
+          ...state,
+          isFetching: false,
+          infoStaffs: [payload.data]
+          }
+        }
+        case types.STAFF_REQUEST_FAIL_BY_ID: {
+          return {
+          ...state,
+          isFetching: false,
+          error: "ERROR"
+          }
+        }
+        default: return state;    
+    }
+  };
+
+  

src/router.js

@@ -5,23 +5,30 @@ 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 SearchStaffs from './container/SearchStaff'
+
+
+
 import SearchStaffsInfo from './container/SearchStaffsInfo'
 import AddNewStaff from './container/AddNewStaff'
 
 export default () => (
-	    <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/Рассрочка
+    <div>
+        
+        <Header/>
+	        <Switch>
+                <Route path="/" exact component={MainPage} />
+                    <Route path="/auth" exact component={()=><Form/>} />
+                    <Route path="/registration" exact component={()=><RegistrForm/>} />
+                    <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>
+    </div>
+);
 

src/style/components/auth.scss

@@ -0,0 +1,118 @@
+$color: #FD7F71;
+
+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($color, 4%);
+  color: white;
+  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;
+  margin: 100px auto 0;
+  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+  padding-bottom: 40px;
+  border-radius: 3px;
+  h1 {
+    box-sizing: border-box;
+    padding: 20px;
+  }
+}
+
+.input {
+  margin: 20px 25px;
+  width: 200px;
+  display: block;
+  border: none;
+  padding: 10px 0;
+  border-bottom: solid 1px $color;
+  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
+  background-position: -200px 0;
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  color: darken($color, 1%);
+  &:focus {
+    box-shadow: none;
+    outline: none;
+    background-position: 0 0;
+    &::-webkit-input-placeholder {
+      color: $color;
+      font-size: 11px;
+      transform: translateY(-20px);
+      visibility: visible !important;
+    }
+  }
+}
+
+//.input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.5s ease;}
+.button {
+  border: none;
+  background: $color;
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 6px;
+  margin-bottom: 10px;
+  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);
+  }
+}
+
+.allStaffs{
+  
+  max-width: 1500px;
+   display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+.staffs{
+  max-width: 1500px;
+  display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    
+}
+.staff{
+   width: 350px;
+   
+}
+
+.main{
+  display: flex;
+}
+
+.loader{
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  right: 0;
+  top: 50%;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+  
+   
+}
+.sider{
+  background-color: #FD7F71
+}

src/style/components/searchLine.scss

@@ -0,0 +1,89 @@
+$color: #FD7F71;
+$background: #F7FBFB;
+$background-2: #EAF5F5;
+$background-3: #BBD8D8;
+$primary: #FD7F71;
+$white: #fff;
+$breakpoint: 768px;
+.searchInput::-webkit-input-placeholder, .button {
+    font-family: 'roboto', sans-serif;
+    transition: all 0.3s ease-in-out;
+  }
+
+
+.searchInput{   
+margin: 40px 25px;
+width: 75%;
+display: block;
+border: none;
+padding: 10px 0;
+border-bottom: solid 1px $color;
+transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
+background-position: -700px 0;
+background-size: 700px 100%;
+background-repeat: no-repeat;
+color: darken($color,1%);
+&:focus {
+  box-shadow: none;
+  outline: none;
+  background-position: 0 0;
+  &::-webkit-input-placeholder {
+    text-indent: 700px; transition: text-indent 0.5s ease;
+  }
+}
+}
+.searchBtn{
+    border:none;
+    outline: none;
+    border: 0px;
+    cursor: pointer;
+  color: $primary;
+  transition: .3s ease-out;
+  
+  &:hover,
+  &:focus { 
+    transform: scale(1.125);
+    
+    .icon {
+      transform: scale(1.25); } } 
+        // Display/alignment
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        
+        // Sizing
+        width: 68px;
+        height: 68px;
+        border-radius: 34px;
+        
+        // Style
+        background-color: $white;
+        box-shadow:
+          0 1px 1px rgba($background-3, .6),
+          0 3px 3px rgba($background-3, .4),
+          0 8px 16px rgba($background-3, .3);
+        
+        &:hover,
+        &:focus {
+          box-shadow:
+            0 2px 2px rgba($background-3, .4),
+            0 4px 4px rgba($background-3, .3),
+            0 12px 32px rgba($background-3, .3); } 
+  }
+
+  .fill-currentcolor {
+    fill: currentcolor; }
+  
+  .fill-none {
+    fill: none; }
+
+    .icon {
+        width: 24px;
+        height: 24px;
+        transition: .3s ease-out;
+        
+        @media (min-width: $breakpoint) {
+          width: 32px;
+          height: 32px; } }

src/style/index.scss

@@ -1,3 +1,4 @@
+
 @import "~antd/dist/antd.css";
 
 @import "abstracts/variables.scss";
@@ -11,6 +12,9 @@
 @import "components/formLogin";
 @import "components/allStaff";
 
+@import './components/auth.scss';
+@import './components/searchLine.scss'
+
 // *, *:before, *:after{
 //   box-sizing:border-box; 
 // }
@@ -39,3 +43,4 @@
 //     display: flex;
 //     flex-wrap: wrap;
 // }
+