changed select, admin-panel, appoitmet, main-page, page-not-found

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,6 +28,8 @@ export class App extends React.Component {
 
        if(localStorage.getItem('userId')) this.props.getUser()
 
+       window.addEventListener = ( "hashchange", makeHashchange) 
+
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
         //     credentials: "include",
@@ -39,7 +44,9 @@ export class App extends React.Component {
         //     .then (res => res.json ())
         //     .then (res => console.log (res))
     }
-
+    componentDidUnMount () {
+        window.removeEventListener  ( "hashchange", makeHashchange)  
+    }
     render() {
         return (
               <Loader flag={this.props.app.isFetching}>

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'
@@ -107,8 +108,9 @@ export default class ChangeServicesDoctors extends React.Component {
                 </div>
                 <div className="admin-item">
                     <CustomSelect
-                        // label="Выбрать"
+                        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/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/hooks/select.js

@@ -5,7 +5,7 @@ import React from "react";
 
 
 
-export const CustomSelect = ({ label, options , emptyLine = true, 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 = true, searchInput =
 		toggleShow(false);
 	};
 
-	const clickOnEptyLine = () => {
+	const clickOnEptyLine = (text) => {
+		if (typeof clickOptionEvent === "function" ) clickOptionEvent(text);
 		toggleValue("");
 		toggleInputValue("");
 

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;
@@ -890,7 +899,7 @@ h2 {
 		align-content: center;
 	}
 	.select .icon-angle-down:before {
-		top: 35%;
+		top: 55%;
 	  }
 	.form-doctors {
 		display: flex;
@@ -1004,15 +1013,67 @@ h2 {
 			width: 100%;
 		}
 	}
-	.service-btn {
-		background-color: $hover-color;
-		width: 100%;
-		margin: 5px;
+
+// ________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;
+		  }
+	}
+}
+
+
 
 	// _______________ACCORDION___________
 	#accordion {	
 		.service-type {
+			margin: 25px 0 5px;
 			&:target {
 				padding-top: 110px;				
 			}

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;
@@ -27,16 +27,11 @@ $opacity-color: rgba(17,17,17,0.8);
 		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/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 "../components/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
 	},
@@ -237,7 +247,8 @@ export const adminChangeUserForm =[
 		id:1,
 		type:'text',
 		value:"",
-		name:'firstName',
+		inputName:'firstName',
+		pageValue : "Имя" ,
 		placeholder:'Введите Имя',
 		required:true
 	},
@@ -245,7 +256,8 @@ export const adminChangeUserForm =[
 		id:2,
 		type:'text',
 		value:"",
-		name:'lastName',
+		inputName:'lastName',
+		pageValue : "Фамилия" ,
 		placeholder:'Введите Фамилию',
 		required:true
 	},
@@ -253,7 +265,8 @@ export const adminChangeUserForm =[
 		id:3,
 		type:'email',
 		value:"",
-		name:'email',
+		inputName:'email',
+		pageValue : "E-mail" ,
 		placeholder:'Введите E-mail',
 		readOnly:true,
 		required:true
@@ -262,47 +275,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 = [