package-lock.json

@@ -1948,6 +1948,58 @@
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
       "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
     },
+    "ast-transform": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/ast-transform/-/ast-transform-0.0.0.tgz",
+      "integrity": "sha1-dJRAWIh9goPhidlUYAlHvJj+AGI=",
+      "requires": {
+        "escodegen": "~1.2.0",
+        "esprima": "~1.0.4",
+        "through": "~2.3.4"
+      },
+      "dependencies": {
+        "escodegen": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.2.0.tgz",
+          "integrity": "sha1-Cd55Z3kcyVi3+Jot220jRRrzJ+E=",
+          "requires": {
+            "esprima": "~1.0.4",
+            "estraverse": "~1.5.0",
+            "esutils": "~1.0.0",
+            "source-map": "~0.1.30"
+          }
+        },
+        "esprima": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
+          "integrity": "sha1-n1V+CPw7TSbs6d00+Pv0drYlha0="
+        },
+        "estraverse": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz",
+          "integrity": "sha1-hno+jlip+EYYr7bC3bzZFrfLr3E="
+        },
+        "esutils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz",
+          "integrity": "sha1-gVHTWOIMisx/t0XnRywAJf5JZXA="
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "optional": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "ast-types": {
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.7.8.tgz",
+      "integrity": "sha1-kC0uDWDQcb3NRtwRXhgJ7RHBOKk="
+    },
     "ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -2665,6 +2717,16 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "browserify-optional": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-optional/-/browserify-optional-1.0.1.tgz",
+      "integrity": "sha1-HhNyLP3g2F8SFnbCpyztUzoBiGk=",
+      "requires": {
+        "ast-transform": "0.0.0",
+        "ast-types": "^0.7.0",
+        "browser-resolve": "^1.8.1"
+      }
+    },
     "browserify-rsa": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
@@ -2932,8 +2994,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -3298,8 +3359,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3347,7 +3407,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -3386,13 +3445,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
@@ -3451,6 +3508,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -5024,6 +5086,11 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
+    "eve": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/eve/-/eve-0.5.4.tgz",
+      "integrity": "sha1-Z9CAuXJSkdfjieNMJoYN2X8d66o="
+    },
     "eventemitter3": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
@@ -6986,8 +7053,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -7352,8 +7418,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7401,7 +7466,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7440,13 +7504,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         }
@@ -10613,6 +10675,18 @@
         "whatwg-fetch": "3.0.0"
       }
     },
+    "react-burger-menu": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/react-burger-menu/-/react-burger-menu-2.6.11.tgz",
+      "integrity": "sha512-Nz0CpcQBE4kgxI/xWviyHGQM8PS4GYlsxd8oUGuOabEweYzVJeFhGbHQlM2a/1SMeWM90S80vEvpI22/wFFifA==",
+      "requires": {
+        "browserify-optional": "^1.0.0",
+        "classnames": "^2.2.6",
+        "eve": "~0.5.1",
+        "prop-types": "^15.7.2",
+        "snapsvg-cjs": "0.0.6"
+      }
+    },
     "react-dev-utils": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.0.1.tgz",
@@ -12035,6 +12109,22 @@
         "kind-of": "^3.2.0"
       }
     },
