reworked calendar to reducer

src/actions/calendar.js

@@ -0,0 +1,12 @@
+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
+});
+

src/actionsTypes/actionsTypes.js

@@ -61,5 +61,10 @@ 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";
+
+
+
 
 

src/components/Admin/Shedule.js

@@ -54,7 +54,10 @@ export default class Shedule extends React.Component {
                 
 
                 {postNewShedule.doctor &&
-                <Calendar doctor={doctors.find (el => el._id === postNewShedule.doctor)} setAppointmentShedule = {console.log}/>
+                <Calendar
+                    doctor={doctors.find (el => el._id === postNewShedule.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,14 @@
 import React, {Component} from 'react';
 import moment from "moment";
+import {connect} from "react-redux";
 
-export default class Calendar extends Component {
-    state={
-        current:moment(),
-    };
+import {
+    createCalendarMonthArray,
+    changeCalendarMonth,
+
+} from "../../actions/calendar";
+
+export class Calendar extends Component {
 
     componentDidMount() {
         moment.locale('ru', {
@@ -12,54 +16,52 @@ export default class Calendar extends Component {
                 dow:1
             }
         });
+        this.props.createCalendarMonthArray(this.props.doctor)
     }
 
+    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 +70,17 @@ export default class Calendar extends Component {
     }
 }
 
+const mapStateToProps = state => {
+    return {
+        current:state.calendar.current,
+        monthArray:state.calendar.monthArray
+    }
+};
+
+const mapDispatchToProps = {
+    createCalendarMonthArray,
+    changeCalendarMonth,
+};
+
+export default connect (mapStateToProps,mapDispatchToProps)(Calendar)
+

src/reducers/calendar.js

@@ -0,0 +1,75 @@
+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: {
+            console.log(action.payload)
+            console.log(state.current)
+            return {
+                ...state,
+                current: state.current.add(action.payload,"month")
+            };
+        }
+
+
+
+        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
 })