reworked appointment-calendar and admin-shedule-calendar for ato renew

src/App.js

@@ -26,9 +26,6 @@ export class App extends React.Component {
     componentDidMount() {
         this.props.getDoctors();
         this.props.getServices();
-        
-        console.log (this.props.app)
-        
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
         //     credentials: "include",

src/actions/actions.js

@@ -99,6 +99,7 @@ const getDoctorsRequestFail = payload => ({
 });
 
 export const getDoctors = () => dispatch => {
+    console.log('get')
     dispatch(getDoctorsRequest());
     return fetch(`${URL}doctors`,{
         credentials:"include"
@@ -228,7 +229,7 @@ export const postShedule = (payload) => dispatch => {
         body: JSON.stringify(payload)
     })
         .then(res => res.json())
-        .then(res => dispatch(postSheduleSuccess(res)))
+        .then(res => dispatch(postSheduleSuccess(res))).then(dispatch(getDoctors()))
         .catch(err => dispatch(postSheduleFail(err)));
 };
 

src/actions/calendar.js

@@ -10,3 +10,8 @@ export const changeCalendarMonth = payload => ({
     payload
 });
 
+export const resetCurrent = payload => ({
+    type: types.RESET_CALENDAR_CURRENT,
+    payload
+});
+

src/actionsTypes/actionsTypes.js

@@ -63,6 +63,8 @@ export const CHANGE_SELECTED_SERVICE_ID= "CHANGE_SELECTED_SERVICE_ID";
 
 export const CREATE_CALENDAR_MONTH_ARRAY= "CREATE_CALENDAR_MONTH_ARRAY";
 export const CHANGE_CALENDAR_MONTH= "CHANGE_CALENDAR_MONTH";
+export const RESET_CALENDAR_CURRENT= "RESET_CALENDAR_CURRENT";
+
 
 
 

src/components/Admin/Admin.js

@@ -24,13 +24,11 @@ import ChangeServicesDoctors from './ChangeServices-Doctors'
 
 export class Admin extends React.Component {
 
-
     render() {
         const {
             doctors,
             services,
             postNewShedule,
-            sheduleMonthArray,
             postNewDoctor,
             postNewService,
             changeDoctorId,
@@ -50,6 +48,7 @@ export class Admin extends React.Component {
             deleteServices,
             postServices
         } = this.props;
+
         return (
             <div className="main">
                 <div className="info-wrap">
@@ -62,7 +61,6 @@ export class Admin extends React.Component {
                         <Route path='/admin/change-shedule' render={() => <Shedule
                             doctors={doctors}
                             postNewShedule={postNewShedule}
-                            sheduleMonthArray={sheduleMonthArray}
                             setSheduleDoctor={setSheduleDoctor}
                             postShedule={postShedule}
                         />} />
@@ -112,8 +110,6 @@ const mapDispatchToProps = {
     postServices,
     putServices,
     deleteServices
-
-
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(Admin)

src/components/Admin/Shedule.js

@@ -9,7 +9,8 @@ export default class Shedule extends React.Component {
         endDate:null,
     };
 
-    post = () => {
+    post = (e) => {
+        e.preventDefault()
         let current = new Date(this.state.startDate);
         let end = new Date (this.state.endDate);
         while (current.toISOString().split('T')[0] <= end.toISOString().split('T')[0]){
@@ -19,20 +20,28 @@ export default class Shedule extends React.Component {
                     data:current.toISOString().split('T')[0],
                 });
             }
-
             current = new Date(+current + 86400000)
         }
     };
 
+    changeStart = (e) => {
+        this.setState({startDate:e.target.value } )
+    };
+    changeEnd = (e) => {
+        this.setState ( { endDate:e.target.value } )
+    };
+    setDoctor = (e) => {
+        this.props.setSheduleDoctor(e.target.value)
+    };
+
     render() {
-        console.log ( this.props )
-        const { doctors, postNewShedule, sheduleMonthArray, setSheduleDoctor } = this.props;
+        const {doctors, postNewShedule} = this.props;
+        const doctor = doctors.find(el => el._id === postNewShedule.doctor)
         return (
             <div  className = "shedule-container" >
-              
                 <div className = "option" >
-                    <select className = "appointment admin-appointment"  onChange={(e) => setSheduleDoctor(e.target.value)} defaultValue='Выберите доктора'>
-                    <option disabled >Выберите доктора</option>
+                    <select className = "appointment admin-appointment"  onChange={this.setDoctor} defaultValue={doctor ? doctor.name : 'Выберите доктора'}>
+                        <option disabled >Выберите доктора</option>
                         {
                             doctors.map ( el=> (
                                 <option key={el._id} id={el._id}> {el.name} </option>
@@ -42,22 +51,21 @@ export default class Shedule extends React.Component {
 
                     {postNewShedule.doctor &&
                         <div className = "input-box">
-                            <input className = "shedule-input " type="date" onChange = { ( e ) => this.setState({startDate:e.target.value } ) }/>
-                            <input className = "shedule-input right" type="date" onChange = { ( e ) => this.setState ( { endDate:e.target.value } ) } />
+                            <input className = "shedule-input " type="date" onChange = {this.changeStart}/>
+                            <input className = "shedule-input right" type="date" onChange = {this.changeEnd}/>
                         </div>
                     }
 
-
-                { ( this.state.startDate && this.state.endDate ) && <button className = "btn admin" onClick = { this.post }> Отправить </button>}
-
+                    {(this.state.startDate && this.state.endDate) &&
+                        <button className = "btn admin" onClick = {this.post}> Отправить </button>
+                    }
                 </div>
-                
 
                 {postNewShedule.doctor &&
-                <Calendar
-                    doctor={doctors.find (el => el._id === postNewShedule.doctor)}
-                    action = {console.log}
-                />
+                    <Calendar
+                        doctor={doctor}
+                        action = {console.log}
+                    />
                 }
             </div>
         );

src/components/appointment/Calendar.js

@@ -1,14 +1,15 @@
-import React, {Component} from 'react';
+import React from 'react';
 import moment from "moment";
 import {connect} from "react-redux";
 
 import {
     createCalendarMonthArray,
     changeCalendarMonth,
+    resetCurrent
 
 } from "../../actions/calendar";
 
-export class Calendar extends Component {
+export class Calendar extends React.Component {
 
     componentDidMount() {
         moment.locale('ru', {
@@ -18,6 +19,13 @@ export class Calendar extends Component {
         });
         this.props.createCalendarMonthArray(this.props.doctor)
     }
+    componentDidUpdate(prevProps) {
+        if (prevProps.doctor !== this.props.doctor) this.props.createCalendarMonthArray(this.props.doctor)
+    }
+
+    componentWillUnmount() {
+        this.props.resetCurrent()
+    }
 
     addMonth = () => {
         this.props.changeCalendarMonth(1);
@@ -38,9 +46,13 @@ export class Calendar extends Component {
         return (
             <div className = "calendar-container">
                 <div className = "calendar-title-box" >
-                    <button className= "btn angle" onClick={this.subMonth}><span className="icon-angle-left"></span></button>
+                    <button className= "btn angle" onClick={this.subMonth}>
+                        <span className="icon-angle-left"></span>
+                    </button>
                     <h4>{current.format('MMMM-YYYY')}</h4>
-                    <button  className= "btn angle"  onClick={this.addMonth}><span className="icon-angle-right"></span></button>
+                    <button  className= "btn angle"  onClick={this.addMonth}>
+                        <span className="icon-angle-right"></span>
+                    </button>
                 </div>
                 <div className = "weekdays">
                     {moment.weekdaysShort(true).map(el => (
@@ -80,6 +92,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = {
     createCalendarMonthArray,
     changeCalendarMonth,
+    resetCurrent
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(Calendar)

src/reducers/calendar.js

@@ -10,7 +10,7 @@ export const calendarReducer = (state = defaultState, action) => {
     switch(action.type){
 
         case types.CREATE_CALENDAR_MONTH_ARRAY: {
-            const daysArray = []
+            const daysArray = [];
             for (let x=1; x <= state.current.daysInMonth();x++){
                 let day = {
                     day:"",
@@ -32,7 +32,6 @@ export const calendarReducer = (state = defaultState, action) => {
 
             const prevMonth = moment(state.current).subtract(1,'months');
             const startDay = state.current.startOf('month').day() === 0 ? 7 : state.current.startOf('month').day();
-
             for (let x=1; x < startDay ;x++){
                 let day = {
                     day:"",
@@ -58,18 +57,21 @@ export const calendarReducer = (state = defaultState, action) => {
         }
 
         case types.CHANGE_CALENDAR_MONTH: {
-            console.log(action.payload)
-            console.log(state.current)
             return {
                 ...state,
                 current: state.current.add(action.payload,"month")
             };
         }
 
+        case types.RESET_CALENDAR_CURRENT: {
+            return {
+                ...state,
+                current: moment()
+            };
+        }
 
 
         default:
             return state
     }
-
-}
+};

src/reducers/reducers.js

@@ -1,91 +1,6 @@
 import * as types from '../actionsTypes/actionsTypes'
 
-const postNewDoctorForm =[
-    {
-        id:1,
-        type:'text',
-        value:"",
-        name:'name',
-        placeholder:'Введите ФИО сотрудника',
-        required:true
-    },
-    {
-        id:2,
-        type:'text',
-        value:"",
-        name:'experience',
-        placeholder:'Введите дату начала практики',
-        required:true
-    },
-    {
-        id:3,
-        type:'text',
-        value:"",
-        name:'photo',
-        placeholder:'Добавьте фотографию',
-        required:true
-    },
-    {
-        id:4,
-        type:'text',
-        value:"",
-        name:'profession',
-        placeholder:'Добавьте специализацию',
-        required:true
-    },
-    {
-        id:5,
-        type:'text',
-        value:"",
-        name:'skillsDescription',
-        placeholder:'Введите описание навыков здесь',
-        required:true
-    },
-    {
-        id:6,
-        type:'text',
-        value:"",
-        name:'speciality',
-        placeholder:'Введите массив представляемых услуг',
-        required:true
-    }
-];
-
-const postNewServiceForm =[
-    {
-        id:1,
-        type:'text',
-        value:"",
-        name:'name',
-        placeholder:'Введите название сервиса',
-        required:true
-    },
-    {
-        id:2,
-        type:'text',
-        value:"",
-        name:'description',
-        placeholder:'Введите описание сервиса',
-        required:true
-    },
-    {
-        id:3,
-        type:'number',
-        value:"",
-        name:'duration',
-        placeholder:'Введите длительность (часы)',
-        required:true
-    },
-    {
-        id:4,
-        type:'number',
-        value:"",
-        name:'price',
-        placeholder:'Введите стоимость сервиса',
-        required:true
-    }
-];
-
+import {postNewDoctorForm,postNewServiceForm} from '../utils/formFields'
 
 const defaultState = {
     user:localStorage.getItem('id') ? localStorage.getItem('id') : null,
@@ -97,17 +12,7 @@ const defaultState = {
         orthodontist:[],
         therapist:[],
         implantologist: [],
-        endodontics:[],
-    //     [
-    //         [
-    //             "surg",
-    //             [{},{}]
-    //         ],
-    //         [
-    //             "kids",
-    //             [{},{}]
-    //         ]
-    //     ]
+        endodontics:[]
     },
 
     orders:[],
@@ -118,7 +23,6 @@ const defaultState = {
         data:null,
         doctor:null
     },
-    sheduleMonthArray:null,
 
     postNewDoctor:postNewDoctorForm,
     postNewService:postNewServiceForm,
@@ -465,8 +369,8 @@ export const appReducer = (state = defaultState,action) => {
             return {
                 ...state,
                 postNewShedule:{
+                    ...state.postNewShedule,
                     data:null,
-                    doctor:null
                 },
                 isFetching: false
             }

src/utils/formFields.js

@@ -136,4 +136,90 @@ export const signUpForm = {
 		}
 	},
 	validForm: false
-};
+};
+
+export const postNewDoctorForm =[
+	{
+		id:1,
+		type:'text',
+		value:"",
+		name:'name',
+		placeholder:'Введите ФИО сотрудника',
+		required:true
+	},
+	{
+		id:2,
+		type:'text',
+		value:"",
+		name:'experience',
+		placeholder:'Введите дату начала практики',
+		required:true
+	},
+	{
+		id:3,
+		type:'text',
+		value:"",
+		name:'photo',
+		placeholder:'Добавьте фотографию',
+		required:true
+	},
+	{
+		id:4,
+		type:'text',
+		value:"",
+		name:'profession',
+		placeholder:'Добавьте специализацию',
+		required:true
+	},
+	{
+		id:5,
+		type:'text',
+		value:"",
+		name:'skillsDescription',
+		placeholder:'Введите описание навыков здесь',
+		required:true
+	},
+	{
+		id:6,
+		type:'text',
+		value:"",
+		name:'speciality',
+		placeholder:'Введите массив представляемых услуг',
+		required:true
+	}
+];
+
+export const postNewServiceForm =[
+	{
+		id:1,
+		type:'text',
+		value:"",
+		name:'name',
+		placeholder:'Введите название сервиса',
+		required:true
+	},
+	{
+		id:2,
+		type:'text',
+		value:"",
+		name:'description',
+		placeholder:'Введите описание сервиса',
+		required:true
+	},
+	{
+		id:3,
+		type:'number',
+		value:"",
+		name:'duration',
+		placeholder:'Введите длительность (часы)',
+		required:true
+	},
+	{
+		id:4,
+		type:'number',
+		value:"",
+		name:'price',
+		placeholder:'Введите стоимость сервиса',
+		required:true
+	}
+];