merge completed

src/App.js

@@ -6,7 +6,7 @@ import {getDoctors} from "./actions/actions";
 import {getServices, getCategories} from "./actions/services";
 import {getUser} from "./actions/auth"
 
-import Loader from "./components/loader";
+import Loader from "./components/hooks/loader";
 import Header from "./components/header/index";
 import Footer from "./components/Footer";
 import {route} from './utils/formFields'
@@ -19,6 +19,7 @@ export class App extends React.Component {
     componentDidMount() {
         this.props.getDoctors();
         this.props.getServices();
+        console.log(this.props.app)
         this.props.getCategories();
 
        if(localStorage.getItem('userId')) this.props.getUser()

src/actions/actions.js

@@ -38,13 +38,6 @@ export const changeSpecialityArray = payload => ({
     payload
 });
 
-// -----------------------------------------------------------------------------------------------------------------
-
-export const setSheduleDoctor = payload => ({
-    type: types.CHANGE_SHEDULE_DOCTOR,
-    payload
-});
-
 // -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
@@ -76,34 +69,6 @@ export const getDoctors = () => dispatch => {
 
 // -----------------------------------------------------------------------------------------------------------------
 
-// const getServicesRequest = payload => ({
-//     type: types.GET_SERVICES_REQUEST,
-//     payload
-// });
-//
-// const getServicesRequestSuccess = payload => ({
-//     type: types.GET_SERVICES_REQUEST_SUCCESS,
-//     payload
-// });
-//
-// const getServicesRequestFail = payload => ({
-//     type: types.GET_SERVICES_REQUEST_FAIL,
-//     payload
-// });
-//
-// export const getServices = () => dispatch => {
-//     dispatch(getServicesRequest());
-//     return fetch(`${URL}services`,{
-//         credentials:"include"
-//     })
-//         .then(res => res.json())
-//         .then(res => dispatch(getServicesRequestSuccess(res)))
-//         .catch(err => dispatch(getServicesRequestFail(err)));
-// };
-
-// -----------------------------------------------------------------------------------------------------------------
-// -----------------------------------------------------------------------------------------------------------------
-
 const postDoctorsRequest = payload => ({
     type: types.POST_DOCTORS_REQUEST,
     payload
@@ -130,77 +95,12 @@ export const postDoctors = (payload) => dispatch => {
         body: JSON.stringify(payload)
     })
         .then(res => res.json())
-        .then(res => dispatch(postDoctorsRequestSuccess(res)))
+        .then(res => dispatch(postDoctorsRequestSuccess(res))).then(dispatch(getDoctors()))
         .catch(err => dispatch(postDoctorsRequestFail(err)));
 };
 
 // -----------------------------------------------------------------------------------------------------------------
 
-const postServicesRequest = payload => ({
-    type: types.POST_SERVICES_REQUEST,
-    payload
-});
-
-const postServicesRequestSuccess = payload => ({
-    type: types.POST_SERVICES_REQUEST_SUCCESS,
-    payload
-});
-
-const postServicesRequestFail = payload => ({
-    type: types.POST_SERVICES_REQUEST_FAIL,
-    payload
-});
-
-export const postServices = (payload) => dispatch => {
-    dispatch(postServicesRequest());
-    return fetch(`${URL}services`, {
-        method: "POST",
-        credentials: "include",
-        headers: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify(payload)
-    })
-        .then(res => res.json())
-        .then(res =>  dispatch(postServicesRequestSuccess(res)))
-        .catch(err => dispatch(postServicesRequestFail(err)))
-};
-
-// -----------------------------------------------------------------------------------------------------------------
-
-const postSheduleRequest = payload => ({
-    type: types.POST_SHEDULE_REQUEST,
-    payload
-});
-
-const postSheduleSuccess = payload => ({
-    type: types.POST_SHEDULE_REQUEST_SUCCESS,
-    payload
-});
-
-const postSheduleFail = payload => ({
-    type: types.POST_SHEDULE_REQUEST_FAIL,
-    payload
-});
-
-export const postShedule = (payload) => dispatch => {
-    dispatch(postSheduleRequest());
-    return fetch(`${URL}shedule`, {
-        method: "POST",
-        credentials:"include",
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-    })
-        .then(res => res.json())
-        .then(res => dispatch(postSheduleSuccess(res))).then(dispatch(getDoctors()))
-        .catch(err => dispatch(postSheduleFail(err)));
-};
-
-// -----------------------------------------------------------------------------------------------------------------
-// -----------------------------------------------------------------------------------------------------------------
-
 const putDoctorsRequest = payload => ({
     type: types.PUT_DOCTORS_REQUEST,
     payload
@@ -227,73 +127,12 @@ export const putDoctors = (payload) => dispatch => {
         body: JSON.stringify(payload.data)
     })
         .then(res => res.json())
-        .then(res => dispatch(putDoctorsRequestSuccess(res)))
+        .then(res => dispatch(putDoctorsRequestSuccess(res))).then(dispatch(getDoctors()))
         .catch(err => dispatch(putDoctorsRequestFail(err)));
 };
 
 // -----------------------------------------------------------------------------------------------------------------
 
-const putServicesRequest = payload => ({
-    type: types.PUT_SERVICES_REQUEST,
-    payload
-});
-
-const putServicesRequestSuccess = payload => ({
-    type: types.PUT_SERVICES_REQUEST_SUCCESS,
-    payload
-});
-
-const putServicesRequestFail = payload => ({
-    type: types.PUT_SERVICES_REQUEST_FAIL,
-    payload
-});
-
-export const putServices = (payload) => dispatch => {
-    dispatch(putServicesRequest());
-    return fetch(`${URL}services/${payload.id}`, {
-        method: "PUT",
-        credentials: "include",
-        headers: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify(payload.data)
-    })
-        .then(res => res.json())
-        .then(res => dispatch(putServicesRequestSuccess(res)))
-        .catch(err => dispatch(putServicesRequestFail(err)));
-};
-
-// -----------------------------------------------------------------------------------------------------------------
-// -----------------------------------------------------------------------------------------------------------------
-
-const deleteServicesRequest = payload => ({
-    type: types.DELETE_DOCTORS_REQUEST,
-    payload
-});
-
-const deleteServicesRequestSuccess = payload => ({
-    type: types.DELETE_DOCTORS_REQUEST_SUCCESS,
-    payload
-});
-
-const deleteServicesRequestFail = payload => ({
-    type: types.DELETE_DOCTORS_REQUEST_FAIL,
-    payload
-});
-
-export const deleteServices = (payload) => dispatch => {
-    dispatch(deleteServicesRequest());
-    return fetch(`${URL}services/${payload}`, {
-        method: "DELETE",
-        credentials: "include"
-    })
-        .then(res => res.json())
-        .then(res => dispatch(deleteServicesRequestSuccess(res)))
-        .catch(err => dispatch(deleteServicesRequestFail(err)));
-};
-
-// -----------------------------------------------------------------------------------------------------------------
-
 const deleteDoctorsRequest = payload => ({
     type: types.DELETE_DOCTORS_REQUEST,
     payload
@@ -316,7 +155,7 @@ export const deleteDoctors = (payload) => dispatch => {
         credentials: "include"
     })
         .then(res => res.json())
-        .then(res => dispatch(deleteDoctorsRequestSuccess(res)))
+        .then(res => dispatch(deleteDoctorsRequestSuccess(res))).then(dispatch(getDoctors()))
         .catch(err => dispatch(deleteDoctorsRequestFail(err)));
 };
 

src/actions/appointment.js

@@ -1,5 +1,7 @@
 import * as types from "../actionsTypes/actionsTypes";
 
+import axios from 'axios'
+
 const URL = "https://api-clinics.herokuapp.com/api/v1/";
 
 export const setAppointmentShedule = payload => ({
@@ -69,18 +71,38 @@ const postOrdersFail = payload => ({
 
 // -----------------------------------------------------------------------------------------------------------------
 
-export const postOrders = (payload) => dispatch => {
-    dispatch(postOrdersRequest());
-    return fetch(`${URL}orders`, {
-        method: "POST",
-        credentials:"include",
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-    })
-        .then(res => res.json())
-        .then(res => dispatch(postOrdersSuccess(res)))
-        .then(dispatch(clearAppointment()))
-        .catch(err => dispatch(postOrdersFail(err)));
-};
+// export const postOrders = (payload) => dispatch => {
+//     dispatch(postOrdersRequest());
+//     return fetch(`${URL}orders`, {
+//         method: "POST",
+//         credentials:"include",
+//         headers: {
+//             'Content-Type': 'application/json'
+//         },
+//         body: JSON.stringify(payload)
+//     })
+//         .then(res => res.json())
+//         .then(res => dispatch(postOrdersSuccess(res)))
+//         .then(dispatch(clearAppointment()))
+//         .catch(err => dispatch(postOrdersFail(err)));
+// };
+export const postOrders = payload => {
+    return async dispatch => {
+        dispatch(postOrdersRequest());
+        try {
+            const { data } = await axios({
+                method:'POST',
+                url:`${URL}orders`,
+                data: payload  
+            });
+            dispatch(postOrdersSuccess(data))
+            dispatch(clearAppointment());
+            console.log('post',data)
+
+           
+            
+        } catch (error){
+            dispatch(postOrdersFail(error));
+        }
+    }
+}

src/actions/services.js

@@ -2,6 +2,7 @@ import * as types from "../actionsTypes/actionsTypes";
 
 const URL = "https://api-clinics.herokuapp.com/api/v1/";
 
+
 const getServicesRequest = payload => ({
     type: types.GET_SERVICES_REQUEST,
     payload
@@ -27,7 +28,99 @@ export const getServices = () => dispatch => {
         .catch(err => dispatch(getServicesRequestFail(err)));
 };
 
+// -----------------------------------------------------------------------------------------------------------------
+
+const postServicesRequest = payload => ({
+    type: types.POST_SERVICES_REQUEST,
+    payload
+});
+
+const postServicesRequestSuccess = payload => ({
+    type: types.POST_SERVICES_REQUEST_SUCCESS,
+    payload
+});
+
+const postServicesRequestFail = payload => ({
+    type: types.POST_SERVICES_REQUEST_FAIL,
+    payload
+});
+
+export const postServices = (payload) => dispatch => {
+    dispatch(postServicesRequest());
+    return fetch(`${URL}services`, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+    })
+        .then(res => res.json())
+        .then(res =>  dispatch(postServicesRequestSuccess(res))).then(dispatch(getServices()))
+        .catch(err => dispatch(postServicesRequestFail(err)))
+};
+
+// -----------------------------------------------------------------------------------------------------------------
+
+const putServicesRequest = payload => ({
+    type: types.PUT_SERVICES_REQUEST,
+    payload
+});
+
+const putServicesRequestSuccess = payload => ({
+    type: types.PUT_SERVICES_REQUEST_SUCCESS,
+    payload
+});
+
+const putServicesRequestFail = payload => ({
+    type: types.PUT_SERVICES_REQUEST_FAIL,
+    payload
+});
+
+export const putServices = (payload) => dispatch => {
+    dispatch(putServicesRequest());
+    return fetch(`${URL}services/${payload.id}`, {
+        method: "PUT",
+        credentials: "include",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload.data)
+    })
+        .then(res => res.json())
+        .then(res => dispatch(putServicesRequestSuccess(res))).then(dispatch(getServices()))
+        .catch(err => dispatch(putServicesRequestFail(err)));
+};
+
+// -----------------------------------------------------------------------------------------------------------------
+
+const deleteServicesRequest = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST,
+    payload
+});
+
+const deleteServicesRequestSuccess = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_SUCCESS,
+    payload
+});
+
+const deleteServicesRequestFail = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_FAIL,
+    payload
+});
+
+export const deleteServices = (payload) => dispatch => {
+    dispatch(deleteServicesRequest());
+    return fetch(`${URL}services/${payload}`, {
+        method: "DELETE",
+        credentials: "include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(deleteServicesRequestSuccess(res))).then(dispatch(getServices()))
+        .catch(err => dispatch(deleteServicesRequestFail(err)));
+};
 
+// -----------------------------------------------------------------------------------------------------------------
 
 const getCategoriesRequest = payload => ({
     type: types.GET_CATEGORIES_REQUEST,

src/actions/shedule.js

@@ -0,0 +1,46 @@
+import * as types from '../actionsTypes/actionsTypes'
+import {getDoctors} from "./actions";
+
+
+export const setSheduleDoctor = payload => ({
+    type: types.CHANGE_SHEDULE_DOCTOR,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+const postSheduleRequest = payload => ({
+    type: types.POST_SHEDULE_REQUEST,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+const postSheduleSuccess = payload => ({
+    type: types.POST_SHEDULE_REQUEST_SUCCESS,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+const postSheduleFail = payload => ({
+    type: types.POST_SHEDULE_REQUEST_FAIL,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const postShedule = (payload) => dispatch => {
+    dispatch(postSheduleRequest());
+    return fetch(`${URL}shedule`, {
+        method: "POST",
+        credentials:"include",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+    })
+        .then(res => res.json())
+        .then(res => dispatch(postSheduleSuccess(res))).then(dispatch(getDoctors()))
+        .catch(err => dispatch(postSheduleFail(err)));
+};

src/actions/user.js

@@ -0,0 +1,100 @@
+import * as types from "../actionsTypes/actionsTypes";
+
+const URL = "https://api-clinics.herokuapp.com/api/v1/users/";
+
+
+export const changeFindUserInput = payload => ({
+    type:types.CHANGE_INPUT_VALUE_FIND_USER,
+    payload
+});
+
+export const changeInputValueUserForm = payload => ({
+    type:types.CHANGE_INPUT_VALUE_USER_FORM,
+    payload
+});
+
+const findUserRequest = payload => ({
+    type: types.FIND_USER_REQUEST,
+    payload
+});
+
+const findUserRequestSuccess = payload => ({
+    type: types.FIND_USER_REQUEST_SUCCESS,
+    payload
+});
+
+const findUserRequestFail = payload => ({
+    type: types.FIND_USER_REQUEST_FAIL,
+    payload
+});
+
+export const findUser = (payload) => dispatch => {
+    dispatch(findUserRequest());
+    return fetch(`${URL}`+payload,{
+        credentials:"include"
+    })
+        .then(res => res.json())
+        .then(res => {
+            dispatch(findUserRequestSuccess(res));
+        })
+        .catch(err => dispatch(findUserRequestFail(err)));
+};
+
+
+
+const deleteUserRequest = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST,
+    payload
+});
+
+const deleteUserRequestSuccess = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_SUCCESS,
+    payload
+});
+
+const deleteUserRequestFail = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_FAIL,
+    payload
+});
+
+export const deleteUser = (payload) => dispatch => {
+    dispatch(deleteUserRequest());
+    return fetch(`${URL}${payload}`, {
+        method: "DELETE",
+        credentials: "include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(deleteUserRequestSuccess(res)))
+        .catch(err => dispatch(deleteUserRequestFail(err)));
+};
+
+
+const putUserRequest = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST,
+    payload
+});
+
+const putUserRequestSuccess = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_SUCCESS,
+    payload
+});
+
+const putUserRequestFail = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_FAIL,
+    payload
+});
+
+export const putUser = (payload) => dispatch => {
+    dispatch(putUserRequest());
+    return fetch(`${URL}${payload.path}`, {
+        method: "PUT",
+        credentials: "include",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload.data)
+    })
+        .then(res => res.json())
+        .then(res => dispatch(putUserRequestSuccess(res)))
+        .catch(err => dispatch(putUserRequestFail(err)));
+};

src/actionsTypes/actionsTypes.js

@@ -1,3 +1,9 @@
+export const FIND_USER_REQUEST = "FIND_USER_REQUEST";
+export const FIND_USER_REQUEST_SUCCESS = "FIND_USER_REQUEST_SUCCESS";
+export const FIND_USER_REQUEST_FAIL = "FIND_USER_REQUEST_FAIL";
+export const CHANGE_INPUT_VALUE_FIND_USER = "CHANGE_INPUT_VALUE_FIND_USER";
+export const CHANGE_INPUT_VALUE_USER_FORM= "CHANGE_INPUT_VALUE_USER_FORM";
+
 export const GET_DOCTORS_REQUEST = "GET_DOCTORS_REQUEST";
 export const GET_DOCTORS_REQUEST_SUCCESS = "GET_DOCTORS_REQUEST_SUCCESS";
 export const GET_DOCTORS_REQUEST_FAIL = "GET_DOCTORS_REQUEST_FAIL";
@@ -51,6 +57,10 @@ export const PUT_DOCTORS_REQUEST = "PUT_DOCTORS_REQUEST";
 export const PUT_DOCTORS_REQUEST_SUCCESS = "PUT_DOCTORS_REQUEST_SUCCESS";
 export const PUT_DOCTORS_REQUEST_FAIL = "PUT_DOCTORS_REQUEST_FAIL";
 
+export const PUT_USER_REQUEST = "PUT_USER_REQUEST";
+export const PUT_USER_REQUEST_SUCCESS = "PUT_USER_REQUEST_SUCCESS";
+export const PUT_USER_REQUEST_FAIL = "PUT_USER_REQUEST_FAIL";
+
 export const PUT_SERVICES_REQUEST = "PUT_DOCTORS_REQUEST";
 export const PUT_SERVICES_REQUEST_SUCCESS = "PUT_DOCTORS_REQUEST_SUCCESS";
 export const PUT_SERVICES_REQUEST_FAIL = "PUT_DOCTORS_REQUEST_FAIL";
@@ -63,6 +73,10 @@ export const DELETE_SERVICES_REQUEST = "DELETE_DOCTORS_REQUEST";
 export const DELETE_SERVICES_REQUEST_SUCCESS = "DELETE_DOCTORS_REQUEST_SUCCESS";
 export const DELETE_SERVICES_REQUEST_FAIL = "DELETE_DOCTORS_REQUEST_FAIL";
 
+export const DELETE_USER_REQUEST = "DELETE_USER_REQUEST";
+export const DELETE_USER_REQUEST_SUCCESS = "DELETE_USER_REQUEST_SUCCESS";
+export const DELETE_USER_REQUEST_FAIL = "DELETE_USER_REQUEST_FAIL";
+
 export const CHANGE_SHEDULE_DOCTOR= "CHANGE_SHEDULE_DOCTOR";
 
 export const CHANGE_INPUT_VALUE_DOCTOR_FORM= "CHANGE_INPUT_VALUE_DOCTOR_FORM";

src/assets/fonts/icomoon.svg

@@ -7,6 +7,7 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="done" d="M384 246.667l452 454 60-60-512-512-238 238 58 60z" />
 <glyph unicode="&#xe901;" glyph-name="lens" d="M512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125z" />
 <glyph unicode="&#xe903;" glyph-name="dehaze" d="M86 704.667h852v-86h-852v86zM86 490.667h852v-86h-852v86zM86 276.667h852v-84h-852v84z" />
 <glyph unicode="&#xe942;" glyph-name="phone" d="M704 320c-64-64-64-128-128-128s-128 64-192 128-128 128-128 192 64 64 128 128-128 256-192 256-192-192-192-192c0-128 131.5-387.5 256-512s384-256 512-256c0 0 192 128 192 192s-192 256-256 192z" />

src/components/Admin/Admin.js

@@ -3,8 +3,6 @@ import {connect} from 'react-redux'
 import {Link} from 'react-router-dom'
 import {Switch, Route} from "react-router-dom";
 import {
-    setSheduleDoctor,
-    postShedule,
     changeInputValueDoctorForm,
     changeInputValueServiceForm,
     postDoctors,
@@ -12,13 +10,30 @@ import {
     changeSelectedServiceId,
     putDoctors,
     deleteDoctors,
-    postServices,
-    putServices,
-    deleteServices,
     changeSpecialityArray
 } from "../../actions/actions";
 
+import {
+    changeFindUserInput,
+    findUser,
+    deleteUser,
+    changeInputValueUserForm,
+    putUser
+} from "../../actions/user"
+
+import {
+    postServices,
+    putServices,
+    deleteServices
+} from "../../actions/services"
+
+import {
+    setSheduleDoctor,
+    postShedule,
+} from "../../actions/shedule"
+
 import Shedule from './Shedule'
+import ChangeUser from './ChangeUser'
 import ChangeServicesDoctors from './ChangeServices-Doctors'
 
 
@@ -48,7 +63,16 @@ export class Admin extends React.Component {
             deleteServices,
             postServices,
             changeSpecialityArray,
-            specialityArray
+            specialityArray,
+            user,
+            findUserInput,
+            changeFindUserInput,
+            findUser,
+            deleteUser,
+            userError,
+            changeUserForm,
+            changeInputValueUserForm,
+            putUser
         } = this.props;
 
         return (
@@ -58,6 +82,7 @@ export class Admin extends React.Component {
                         <Link to='/admin/change-shedule' className = "btn link admin">Расписание</Link>
                         <Link to='/admin/change-doctors' className = "btn link admin">Сотрудники</Link>
                         <Link to='/admin/change-services' className = "btn link admin">Сервисы</Link>
+                        <Link to='/admin/change-user' className = "btn link admin">Пользователи</Link>
                     </div>
                     <Switch>
                         <Route path='/admin/change-shedule' render={() => <Shedule
@@ -89,6 +114,17 @@ export class Admin extends React.Component {
                             deleteItem={deleteServices}
                             changeInputValues={changeInputValueServiceForm}
                         />} />
+                        <Route path='/admin/change-user' render={() => <ChangeUser
+                            user={user}
+                            findUserInput={findUserInput}
+                            changeFindUserInput={changeFindUserInput}
+                            findUser={findUser}
+                            deleteUser={deleteUser}
+                            error={userError}
+                            changeUserForm={changeUserForm}
+                            changeInputValueUserForm={changeInputValueUserForm}
+                            putUser={putUser}
+                        />} />
                     </Switch>
                 </div>
             </div>
@@ -99,14 +135,18 @@ export class Admin extends React.Component {
 const mapStateToProps = state => {
     return {
         doctors:state.app.doctors,
-        postNewShedule:state.app.postNewShedule,
+        postNewShedule:state.shedule.postNewShedule,
         postNewDoctor:state.app.postNewDoctor,
         postNewService:state.app.postNewService,
         changeDoctorId:state.app.changeDoctorId,
         changeServiceId:state.app.changeServiceId,
         specialityArray:state.app.specialityArray,
         services: state.services.services,
-        categories: state.services.categories
+        categories: state.services.categories,
+        user:state.user.user,
+        findUserInput:state.user.findUserInput,
+        userError:state.user.error,
+        changeUserForm:state.user.changeUserForm,
     }
 };
 
@@ -123,7 +163,12 @@ const mapDispatchToProps = {
     postServices,
     putServices,
     deleteServices,
-    changeSpecialityArray
+    changeSpecialityArray,
+    changeFindUserInput,
+    findUser,
+    deleteUser,
+    changeInputValueUserForm,
+    putUser
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(Admin)

src/components/Admin/ChangeServices-Doctors.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import Input from './Input'
 import CheckBoxWindow from "./CheckBoxWindow";
+import {CustomSelect} from "../hooks/select";
+import ConfirmButton from "../ConfirmButton";
 
 export default class ChangeServicesDoctors extends React.Component {
     state = {
+        showConfirm: false,
         flag: false,
     };
 
-    componentDidUpdate(prevProps) {
-        if (this.props.data !== prevProps.data) this.setState({flag: false})
+    changeConfirm = (action, text) => {
+        this.setState({showConfirm: !this.state.showConfirm})
     };
 
     changeFlag = (e) => {
@@ -23,9 +26,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)
     };
 
@@ -37,23 +40,23 @@ 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
         })
-
     };
 
     deleteItem = () => {
-        this.props.deleteItem(this.props.itemId)
+        this.props.deleteItem(this.props.itemId);
+        this.changeConfirm()
     };
 
     changeId = (e) => {
         this.props.changeId({
-            item: e.target.value,
-            data: this.props.data
+            item: e,
+            data: this.props.data,
         })
     };
 
@@ -67,51 +70,60 @@ export default class ChangeServicesDoctors extends React.Component {
             changeSpecialityArray,
             specialityArray
         } = this.props;
-        let doctor = data.find(el => el._id === itemId);
-        if (doctor) doctor = doctor.speciality;
-        console.log(data,specialityArray)
         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}
-                                            changeInputValues={changeInputValues}
-                                        />
-                                    )
+                                return (
+                                    <Input
+                                        key={el.id}
+                                        id={el.id}
+                                        el={el}
+                                        className={el.className}
+                                        changeInputValues={changeInputValues}
+                                    />
+                                )
                             })
                         }
-                        {categories && <button onClick={this.changeFlag}>Choose Services</button>}
-                        <input className="btn link"
-                               type='submit'
-                               value={itemId ? 'Изменить'  : 'Добавить'}
+                        {categories &&
+                        <button className=" btn servise-btn" onClick={this.changeFlag}>Выбрать сервисы</button>}
+                        <input
+                            className="btn link"
+                            type='submit'
+                            value={itemId ? 'Изменить' : 'Добавить'}
                         />
                     </form>
                 </div>
                 <div className="admin-item">
-                    <select className="appointment admin-form" onChange={this.changeId} defaultValue='Выбрать'>
-                        <option >Выбрать</option>
-                        {
-                            data.map(el => (
-                                <option key={el._id}>{el.name}</option>
-                            ))
-                        }
-                    </select>
-
-
+                    <CustomSelect
+                        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
+        });
+        this.props.putUser({data:obj,path:this.props.user._id})
+    };
+
+    changeConfirm = (action, text) => {
+        this.setState({showConfirm: !this.state.showConfirm})
+    };
+
+    deleteUser = (e) => {
+        this.props.deleteUser(this.props.user._id);
+        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/CheckBoxWindow.js

@@ -10,39 +10,21 @@ class CheckBoxWindow extends React.Component {
         const {categories, changeFlag,specialityArray} = this.props;
         return (
             <>
-                <div style={{
-                    position: 'fixed',
-                    right: '0',
-                    left: '0',
-                    display: 'flex',
-                    justifyContent:'center',
-                    backgroundColor: 'black',
-                    margin: '5% auto',
-                    width: '80%',
-                    fontSize: '12px',
-                    zIndex: '2'
-                }}>
+                <div className = "check-container">
                     {categories.map(el => (
-                        <div key={el._id} style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            wrap: 'nowrap',
-                            textAlign:'start',
-                            width:'20%'
-                        }}>
-                            <p>{el.name}</p>
+                        <div className = "check-speciality" key={el._id}>
+                            <h4>{el.name}</h4>
                             {
                                 el.services.map(item => (
-                                    <div key={item._id} >
-                                        <label>
-                                            <input
-                                                type="checkbox"
-                                                value={item._id}
-                                                defaultChecked={specialityArray.find(el => el === item._id)}
-                                                onChange={this.changeSpecialityArray}
-                                            />
-                                            {item.name}
-                                        </label>
+                                    <div  className = "check-elem" key={item._id} >
+                                        <input
+                                            type="checkbox"
+                                             value={item._id}
+                                             id={item._id}
+                                             defaultChecked={specialityArray.find(el => el === item._id)}
+                                            onChange={this.changeSpecialityArray}
+                                        />
+                                            <label htmlFor={item._id} className = "check">   {item.name}</label>
                                     </div>
                                 ))
                             }
@@ -50,15 +32,7 @@ class CheckBoxWindow extends React.Component {
                     ))
                     }
                 </div>
-                <div style={{
-                    position: 'fixed',
-                    top: '0',
-                    left: "0",
-                    width: '100%',
-                    height: '100%',
-                    backgroundColor: 'black',
-                    opacity: '0.5'
-                }} onClick={changeFlag}></div>
+                <div className = "wrap-check-off"  onClick={changeFlag}></div>
             </>
         )
     }

