add cards-servises

src/App.js

@@ -27,9 +27,12 @@ export class App extends React.Component {
     componentDidMount() {
         this.props.getDoctors();
         this.props.getServices();
+<<<<<<< HEAD
         
         // console.log (this.props.app)
         
+=======
+>>>>>>> ff3f53df4e902acee8dc75802682ebb15c73edfb
         // 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

@@ -0,0 +1,17 @@
+import * as types from '../actionsTypes/actionsTypes'
+
+export const createCalendarMonthArray = payload => ({
+    type: types.CREATE_CALENDAR_MONTH_ARRAY,
+    payload
+});
+
+export const changeCalendarMonth = payload => ({
+    type: types.CHANGE_CALENDAR_MONTH,
+    payload
+});
+
+export const resetCurrent = payload => ({
+    type: types.RESET_CALENDAR_CURRENT,
+    payload
+});
+

src/actionsTypes/actionsTypes.js

@@ -61,5 +61,12 @@ export const CHANGE_INPUT_VALUE_SERVICE_FORM= "CHANGE_INPUT_VALUE_SERVICE_FORM";
 export const CHANGE_SELECTED_DOCTOR_ID= "CHANGE_SELECTED_DOCTOR_ID";
 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,33 @@ 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() {
+<<<<<<< HEAD
         console.log ( this.props )
         const { doctors, postNewShedule,  setSheduleDoctor } = this.props;
+=======
+        const {doctors, postNewShedule} = this.props;
+        const doctor = doctors.find(el => el._id === postNewShedule.doctor)
+>>>>>>> ff3f53df4e902acee8dc75802682ebb15c73edfb
         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,19 +56,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)} setAppointmentShedule = {console.log}/>
+                    <Calendar
+                        doctor={doctor}
+                        action = {console.log}
+                    />
                 }
             </div>
         );

src/components/appointment/Appointment.js

@@ -13,6 +13,7 @@ import {
 
 } from "../../actions/actions";
 
