reworked appoitment

src/actions/appointment.js

@@ -81,5 +81,6 @@ export const postOrders = (payload) => dispatch => {
     })
         .then(res => res.json())
         .then(res => dispatch(postOrdersSuccess(res)))
+        .then(dispatch(clearAppointment()))
         .catch(err => dispatch(postOrdersFail(err)));
 };

src/components/appointment/Appointment.js

@@ -1,163 +1,167 @@
 import React from "react";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
 import moment from "moment";
-import { CustomSelect } from "./select";
+import {CustomSelect} from "./select";
 
 import {
-  setAppointmentSpec,
-  setAppointmentShedule,
-  setAppointmentDoctor,
-  clearAppointment,
-  setAppointmentTime,
-  setAppointmentComment,
-  postOrders
-} from "../../actions/actions";
+    setAppointmentSpec,
+    setAppointmentShedule,
+    setAppointmentDoctor,
+    clearAppointment,
+    setAppointmentTime,
+    setAppointmentComment,
+    postOrders
+} from "../../actions/appointment";
 
 import Calendar from "../Calendar";
 
 export class Appoint extends React.Component {
-  state = {
-    pickedDate: null
-  };
+    state = {
+        pickedDate: null
+    };
 
-  componentDidMount() {
-    this.props.setAppointmentDoctor(this.props.match.params.doctorId);
-  }
-
-  componentWillUnmount() {
-    this.props.clearAppointment();
-  }
-
-  setSpec = e => {
-    this.props.setAppointmentSpec(e);
-  };
-
-  setShedule = e => {
-    this.setState({ pickedDate: e.target.id });
-    this.props.setAppointmentShedule(e.target.id);
-  };
-
-  setShedule = e => {
-    this.setState({ pickedDate: e.target.id });
-    this.props.setAppointmentShedule(e.target.id);
-  };
-
-  setTime = e => {
-    this.props.setAppointmentTime(e.target.value);
-  };
-
-  setComment = e => {
-    this.props.setAppointmentComment(e.target.value);
-  };
-
-  postOrder = () => {
-    this.props.postOrders(this.props.app.appointment);
-  };
+    componentDidMount() {
+        this.props.setAppointmentDoctor(this.props.match.params.doctorId)
+    }
 
-  render() {
-    const { doctors, appointment, timeArray, services } = this.props.app;
-    const { match } = 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);
+    componentWillUnmount() {
+        this.props.clearAppointment()
     }
-    return (
-      <>
-        <div className="main">
-          {doctor && (
-            <div className="info-wrap">
-              <div className="card">
-                <div className="card-item present">
-                  <div className="photo">
-                    <img src={`.${doctor.photo}`} alt={doctor.name} />
-                  </div>
-                  <div className="order">
-                      <h3>{doctor.name}</h3>
-                  <p className="highlights">{doctor.profession}</p>
 
-                  <CustomSelect
-                    label="Выбор услуги"
-                    options={doctor.speciality}
-                    clickOptionEvent={this.setSpec}
-                  />
-                  </div>
-                </div>
-                <div className="card-item desc">
-                    <div className="date-container">
-                        {appointment.spec && (
-                            <Calendar doctor={doctor} action={this.setShedule} />
-                        )}
-                        {appointment.shedule && (
-                        <div className="appointment-time">
-                            <div className="btn-box">
-                            {timeArray.map((el, index) => (
-                                <div className="radio-btn" key={Object.keys(el)}>
-                                    <input
-                                        type="radio"
-                                        className="radio"
-                                        name="choise-time"
-                                        id={index}
-                                        onChange={this.setTime}
-                                        value={Object.keys(el)}
-                                    />
-                                    <label htmlFor={index}>{Object.keys(el)}</label>
+    setSpec = (e) => {
+        this.props.setAppointmentSpec({data: e, services: this.props.services})
+    };
+
+    setShedule = (e) => {
+        this.setState({pickedDate: e.target.id});
+        this.props.setAppointmentShedule({
+            data: e.target.id,
+            services: this.props.services,
+            doctors: this.props.doctors
+        })
+    };
+
+    setTime = (e) => {
+        this.props.setAppointmentTime(e.target.value)
+    };
+
+    setComment = (e) => {
+        this.props.setAppointmentComment(e.target.value)
+    };
+
+    postOrder = () => {
+        this.props.postOrders(this.props.appointment.appointment)
+    };
+
+
+    render() {
+        const {appointment, timeArray, doctors, services, match} = this.props;
+        const doctor = doctors.find(el => el._id === match.params.doctorId);
+        let spec;
+        if (appointment.specId) {
+            spec = services.find(el => el._id === appointment.specId)
+        }
+        console.log(appointment)
+        return (
+            <>
+                <div className="main">
+                    {doctor &&
+                        <div className="info-wrap">
+                            <div className="card">
+                                <div className="card-item present">
+                                    <div className="photo">
+                                        <img src={`.${doctor.photo}`} alt={doctor.name}/>
+                                    </div>
+                                    <div className="order">
+                                        <h3>{doctor.name}</h3>
+                                        <p className="highlights">{doctor.profession}</p>
+                                        <CustomSelect
+                                            label="Выбор услуги"
+                                            options={doctor.speciality}
+                                            clickOptionEvent={this.setSpec}
+                                        />
+                                    </div>
+                                </div>
+                                <div className="card-item desc">
+                                    <div className="date-container">
+                                        {appointment.specId &&
+                                            <Calendar
+                                                doctor={doctor}
+                                                action={this.setShedule}
+                                            />
+                                        }
+                                        {appointment.sheduleId && (
+                                            <div className="appointment-time">
+                                                <div className="btn-box">
+                                                    {timeArray.map((el, index) => (
+                                                        <div className="radio-btn" key={Object.keys(el)}>
+                                                            <input
+                                                                type="radio"
+                                                                className="radio"
+                                                                name="choise-time"
+                                                                id={index}
+                                                                onChange={this.setTime}
+                                                                value={Object.keys(el)}
+                                                            />
+                                                            <label htmlFor={index}>{Object.keys(el)}</label>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                                {appointment.time && (
+                                                    <textarea
+                                                        className="appointment comment"
+                                                        rows="2"
+                                                        placeholder="Добавить комментарий "
+                                                        onChange={this.setComment}
+                                                    />
+                                                )}
+                                            </div>
+                                        )}
+                                    </div>
+                                    {appointment.specId &&
+                                        <div className="order-information">
+                                            <p>{spec.name}</p>
+                                            <p>Длительность: {spec.duration} ч.</p>
+                                            <p>Цена от {spec.price} грн.</p>
+                                            {this.state.pickedDate &&
+                                                <p> {moment(this.state.pickedDate).format("DD-MMMM-YYYY")} </p>
+                                            }
+                                            {appointment.time &&
+                                            <>
+                                                <p>{appointment.time}</p>
+                                                <button className="btn link" onClick={this.postOrder}>Подтвердите запись
+                                                </button>
+                                            </>
+                                            }
+                                        </div>
+                                    }
                                 </div>
-                            ))}
                             </div>
-                            {appointment.time && (
-                            <textarea
-                                className="appointment comment"
-                                rows="2"
-                                placeholder="Добавить комментарий "
-                                onChange={this.setComment}
-                            />
-                        )}
                         </div>
-                        )}
-                    </div>
-                        
-                        {appointment.spec && (
-                            <div className="order-information">
-                                <p>{spec.name}</p>
-                                <p>Длительность: {spec.duration} ч.</p>
-                                <p>Цена от {spec.price} грн.</p>
-                                {this.state.pickedDate && (
-                                <p> {moment(this.state.pickedDate).format("DD-MMMM-YYYY")} </p>
-                                )}
-                                {appointment.time && <p>{appointment.time}</p>}
-                                {appointment.time && (
-                                    <button className="btn link" onClick={this.postOrder}>Подтвердите запись </button>
-                                )}
-                            </div>
-                         )}
+                    }
                 </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </>
-    );
-  }
+            </>
+        );
+    }
 }
 
 const mapStateToProps = state => {
-  return {
-    app: state.app
-  };
+    return {
+        appointment: state.appointment.appointment,
+        timeArray: state.appointment.timeArray,
+        doctors: state.app.doctors,
+        services: state.app.services
+    };
 };
 
 const mapDispatchToProps = {
-  setAppointmentSpec,
-  setAppointmentShedule,
-  setAppointmentDoctor,
-  clearAppointment,
-  setAppointmentTime,
-  setAppointmentComment,
-  postOrders
+    setAppointmentSpec,
+    setAppointmentShedule,
+    setAppointmentDoctor,
+    clearAppointment,
+    setAppointmentTime,
+    setAppointmentComment,
+    postOrders
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Appoint);
+export default connect(mapStateToProps,mapDispatchToProps)(Appoint);

src/reducers/appointment.js

@@ -33,6 +33,7 @@ export const appointmentReducer = (state = defaultState, action) => {
                 appointment:{
                     ...state.appointment,
                     sheduleId:shedule._id,
+                    time:null
                 },
                 timeArray:timeArray
             };

src/reducers/reducers.js

@@ -333,8 +333,6 @@ export const appReducer = (state = defaultState,action) => {
         case types.POST_ORDERS_REQUEST_SUCCESS : {
             return {
                 ...state,
-                appointment: defaultState.appointment,
-                orders:action.payload,
                 isFetching: false
             }
         }