serverRequest

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,

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,13 +1,30 @@
 import React, { Component } 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 (
             <div>
-             {InfoStaff.map((el,key)=>(<div className="staff"  key={key}> {el.title} {el.price} {el.description} {el.img} </div>)
-                    )} 
+                
+             {data} 
                     
             </div>
         );

src/components/AllStaffs/index.js

@@ -7,10 +7,7 @@ import Loader from 'react-loader-spinner'
 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> 
@@ -24,7 +21,7 @@ class AllStaffs extends Component {
             }
             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" > {el.title} {el.price}  </div></Link> )
+                    {inputStaffs.map((el,key)=>(<Link to={`/staff/${el.id}`}  key={key}  ><div className="staff" > {el.title} {el.price}  </div></Link> )
                     )}    
                       </div>
             }
@@ -39,5 +36,3 @@ class AllStaffs extends Component {
 }
 
 export default AllStaffs;
-
-// '/staff/'+el.title

src/components/Header/searchLine.js

@@ -8,7 +8,7 @@ import { Link } from "react-router-dom";
 
 class SearchLine extends Component {
     changeHandler = (e)=>{
-            const {changeInputValue} = this.props
+            const { changeInputValue } = this.props
             changeInputValue(e.target.value)
         }
     send = () =>{
@@ -17,10 +17,11 @@ class SearchLine extends Component {
             searchStaff(inputData)
     }   
     render() {
+        const { inputData } = this.props
         return (
             <div className="searchLine">
             <input onChange={e=>{this.changeHandler(e)}} />
-            <Link to = '/search'><button onClick={this.send}>search</button></Link>
+            <Link to = {`/search/${inputData}`}><button onClick={this.send}>search</button></Link>
             </div>
         );
     }

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/MainPageStaffInfo.js

@@ -1,16 +1,21 @@
 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'
 
 class MainPageStaffInfo extends Component {
+        componentDidMount(){
+            const { getStaffsDataById, match } = this.props
+            getStaffsDataById(match.params.id)
+        }
     render() {
        
         return (
             <div>
                 <FullInfoAboutStaff {...this.props}/>
+            
             </div>
         );
     }
@@ -18,7 +23,8 @@ class MainPageStaffInfo extends Component {
 
 const mapStateToProps = state => ({
 
-    InfoStaff: state.staffs.infoStaffs,
+    InfoStaff: state.staffById.infoStaffs,
+    isFetching: state.staffById.isFetching,
 
   });
   

src/container/SearchStaffs.js

@@ -3,13 +3,16 @@ import { connect} from 'react-redux';
 import * as actions from "../actions/searchStaffAction";
 
 import { bindActionCreators } from "redux";
-import SearchStaffsPage from "../components/SearchStaffsPage"
+import SearchStaffsPage from "../components/SearchStaffsPage/"
 
 
 class SearchStaff extends Component {
- 
+    componentDidMount(){
+        const { searchStaff, match } = this.props
+        searchStaff(match.params.title)
+      }
       render() {
-        
+        console.log(this.props)
         return (
           <div>
             <SearchStaffsPage {...this.props}/>

src/container/SearchStaffsInfo.js

@@ -1,11 +1,15 @@
 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'
 
 class SearchInfoStaffsInfo extends Component {
+        componentDidMount(){
+            const { getSeacrhStaffsDataById, match } = this.props
+            getSeacrhStaffsDataById(match.params.id)
+        }
     render() {
        
         return (
@@ -18,7 +22,8 @@ class SearchInfoStaffsInfo extends Component {
 
 const mapStateToProps = state => ({
 
-    fullInfoSearchData: state.searchStaff.fullInfoSearchData
+    fullInfoSearchData: state.searchStaffById.fullInfoSearchData,
+    isFetching: state.searchStaffById.isFetching,
 
   });
   

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,
 }
@@ -37,12 +36,7 @@ export default (state = initState, { type, payload }) => {
                 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

@@ -7,7 +7,8 @@ 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'
 
@@ -18,16 +19,14 @@ export default () => (
         
         <Header/>
 	        <Switch>
-                <Route path="/" exact component={()=><MainPage/>} />
+                <Route path="/" exact component={MainPage} />
                     <Route path="/auth" exact component={()=><Form/>} />
                     <Route path="/registration" exact component={()=><RegistrForm/>} />
-                    <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/>} />
+                    <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>
 );
-
-// /Ортопедическое кресло Austin/Рассрочка