add scroll-bar and some changes

src/components/Admin/Admin.js

@@ -26,7 +26,7 @@ import {
 } from "../../actions/user"
 
 import Shedule from './Shedule'
-import Tempp from './tempp'
+import ChangeUser from './ChangeUser'
 import ChangeServicesDoctors from './ChangeServices-Doctors'
 
 
@@ -106,7 +106,7 @@ export class Admin extends React.Component {
                             deleteItem={deleteServices}
                             changeInputValues={changeInputValueServiceForm}
                         />} />
-                        <Route path='/admin/change-user' render={() => <Tempp
+                        <Route path='/admin/change-user' render={() => <ChangeUser
                             user={user}
                             findUserInput={findUserInput}
                             changeFindUserInput={changeFindUserInput}

src/components/Admin/ChangeServices-Doctors.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import Input from './Input'
 import CheckBoxWindow from "./CheckBoxWindow";
-import { CustomSelect } from "../hooks/select";
+import {CustomSelect} from "../hooks/select";
+import ConfirmButton from "../ConfirmButton";
 
 export default class ChangeServicesDoctors extends React.Component {
     state = {
+        showConfirm: false,
         flag: false,
     };
 
+    changeConfirm = (action, text) => {
+        this.setState({showConfirm: !this.state.showConfirm})
+    };
+
     componentDidUpdate(prevProps) {
         if (this.props.data !== prevProps.data) this.setState({flag: false})
     };
@@ -24,9 +30,9 @@ export default class ChangeServicesDoctors extends React.Component {
         this.props.form.map(el => {
             obj[el.name] = el.value
         });
-        this.props.postItem(this.props.categories? {
+        this.props.postItem(this.props.categories ? {
             ...obj,
-            speciality:this.props.specialityArray
+            speciality: this.props.specialityArray
         } : obj)
     };
 
@@ -38,9 +44,9 @@ export default class ChangeServicesDoctors extends React.Component {
             if (el.value !== '') obj[el.name] = el.value
         });
         this.props.putItem({
-            data: this.props.categories? {
+            data: this.props.categories ? {
                 ...obj,
-                speciality:this.props.specialityArray
+                speciality: this.props.specialityArray
             } : obj,
             id: this.props.itemId
         })
@@ -48,7 +54,8 @@ export default class ChangeServicesDoctors extends React.Component {
     };
 
     deleteItem = () => {
-        this.props.deleteItem(this.props.itemId)
+        this.props.deleteItem(this.props.itemId);
+        this.changeConfirm()
     };
 
     changeId = (e) => {
@@ -76,42 +83,49 @@ export default class ChangeServicesDoctors extends React.Component {
         return (
             <div className="change-services-doctors">
                 {this.state.flag &&
-                <CheckBoxWindow categories={categories} specialityArray={specialityArray} changeFlag={this.changeFlag} changeSpecialityArray={changeSpecialityArray}/>}
+                <CheckBoxWindow categories={categories} specialityArray={specialityArray} changeFlag={this.changeFlag}
+                                changeSpecialityArray={changeSpecialityArray}/>}
                 <div className="admin-item">
                     <form className="form-doctors" onSubmit={itemId ? this.changeItem : this.postNewItem}>
                         {
                             form.map(el => {
                                 el.required = !itemId;
-                                    return (
-                                        <Input
-                                            key={el.id}
-                                            id={el.id}
-                                            el={el}
-                                            className = {el.className}
-                                            changeInputValues={changeInputValues}
-                                        />
-                                    )
+                                return (
+                                    <Input
+                                        key={el.id}
+                                        id={el.id}
+                                        el={el}
+                                        className={el.className}
+                                        changeInputValues={changeInputValues}
+                                    />
+                                )
                             })
                         }
-                        {categories && <button className = " btn servise-btn" onClick={this.changeFlag}>Выбрать сервисы</button>}
+                        {categories &&
+                        <button className=" btn servise-btn" onClick={this.changeFlag}>Выбрать сервисы</button>}
                         <input className="btn link"
                                type='submit'
-                               value={itemId ? 'Изменить'  : 'Добавить'}
+                               value={itemId ? 'Изменить' : 'Добавить'}
                         />
                     </form>
                 </div>
                 <div className="admin-item">
 
                     <CustomSelect
-                         label="Выбрать"
-                         options={data}
-                         clickOptionEvent={this.changeId}
+                        label="Выбрать"
+                        options={data}
+                        clickOptionEvent={this.changeId}
                     />
                     {itemId &&
-                    <button className="btn link" onClick={this.deleteItem} style={{backgroundColor: "#ff9774"}}>Удалить
+                    <button className="btn link" onClick={this.changeConfirm}
+                            style={{backgroundColor: "#ff9774"}}>Удалить
                         выбранный элемент</button>
                     }
                 </div>
+                {this.state.showConfirm &&
+                <ConfirmButton yes={this.deleteItem} no={this.changeConfirm}
+                               text={'Are you sure you want to Delete Item?'}/>
+                }
             </div>
         );
     }

src/components/Admin/ChangeUser.js

@@ -0,0 +1,109 @@
+import React from 'react';
+
+
+import Input from "./Input"
+import ConfirmButton from "../ConfirmButton";
+
+export default class ChangeUser extends React.Component {
+    state = {
+        showConfirm: false,
+    };
+
+    changeUserInput = (e) => {
+        this.props.changeFindUserInput(e.target.value)
+    };
+
+    findUser = () => {
+        this.props.findUser(this.props.findUserInput.includes('@') ? '?email=' + this.props.findUserInput : this.props.findUserInput)
+    };
+
+    enterPressed = (e) => {
+        if (e.key === 'Enter') {
+            this.findUser();
+        }
+    };
+
+    changeUser = (e) => {
+        e.preventDefault();
+        const obj = {};
+        // eslint-disable-next-line array-callback-return
+        this.props.changeUserForm.map(el => {
+            obj[el.name] = el.type === 'radio' ? el.checked ? el.value : !el.value : el.value
+        });
+        console.log(obj) //заменить на putUsers
+    };
+
+    changeConfirm = (action, text) => {
+        this.setState({showConfirm: !this.state.showConfirm})
+    };
+
+    deleteUser = (e) => {
+        console.log(this.props.user._id); // заменить на deleteUser
+        this.changeConfirm()
+    };
+
+    render() {
+        const {
+            user,
+            findUserInput,
+            changeInputValueUserForm,
+            changeUserForm,
+            error
+        } = this.props;
+        return (
+            <div
+                style={{
+                    display: 'flex'
+                }}
+            >
+                <div>
+                    <input type='text' name='find_user' onKeyDown={this.enterPressed} onChange={this.changeUserInput}/>
+                    {findUserInput &&
+                    <button id='enter' onClick={this.findUser}>Find User</button>
+                    }
+                    {user &&
+                    <div>
+                        <form
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                width: '400px'
+                            }}
+                        >
+                            {changeUserForm.map(el =>
+                                <label
+                                    key={el.id}>{el.name === 'role' || el.name === 'doctor' ? `${el.name} ${el.value}` : el.name}
+                                    {el.name !== 'role' && el.name !== 'doctor' && <br/>}
+                                    <Input
+                                        el={el}
+                                        changeInputValues={changeInputValueUserForm}
+                                        className={el.className}
+                                    />
+                                </label>
+                            )}
+                        </form>
+                        <button onClick={this.changeUser}>Change</button>
+                        <button onClick={this.changeConfirm}>DELETE</button>
+                    </div>
+                    }
+
+                    {error &&
+                    <div>
+                        <p>User not found</p>
+                    </div>
+                    }
+                </div>
+                <div>
+                    <p>User List will be here</p>
+                </div>
+                {
+                    this.state.showConfirm &&
+                    <ConfirmButton yes={this.deleteUser} no={this.changeConfirm}
+                                   text={'Are you sure you want to Delete User?'}
+                    />
+                }
+            </div>
+        );
+    }
+};
+

src/components/Admin/tempp.js

@@ -1,74 +0,0 @@
-import React from 'react';
-
-
-import Input from "./Input"
-
-export default class Tempp extends React.Component {
-
-    changeUserInput = (e) => {
-    this.props.changeFindUserInput(e.target.value)
-    };
-
-    findUser = () => {
-        this.props.findUser(this.props.findUserInput.includes('@') ? '?email='+this.props.findUserInput : this.props.findUserInput)
-    };
-
-    enterPressed = (e) => {
-        if (e.key === 'Enter') {
-            this.findUser();
-        }
-    };
-
-    changeUser = (e) => {
-        const obj = {}
-        e.preventDefault()
-        this.props.changeUserForm.map(el => {
-            obj[el.name] = el.type === 'radio' ? el.checked ? el.value : !el.value : el.value
-        });
-        console.log(obj)
-    };
-
-    render(){
-        const {
-            user,
-            findUserInput,
-            changeFindUserInput,
-            findUser,
-            deleteUser,
-            changeInputValueUserForm,
-            changeUserForm,
-            error
-        } = this.props;
-        console.log(this.props)
-        return (
-           <div>
-                <input type='text' name='find_user' onKeyDown={this.enterPressed} onChange={this.changeUserInput} />
-                {findUserInput && 
-                    <button id='enter' onClick={this.findUser}>Find User</button>
-                }
-                {user &&
-                    <div>
-                        <form onSubmit={this.changeUser} className="form-doctors">
-                            {changeUserForm.map(el =>
-                                <Input
-                                    key={el.id}
-                                    el={el}
-                                    changeInputValues={changeInputValueUserForm}
-                                    className={el.className}
-                                />
-                            )}
-                            <button type='submit'>Change</button>
-                        </form>
-                    </div>
-                }
-
-                {error &&
-                    <div>
-                        <p>User not found</p>
-                    </div>
-               }
-           </div>
-        );
-    }
-};
-

src/components/ConfirmButton.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+
+class ConfirmButton extends Component {
+    render(){
+        const {yes,no,text} = this.props;
+        return(
+            <>
+                <div style={{
+                    position:'fixed',
+                    backgroundColor: 'tomato',
+                    left:'0',
+                    right:'0',
+                    width: '300px',
+                    height: '150px',
+                    margin: 'auto',
+                    zIndex:'2'
+                }}>
+                    <div>{text}</div>
+                    <button onClick={() => yes()}>Yes</button>
+                    <button onClick={() => no()}>No</button>
+                </div>
+                <div className = "wrap-check-off"  onClick={no}/>
+            </>
+        )
+    }
+}
+
+export default ConfirmButton;

src/components/appointment/Appointment.js

@@ -53,14 +53,13 @@ export class Appoint extends React.Component {
     };
 
     postOrder = () => {
-        console.log(this.props.appointment)
         this.props.postOrders({
             shedule: this.props.appointment.sheduleId,
             time: this.props.appointment.time,
             doctor: this.props.appointment.doctorId,
             spec: this.props.appointment.specId,
             comment: this.props.appointment.comment,
-            user: this.props.user
+            user: this.props.user._id
         })
     };
 

src/reducers/appointment.js

@@ -15,10 +15,10 @@ 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;
+            const timeArray =[];
+            const doctor = action.payload.doctors.find(el => el._id === state.appointment.doctorId);
+            const shedule = doctor.shedule.find(el => el.data === action.payload.data);
+            const 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++){

src/reducers/calendar.js

@@ -2,52 +2,44 @@ import * as types from '../actionsTypes/actionsTypes'
 import moment from "moment";
 
 const defaultState = {
-    monthArray:[],
-    current:moment()
+    monthArray: [],
+    current: moment()
 };
 
 export const calendarReducer = (state = defaultState, action) => {
-    switch(action.type){
+    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:"", 
+            for (let x = 1; x <= state.current.daysInMonth(); x++) {
+                const el = state.current.date(x).format('YYYY-MM-DD');
+                const day = {
+                    day: el,
+                    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),
+                    backgroundColor: moment(el).month() === state.current.month() ? action.payload.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
                 };
-                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: "",
+            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++) {
+                const el = prevMonth.endOf('month').subtract(x - 1, 'days').format('YYYY-MM-DD');
+                const day = {
+                    day: el,
+                    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),
+                    backgroundColor: moment(el).month() === state.current.month() ? action.payload.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
                 };
-                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 {
@@ -59,7 +51,7 @@ export const calendarReducer = (state = defaultState, action) => {
         case types.CHANGE_CALENDAR_MONTH: {
             return {
                 ...state,
-                current: state.current.add(action.payload,"month")
+                current: state.current.add(action.payload, "month")
             };
         }
 

src/reducers/user.js

@@ -22,7 +22,6 @@ export const userReducer = (state = defaultState, action) => {
 
         case types.FIND_USER_REQUEST_SUCCESS : {
             const data = state.findUserInput.includes('@') ? action.payload.users[0] : action.payload.user;
-            state.changeUserForm.map(el => console.log(Object.keys(data).find(item => item === el.name)));
             return {
                 ...state,
                 user: data,
@@ -58,7 +57,6 @@ export const userReducer = (state = defaultState, action) => {
         }
 
         case types.CHANGE_INPUT_VALUE_USER_FORM : {
-            console.log(action.payload.target);
             const data = action.payload.target;
             return {
                 ...state,