+    "snapsvg": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/snapsvg/-/snapsvg-0.5.1.tgz",
+      "integrity": "sha1-DK9Sx5GJopB0b8RGzF6GP2vd3+M=",
+      "requires": {
+        "eve": "~0.5.1"
+      }
+    },
+    "snapsvg-cjs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz",
+      "integrity": "sha1-Oy9WryVz09Nkw+1b+IhXRfTS3eE=",
+      "requires": {
+        "snapsvg": "0.5.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.19",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",

package.json

@@ -10,6 +10,7 @@
     "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-accessible-accordion": "^3.0.0",
+    "react-burger-menu": "^2.6.11",
     "react-dom": "^16.8.6",
     "react-escape-outside": "^0.1.1",
     "react-full-page": "^0.1.7",

src/App.js

@@ -14,6 +14,9 @@ import {route} from './utils/formFields'
 import { PrivateRoute } from "./privateRouter";
 
 
+function  makeHashchange (event) {
+    window.scroll(0, 0)
+} 
 
 export class App extends React.Component {
 
@@ -25,19 +28,21 @@ export class App extends React.Component {
 
        if(localStorage.getItem('userId')) this.props.getUser()
 
-        fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
-            method : "POST",
-            credentials: "include",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify ({
-                email: "test@test.com",
-                password: "qwerty"
-            })
-        })
-            .then (res => res.json ())
-            .then (res => console.log (res))
+       window.addEventListener = ( "hashchange", makeHashchange) 
+
+        // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
+        //     method : "POST",
+        //     credentials: "include",
+        //     headers: {
+        //         "Content-Type": "application/json"
+        //     },
+        //     body: JSON.stringify ({
+        //         email: "test@test.com",
+        //         password: "qwerty"
+        //     })
+        // })
+        //     .then (res => res.json ())
+        //     .then (res => console.log (res))
     }
 
     render() {

src/actions/actions.js

@@ -57,7 +57,7 @@ const getDoctorsRequestFail = payload => ({
 });
 
 export const getDoctors = () => dispatch => {
-    // console.log('get')
+    console.log('get')
     dispatch(getDoctorsRequest());
     return fetch(`${URL}doctors`,{
         credentials:"include"

src/actions/shedule.js

@@ -2,6 +2,8 @@ import * as types from '../actionsTypes/actionsTypes'
 import {getDoctors} from "./actions";
 
 
+const URL = "https://api-clinics.herokuapp.com/api/v1/";
+
 export const setSheduleDoctor = payload => ({
     type: types.CHANGE_SHEDULE_DOCTOR,
     payload

src/components/Admin/ChangeServices-Doctors.js

@@ -70,6 +70,7 @@ export default class ChangeServicesDoctors extends React.Component {
             changeSpecialityArray,
             specialityArray
         } = this.props;
+        console.log ( itemId)
         return (
             <div className="change-services-doctors">
                 {this.state.flag &&
@@ -97,7 +98,7 @@ export default class ChangeServicesDoctors extends React.Component {
                             })
                         }
                         {categories &&
-                        <button className=" btn servise-btn" onClick={this.changeFlag}>Выбрать сервисы</button>}
+                        <button className=" btn service-btn" onClick={this.changeFlag}>Выбрать сервисы</button>}
                         <input
                             className="btn link"
                             type='submit'
@@ -109,6 +110,7 @@ export default class ChangeServicesDoctors extends React.Component {
                     <CustomSelect
                         label="Выбрать"
                         options={data}
+                        emptyLine = {true}
                         clickOptionEvent={this.changeId}
                     />
                     {itemId &&

src/components/Admin/ChangeUser.js

@@ -26,11 +26,11 @@ export default class ChangeUser extends React.Component {
     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.changeUserForm.map(el => {
+            obj[el.inputName] = el.type === 'radio' ? el.checked ? el.value : !el.value : el.value
         });
-        this.props.putUser({data:obj,path:this.props.user._id})
+        // this.props.putUser
+        console.log({data:obj,path:this.props.user._id})
     };
 
     changeConfirm = (action, text) => {
@@ -51,55 +51,52 @@ export default class ChangeUser extends React.Component {
             error
         } = this.props;
         return (
-            <div
-                style={{
-                    display: 'flex'
-                }}
-            >
-                <div>
-                    <input type='text' name='find_user' onKeyDown={this.enterPressed} onChange={this.changeUserInput}/>
+            <div className = "change-user-container" >
+                <div className = "input-box">
+                    <input type='text' name='find_user' className = " appointment admin-form"  onKeyDown={this.enterPressed} onChange={this.changeUserInput}/>
                     {findUserInput &&
-                    <button id='enter' onClick={this.findUser}>Find User</button>
+                    <button className = "btn service-btn" id='enter' onClick={this.findUser}>Найти пользователя</button>
                     }
                     {user &&
-                    <div>
-                        <form
-                            style={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                                width: '400px'
-                            }}
-                        >
+                    <div className = "change-user-form">
+                        <form className = "change-user-radio">
                             {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/>}
+                            <div className="input-wrap" key={el.id}>
+                                
                                     <Input
                                         el={el}
                                         changeInputValues={changeInputValueUserForm}
                                         className={el.className}
+                                        id={el.id}
+                                        name = {el.inputName}
+                                        value={el.value}
                                     />
-                                </label>
+                                    <label htmlFor = {el.id} >
+                                        {el.pageValue}
+                                    </label>
+                            </div>
+
+                                // <label htmlFor={index}>{Object.keys(el)}</label>
                             )}
                         </form>
-                        <button onClick={this.changeUser}>Change</button>
-                        <button onClick={this.changeConfirm}>DELETE</button>
+                        <button className = "btn service-btn" onClick={this.changeUser}>Изменить</button>
+                        <button className = "btn service-btn" onClick={this.changeConfirm}>Удалить</button>
                     </div>
                     }
 
                     {error &&
                     <div>
-                        <p>User not found</p>
+                        <p>Пользователь не найден</p>
                     </div>
                     }
                 </div>
                 <div>
-                    <p>User List will be here</p>
+                    <p>Здесь будет список пользователей  </p>
                 </div>
                 {
                     this.state.showConfirm &&
                     <ConfirmButton yes={this.deleteUser} no={this.changeConfirm}
-                                   text={'Are you sure you want to Delete User?'}
+                                   text={'Вы уверены, что хотите удалить пользователя?'}
                     />
                 }
             </div>

src/components/Admin/CheckBoxWindow.js

@@ -8,6 +8,7 @@ class CheckBoxWindow extends React.Component {
 
     render() {
         const {categories, changeFlag,specialityArray} = this.props;
+        console.log(this.props)
         return (
             <>
                 <div className = "check-container">

src/components/Admin/Orders.js

@@ -26,51 +26,48 @@ class Orders extends Component {
         const{findOrderInput,ordersArray,searching,orders} = this.props;
         console.log(this.props);
         return (
-            <div style={{
-                display:'flex',
-            }}>
-                <div style={{
-                    width:'50%'
-                }}>
-                    <input type="text" onKeyDown={this.enterPressed} onChange={this.changeInputFindOrder}/>
+            <div className = "orders-container">
+                <div className = "orders-item find-order">
+                    <input className = " appointment admin-form" type="text" onKeyDown={this.enterPressed} onChange={this.changeInputFindOrder}/>
                     {findOrderInput &&
-                    <button id='enter' onClick={this.findOrders}>Find User</button>
+                    <button className = "btn service-btn"  id='enter' onClick={this.findOrders}>Найти</button>
                     }
-                    {searching && ordersArray.length === 0 && <p>Order not found</p>}
+                    {searching && ordersArray.length === 0 && <p>Заказ не найден</p>}
                     {ordersArray.map(el => (
-                        <div key={el._id} style={{
-                            display:'flex',
-
-                        }}>
-                            <Link to={`/order/${el._id}`}>{el.orderNumber}</Link>
-                            <div>
+                        <div className = "order"  key={el._id}>
+                            <div className = "order-date">
+                                <Link to={`/order/${el._id}`} className = "order-info">{el.orderNumber}</Link>
                                 <p>{el.date.split('T')[0]}</p>
                                 <p>{el.time}</p>
                             </div>
-                            <Link to={`/user/${el.user._id}`}>{el.user.email}</Link>
-                            <Link to={`/doctors/${el.doctor._id}`}>{el.doctor.name}</Link>
-                            <Link to={`/services/${el.spec._id}`}>{el.spec.name}</Link>
+                            <div className="name-info">
+                                 <div className="info-serv-doc">
+                                    <Link to={`/user/${el.user._id}`} className = "order-info">{`${el.user.firstName} ${el.user.lastName}`}</Link>
+                                    <Link to={`/doctors/${el.doctor._id}`} className = "order-info">{el.doctor.name}</Link>
+                                    <Link to={`/services/${el.spec._id}`} className = "order-info">{el.spec.name}</Link>
+                                </div>                                
+                            </div>
                         </div>
                     ))}
                 </div>
-                <div style={{
+                <div className = "orders-item" style={{
                     display:'flex',
                     flexDirection:'column',
-                    width:'50%'
                 }}>
                     {orders.map(el => (
-                        <div key={el._id} style={{
-                            display:'flex',
-
-                        }}>
-                            <Link to={`/order/${el._id}`}>{el.orderNumber}</Link>
-                            <div>
+                        <div  className = "order"  key={el._id} >
+                            <div className = "order-date">
+                                <Link to={`/order/${el._id}`} className = "order-info">{el.orderNumber}</Link>
                                 <p>{el.date.split('T')[0]}</p>
                                 <p>{el.time}</p>
                             </div>
-                            <Link to={`/user/${el.user._id}`}>{el.user.email}</Link>
-                            <Link to={`/doctors/${el.doctor._id}`}>{el.doctor.name}</Link>
-                            <Link to={`/services/${el.spec._id}`}>{el.spec.name}</Link>
+                            <div className="name-info">
+                                <div className="info-serv-doc">
+                                    <Link to={`/user/${el.user._id}`} className = "order-info">{`${el.user.firstName} ${el.user.lastName}`}</Link>
+                                    <Link to={`/doctors/${el.doctor._id}`} className = "order-info">{el.doctor.name}</Link>
+                                    <Link to={`/services/${el.spec._id}`} className = "order-info">{el.spec.name}</Link>
+                                </div>
+                            </div>
                         </div>
                     ))}
                 </div>

src/components/ConfirmButton.js

@@ -5,19 +5,13 @@ class ConfirmButton extends Component {
         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  className = "confirm-button" >
+                    <h3 >{text}</h3>
+                    <div className="btns">
+                        <button className = "btn confirm yes" onClick={() => yes()}>Да</button>
+                        <button className = "btn confirm no" onClick={() => no()}>Нет</button>                        
+                    </div>
+
                 </div>
                 <div className = "wrap-check-off"  onClick={no}/>
             </>

src/components/appointment/Appointment.js

@@ -86,6 +86,7 @@ export class Appoint extends React.Component {
                                         <p className="highlights">{doctor.profession}</p>
                                         <CustomSelect
                                             label="Выбор услуги"
+                                            emptyLine = {false}
                                             options={doctor.speciality}
                                             clickOptionEvent={this.setSpec}
                                         />

src/components/header/navigation.js

@@ -5,6 +5,9 @@ import { connect } from "react-redux";
 import { userLogout} from "../../actions/auth"
 
 class Header extends Component {
+	state = {
+		
+	}
 
 	logoutHandler  = (e) => {
 		localStorage.removeItem('userId')

src/components/hooks/select.js

@@ -5,7 +5,7 @@ import React from "react";
 
 
 
-export const CustomSelect = ({ label, options , emptyLine = false, searchInput = true,  reset, clickOptionEvent = () =>{} }) => {
+export const CustomSelect = ({ label, options , emptyLine, searchInput = true,  reset, clickOptionEvent = () =>{} }) => {
 
 	const [copyOption, setCopyOption] = React.useState([]);
 	const [show, toggleShow] = React.useState(false);
@@ -49,7 +49,8 @@ export const CustomSelect = ({ label, options , emptyLine = false, searchInput =
 		toggleShow(false);
 	};
 
-	const clickOnEptyLine = () => {
+	const clickOnEptyLine = (text) => {
+		if (typeof clickOptionEvent === "function" ) clickOptionEvent(text);
 		toggleValue("");
 		toggleInputValue("");
 
@@ -78,7 +79,7 @@ export const CustomSelect = ({ label, options , emptyLine = false, searchInput =
 					{label}
 				</label>
 			)}
-			<div className="select__value-box icon-angle-down" onClick={() => toggleShow(true)}>
+			<div className="select__value-box" onClick={() => toggleShow(true)}>
 				{searchInput ? null : <span>{value} &nbsp;</span>}
 				<input
 					value={inputValue}
@@ -87,7 +88,7 @@ export const CustomSelect = ({ label, options , emptyLine = false, searchInput =
 					readOnly="readonly"
 					onChange={chahgeValueEvent}
 					id="select"
-					className="select__input"
+					className="select__input  icon-angle-down"
 				/>
 				<span className="icon-angle-down"></span>
 			</div>
@@ -98,7 +99,7 @@ export const CustomSelect = ({ label, options , emptyLine = false, searchInput =
 						
 						{emptyLine && (
 							<li className="select__item" onClick={clickOnEptyLine}>
-								&nbsp;
+								Выбрать 
 							</li>
 						)}
 						{copyOption.map(el => (

src/components/services/Services.js

@@ -21,7 +21,6 @@ export class Services extends React.Component {
                                     {el.services.map(item => (
                                         <div className="servise-name" key={item._id}>
                                             <p>{item.name}</p>
-                                            {/* <p>Длительность: {item.duration} ч.</p>  */}
                                             <p>Стоимость: {item.price} грн.</p>
                                             <div>
                                                 <Link to={`/appointment/${item._id}`}

src/components/userInfo.js

@@ -1,40 +1,37 @@
-import React from 'react';
-import Input from './Admin/Input'
-
+import React from "react";
+import Input from "./Admin/Input";
 
 class UserInfo extends React.Component {
-
-    changeUser = (e) => {
-        e.preventDefault();
-        const obj = {};
-        this.props.changeUserUserForm.map(el => {
-           return  obj[el.name] =  el.value
-        });
-        // console.log(obj)
-        // console.log(this.props.user._id)
-        this.props.putUser({data:obj,path:this.props.user._id})
-    };
-    render() { 
-        const { changeUserUserForm, changeInputValueUserUserForm} = this.props
-        console.log('user',this.props.user)
-        console.log('form', changeUserUserForm)
-        return ( 
-            <div>
-                <div className="admin-item">
-                    <form className="form-doctors" >
-               {changeUserUserForm.map(el =>
-                <Input
+  changeUser = e => {
+    e.preventDefault();
+    const obj = {};
+    this.props.changeUserUserForm.map(el => {
+      return (obj[el.name] = el.value);
+    });
+    this.props.putUser({ data: obj, path: this.props.user._id });
+  };
+  render() {
+    const { changeUserUserForm, changeInputValueUserUserForm } = this.props;
+    return (
+      <div className="user-info">
+        <div className="admin-item user-item">
+          <form className="form-doctors user-form">
+            {changeUserUserForm.map(el => (
+              <Input
                 key={el.id}
                 el={el}
                 changeInputValues={changeInputValueUserUserForm}
                 className={el.className}
-            /> )}
-                    </form>
-                    <button onClick={this.changeUser} className="btn link admin">Изменить</button>
-                </div>
-            </div>
-        );
-    }
+              />
+            ))}
+          </form>
+          <button onClick={this.changeUser} className="btn link admin user-btn">
+            Изменить
+          </button>
+        </div>
+      </div>
+    );
+  }
 }
- 
-export default UserInfo;
+
+export default UserInfo;

src/components/userOrders.js

@@ -1,18 +1,25 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 class UserOrders extends Component {
-    render() { 
-        const { data } = this.props
-        console.log(data)
-        return ( <div>
-            {data.map(el =>  
-                     <div key={el._id}>
-                        <p>Номер заказа: {el.orderNumber}</p>
-                        <p>Дата заказа: {el.date.split('T')[0]}</p>
-                        <p>Время заказа: {el.time}</p>
-                        </div>)}
-        </div> );
-    }
+  render() {
+    const { data } = this.props;
+    console.log(data);
+    return (
+      <div className="user-orders">
+        {data.map(el => (
+          //   console.log(el)
+          <div key={el._id} className="user-orders__content">
+            <h4 className="user-orders__heading">Процедура: {el.spec.name}</h4>
+            <p className="user-orders__paragraph">
+              Дата записи: {el.date.split("T")[0]}
+            </p>
+            <p className="user-orders__paragraph"> Время записи: {el.time}</p>
+            <p className="user-orders__paragraph">Доктор: {el.doctor.name}</p>
+          </div>
+        ))}
+      </div>
+    );
+  }
 }
- 
-export default UserOrders;
+
+export default UserOrders;

src/containers/user.js

@@ -1,72 +1,89 @@
-import React, { Component } from 'react';
-import {connect} from "react-redux";
-import {Link} from "react-router-dom";
-import {Switch, Route} from "react-router-dom";
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { Switch, Route } from "react-router-dom";
 
-import UserInfo from '../components/userInfo'
-import UserOrders from '../components/userOrders'
+import UserInfo from "../components/userInfo";
+import UserOrders from "../components/userOrders";
 
-import { getUserOrders,getOrders } from "../actions/orders"
-import { changeInputValueUserUserForm } from '../actions/auth'
-import {putUser} from '../actions/user'
+import { getUserOrders, getOrders } from "../actions/orders";
+import { changeInputValueUserUserForm } from "../actions/auth";
+import { putUser } from "../actions/user";
 
 class UserContainer extends Component {
+  componentDidMount() {
+    this.props.getOrders({
+      doctors: this.props.doctors,
+      services: this.props.services,
+      users: this.props.users
+    });
+  }
+  // componentDidUpdate(){
+  //     if(this.props.orders.length > 0 &&)
+  //     // console.log('did update', this.props.orders)
+  //      this.props.getUserOrders(this.props.currentUser)
+  // }
+  componentDidUpdate(prevProps) {
+    if (this.props.orders.length > 0)
+      if (prevProps.orders !== this.props.orders)
+        this.props.getUserOrders(this.props.currentUser);
+  }
 
-    componentDidMount() {
-        this.props.getOrders({
-            doctors: this.props.doctors,
-            services: this.props.services,
-            users: this.props.users})
-    }
-    // componentDidUpdate(){
-    //     if(this.props.orders.length > 0 &&) 
-    //     // console.log('did update', this.props.orders)
-    //      this.props.getUserOrders(this.props.currentUser)
-    // }
-    componentDidUpdate(prevProps) {
-        if(this.props.orders.length > 0 ) 
-            if(prevProps.orders !==  this.props.orders)
-            this.props.getUserOrders(this.props.currentUser)
-    }
-
-    render() { 
-        console.log(this.props.userOrdersArray)
-        const { currentUser,changeUserUserForm, changeInputValueUserUserForm,putUser,userOrdersArray } = this.props
-        return (
-            <div className="main">
-                <div className="info-wrap">
-                <h2>Добро пожаловать в личный кабинет, {currentUser.firstName}!</h2>
-                 <div className="btn-box">
-                    <Link to='/user/orders' className = "btn link admin" >Мои заказы</Link>
-                    <Link to='/user/info' className = "btn link admin">Редактировать профиль</Link>
-                 </div>
-                 <Switch>
-                    <Route path='/user/orders'  render={() => <UserOrders
-                           data={ userOrdersArray}
-                        />} />
-                    <Route path='/user/info' render={() => <UserInfo
-                            user={currentUser}
-                            changeUserUserForm = {changeUserUserForm}
-                            changeInputValueUserUserForm={changeInputValueUserUserForm}
-                            putUser= {putUser}
-                        />} />
-                 </Switch>
-                </div>
-            </div>
-
-              );
-    }
+  render() {
+    const {
+      currentUser,
+      changeUserUserForm,
+      changeInputValueUserUserForm,
+      putUser,
+      userOrdersArray
+    } = this.props;
+    return (
+      <div className="main">
+        <div className="info-wrap">
+          <h2>Добро пожаловать в личный кабинет, {currentUser.firstName}!</h2>
+          <div className="btn-box">
+            <Link to="/user/orders" className="btn link admin user-link">
+              Мои заказы
+            </Link>
+            <Link to="/user/info" className="btn link admin  user-link">
+              Редактировать профиль
+            </Link>
+          </div>
+          <Switch>
+            <Route
+              path="/user/orders"
+              render={() => <UserOrders data={userOrdersArray} />}
+            />
+            <Route
+              path="/user/info"
+              render={() => (
+                <UserInfo
+                  user={currentUser}
+                  changeUserUserForm={changeUserUserForm}
+                  changeInputValueUserUserForm={changeInputValueUserUserForm}
+                  putUser={putUser}
+                />
+              )}
+            />
+          </Switch>
+        </div>
+      </div>
+    );
+  }
 }
 
 const mapStateToProps = state => {
-    return {
-        currentUser: state.auth.user,
-        changeUserUserForm: state.auth.changeUserForm,
-        orders: state.orders.orders,
-        users:state.user.users,
-        services: state.services.services,
-        doctors:state.app.doctors,
-        userOrdersArray: state.orders.userOrdersArray
-    }
-}
-export default connect(mapStateToProps, { changeInputValueUserUserForm, putUser, getOrders,getUserOrders })(UserContainer);
+  return {
+    currentUser: state.auth.user,
+    changeUserUserForm: state.auth.changeUserForm,
+    orders: state.orders.orders,
+    users: state.user.users,
+    services: state.services.services,
+    doctors: state.app.doctors,
+    userOrdersArray: state.orders.userOrdersArray
+  };
+};
+export default connect(
+  mapStateToProps,
+  { changeInputValueUserUserForm, putUser, getOrders, getUserOrders }
+)(UserContainer);

src/index.js

@@ -1,31 +1,29 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App'
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-import {BrowserRouter} from "react-router-dom";
-import {store} from './store'
-import {Provider} from "react-redux";
-
-
-import "./style/normalize.css"
-import './style/all.scss'
-import "./style/style.css"
-import "./style/select.scss"
-import "./style/calendar.scss"
-import "./style/auth.scss"
-import "./style/modal.scss"
-import "./style/checkBoxWindow.scss"
+import { BrowserRouter } from "react-router-dom";
+import { store } from "./store";
+import { Provider } from "react-redux";
 
+import "./style/normalize.css";
+import "./style/all.scss";
+import "./style/style.css";
+import "./style/select.scss";
+import "./style/calendar.scss";
+import "./style/auth.scss";
+import "./style/modal.scss";
+import "./style/checkBoxWindow.scss";
+import "./style/user.scss";
 
 ReactDOM.render(
-    <Provider store={store}>
-        <BrowserRouter>
-            <App/>
-        </BrowserRouter>
-    </Provider>,
-    document.getElementById('root')
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>,
+  document.getElementById("root")
 );
 
-
 serviceWorker.unregister();

src/reducers/reducers.js

@@ -61,14 +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 specArray=[];
             return {
                 ...state,
-                specialityArray:specArray,
+                specialityArray: doctor ? doctor.speciality.map(el => el =el._id) : [ ],
                 changeDoctorId: doctor ? doctor._id : null,
-                postNewDoctor:doctor ? state.postNewDoctor.map(el => Object.keys(doctor).find(item => item === el.name) ? {
+                
+                postNewDoctor:doctor ? state.postNewDoctor.map(el =>  Object.keys(doctor).find(item => item === el.name) ? {
                     ...el,
-                    value:doctor[el.name]
+                    value: el.type==="file" ? null : doctor[el.name]
                 } : el) : postNewDoctorForm
             };
         }

src/reducers/user.js

@@ -23,12 +23,13 @@ export const userReducer = (state = defaultState, action) => {
 
         case types.CHANGE_INPUT_VALUE_USER_FORM : {
             const data = action.payload.target;
+            console.log (data)
             return {
                 ...state,
-                changeUserForm: state.changeUserForm.map(el => el.name === data.name ? el.type === 'radio' ?
+                changeUserForm: state.changeUserForm.map(el => el.inputName === data.inputName ? el.type === 'radio' ?
                     {
                         ...el,
-                        checked: !el.checked
+                        checked: true
                     } :
                     {
                         ...el,
@@ -75,14 +76,15 @@ export const userReducer = (state = defaultState, action) => {
             return {
                 ...state,
                 user: data,
-                changeUserForm: state.changeUserForm.map(el => Object.keys(data).find(item => item === el.name) ? el.type === 'radio' ?
+                changeUserForm: state.changeUserForm.map(el => Object.keys(data).find(item =>
+                     item === el.inputName) ? el.type === 'radio' ?
                     {
                         ...el,
-                        checked: data[`${el.name}`] === el.value
+                        // checked: data[`${el.inputName}`] === el.value
                     } :
                     {
                     ...el,
-                    value: data[`${el.name}`]
+                    value: data[`${el.inputName}`]
                     } :
                     el
                 ),

src/style/all.scss

@@ -101,6 +101,11 @@ aside {
 
 }
 
+// _________page-not-found_____________
+.page-not-found {
+	text-align: center;
+	margin: 0 auto;
+}
 
 // _______header +  navigation______________
 .header,
@@ -150,6 +155,8 @@ aside {
 		}
 		&:last-child a {
 			color: $hover-color;
+			text-align: start;
+			vertical-align: top;
 			&:hover {
 				color: #4dea94;
 			}
@@ -268,7 +275,7 @@ aside {
 .more {
 	width: 100%;
 	display: block;
-	padding: 15px 2px;
+	padding: 10px 2px;
 	text-align: center;
 	@media (max-width: 1024px) {
 		font-size: 0.7em;
@@ -290,12 +297,12 @@ aside {
 }
 
 
-.servise-btn {
+.service-btn {
 	font-size: 0.7em;
 	margin: 0;
 	width: 100%;
 	line-height: 2em;
-	padding: 3px;
+	padding: 0.5rem;
 	min-height: 35px;
 	margin: 2px 0;
 	background-color: $main-color;
@@ -446,6 +453,7 @@ h2 {
 			border-radius: 5px;
 			line-height: 1.2em;
 			height: 100%;
+			width: 100%;
 		}
 		.photo {
 			overflow: hidden;
@@ -503,7 +511,7 @@ h2 {
 	}	
 }
 .info-wrap {
-	padding: 110px 10px 25px;
+	padding: 110px 20px 25px;
 	min-height: 100vh;
 	flex-direction: row;
 	 .info {
@@ -706,7 +714,7 @@ h2 {
 	border: 1px solid $hover-color;
 	border-radius: 3px;
 	padding: 0.5rem;
-	margin: 15px 0;
+	margin: 10px 0;
 	color: $opacity-color;
 	background-color: $header-color;
 	cursor: pointer;
@@ -803,8 +811,9 @@ h2 {
 		justify-content: center;
 	}
 	.admin {
-		width: 20%;	
+		width: 15%;	
 		margin: 3px;
+		font-size: 0.7em;
 		@media (max-width: 768px) {
 			width: 80%;	
 			margin: 10px 5px;
@@ -889,6 +898,9 @@ h2 {
 	@media (max-width: 768px) {
 		align-content: center;
 	}
+	.select .icon-angle-down:before {
+		top: 55%;
+	  }
 	.form-doctors {
 		display: flex;
 		flex-direction: column;
@@ -1001,20 +1013,157 @@ h2 {
 			width: 100%;
 		}
 	}
-	.service-btn {
-		background-color: $hover-color;
-		width: 100%;
+
+// ________change-user-container_________
+.change-user-container {
+	display: flex;
+	justify-content: space-evenly;
+	align-items: flex-start;
+	padding: 5px 10px;
+	.input-box {
+		flex-basis: 50%;
+	}
+	.change-user-form {
+		//  margin-top: 30px;
+		 form {
+			 display: flex;
+			flex-direction: column;
+		 }
+	}
+	.change-user-radio {
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		margin: 55px 0 10px;
+		@media (max-width: 1024px) {
+			margin-top: 10px;
+			display: flex;
+		}
+
+		input[type = "radio"] {
+			display: none;
+		  }
+		  .radio {
+			padding-left: 20px;
+		  }
+		  input[type = "radio"] +label::before {
+			content: "";
+			display: inline-block;
+			width: 20px;
+			height: 20px;
+			background-color: $opacity-color;
+			border: 1px solid $main-color;
+			border-radius: 50%;
+			vertical-align: middle;
+			margin: 10px 10px 10px -10px;
+		  }
+		   input[type = "radio"]:checked + label::before {
+			content: "";
+			color: $main-color;
+			text-align: center;
+			font-size: 16px;
+			background-color: $hover-color;
+			font-weight: bold;
+		  }
+	}
+}
+
+// __________orders-container_____________
+.orders-container {
+	display: flex;
+	justify-content: space-between;
+	.orders-item {
+		width: 55%;
+		margin: 15px;
+	}
+	.find-order {
+		max-width: 30%;	
+	}
+	.order {
+		display: flex;
+		flex-direction: column;
+		padding: 10px 25px;
+		border: 1px solid $main-color;
+		border-radius:  3px;
+		margin: 10px 0;
+	}
+	.order-info {
+		text-decoration: none;
+		text-align-last: left;
+		color: $header-color;
+		padding: 5px;
+	}
+	.order-date {
+		display: flex;
+		justify-content: space-between;
+		margin: 10px 0;
+		color: $hover-color;
+		a {
+			color: $hover-color;
+			margin: 0 10px;
+		}
+		p {
+			margin: 0 10px;
+			padding: 5px;
+		}
+	}
+	.name-info {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.info-serv-doc {
+			display: flex;
+			width: 100%;
+			justify-content: space-between;
+			a {
+				display: flex;
+				margin: 0 10px;
+			}
+		}
+	}
+
+}
+
+// __________confirm-button_________
+.confirm-button {
+	position: fixed;
+	left: 0;
+	right: 0;
+	width: 300px;
+	height: 150px;
+	margin: auto;
+	padding: 10px;
+	background-color: $main-color;
+	z-index: 99;
+	h3 {
+		margin: 10px;
+	}
+	.btns{
+		display: flex;
+		justify-content: space-evenly;
+	}
+	.confirm {
+		width: 30%;
+		font-size: 0.7em;
+		min-height: 25px;
 		margin: 5px;
 	}
+	.no {
+		background-color: rgb(255, 151, 116);
+	}
+}
+
+
 
 	// _______________ACCORDION___________
 	#accordion {	
 		.service-type {
+			margin: 25px 0 5px;
 			&:target {
 				padding-top: 110px;				
 			}
 		
-			.servise-name {
+		.servise-name {
 				display: none;
 			}
 			&:target .servise-name {

src/style/select.scss

@@ -5,7 +5,7 @@ $hover-color: #b1e8ca;
 $opacity-color: rgba(17,17,17,0.8);
 
 .select {
-	width: 90%;
+	width: 100%;
 	display: flex;
 	margin: 0px auto 15px;
 	flex-direction: column;
@@ -21,22 +21,18 @@ $opacity-color: rgba(17,17,17,0.8);
 	}
 
 	&__list {
+		position: absolute;
 		list-style: none;
 		padding: 0;
 		margin: 0;
 		width: 100%;
 		background-color: $main-color;
 		max-height: 50vh;
-		// overflow-y: auto;
-		// overflow: hidden;
-		// position: absolute;
-		// left: 0;
 		top: 100%;
 		z-index: 10;
 	}
 
 	&__value-box {
-        // position: relative;
 		border: 1px solid $main-color;
 		background-color: $header-color;
 		color: $opacity-color;

src/style/style.css

@@ -65,6 +65,7 @@
   right: 15px;
   top: 55%;
 }
+
 .icon-lens:before {
   content: "\e901";
   color:  var(--opacity-color);

src/style/user.scss

@@ -0,0 +1,51 @@
+.user-link {
+  width: 25% !important;
+  @media (max-width: 768px) {
+    width: 80% !important;
+    margin: 10px 5px;
+  }
+}
+
+.user-info {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 50px;
+  align-content: stretch;
+  align-items: flex-start;
+}
+
+.user-item {
+  width: 60%;
+}
+.user-form {
+  width: 100%;
+}
+.user-btn {
+  cursor: pointer;
+}
+
+.user-orders {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 20px;
+  &__content {
+    color: #789084;
+    box-shadow: 0 1.5rem 4rem rgba(17, 17, 17, 1.5);
+    border-radius: 10px;
+    background-color: rgba(17, 17, 17, 0.5);
+  }
+
+  &__heading {
+    // margin: 2px;
+    text-align: center;
+    border-bottom: 1px solid rgba(17, 17, 17, 0.8);
+  }
+  &__paragraph {
+    text-align: center;
+  }
+  @media (max-width: 769px) {
+    display: block;
+  }
+}

src/utils/formFields.js

@@ -9,7 +9,17 @@ import Admin from "../components/Admin/Admin";
 import Appointment from "../components/appointment/Appointment";
 import Auth from "../containers/auth";
 import User from "../containers/user";
-const PAGENOTFOUND = () => <div>PAGE 404 NOT FOUND</div>;
+
+
+const PAGENOTFOUND = () => 
+	<div className="main">
+		<div className="info-wrap">
+			<div className="page-not-found">
+				<h1>PAGE 404 NOT FOUND</h1>
+				<img src="./images/logo.png" alt=""/>			
+			</div>
+		</div>
+	</div>;
 
 
 
@@ -172,10 +182,10 @@ export const postNewDoctorForm =[
 	},
 	{
 		id:3,
-		type:'file',
+		type:'text',
 		value:"",
 		name:'photo',
-		className: "btn link",
+		className: "btn service-btn",
 		placeholder:'Добавьте фотографию',
 		required:true
 	},
@@ -290,7 +300,8 @@ export const adminChangeUserForm =[
 		id:1,
 		type:'text',
 		value:"",
-		name:'firstName',
+		inputName:'firstName',
+		pageValue : "Имя" ,
 		placeholder:'Введите Имя',
 		required:true
 	},
@@ -298,7 +309,8 @@ export const adminChangeUserForm =[
 		id:2,
 		type:'text',
 		value:"",
-		name:'lastName',
+		inputName:'lastName',
+		pageValue : "Фамилия" ,
 		placeholder:'Введите Фамилию',
 		required:true
 	},
@@ -306,7 +318,8 @@ export const adminChangeUserForm =[
 		id:3,
 		type:'email',
 		value:"",
-		name:'email',
+		inputName:'email',
+		pageValue : "E-mail" ,
 		placeholder:'Введите E-mail',
 		readOnly:true,
 		required:true
@@ -315,47 +328,49 @@ export const adminChangeUserForm =[
 		id:4,
 		type:'phone',
 		value:"",
-		name:'phone',
+		inputName:'phone',
+		pageValue : "Номер телефона" ,
 		placeholder:'Введите номер телефона',
 		required:true
 	},
-	{
-		id:5,
-		type:'text',
-		value:"",
-		name:'_id',
-		readOnly:true,
-		required:true
-	},
+	// {
+	// 	id:5,
+	// 	type:'text',
+	// 	value:"",
+	// 	name:'_id',
+	// 	readOnly:true,
+	// 	required:true
+	// },
 	{
 		id:6,
 		type:'radio',
-		value:true,
-		name:'role',
-		required:true
+		value: 'role',
+		pageValue : "Админ",
+		name: 'access',
+		inputName:'role',
+		required:true,
+		className:"radio"
 	},
 	{
 		id:7,
 		type:'radio',
-		value:false,
-		name:'role',
-		required:true
+		value: 'doctor',
+		inputName:  'doctor',
+		pageValue : "Доктор",
+		name:'access',
+		required:true,
+		className:"radio"
 	},
 	{
 		id:8,
 		type:'radio',
-		value:true,
-		name:'doctor',
-		required:true
+		value: 'user',
+		inputName:  'user',
+		pageValue : "Пользователь",
+		name:'access',
+		required:true,
+		className:"radio"
 	},
-	{
-		id:9,
-		type:'radio',
-		value:false,
-		name:'doctor',
-		required:true
-	}
-
 ];
 
 export const route = [