some new visual changes

src/App.js

@@ -3,16 +3,8 @@ import {connect} from 'react-redux'
 import {Switch, Route} from "react-router-dom";
 
 import {
-
     getDoctors,
     getServices,
-    setAppointmentDoctor,
-    setAppointmentTime,
-    setAppointmentSpec,
-    setAppointmentComment,
-    clearAppointment,
-
-
 } from "./actions/actions";
 
 import Header from "./components/header/index"
@@ -63,7 +55,6 @@ export class App extends React.Component {
     }
 
     render() {
-        console.log(this.props.app)
         return (
             <div className="container">
                 <Header/>
@@ -95,16 +86,8 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = {
-
     getDoctors,
     getServices,
-    setAppointmentDoctor,
-    setAppointmentTime,
-    setAppointmentSpec,
-    setAppointmentComment,
-    clearAppointment,
-
-
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(App)

src/components/Appointment.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {connect} from "react-redux";
 
-
 import {
+
     setAppointmentSpec,
     setAppointmentShedule,
     setAppointmentDoctor,
@@ -13,8 +13,6 @@ import {
 
 } from "../actions/actions";
 
-
-
 export class Appoint extends React.Component {
 
     componentDidMount() {
@@ -25,89 +23,88 @@ export class Appoint extends React.Component {
         this.props.clearAppointment()
     }
 
-
     render() {
         const {doctors, appointment, timeArray, wrongDate,services} = this.props.app;
         const {his, setAppointmentSpec, setAppointmentShedule, setAppointmentTime, setAppointmentComment, postOrders} = this.props;
         const doctor = doctors.find(el => el._id === his.match.params.doctorId);
-        let spec
+        let spec;
         if (appointment.spec){
             spec = services.find(el => el._id === appointment.spec)
         }
-        let currentDate
-        let choosedData
+        let currentDate;
+        let choosedData;
         if (doctor) {
             if (doctor.shedule && appointment.shedule) {
-                currentDate = new Date().toISOString().split('T')[0]
+                currentDate = new Date().toISOString().split('T')[0];
                 choosedData = doctor.shedule.find(el => el._id === appointment.shedule).data.split('T')[0];
             }
         }
-        console.log(this.props.app)
         return (
             <>
                 {doctor &&
-                <div style={{display:'flex',flexDirection:'column',width:'400px'}}>
-                    <p>{doctor.photo}</p>
-                    <p>{doctor.name}</p>
-                    <p>{doctor.lastName}</p>
-                    <p>{doctor.skillsDescription}</p>
-
-                    {appointment.spec &&
-                    <div>
-                        <p>{spec.name}</p>
-                        <p>Duration:{spec.duration}h</p>
-                        <p>{spec.description}</p>
-                        <p>Price:{spec.price}$</p>
-                    </div>
-                    }
-                    <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='choose spec'>
-                        <option disabled >choose spec</option>
-                        {
-                            doctor.speciality.map(el=> (
-                                <option key={el._id}>{el.name}</option>
-                            ))
+                    <div style={{display:'flex',flexDirection:'column',width:'400px'}}>
+                        <img src={doctor.photo} alt=""/>
+                        <p>{doctor.name}</p>
+                        <p>{doctor.lastName}</p>
+                        <p>{doctor.skillsDescription}</p>
+
+                        {appointment.spec &&
+                            <div>
+                                <p>{spec.name}</p>
+                                <p>Duration:{spec.duration}h</p>
+                                <p>{spec.description}</p>
+                                <p>Price:{spec.price}$</p>
+                            </div>
                         }
-                    </select>
-
-                    {appointment.spec &&
-                    <input type="date" onChange={(e)=>setAppointmentShedule(doctor.shedule.find(el => el.data === new Date(e.target.value).toISOString())
-                        ? doctor.shedule.find(el => el.data === new Date(e.target.value).toISOString())._id
-                        : null)}/>
-                    }
-
-
-
-                    {!appointment.shedule ?
-                        !wrongDate ?
-                            <p>There is no available time to choose on this date</p>
-                            : null
-                        : <div>
-                            { choosedData >= currentDate ?
-                                <div>
-                                    <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
-                                        <option disabled >choose time</option>
-                                        {
-                                            timeArray.map(el=> (
-                                                Object.values(el)[0] ? <option key={Object.keys(el)[0]} style={{color:'green'}} > {Object.keys(el)[0]} </option> : <option key={Object.keys(el)[0]} style={{color:'red'}} disabled > {Object.keys(el)[0]} </option>
-                                            ))
-                                        }
-
-                                    </select>
-                                </div>
-                                : <p>Choose current or future date</p>
+                        <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='choose spec'>
+                            <option disabled >choose spec</option>
+                            {
+                                doctor.speciality.map(el=> (
+                                    <option key={el._id}>{el.name}</option>
+                                ))
                             }
-                        </div>
+                        </select>
+
+                        {appointment.spec &&
+                            <input
+                                type="date"
+                                onChange={(e) => setAppointmentShedule(doctor.shedule.find(el => el.data === new Date(e.target.value).toISOString())
+                                    ? doctor.shedule.find(el => el.data === new Date(e.target.value).toISOString())._id
+                                    : null
+                                )}
+                            />
+                        }
 
-                    }
+                        {!appointment.shedule ?
+                            !wrongDate ?
+                                <p>There is no available time to choose on this date</p>
+                                : null
+                            : <div>
+                                { choosedData >= currentDate ?
+                                    <div>
+                                        <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
+                                            <option disabled >choose time</option>
+                                            {
+                                                timeArray.map(el=> (
+                                                    Object.values(el)[0]
+                                                        ? <option key={Object.keys(el)[0]} style={{color:'green'}} > {Object.keys(el)[0]} </option>
+                                                        : <option key={Object.keys(el)[0]} style={{color:'red'}} disabled > {Object.keys(el)[0]} </option>
+                                                ))
+                                            }
+                                        </select>
+                                    </div>
+                                    : <p>Choose current or future date</p>
+                                }
+                                </div>
+                        }
 
-                    {appointment.time &&
-                    <div style={{display:"flex",flexDirection:"column"}}>
-                        <input type='text' placeholder='Add comments here' onChange={(e)=>setAppointmentComment(e.target.value)}/>
-                        <button onClick={() => postOrders(appointment)}>Confirm Appointment</button>
+                        {appointment.time &&
+                            <div style={{display:"flex",flexDirection:"column"}}>
+                                <input type='text' placeholder='Add comments here' onChange={(e)=>setAppointmentComment(e.target.value)}/>
+                                <button onClick={() => postOrders(appointment)}>Confirm Appointment</button>
+                            </div>
+                        }
                     </div>
-                    }
-
-                </div>
                 }
             </>
         );

src/components/specialists/doctors.js

@@ -7,26 +7,30 @@ export default class Doctors 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: '300px', margin: '100px 20px'}}
-                    >
-                        <Link to={`/doctors/${el._id}`}>
-                            <p>{el.photo}</p>
-                            <p>{el.name}</p>
-                            <p>{el.lastName}</p>
-                            <p>{el.age}</p>
-                            <p>{el.skillsDescription}</p>
-                        </Link>
-                        {el.speciality.map(el => (
-                            <Link to={`/services/${el._id}`} key={el._id}>{el.name}</Link>
+            <div style={{margin:"100px 0"}}>
+                <div className="wrapper">
+                    <div className = "team-container">
+                        {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" className = "btn link more">Подробнее ...</Link>
+                                    <Link to={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
+                                </div>
+                            </div>
                         ))}
-                        <Link to={`/appointment/${el._id}`}>Make an appointment</Link>
                     </div>
-                ))}
+                </div>
             </div>
         );
     }
-}
+}
+
+
+
+