+
 import Calendar from "./Calendar";
 
 export class Appoint extends React.Component {
@@ -66,7 +67,10 @@ export class Appoint extends React.Component {
                                 </select>
 
                                 {appointment.spec &&
-                                <Calendar doctor={doctor} setAppointmentShedule={setAppointmentShedule} />
+                                <Calendar
+                                    doctor={doctor}
+                                    action={setAppointmentShedule}
+                                />
                                 }
 
                                 {appointment.shedule &&
@@ -104,7 +108,7 @@ export class Appoint extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        app:state.app,
+        app:state.app
     }
 };
 
@@ -115,7 +119,7 @@ const mapDispatchToProps = {
     clearAppointment,
     setAppointmentTime,
     setAppointmentComment,
-    postOrders
+    postOrders,
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(Appoint)

src/components/appointment/Calendar.js

@@ -1,10 +1,15 @@
-import React, {Component} from 'react';
+import React from 'react';
 import moment from "moment";
+import {connect} from "react-redux";
 
-export default class Calendar extends Component {
-    state={
-        current:moment(),
-    };
+import {
+    createCalendarMonthArray,
+    changeCalendarMonth,
+    resetCurrent
+
+} from "../../actions/calendar";
+
+export class Calendar extends React.Component {
 
     componentDidMount() {
         moment.locale('ru', {
@@ -12,54 +17,63 @@ export default class Calendar extends Component {
                 dow:1
             }
         });
+        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);
+        this.props.createCalendarMonthArray(this.props.doctor)
+    };
+
+    subMonth = () => {
+        this.props.changeCalendarMonth(-1);
+        this.props.createCalendarMonthArray(this.props.doctor)
+    };
+
+    action = (e) => {
+        this.props.action(e.target.id)
+    };
+
     render() {
-        const {doctor,setAppointmentShedule} = this.props
-        const {current} = this.state
-        const daysArray = []
-        for (let x=1; x <= current.daysInMonth();x++){
-            daysArray.push(current.date(x).format('YYYY-MM-DD'))
-        }
-        const prevMonth = moment(current).subtract(1,'months')
-        const startDay = current.startOf('month').day() === 0 ? 7 : current.startOf('month').day()
-        for (let x=1; x < startDay ;x++){
-            daysArray.unshift(prevMonth.endOf('month').subtract(x-1,'days').format('YYYY-MM-DD'))
-        }
+        const {current,monthArray} = this.props;
         return (
             <div className = "calendar-container">
                 <div className = "calendar-title-box" >
-                    <button className= "btn angle" onClick={() => this.setState({current:current.subtract(1,"month")})}><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.setState({current:current.add(1,"month")})}><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 => (
-                            <p key={el} >{el}</p>
+                        <p key={el}>{el}</p>
                     ))}
                 </div>
                 <div  className = "days">
-
-                    {daysArray.map(el => (
+                    {monthArray.map(el => (
                         <button
-                            key={el}
-                            id={el}
-                            disabled={
-                                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)
-                            }
+                            key={el.day}
+                            id={el.day}
+                            disabled={el.disabled}
                             style={{
-                                height:'50px',
-                                width:'50px',
-                                backgroundColor:moment(el).month() === current.month() ? doctor.shedule.find(item => item.data === el) ? "#b1e8ca" : "#ff9774" : "lightgrey",
-                                border:moment().format('YYYY-MM-DD') ===  moment(el).format('YYYY-MM-DD') ? "2px solid rgba(17,17,17,0.8)" : null
+                                width:"50px",
+                                height:"50px",
+                                backgroundColor:el.backgroundColor,
+                                border:el.border
                             }}
-                            onClick={(e) => setAppointmentShedule(e.target.id)}
+                            onClick={this.action}
                         >
-                            {moment(el).format('DD')}
+                            {moment(el.day).format('DD')}
                         </button>
                     ))}
                 </div>
@@ -68,3 +82,18 @@ export default class Calendar extends Component {
     }
 }
 
+const mapStateToProps = state => {
+    return {
+        current:state.calendar.current,
+        monthArray:state.calendar.monthArray
+    }
+};
+
+const mapDispatchToProps = {
+    createCalendarMonthArray,
+    changeCalendarMonth,
+    resetCurrent
+};
+
+export default connect (mapStateToProps,mapDispatchToProps)(Calendar)
+

src/reducers/calendar.js

@@ -0,0 +1,77 @@
+import * as types from '../actionsTypes/actionsTypes'
+import moment from "moment";
+
+const defaultState = {
+    monthArray:[],
+    current:moment()
+};
+
+export const calendarReducer = (state = defaultState, action) => {
+    switch(action.type){
+
+        case types.CREATE_CALENDAR_MONTH_ARRAY: {
+            const daysArray = [];
+            for (let x=1; x <= state.current.daysInMonth();x++){
+                let day = {
+                    day:"",
+                    disabled:false,
+                    backgroundColor:"",
+                    border:""
+                };
+                let el = state.current.date(x).format('YYYY-MM-DD');
+                day.day = el;
+                day.disabled =  moment(el).format('YYYY-MM-DD') < moment().format('YYYY-MM-DD')
+                    || (moment(el).day()===6)
+                    || (moment(el).day()===0)
+                    || moment(el).month() !== state.current.month()
+                    || !action.payload.shedule.find(item => item.data === el);
+                day.backgroundColor = moment(el).month() === state.current.month() ? action.payload.shedule.find(item => item.data === el) ? "#b1e8ca" : "#ff9774" : "lightgrey";
+                day.border = moment().format('YYYY-MM-DD') ===  moment(el).format('YYYY-MM-DD') ? "2px solid rgba(17,17,17,0.8)" : null;
+                daysArray.push(day)
+            }
+
+            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:"",
+                    disabled:false,
+                    backgroundColor:"",
+                    border:""
+                };
+                let el = prevMonth.endOf('month').subtract(x-1,'days').format('YYYY-MM-DD');
+                day.day = el;
+                day.disabled =  moment(el).format('YYYY-MM-DD') < moment().format('YYYY-MM-DD')
+                    || (moment(el).day()===6)
+                    || (moment(el).day()===0)
+                    || moment(el).month() !== state.current.month()
+                    || !action.payload.shedule.find(item => item.data === el);
+                day.backgroundColor = moment(el).month() === state.current.month() ? action.payload.shedule.find(item => item.data === el) ? "#b1e8ca" : "#ff9774" : "lightgrey";
+                day.border = moment().format('YYYY-MM-DD') ===  moment(el).format('YYYY-MM-DD') ? "2px solid rgba(17,17,17,0.8)" : null;
+                daysArray.unshift(day)
+            }
+            return {
+                ...state,
+                monthArray: daysArray
+            };
+        }
+
+        case types.CHANGE_CALENDAR_MONTH: {
+            return {
+                ...state,
+                current: state.current.add(action.payload,"month")
+            };
+        }
+
+        case types.RESET_CALENDAR_CURRENT: {
+            return {
+                ...state,
+                current: moment()
+            };
+        }
+
+
+        default:
+            return state
+    }
+};

src/reducers/index.js

@@ -1,6 +1,7 @@
 import {combineReducers} from "redux";
 
 import {appReducer} from "./reducers";
+import {calendarReducer} from "./calendar"
 import auth from './auth';
 
 
@@ -8,4 +9,5 @@ import auth from './auth';
 export default combineReducers({
     app:appReducer,
     auth,
+    calendar:calendarReducer
 })

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
+	}
+];