компоненты переделаны с render на component

src/App.js

@@ -11,16 +11,14 @@ import {
 import Loader from "./components/loader"
 import Header from "./components/header/index"
 import Main from "./components/main/Main";
-import Doctors from "./components/specialists/doctors";
-import MoreInfo from "./components/specialists/MoreInfo"
-// import Service from "./components/Service";
+import Doctors from "./components/specialists/Doctors";
 import Services from "./components/Services"
+import MoreInfo from "./components/specialists/MoreInfo"
 import Appointment from "./components/Appointment";
+import Reviews from "./components/Reviews"
+import Admin from './components/Admin/Admin'
 import Auth from './containers/auth'
 import Footer from "./components/Footer";
-import Admin from './components/Admin/Admin'
-
-
 
 export class App extends React.Component {
 
@@ -28,28 +26,6 @@ export class App extends React.Component {
         this.props.getDoctors();
         this.props.getServices();
 
-        // fetch("https://api-clinics.herokuapp.com/api/v1/orders", {
-        //     method: "GET",
-        //     credentials: "include"
-        // })
-        //     .then(res => res.json())
-        //     .then(res => console.log (res))
-
-        // fetch("https://api-clinics.herokuapp.com/api/v1/services", {
-        //     method: "GET",
-        //     credentials: "include"
-        // })
-        //     .then(res => res.json())
-        //     .then(res => console.log (res))
-
-    //     fetch("https://api-clinics.herokuapp.com/api/v1/doctors",{
-    //         method: "GET",
-    //         credentials:"include"
-    //     })
-    //     .then(res => res.json())
-    //     .then(res => console.log (res))
-    // }
-
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
         //     credentials: "include",
@@ -66,29 +42,18 @@ export class App extends React.Component {
     }
 
     render() {
-        // console.log(this.props.app)
         return (
               <Loader flag={this.props.isFetching}>
                     <Header/>
                     <Switch>
                         <Route exact path="/" component={Main} />
-                        <Route exact path="/doctors" render={() => <Doctors data={this.props.app.doctors} /> } />
-                        <Route exact path="/doctors/:doctor" render={(props) =>
-                            <MoreInfo
-                                his={props}
-                                data={this.props.app.doctors}
-                            />}
-                        />
-                        <Route exact path="/services" render={() => <Services data={this.props.app.services} />} />
-                        <Route exact path="/reviews" render={() => <div>Reviews</div>} />
+                        <Route exact path="/doctors" component={Doctors} />
+                        <Route exact path="/services" component={Services} />
+                        <Route exact path="/doctors/:doctor" component={MoreInfo} />
+                        <Route exact path="/services/:service" component={MoreInfo} />
+                        <Route exact path="/reviews" component={Reviews}/>
                         <Route path="/admin/" component={Admin} />
-                        <Route exact path="/services/:service" render={(props) =>
-                            <MoreInfo
-                                his={props}
-                                data={this.props.app.services}
-                            />}
-                        />
-                        <Route  path="/appointment/:doctorId" component={Appointment}/>
+                        <Route exact path="/appointment/:doctorId" component={Appointment}/>
                         <Route exact path="/auth" component={Auth} />
                     </Switch>
                 <Footer/>

src/components/Reviews.js

@@ -1,6 +1,6 @@
 import React from 'react';
 // import {Link} from 'react-router-dom';
-import Button from "../buttons/button";
+// import Button from "../buttons/button";
 // import { postServices} from "../../store/app/actions";
 
 

src/components/Services.js

@@ -1,30 +1,42 @@
 import React from 'react';
 import {Link} from 'react-router-dom'
+import {connect} from 'react-redux'
 
-export default class Services extends React.Component {
-
-
+export class Services extends React.Component {
     render() {
         const {data} = this.props;
-
         return (
-            <div style={{display:'flex', justifyContent:'center', flexWrap:'wrap'}}>
-                {
-                    data.map(el => (
-                        <div key={el._id} style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
-                            <p>{el.name}</p>
-                            <p>Duration:{el.duration}h</p>
-                            <p>{el.description}</p>
-                            <p>Price:{el.price}грн.</p>
-                            <div>
-                                <Link to={`/services/${el._id}`}>More Info</Link>
-                                <button>Make appointment</button>
-                            </div>
-                        </div>
-                    ))
-                }
-
+            <div className="main">
+                <div className="wrapper">
+                    <div className = "doctors-wrap">
+                        {
+                            data.map(el => (
+                                <div key={el._id} style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
+                                    <p>{el.name}</p>
+                                    <p>Duration:{el.duration}h</p>
+                                    <p>{el.description}</p>
+                                    <p>Price:{el.price}грн.</p>
+                                    <div>
+                                        <Link to={`/services/${el._id}`}>More Info</Link>
+                                        <button>Make appointment</button>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+                </div>
             </div>
         );
     }
-}
+}
+
+const mapStateToProps = state => {
+    return {
+        data:state.app.services
+    }
+};
+
+const mapDispatchToProps = {
+};
+
+export default connect (mapStateToProps,mapDispatchToProps)(Services)

src/components/specialists/Doctors.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {Link} from 'react-router-dom'
+import {connect} from 'react-redux'
+
+export class Doctors extends React.Component {
+    render() {
+        const {data} = this.props;
+        return (
+            <div className="main">
+                <div className="wrapper">
+                    <div className = "doctors-wrap">
+                        {
+                            data.map(el => (
+                                <div className="item"  key = {el._id} >
+                                    <div className="photo"><img src= {el.photo} alt= {el.name}/></div>
+                                    <h3>{el.name}</h3>
+                                    <div className="desc">
+                                        <p className="experience">Опыт работы {new Date().toISOString().split('T')[0].split('-')[0] - el.experience.split('T')[0].split('-')[0]} лет</p>
+                                        <p className="rank">{el.profession}</p>
+                                    </div>
+                                    <div className="link-box">
+                                        <Link to = {`/doctors/${el._id}`} className = "btn link more">Подробнее ...</Link>
+                                        <Link to={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+                </div>                
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        data:state.app.doctors
+    }
+};
+
+const mapDispatchToProps = {
+};
+
+export default connect (mapStateToProps,mapDispatchToProps)(Doctors)
+
+
+

src/components/specialists/MoreInfo.js

@@ -1,34 +1,44 @@
 import React from 'react';
 import {Link} from 'react-router-dom'
+import {connect} from 'react-redux'
 
-export default class MoreInfo extends React.Component {
-
-
+export class MoreInfo extends React.Component {
     render() {
-        const {his,data} = this.props;
-        const doctor = data.find(el => el._id === his.match.params.doctor);
-        const service = data.find(el => el._id === his.match.params.service);
-
-        console.log (this.props, doctor)
+        const {match,doctors,services} = this.props;
+        const doctor = doctors.find(el => el._id === match.params.doctor);
+        const service = services.find(el => el._id === match.params.service);
         return (
             <>
-           {doctor && <div >
-               <h3>{doctor.name}</h3> 
-                <p>Duration:{doctor.profession}</p>
-                <p>{doctor.description}</p>
-                <p>Price:{doctor.experience}грн.</p>
-                <Link to={`/doctors/${doctor}`}>Make an appointment</Link>
-            </div>} 
-            {
-                service  &&             <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
-                {service.name}
-                <p>Duration:{service.duration}h</p>
-                <p>{service.description}</p>
-                <p>Price:{service.price}грн.</p>
-                <Link to={`/appointment/${service}`}>Make an appointment</Link>
-            </div>
-            }
+               {doctor &&
+               <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
+                   <h3>{doctor.name}</h3>
+                   <img src={`.${doctor.photo}`} alt=""/>
+                   <p>{doctor.profession}</p>
+                   <p>Опыт работы более {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]} лет</p>
+                   <Link to={`/appointment/${doctor}`}>Make an appointment</Link>
+               </div>}
+
+                {service  &&
+                <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
+                    {service.name}
+                    <p>Duration:{service.duration}h</p>
+                    <p>{service.description}</p>
+                    <p>Price:{service.price}грн.</p>
+                    <Link to={`/appointment/${service}`}>Make an appointment</Link>
+                </div>}
             </>
         );
     }
-}
+}
+
+const mapStateToProps = state => {
+    return {
+        doctors:state.app.doctors,
+        services:state.app.services
+    }
+};
+
+const mapDispatchToProps = {
+};
+
+export default connect (mapStateToProps,mapDispatchToProps)(MoreInfo)

src/components/specialists/doctors.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import {Link} from 'react-router-dom'
-
-export default class Doctors extends React.Component {
-
-
-    render() {
-        const {data} = this.props;
-        return (
-            <div className="main">
-                <div className="wrapper">
-                    <div className = "doctors-wrap">
-                        {data.map(el => (
-                            <div className="item"  key = {el._id} >
-                                <div className="photo"><img src= {el.photo} alt= {el.name}/></div>
-                                <h3>{el.name}</h3>
-                                <div className="desc">
-                                    <p className="experience">Опыт работы {new Date().toISOString().split('T')[0].split('-')[0] - el.experience.split('T')[0].split('-')[0]} лет</p>
-                                    <p className="rank">{el.profession}</p>
-                                </div>
-                                <div className="link-box">
-                                    <Link to = {`/doctors/${el._id}`} className = "btn link more">Подробнее ...</Link>
-                                    <Link to={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </div>                
-            </div>
-        );
-    }
-}
-
-
-
-