reworked appointment to seperate action/reducer

src/actions/actions.js

@@ -33,48 +33,6 @@ export const changeSelectedServiceId = payload => ({
 
 // -----------------------------------------------------------------------------------------------------------------
 
-export const setAppointmentShedule = payload => ({
-    type: types.CHANGE_APPOINTMENT_SHEDULE,
-    payload
-});
-
-// -----------------------------------------------------------------------------------------------------------------
-
-export const setAppointmentDoctor = payload => ({
-    type: types.CHANGE_APPOINTMENT_DOCTOR,
-    payload
-});
-
-// -----------------------------------------------------------------------------------------------------------------
-
-export const setAppointmentTime = payload => ({
-    type: types.CHANGE_APPOINTMENT_TIME,
-    payload
-});
-
-// -----------------------------------------------------------------------------------------------------------------
-
-export const setAppointmentSpec = payload => ({
-    type: types.CHANGE_APPOINTMENT_SPEC,
-    payload
-});
-
-// -----------------------------------------------------------------------------------------------------------------
-
-export const setAppointmentComment = payload => ({
-    type: types.CHANGE_APPOINTMENT_COMMENT,
-    payload
-});
-
-// -----------------------------------------------------------------------------------------------------------------
-
-export const clearAppointment = payload => ({
-    type: types.CLEAR_APPOINTMENT,
-    payload
-});
-
-// -----------------------------------------------------------------------------------------------------------------
-
 export const setSheduleDoctor = payload => ({
     type: types.CHANGE_SHEDULE_DOCTOR,
     payload
@@ -233,38 +191,6 @@ export const postShedule = (payload) => dispatch => {
         .catch(err => dispatch(postSheduleFail(err)));
 };
 
-// -----------------------------------------------------------------------------------------------------------------
-
-const postOrdersRequest = payload => ({
-    type: types.POST_ORDERS_REQUEST,
-    payload
-});
-
-const postOrdersSuccess = payload => ({
-    type: types.POST_ORDERS_REQUEST_SUCCESS,
-    payload
-});
-
-const postOrdersFail = payload => ({
-    type: types.POST_ORDERS_REQUEST_FAIL,
-    payload
-});
-
-export const postOrders = (payload) => dispatch => {
-    dispatch(postOrdersRequest());
-    return fetch(`${URL}orders`, {
-        method: "POST",
-        credentials:"include",
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-    })
-        .then(res => res.json())
-        .then(res => dispatch(postOrdersSuccess(res)))
-        .catch(err => dispatch(postOrdersFail(err)));
-};
-
 // -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 

src/actions/appointment.js

@@ -0,0 +1,85 @@
+import * as types from "../actionsTypes/actionsTypes";
+
+const URL = "https://api-clinics.herokuapp.com/api/v1/";
+
+export const setAppointmentShedule = payload => ({
+    type: types.CHANGE_APPOINTMENT_SHEDULE,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const setAppointmentDoctor = payload => ({
+    type: types.CHANGE_APPOINTMENT_DOCTOR,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const setAppointmentTime = payload => ({
+    type: types.CHANGE_APPOINTMENT_TIME,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const setAppointmentSpec = payload => ({
+    type: types.CHANGE_APPOINTMENT_SPEC,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const setAppointmentComment = payload => ({
+    type: types.CHANGE_APPOINTMENT_COMMENT,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const clearAppointment = payload => {
+    localStorage.removeItem('appointment');
+     return  {
+         type: types.CLEAR_APPOINTMENT,
+         payload
+     }
+};
+
+// -----------------------------------------------------------------------------------------------------------------
+// -----------------------------------------------------------------------------------------------------------------
+
+const postOrdersRequest = payload => ({
+    type: types.POST_ORDERS_REQUEST,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+const postOrdersSuccess = payload => ({
+    type: types.POST_ORDERS_REQUEST_SUCCESS,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+const postOrdersFail = payload => ({
+    type: types.POST_ORDERS_REQUEST_FAIL,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const postOrders = (payload) => dispatch => {
+    dispatch(postOrdersRequest());
+    return fetch(`${URL}orders`, {
+        method: "POST",
+        credentials:"include",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+    })
+        .then(res => res.json())
+        .then(res => dispatch(postOrdersSuccess(res)))
+        .catch(err => dispatch(postOrdersFail(err)));
+};

src/components/appointment/Appointment.js

@@ -13,7 +13,7 @@ import {
     setAppointmentComment,
     postOrders
 
-} from "../../actions/actions";
+} from "../../actions/appointment";
 
 
 import Calendar from "../Calendar";
@@ -32,17 +32,12 @@ export class Appoint extends React.Component {
     }
 
     setSpec = (e) => {
-        this.props.setAppointmentSpec(e)
+        this.props.setAppointmentSpec({data:e, services:this.props.services})
     };
 
     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)
+        this.props.setAppointmentShedule({data:e.target.id, services:this.props.services, doctors:this.props.doctors})
     };
 
     setTime = (e) => {
@@ -54,17 +49,16 @@ export class Appoint extends React.Component {
     };
 
     postOrder = () => {
-        this.props.postOrders(this.props.app.appointment)
+        this.props.postOrders(this.props.appointment.appointment)
     };
 
 
     render() {
-        const {doctors, appointment, timeArray,services} = this.props.app;
-        const {match} = this.props;
+        const {appointment, timeArray, doctors,services,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)
+        if (appointment.specId){
+            spec = services.find(el => el._id === appointment.specId)
         }
         return (
             <>
@@ -81,7 +75,7 @@ export class Appoint extends React.Component {
 
                                 <CustomSelect label="Выбор услуги" options = { doctor.speciality} clickOptionEvent = {this.setSpec} />
 
-                                {appointment.spec &&
+                                {appointment.specId &&
                                 <div>
                                     <p>{spec.name}</p>
                                     <p>Длительность: {spec.duration} ч.</p>
@@ -95,14 +89,14 @@ export class Appoint extends React.Component {
                                 </div>
                                 }
 
-                                {appointment.spec &&
+                                {appointment.specId &&
                                     <Calendar
                                         doctor={doctor}
                                         action={this.setShedule}
                                     />
                                 }
 
-                                {appointment.shedule &&
+                                {appointment.sheduleId &&
                                    <div className = "appointment-time" >
                                         <div className="btn-box"  >
                                             {
@@ -147,7 +141,10 @@ export class Appoint extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        app:state.app
+        appointment:state.appointment.appointment,
+        timeArray:state.appointment.timeArray,
+        doctors:state.app.doctors,
+        services:state.app.services
     }
 };
 

src/reducers/appointment.js

@@ -0,0 +1,100 @@
+import * as types from '../actionsTypes/actionsTypes'
+
+const defaultState = {
+    appointment: {
+        sheduleId: null,
+        time: null,
+        doctorId: null,
+        specId: null,
+        comment: ''
+    },
+    timeArray:[]
+};
+
+export const appointmentReducer = (state = defaultState, action) => {
+    switch(action.type){
+
+        case types.CHANGE_APPOINTMENT_SHEDULE : {
+            let timeArray =[];
+            let doctor = action.payload.doctors.find(el => el._id === state.appointment.doctorId);
+            let shedule = doctor.shedule.find(el => el.data === action.payload.data);
+            let duration = action.payload.services.find(el => el._id === state.appointment.specId).duration;
+            for (let index in shedule) {
+                let check = true;
+                for (let x=0;x < duration; x++){
+                    if (shedule[`${+index.split(':')[0]+x < 10 ? '0' +(+index.split(':')[0] + x) + ':00' : +index.split(':')[0]+ x + ':00'}`] !== true){
+                        check = false
+                    }
+                }
+                if (check) timeArray.push({[`${index}`]:shedule[`${index}`]});
+            }
+            return {
+                ...state,
+                appointment:{
+                    ...state.appointment,
+                    sheduleId:shedule._id,
+                },
+                timeArray:timeArray
+            };
+        }
+
+        case types.CHANGE_APPOINTMENT_DOCTOR : {
+            return {
+                ...state,
+                appointment:{
+                    ...state.appointment,
+                    doctorId:action.payload
+                }
+            };
+        }
+
+        case types.CHANGE_APPOINTMENT_TIME : {
+            return {
+                ...state,
+                appointment:{
+                    ...state.appointment,
+                    time:action.payload
+                }
+            };
+        }
+
+        case types.CHANGE_APPOINTMENT_SPEC : {
+            return {
+                ...state,
+                appointment:{
+                    ...state.appointment,
+                    specId:action.payload.services.find(el => el.name === action.payload.data)._id,
+                    sheduleId:null,
+                    time:null
+                }
+            };
+        }
+
+        case types.CHANGE_APPOINTMENT_COMMENT : {
+            return {
+                ...state,
+                appointment:{
+                    ...state.appointment,
+                    comment:action.payload
+                }
+            };
+        }
+
+        case types.CLEAR_APPOINTMENT : {
+            return {
+                appointment: {
+                    sheduleId: null,
+                    time: null,
+                    doctorId: null,
+                    specId: null,
+                    comment: ''
+                },
+                timeArray:[]
+            };
+        }
+
+
+        default:
+            return state
+    }
+};

src/reducers/index.js

@@ -3,11 +3,13 @@ import {combineReducers} from "redux";
 import {appReducer} from "./reducers";
 import {calendarReducer} from "./calendar"
 import auth from './auth';
+import {appointmentReducer} from "./appointment";
 
 
 
 export default combineReducers({
     app:appReducer,
     auth,
-    calendar:calendarReducer
+    calendar:calendarReducer,
+    appointment:appointmentReducer
 })

src/reducers/reducers.js

@@ -30,15 +30,6 @@ const defaultState = {
     changeDoctorId:null,
     changeServiceId:null,
 
-    appointment:{
-        shedule:null,
-        time:null,
-        doctor:null,
-        spec:null,
-        comment:''
-    },
-
-    timeArray:[],
     isFetching:false,
     error: null,
 
@@ -108,82 +99,6 @@ 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.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++){
-                    if (shedule[`${+index.split(':')[0]+x < 10 ? '0' +(+index.split(':')[0] + x) + ':00' : +index.split(':')[0]+ x + ':00'}`] !== true){
-                        check = false
-                    }
-                }
-                if (check) timeArray.push({[`${index}`]:shedule[`${index}`]});
-            }
-            return {
-                ...state,
-                appointment:{
-                    ...state.appointment,
-                    shedule:shedule._id
-                },
-                timeArray:timeArray
-            };
-        }
-
-        case types.CHANGE_APPOINTMENT_DOCTOR : {
-            return {
-                ...state,
-                appointment:{
-                    ...state.appointment,
-                    doctor:action.payload
-                }
-            };
-        }
-
-        case types.CHANGE_APPOINTMENT_TIME : {
-            return {
-                ...state,
-                appointment:{
-                    ...state.appointment,
-                    time:action.payload
-                }
-            };
-        }
-
-        case types.CHANGE_APPOINTMENT_SPEC : {
-            return {
-                ...state,
-                appointment:{
-                    ...state.appointment,
-                    spec:state.services.find(el => el.name === action.payload)._id,
-                    shedule:null,
-                    time:null
-                }
-            };
-        }
-
-        case types.CHANGE_APPOINTMENT_COMMENT : {
-            return {
-                ...state,
-                appointment:{
-                    ...state.appointment,
-                    comment:action.payload
-                }
-            };
-        }
-
-        case types.CLEAR_APPOINTMENT : {
-            return {
-                ...state,
-                appointment: defaultState.appointment
-            };
-        }
-
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.CHANGE_SHEDULE_DOCTOR : {