reworked apointmen

src/components/Appointment.js

@@ -2,7 +2,6 @@ import React from 'react';
 import {connect} from "react-redux";
 
 import {
-
     setAppointmentSpec,
     setAppointmentShedule,
     setAppointmentDoctor,
@@ -13,10 +12,11 @@ import {
 
 } from "../actions/actions";
 
+import Calendar from "../components/Calendar"
+
 export class Appoint extends React.Component {
 
     componentDidMount() {
-        console.log(this.props)
         this.props.setAppointmentDoctor(this.props.match.params.doctorId)
     }
 
@@ -25,95 +25,76 @@ export class Appoint extends React.Component {
     }
 
     render() {
-        const {doctors, appointment, timeArray, wrongDate,services} = this.props.app;
+        const {doctors, appointment, timeArray,services} = this.props.app;
         const {match, setAppointmentSpec, setAppointmentShedule, setAppointmentTime, setAppointmentComment, postOrders} = this.props;
         const doctor = doctors.find(el => el._id === match.params.doctorId);
         let spec;
         if (appointment.spec){
             spec = services.find(el => el._id === appointment.spec)
         }
-        let currentDate;
-        let choosedData;
-        if (doctor) {
-            if (doctor.shedule && appointment.shedule) {
-                currentDate = new Date().toISOString().split('T')[0];
-                choosedData = doctor.shedule.find(el => el._id === appointment.shedule).data.split('T')[0];
-            }
-        }
         return (
             <>
-            <div className="main">
-            {doctor &&
+                <div className="main">
+                    {doctor &&
                     <div className = "info-wrap">
-                            <div className="card">
-                                <div className="card-item">
-                                    <img src={`.${doctor.photo}`} alt={doctor.name}/>
+                        <div className="card">
+                            <div className="card-item">
+                                <img src={`.${doctor.photo}`} alt={doctor.name}/>
+                            </div>
+                            <div className="card-item desc">
+                                <h3>{doctor.name}</h3>
+                                <p className = "highlights">{doctor.profession}</p>
+
+                                {appointment.spec &&
+                                <div>
+                                    <p>{spec.name}</p>
+                                    <p>Длительность: {spec.duration} ч.</p>
+                                    {/* <p>{spec.description}</p> */}
+                                    <p>Цена от {spec.price} грн.</p>
                                 </div>
-                                <div className="card-item desc">
-                                    <h3>{doctor.name}</h3>
-                                    <p className = "highlights">{doctor.profession}</p>
-                                    {appointment.spec &&
-                                    <div>
-                                        <p>{spec.name}</p>
-                                        <p>Длительность: {spec.duration} ч.</p>
-                                        {/* <p>{spec.description}</p> */}
-                                        <p>Цена от {spec.price} грн.</p>
-                                    </div>
-                                     }
-                                    <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='Выбор услуги'>
-                                        <option disabled >Выбор услуги</option>
-                                        {
-                                            doctor.speciality.map(el=> (
-                                                <option key={el._id}>{el.name}</option>
-                                            ))
-                                        }
-                                    </select>
-                                    {appointment.spec &&
-                                    <input
-                                        type="date"
-                                        onChange={(e) => setAppointmentShedule(doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])
-                                            ? doctor.shedule.find(el => new Date(el.data).toISOString().split('T')[0] === new Date(e.target.value).toISOString().split('T')[0])._id
-                                            : null
-                                        )}
-                                    />
                                 }
 
-                                {!appointment.shedule ?
-                                    !wrongDate ?
-                                        <p>На эту дату нет свободного времени для выбора</p>
-                                        : null
-                                    : <div>
-                                        { choosedData >= currentDate ?
-                                            <div>
-                                                <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
-                                                    <option disabled >Выбор даты</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>Выберите текущую или будущую дату</p>
-                                        }
-                                        </div>
+                                <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='Выбор услуги'>
+                                    <option disabled >Выбор услуги</option>
+                                    {
+                                        doctor.speciality.map(el=> (
+                                            <option key={el._id}>{el.name}</option>
+                                        ))
+                                    }
+                                </select>
+
+                                {appointment.spec &&
+                                <Calendar doctor={doctor} setAppointmentShedule={setAppointmentShedule} />
                                 }
 
-                                {appointment.time &&
-                                    <div style={{display:"flex",flexDirection:"column"}}>
-                                        <input type='text' placeholder='Добавить комментарий' onChange={(e)=>setAppointmentComment(e.target.value)}/>
-                                        <button onClick={() => postOrders(appointment)}>Подтвердите запись</button>
+                                {appointment.shedule &&
+                                <div>
+                                    <div>
+                                        <select onChange={(e)=>setAppointmentTime(e.target.value)} defaultValue='choose time'>
+                                            <option disabled >Выбор даты</option>
+                                            {
+                                                timeArray.map(el=> (
+                                                    <option key={Object.keys(el)[0]}> {Object.keys(el)[0]} </option>
+                                                ))
+                                            }
+                                        </select>
                                     </div>
+                                </div>
                                 }
 
+                                {appointment.time &&
+                                <div style={{display:"flex",flexDirection:"column"}}>
+                                    <input type='text' placeholder='Добавить комментарий' onChange={(e)=>setAppointmentComment(e.target.value)}/>
+                                    <button onClick={() => postOrders(appointment)}>Подтвердите запись</button>
                                 </div>
+                                }
+
                             </div>
+                        </div>
                     </div>
-                }
-            </div>
-                
+                    }
+                </div>
+
             </>
         );
     }
@@ -136,3 +117,4 @@ const mapDispatchToProps = {
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(Appoint)
+

src/components/Calendar.js

@@ -1,27 +1,18 @@
 import React, {Component} from 'react';
 import moment from "moment";
-import {connect} from 'react-redux'
 
-export class Calendar extends Component {
+export default class Calendar extends Component {
     state={
         current:moment(),
     };
 
-
-    setDate = (e) => {
-        console.log(moment(e.target.id).format('YYYY-MM-DD'))
-        // console.log(this.props.doctors[0].shedule.find(el => el.data === e.target.id) ? this.props.doctors[0].shedule.find(el => el.data === e.target.id)._id : 'No such shedule')
-
-    };
-
-
     render() {
         moment.locale('ru', {
             week : {
                 dow:1
             }
         });
-        const {doctors}=this.props
+        const {doctor,setAppointmentShedule} = this.props
         const {current} = this.state
         const daysArray = []
         for (let x=1; x <= current.daysInMonth();x++){
@@ -33,18 +24,18 @@ export class Calendar extends Component {
             daysArray.unshift(prevMonth.endOf('month').subtract(x-1,'days').format('YYYY-MM-DD'))
         }
         return (
-            <div style={{display:'flex',flexDirection:'column',margin:"100px 20px"}}>
+            <div style={{display:'flex',flexDirection:'column',margin:"0px 20px"}}>
                 <div style={{display:'flex',margin:'20px'}}>
                     <button onClick={() => this.setState({current:current.subtract(1,"month")})}>{'<'}</button>
-                    <h3>{current.format('MMMM-YYYY')}</h3>
+                    <h4 style={{margin:'0 20px'}}>{current.format('MMMM-YYYY')}</h4>
                     <button onClick={() => this.setState({current:current.add(1,"month")})}>{'>'}</button>
                 </div>
                 <div style={{display:'flex',}}>
-                    {moment.weekdays(true).map(el => (
-                            <p key={el} style={{margin:'0 20px'}}>{el}</p>
+                    {moment.weekdaysShort(true).map(el => (
+                            <p key={el} style={{margin:'0 6px'}}>{el}</p>
                     ))}
                 </div>
-                <div  style={{display:'flex',flexWrap:'wrap',maxWidth:'700px',margin:'5px'}}>
+                <div  style={{display:'flex',flexWrap:'wrap',maxWidth:'350px',margin:'5px'}}>
 
                     {daysArray.map(el => (
                         <button
@@ -54,14 +45,16 @@ export class Calendar extends Component {
                                 moment(el).format('YYYY-MM-DD') < moment().format('YYYY-MM-DD')
                                 || (moment(el).day()===6)
                                 || (moment(el).day()===0)
+                                || moment(el).month() !== current.month()
+                                || !doctor.shedule.find(item => item.data === el)
                             }
                             style={{
-                                height:'100px',
-                                width:'100px',
-                                backgroundColor:doctors[0] ? doctors[0].shedule.find(item => item.data === el) ? "lightgreen" : "coral" : null,
+                                height:'50px',
+                                width:'50px',
+                                backgroundColor:moment(el).month() === current.month() ? doctor.shedule.find(item => item.data === el) ? "lightgreen" : "coral" : "lightgrey",
                                 border:moment().format('YYYY-MM-DD') ===  moment(el).format('YYYY-MM-DD') ? "3px solid black" : null
                             }}
-                            onClick={this.setDate}
+                            onClick={(e) => setAppointmentShedule(e.target.id)}
                         >
                             {moment(el).format('DD')}
                         </button>
@@ -72,13 +65,3 @@ export class Calendar extends Component {
     }
 }
 
-const mapStateToProps = state => {
-    return {
-        doctors:state.app.doctors,
-    }
-};
-
-const mapDispatchToProps = {
-};
-
-export default connect (mapStateToProps,mapDispatchToProps)(Calendar)

src/reducers/reducers.js

@@ -199,8 +199,9 @@ export const appReducer = (state = defaultState,action) => {
         case types.CHANGE_APPOINTMENT_SHEDULE : {
             let timeArray =[];
             let doctor = state.doctors.find(el => el._id === state.appointment.doctor);
-            let shedule = doctor.shedule.find(el => el._id === action.payload);
+            let shedule = doctor.shedule.find(el => el.data === action.payload);
             let duration = state.services.find(el => el._id === state.appointment.spec).duration;
+            console.log(shedule,action.payload)
             for (let index in shedule) {
                 let check = true;
                 for (let x=0;x < duration; x++){
@@ -214,7 +215,7 @@ export const appReducer = (state = defaultState,action) => {
                 ...state,
                 appointment:{
                     ...state.appointment,
-                    shedule:action.payload
+                    shedule:shedule._id
                 },
                 timeArray:timeArray,
                 wrongDate: action.payload