reworked appoint

package-lock.json

@@ -2932,7 +2932,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -2950,11 +2951,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -2967,15 +2970,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -3078,7 +3084,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -3088,6 +3095,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -3100,17 +3108,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -3127,6 +3138,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3199,7 +3211,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3209,6 +3222,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3284,7 +3298,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3314,6 +3329,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -3331,6 +3347,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -3369,11 +3386,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
@@ -6967,7 +6986,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -6991,6 +7011,7 @@
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -7003,7 +7024,8 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -7012,7 +7034,8 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7115,7 +7138,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7125,6 +7149,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7137,17 +7162,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7164,6 +7192,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7236,7 +7265,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7246,6 +7276,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7321,7 +7352,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7351,6 +7383,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7368,6 +7401,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7406,11 +7440,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         }

src/components/appointment/Appointment.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from "react-redux";
+import moment from "moment";
 // import { CustomSelect } from "./select";
 
 import {
@@ -17,6 +18,9 @@ import {
 import Calendar from "./Calendar";
 
 export class Appoint extends React.Component {
+    state = {
+        pickedDate:null
+    };
 
     componentDidMount() {
         this.props.setAppointmentDoctor(this.props.match.params.doctorId)
@@ -30,6 +34,11 @@ export class Appoint extends React.Component {
         this.props.setAppointmentSpec(e.target.value)
     };
 
+    setShedule = (e) => {
+        this.setState({pickedDate:e.target.id});
+        this.props.setAppointmentShedule(e.target.id)
+    };
+
     setTime = (e) => {
         this.props.setAppointmentTime(e.target.value)
     };
@@ -45,12 +54,13 @@ export class Appoint extends React.Component {
 
     render() {
         const {doctors, appointment, timeArray,services} = this.props.app;
-        const {match, setAppointmentShedule} = this.props;
+        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)
         }
+        console.log(this.props.app.appointment)
         return (
             <>
                 <div className="main">
@@ -71,6 +81,12 @@ export class Appoint extends React.Component {
                                     <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>
+                                    }
                                 </div>
                                 }
 
@@ -84,41 +100,44 @@ export class Appoint extends React.Component {
                                 </select>
 
                                 {appointment.spec &&
-                                <Calendar
-                                    doctor={doctor}
-                                    action={setAppointmentShedule}
-                                />
+                                    <Calendar
+                                        doctor={doctor}
+                                        action={this.setShedule}
+                                    />
                                 }
 
-                                {appointment.shedule &&
 
-                             
+
+                                {appointment.shedule &&
                                    <div className = "appointment-time" >
                                         <div className="btn-box"  >
-                                        {   timeArray.map ( (el, index)=> (
-
-                                                <label  key={Object.keys(el)} >
-                                                    <input
-                                                        type ="radio"
-                                                        name = "choise-time"
-                                                        id = {index} onChange={this.setTime}
-                                                        value =  {Object.keys(el)}
-                                                    />
-                                                   {Object.keys(el)}
-                                                </label>
-                                            ))
-                                        }
-                                            </div>
-                                    </div>
+                                            {
+                                                timeArray.map ( (el, index) => (
+                                                    <label  key={Object.keys(el)} >
+                                                        <input
+                                                            type ="radio"
+                                                            name = "choise-time"
+                                                            id = {index} onChange={this.setTime}
+                                                            value =  {Object.keys(el)}
+                                                        />
+                                                        {Object.keys(el)}
+                                                    </label>
+                                                ))
+                                            }
+                                        </div>
+                                   </div>
                                 }
 
                                 {appointment.time &&
                                 <div style={{display:"flex",flexDirection:"column"}}>
-                                    <input className = "appointment comment" type='text' placeholder='Добавить комментарий' onChange={this.setComment}/>
+                                    <input
+                                        className = "appointment comment"
+                                        type='text'
+                                        placeholder='Добавить комментарий'
+                                        onChange={this.setComment}/>
                                     <button className = "btn link" onClick={this.postOrder}>Подтвердите запись</button>
                                 </div>
                                 }
-
                             </div>
                         </div>
                     </div>

src/components/appointment/Calendar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from "moment";
 import {connect} from "react-redux";
+import 'moment/locale/ru';
 
 import {
     createCalendarMonthArray,
@@ -12,11 +13,7 @@ import {
 export class Calendar extends React.Component {
 
     componentDidMount() {
-        moment.locale('ru', {
-            week : {
-                dow:1
-            }
-        });
+        moment.locale('ru');
         this.props.createCalendarMonthArray(this.props.doctor)
     }
     componentDidUpdate(prevProps) {
@@ -38,7 +35,7 @@ export class Calendar extends React.Component {
     };
 
     action = (e) => {
-        this.props.action(e.target.id)
+        this.props.action(e)
     };
 
     render() {
@@ -56,7 +53,7 @@ export class Calendar extends React.Component {
                 </div>
                 <div className = "weekdays">
                     {moment.weekdaysShort(true).map(el => (
-                        <p key={el}>{el}</p>
+                        <p style={{ width:"40px",height:"40px"}} key={el}>{el}</p>
                     ))}
                 </div>
                 <div  className = "days">