src/components/Admin/Input.js

@@ -2,19 +2,22 @@ import React from 'react';
 
 export default class Input extends React.Component {
     render(){
+        const {el,className,changeInputValues} = this.props;
         return (
             <input
-                className = "appointment admin-form"
-                id={this.props.el.id}
-                type={this.props.el.type}
-                name={this.props.el.name}
-                value={this.props.el.value}
-                placeholder={this.props.el.placeholder}
-                minLength={this.props.el.minLength}
-                maxLength={this.props.el.maxLength}
-                required={this.props.el.required}
-                pattern={this.props.el.pattern}
-                onChange={(e) => this.props.changeInputValues(e)}
+                className = {className ? className : "appointment admin-form"}
+                id={el.id}
+                type={el.type}
+                name={el.name}
+                value={el.value}
+                placeholder={el.placeholder}
+                minLength={el.minLength}
+                maxLength={el.maxLength}
+                required={el.required}
+                pattern={el.pattern}
+                checked={el.checked}
+                readOnly={el.readOnly}
+                onChange={(e) => changeInputValues(e)}
             />
         );
     }

src/components/Admin/Shedule.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import moment from "moment";
 
+import { CustomSelect } from "../hooks/select"
 import Calendar from "../Calendar";
 
 export default class Shedule extends React.Component {
@@ -10,7 +11,7 @@ export default class Shedule extends React.Component {
     };
 
     post = (e) => {
-        e.preventDefault()
+        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]){
@@ -31,25 +32,23 @@ export default class Shedule extends React.Component {
         this.setState ( { endDate:e.target.value } )
     };
     setDoctor = (e) => {
-        this.props.setSheduleDoctor(e.target.value)
+        this.props.setSheduleDoctor({data:e,doctors:this.props.doctors})
+  
     };
 
     render() {
         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={this.setDoctor} defaultValue={doctor ? doctor.name : 'Выберите доктора'}>
-                        <option disabled >Выберите доктора</option>
-                        {
-                            doctors.map ( el=> (
-                                <option key={el._id} id={el._id}> {el.name} </option>
-                            ) )
-                        }
-                    </select>
 
+                    <CustomSelect
+                        label="Выберите доктора"
+                        options= {doctors }
+                        clickOptionEvent={this.setDoctor}
+                    /> 
+                    
                     {postNewShedule.doctor &&
                         <div className = "input-box">
                             <input className = "shedule-input " type="date" onChange = {this.changeStart}/>
@@ -65,10 +64,12 @@ export default class Shedule extends React.Component {
                 {postNewShedule.doctor &&
                     <Calendar
                         doctor={doctor}
-                        action = {console.log}
+                        action = {console.log }
                     />
                 }
             </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

@@ -1,7 +1,7 @@
 import React from "react";
 import {connect} from "react-redux";
 import moment from "moment";
-import {CustomSelect} from "./select";
+import { CustomSelect } from "../hooks/select";
 
 import {
     setAppointmentSpec,
@@ -53,12 +53,14 @@ export class Appoint extends React.Component {
     };
 
     postOrder = () => {
-        this.props.postOrders({      shedule: this.props.appointment.sheduleId,
+        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
+        })
     };
 
 
@@ -158,7 +160,7 @@ const mapStateToProps = state => {
         timeArray: state.appointment.timeArray,
         doctors: state.app.doctors,
         services: state.services.services,
-        user: state.auth.user
+        user:state.auth.user
     };
 };
 

src/components/appointment/select.js

@@ -93,16 +93,20 @@ export const CustomSelect = ({ label, options , emptyLine = false, searchInput =
 			</div>
 			{show && (
 				<ul className="select__list " ref={list}>
-					{emptyLine && (
-						<li className="select__item" onClick={clickOnEptyLine}>
-							&nbsp;
-						</li>
-					)}
-					{copyOption.map(el => (
-						<li className="select__item" key={el._id} onClick={toggleEvent.bind(null, el.name)}>
-							{el.name}
-						</li>
-					))}
+					<div className="scrollbar" id ="style">
+							<div className="force-overflow"></div>
+						
+						{emptyLine && (
+							<li className="select__item" onClick={clickOnEptyLine}>
+								&nbsp;
+							</li>
+						)}
+						{copyOption.map(el => (
+							<li className="select__item" key={el._id} onClick={toggleEvent.bind(null, el.name)}>
+								{el.name}
+							</li>
+						))}
+					</div>
 				</ul>
 			)}
 		</div>

src/components/services/Services.js

@@ -12,10 +12,12 @@ export class Services extends React.Component {
                     <div className="doctors-wrap  services">
                         <div className="categories" id="accordion">
                             {categories.map(el => (
-                                <div className="service-type" key={el._id} id={`item${el._id}`}>
-                                    <a href={`#item${el._id}`} className="categories-link icon-angle-down" key={el._id}>
-                                        {el.name}
+                                
+                                <div className="service-type" key={el._id} id={`item${el._id}`} >
+                                    <a href={`#item${el._id}`} className="categories-link icon-angle-down" key={el._id} >
+                                         {el.name}
                                     </a>
+
                                     {el.services.map(item => (
                                         <div className="servise-name" key={item._id}>
                                             <p>{item.name}</p>
@@ -28,6 +30,7 @@ export class Services extends React.Component {
                                         </div>
                                     ))}
                                 </div>
+
                             ))}
                         </div>
                     </div>
@@ -43,6 +46,8 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = {
+  
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Services);

src/components/services/categories.js

@@ -50,8 +50,8 @@
 // const mapStateToProps = state => {
 //     return {
 //         app:state.app,
-//         // data:state.app.services,
-//         categories:state.app.servicesArray
+//         data:state.services.services,
+//         categories:state.services.categories
 //     }
 // };
 

src/components/specialists/MoreInfo.js

@@ -13,11 +13,11 @@ export class MoreInfo extends React.Component {
             <div className="main">
                 {doctor &&
                     <div className = "info-wrap">
-                        <div className="card">
-                            <div className="card-item">
+                        <div className="info">
+                            <div className="info-item">
                                 <img src={`.${doctor.photo}`} alt={doctor.name}/>
                             </div>
-                             <div className="card-item desc">
+                             <div className="info-item info-desc">
                                  <h3> {doctor.name} </h3>
                                 <p className = "highlights">{doctor.profession}</p>
                                 <p className = "highlights">Опыт работы более {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]}  лет</p>

src/components/user.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+class User extends React.Component {
+    state = {  }
+    render() { 
+        return ( 
+        <div className = "main">
+            <div className="info-wrap">
+                <h2>User Name</h2>
+                <div classdescription = "reviews-container">
+                    <p>Это страница авторизованого пользователя</p>
+                </div>
+            </div>
+        </div>
+        );
+    }
+}
+ 
+export default User;

src/containers/auth.js

@@ -6,7 +6,7 @@ import { auth, register } from '../actions/auth';
 
 import {SignUpForm} from '../components/auth/signUp';
 import {SignInForm} from '../components/auth/signIn';
-import Loader from '../components/loader';
+import Loader from '../components/hooks/loader';
 
 class Auth extends Component {
   state = { auth: true };

src/index.js

@@ -15,6 +15,8 @@ import "./style/select.scss"
 import "./style/calendar.scss"
 import "./style/auth.scss"
 import "./style/modal.scss"
+import "./style/checkBoxWindow.scss"
+
 
 ReactDOM.render(
     <Provider store={store}>

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/index.js

@@ -6,6 +6,8 @@ import auth from './auth';
 import {appointmentReducer} from "./appointment";
 import {servicesReducer} from "./services";
 import orders from './orders'
+import {userReducer} from "./user";
+import {sheduleReducer} from "./shedule";
 
 
 
@@ -15,5 +17,7 @@ export default combineReducers({
     calendar:calendarReducer,
     appointment:appointmentReducer,
     services:servicesReducer,
-    orders
+    orders,
+    user:userReducer,
+    shedule:sheduleReducer
 })

src/reducers/reducers.js

@@ -5,15 +5,6 @@ import {postNewDoctorForm,postNewServiceForm} from '../utils/formFields'
 const defaultState = {
     doctors:[],
 
-    orders:[],
-    users:[],
-    reviews: [],
-
-    postNewShedule:{
-        data:null,
-        doctor:null
-    },
-
     postNewDoctor:postNewDoctorForm,
     postNewService:postNewServiceForm,
     changeDoctorId:null,
@@ -22,7 +13,6 @@ const defaultState = {
 
     isFetching:false,
     error: null,
-
 };
 
 // -----------------------------------------------------------------------------------------------------------------
@@ -71,21 +61,14 @@ export const appReducer = (state = defaultState,action) => {
 
         case types.CHANGE_SELECTED_DOCTOR_ID : {
             let doctor = action.payload.data.find(el => el.name === action.payload.item);
-            let result;
             let specArray=[];
-            if (doctor){
-                result = Object.keys(doctor).map(key => {
-                    return [key, doctor[key]];
-                });
-                doctor.speciality.map(el => specArray.push(el._id))
-            }
             return {
                 ...state,
                 specialityArray:specArray,
                 changeDoctorId: doctor ? doctor._id : null,
-                postNewDoctor:doctor ? state.postNewDoctor.map(el => result.find(item => item[0] === el.name) ? {
+                postNewDoctor:doctor ? state.postNewDoctor.map(el => Object.keys(doctor).find(item => item === el.name) ? {
                     ...el,
-                    value:result.find(item => item[0] === el.name)[1]
+                    value:doctor[el.name]
                 } : el) : postNewDoctorForm
             };
         }
@@ -94,41 +77,16 @@ export const appReducer = (state = defaultState,action) => {
 
         case types.CHANGE_SELECTED_SERVICE_ID : {
             let service = action.payload.data.find(el => el.name === action.payload.item);
-            let result;
-                if (service){
-                    result = Object.keys(service).map(key => {
-                        return [key, service[key]];
-                    });
-                }
             return {
                 ...state,
                 changeServiceId: service ? service._id : null,
-                postNewService: service ? state.postNewService.map(el => result.find(item => item[0] === el.name) ? {
+                postNewService: service ? state.postNewService.map(el => Object.keys(service).find(item => item === el.name) ? {
                     ...el,
-                    value:result.find(item => item[0] === el.name)[1]
+                    value:service[el.name]
                 } : el) : postNewServiceForm
             };
         }
 
-// -----------------------------------------------------------------------------------------------------------------
-
-        case types.CHANGE_SHEDULE_DOCTOR : {
-            let doctor = state.doctors.find(el=>el.name === action.payload);
-            let array = [[],[],[],[],[],[],[],[],[],[],[],[]];
-            // eslint-disable-next-line array-callback-return
-            doctor.shedule.map(el => {
-                array[new Date(el.data).getMonth()].push(el)
-            });
-            return {
-                ...state,
-                postNewShedule: {
-                    ...state.postNewShedule,
-                    doctor:doctor._id
-                },
-                sheduleMonthArray: array
-            };
-        }
-
 // -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
@@ -155,8 +113,6 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-
-
 // -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
@@ -183,58 +139,6 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-// -----------------------------------------------------------------------------------------------------------------
-
-        case types.POST_SHEDULE_REQUEST : {
-            return {
-                ...state,
-                isFetching: true
-            };
-        }
-
-        case types.POST_SHEDULE_REQUEST_SUCCESS : {
-            return {
-                ...state,
-                postNewShedule:{
-                    ...state.postNewShedule,
-                    data:null,
-                },
-                isFetching: false
-            }
-        }
-
-        case types.POST_SHEDULE_REQUEST_FAIL : {
-            return {
-                ...state,
-                error: action.payload,
-                isFetching: false
-            }
-        }
-
-// -----------------------------------------------------------------------------------------------------------------
-
-        case types.POST_SERVICES_REQUEST : {
-            return {
-                ...state,
-                isFetching: true
-            };
-        }
-
-        case types.POST_SERVICES_REQUEST_SUCCESS : {
-            return {
-                ...state,
-                isFetching: false
-            }
-        }
-
-        case types.POST_SERVICES_REQUEST_FAIL : {
-            return {
-                ...state,
-                error: action.payload,
-                isFetching: false
-            }
-        }
-
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.POST_ORDERS_REQUEST : {
@@ -273,7 +177,7 @@ export const appReducer = (state = defaultState,action) => {
             return {
                 ...state,
                 postNewDoctor:postNewDoctorForm,
-                changeId:null,
+                changeDoctorId:null,
                 isFetching: false
             }
         }
@@ -299,7 +203,7 @@ export const appReducer = (state = defaultState,action) => {
             return {
                 ...state,
                 postNewService:postNewServiceForm,
-                changeId:null,
+                changeServiceId:null,
                 isFetching: false
             }
         }
@@ -325,7 +229,7 @@ export const appReducer = (state = defaultState,action) => {
         case types.DELETE_DOCTORS_REQUEST_SUCCESS : {
             return {
                 ...state,
-                changeId:null,
+                changeDoctorId:null,
                 isFetching: false
             }
         }
@@ -350,7 +254,7 @@ export const appReducer = (state = defaultState,action) => {
         case types.DELETE_SERVICES_REQUEST_SUCCESS : {
             return {
                 ...state,
-                changeId:null,
+                changeServiceId:null,
                 isFetching: false
             }
         }

src/reducers/services.js

@@ -33,6 +33,30 @@ export const servicesReducer = (state = defaultState, action) => {
             }
         }
 
+
+        case types.POST_SERVICES_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.POST_SERVICES_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                isFetching: false
+            }
+        }
+
+        case types.POST_SERVICES_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
+
         case types.GET_CATEGORIES_REQUEST : {
             return {
                 ...state,

src/reducers/shedule.js

@@ -0,0 +1,55 @@
+import * as types from '../actionsTypes/actionsTypes'
+
+const defaultState = {
+    postNewShedule:{
+        data:null,
+        doctor:null
+    },
+    isFetching: false,
+    error:null
+};
+
+export const sheduleReducer = (state = defaultState, action) => {
+    switch(action.type){
+
+        case types.CHANGE_SHEDULE_DOCTOR : {
+            let doctor = action.payload.doctors.find(el=>el.name === action.payload.data);
+            return {
+                ...state,
+                postNewShedule: {
+                    ...state.postNewShedule,
+                    doctor:doctor._id
+                },
+            };
+        }
+
+        case types.POST_SHEDULE_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.POST_SHEDULE_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                postNewShedule:{
+                    ...state.postNewShedule,
+                    data:null,
+                },
+                isFetching: false
+            }
+        }
+
+        case types.POST_SHEDULE_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
+        default:
+            return state
+    }
+};

src/reducers/user.js

@@ -0,0 +1,104 @@
+import * as types from '../actionsTypes/actionsTypes'
+
+import {adminChangeUserForm} from "../utils/formFields"
+
+const defaultState = {
+    user: null,
+    findUserInput: '',
+    changeUserForm: adminChangeUserForm,
+    isFetching: false,
+    error: null
+};
+
+export const userReducer = (state = defaultState, action) => {
+    switch (action.type) {
+
+        case types.FIND_USER_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.FIND_USER_REQUEST_SUCCESS : {
+            const data = state.findUserInput.includes('@') ? action.payload.users[0] : action.payload.user;
+            return {
+                ...state,
+                user: data,
+                changeUserForm: state.changeUserForm.map(el => Object.keys(data).find(item => item === el.name) ? el.type === 'radio' ?
+                    {
+                        ...el,
+                        checked: data[`${el.name}`] === el.value
+                    } :
+                    {
+                    ...el,
+                    value: data[`${el.name}`]
+                    } :
+                    el
+                ),
+                error: action.payload.message,
+                isFetching: false
+            };
+        }
+
+        case types.FIND_USER_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
+        case types.CHANGE_INPUT_VALUE_FIND_USER : {
+            return {
+                ...state,
+                findUserInput: action.payload
+            };
+        }
+
+        case types.CHANGE_INPUT_VALUE_USER_FORM : {
+            const data = action.payload.target;
+            return {
+                ...state,
+                changeUserForm: state.changeUserForm.map(el => el.name === data.name ? el.type === 'radio' ?
+                    {
+                        ...el,
+                        checked: !el.checked
+                    } :
+                    {
+                        ...el,
+                        value: data.value
+                    } :
+                    el
+                ),
+            };
+        }
+
+        case types.DELETE_USER_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.DELETE_USER_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                services: action.payload,
+                isFetching: false
+            };
+        }
+
+        case types.DELETE_USER_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
+
+        default:
+            return state
+    }
+};

src/style/all.scss

@@ -23,9 +23,9 @@ body {
 	background-image: url(../assets/images/fon1.jpg);
 	background-size: cover;
 	min-height: 100vh;
-	@media (max-width: 1024px) {
-		background-position-x: -450px;
-	}
+	// @media (max-width: 1024px) {
+	// 	background-position-x: -450px;
+	// }
 	@media (max-width: 768px) {
 		background-position-x: -270px;
 	}
@@ -102,7 +102,6 @@ aside {
 }
 
 
-
 // _______header +  navigation______________
 .header,
 .footer {
@@ -271,6 +270,14 @@ aside {
 	display: block;
 	padding: 15px 2px;
 	text-align: center;
+	@media (max-width: 1024px) {
+		font-size: 0.7em;
+		padding: 5px 2px;
+	}
+	@media (max-width: 768px) {
+		font-size: 0.6em;
+		padding: 5px 2px;
+	}
 }
 
 .more {
@@ -282,9 +289,20 @@ aside {
 	}
 }
 
-.admin {
-	width: 30%;	
+
+.servise-btn {
+	font-size: 0.7em;
 	margin: 0;
+	width: 100%;
+	line-height: 2em;
+	padding: 3px;
+	min-height: 35px;
+	margin: 2px 0;
+	background-color: $main-color;
+	color: $header-color;
+	&:hover {
+		color: $opacity-color;
+	}
 }
 .nav-exit {
 	background-color: none;
@@ -301,12 +319,11 @@ aside {
 h2  {
 	background-color: $opacity-color;
 	box-shadow: 0px 0px 15px 15px  $opacity-color;
-	font-size: 20px;
+	font-size: 1.2em;
 	line-height: 1.5em;
 	font-family: 'Montserrat', sans-serif;
 	color: $header-color;
 	text-align: justify;
-	
 	padding: 15px 15px 50px;
 	@media (max-width: 768px) {
 		padding: 3px;
@@ -384,13 +401,18 @@ h2 {
 		justify-content: space-between;
 		border-radius: 5px;
 		box-shadow: 0px 2px 8px 1px $main-color;
+		@media (max-width: 768px) {
+			width: 30%;
+		}
+		@media (max-width: 414px) {
+			width: 100%;
+		}
 		.photo {
 			border-radius: 5px; 
 			img {
 				border-radius: 5px;
 				width: 100%;
 			}
-			
 		}
 		h3 {
 			margin: 10px;
@@ -407,12 +429,6 @@ h2 {
 		// 	margin-top: 20px;
 		// }
 
-		@media (max-width: 768px) {
-			width: 45%;
-		}
-		@media (max-width: 630px) {
-			width: 100%;
-		}
 	}
 
 }
@@ -450,9 +466,6 @@ h2 {
 
 
 
-
-
-
 // _____DOCTORS_____ 
 .doctors-wrap {
 	padding-top: 110px;	
@@ -491,8 +504,34 @@ h2 {
 }
 .info-wrap {
 	padding: 110px 10px 25px;
- 	min-height: 100vh;
+	min-height: 100vh;
+	flex-direction: row;
+	 .info {
+		display: flex;
+		justify-content: space-around;
+		flex-wrap: wrap;
+		color: $header-color;
+		.info-item {
+			margin: 0 20px 10px; 
+			@media (max-width: 414px) {
+				margin: 0;
+			}
+			p {
+				margin: 5px 0;
+				text-align: left;
+			}
+			img {
+				border-radius: 3px;
+				box-shadow: 1px 1px 15px 1px $hover-color;
+			}	
+		}
+		.info-desc {
+			width: 50%;
+		}
+	}
 }
+
+
 .card {
 	display: flex;
 	justify-content: space-around;
@@ -525,8 +564,7 @@ h2 {
 			box-shadow: 1px 1px 15px 1px $hover-color;
 		}	
 	}
-}
-		
+}		
 .present {
 	flex-basis: 20%;
 	display: flex;
@@ -758,23 +796,47 @@ h2 {
 // _______ADMIN PANEL __________
 .btn-box {
 	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
 	justify-content: space-between;
+	@media (max-width: 768px) {
+		justify-content: center;
+	}
+	.admin {
+		width: 20%;	
+		margin: 3px;
+		@media (max-width: 768px) {
+			width: 80%;	
+			margin: 10px 5px;
+		}
+	}
 }
 .option,
 .change-services-doctors {
 	width: 40%;
 	margin: 0 auto;
+	align-items: center;
+	@media (max-width: 768px) {
+		flex-direction: column-reverse;
+		width: 85%;
+	}
+	@media (max-width: 414px) {
+		width: 100%;
+	}
 }
 .admin-appointment {
 	width: 100%;
 }
 .shedule-container {
 	margin-top: 50px;
+	.option {
+		width: 80%;
+	}
 	.input-box {
-		width: 100%;
+		width: 90%;
 		display: flex;
 		flex-direction: row;
-		justify-content: space-between;
+		justify-content: center;
 	}
 	.shedule-input {
 		margin: 20px 10px 0 0;
@@ -819,10 +881,14 @@ h2 {
 // ___ change-services-doctors____
 .change-services-doctors {
 	display: flex;
-	// flex-direction: column;
 	justify-content: center;
 	width: 100%;
 	margin-top: 50px;
+	align-content: stretch;
+	align-items: flex-start;
+	@media (max-width: 768px) {
+		align-content: center;
+	}
 	.form-doctors {
 		display: flex;
 		flex-direction: column;
@@ -833,18 +899,24 @@ h2 {
 	.admin-item {
 		width: 35%;
 		margin: 0 50px;
+		@media (max-width: 768px) {
+			width: 85%;
+			margin-bottom: 30px;
+		}
+
 	}
 }
 
 // ______categories _________
 .services {
 	width: 100%;
+	padding-top: 110px;	
 	min-height: 100vh;
 	@media (max-width: 414px) {
 		margin: 25px 0;
 	}
 	.categories {
-		padding-top: 50px;
+		// padding-top: 50px;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
@@ -856,23 +928,12 @@ h2 {
 		}
 		.service-type {
 			width: 85%;
-			// p {
-			// 	@media (max-width: 414px) {
-			// 		margin: 10px 0;
-			// 	}
-			// 	@media (max-width: 414px) {
-			// 		margin: 5px 0;
-			// 	}
-			// 	@media (max-width: 375px) {
-			// 		font-size: 0.8em;
-			// 	}
-			// }
 			.categories-link {
 				display: block;
 				position: relative;
 				border: 1px solid $hover-color;
 				border-radius: 3px;
-				margin: 25px 15px;
+				// margin: 25px 15px;
 				padding: 10px;
 				text-decoration: none;
 				text-transform: uppercase;
@@ -896,7 +957,7 @@ h2 {
 				}
 			}
 			@media (max-width: 1024px) {
-				width: 65%;
+				width: 75%;
 				margin-top: 40px;
 			}
 			@media (max-width: 768px) {
@@ -947,8 +1008,12 @@ h2 {
 	}
 
 	// _______________ACCORDION___________
-	#accordion {
+	#accordion {	
 		.service-type {
+			&:target {
+				padding-top: 110px;				
+			}
+		
 			.servise-name {
 				display: none;
 			}

src/style/checkBoxWindow.scss

@@ -0,0 +1,72 @@
+$header-color: #d4d5d7;
+$main-title-color: #3b3b3b;
+$main-text-color: #101010;
+$main-color:   #789084;
+$hover-color: #b1e8ca;
+$opacity-color: rgba(17,17,17,0.8);
+
+.check-container {
+    position: absolute;
+    right: 15px;
+    left: 15px;
+    top: 55px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    background-color: $opacity-color;
+    margin: 5% auto;
+    width: 85%;
+    font-size: 0.8em;
+    z-index: 2;
+}
+.check-speciality {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    text-align: start;
+    width: 30%;
+    margin: 10px;
+    padding: 5px 10px;
+    border: 1px solid $main-color;
+    .check-elem {
+        margin: 5px 0;
+    }
+}
+input[type = "checkbox"] {
+    display: none;
+  }
+  .check {
+    padding-left: 20px;
+  }
+  .check::before {
+    content: "";
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: $opacity-color;
+    border: 1px solid $main-color;
+    border-radius: 3px;
+    vertical-align: middle;
+    margin-left: -10px;
+    margin-right: 10px;
+  
+  }
+   input[type = "checkbox"]:checked + .check::before {
+    content: "";
+    color: $main-color;
+    text-align: center;
+    font-size: 16px;
+    background-color: $hover-color;
+    // background-image: url(../assets/images/checked.png);
+    font-weight: bold;
+    vertical-align: top;
+  }
+  .wrap-check-off {
+    position: fixed;
+    top: 0;
+   left: 0;
+  width: 100%;
+   height: 100%;
+   background-color: black;
+  opacity: 0.5;
+  }

src/style/normalize.css

@@ -173,6 +173,10 @@ textarea {
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
+ input,
+ select {
+  font-size: 0.8em;
+ }
 
 button,
 input { /* 1 */

src/style/select.scss

@@ -7,7 +7,7 @@ $opacity-color: rgba(17,17,17,0.8);
 .select {
 	width: 90%;
 	display: flex;
-	margin: 40px auto 15px;
+	margin: 0px auto 15px;
 	flex-direction: column;
 	position: relative;
 	font-family: 'Lato', sans-serif;
@@ -26,8 +26,11 @@ $opacity-color: rgba(17,17,17,0.8);
 		margin: 0;
 		width: 100%;
 		background-color: $main-color;
-		position: absolute;
-		left: 0;
+		max-height: 50vh;
+		// overflow-y: auto;
+		// overflow: hidden;
+		// position: absolute;
+		// left: 0;
 		top: 100%;
 		z-index: 10;
 	}
@@ -44,6 +47,7 @@ $opacity-color: rgba(17,17,17,0.8);
 	&__item {
 		display: flex;
 		padding: 0.2rem 0.5rem;
+		text-align: left;
 		font-weight: 400;
 		cursor: pointer;
 		&:hover {
@@ -64,4 +68,24 @@ $opacity-color: rgba(17,17,17,0.8);
 			outline: none;
 		}
 	}
-}
+}
+
+
+// ____SCROLL-BAR_____
+.scrollbar {
+	max-height: 50vh;
+	overflow-y: scroll;
+}
+#style::-webkit-scrollbar {
+	width: 12px;
+}
+#style::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+	background-color:  $hover-color;
+}
+
+#style::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 10px;
+}

src/style/style.css

@@ -118,6 +118,7 @@
   content: "\ea14";
   color:  var(--hover-color);
   font-size: 1.6em;
+  margin-left: 20px;
 }
 .icon-location:before {
   content: "\e947";
@@ -126,4 +127,8 @@
 .icon-phone:before {
   content: "\e942";
   font-size: 35px;
+}
+
+.icon-done:before {
+  content: "\e900";
 }

src/utils/formFields.js

@@ -172,9 +172,10 @@ export const postNewDoctorForm =[
 	},
 	{
 		id:3,
-		type:'text',
+		type:'file',
 		value:"",
 		name:'photo',
+		className: "btn link",
 		placeholder:'Добавьте фотографию',
 		required:true
 	},
@@ -231,6 +232,79 @@ export const postNewServiceForm =[
 	}
 ];
 
+export const adminChangeUserForm =[
+	{
+		id:1,
+		type:'text',
+		value:"",
+		name:'firstName',
+		placeholder:'Введите Имя',
+		required:true
+	},
+	{
+		id:2,
+		type:'text',
+		value:"",
+		name:'lastName',
+		placeholder:'Введите Фамилию',
+		required:true
+	},
+	{
+		id:3,
+		type:'email',
+		value:"",
+		name:'email',
+		placeholder:'Введите E-mail',
+		readOnly:true,
+		required:true
+	},
+	{
+		id:4,
+		type:'phone',
+		value:"",
+		name:'phone',
+		placeholder:'Введите номер телефона',
+		required:true
+	},
+	{
+		id:5,
+		type:'text',
+		value:"",
+		name:'_id',
+		readOnly:true,
+		required:true
+	},
+	{
+		id:6,
+		type:'radio',
+		value:true,
+		name:'role',
+		required:true
+	},
+	{
+		id:7,
+		type:'radio',
+		value:false,
+		name:'role',
+		required:true
+	},
+	{
+		id:8,
+		type:'radio',
+		value:true,
+		name:'doctor',
+		required:true
+	},
+	{
+		id:9,
+		type:'radio',
+		value:false,
+		name:'doctor',
+		required:true
+	}
+
+];
+
 export const route = [
 	{
 		id: 1,