testing checkbox field for admin-doctors

src/components/Admin/ChangeServices-Doctors.js

@@ -1,11 +1,25 @@
 import React from 'react';
 import Input from './Input'
+import Reviews from "../Reviews";
 
 export default class ChangeServicesDoctors extends React.Component {
+    state = {
+        flag: false,
+    };
+
+    componentDidUpdate(prevProps) {
+        if (this.props.data !== prevProps.data) this.setState({flag: false})
+    };
+
+    changeFlag = (e) => {
+        e.preventDefault();
+        this.setState({flag: !this.state.flag})
+    };
 
     postNewItem = (e) => {
         const obj = {};
         e.preventDefault();
+        // eslint-disable-next-line array-callback-return
         this.props.form.map(el => {
             obj[el.name] = el.value
         });
@@ -15,11 +29,11 @@ export default class ChangeServicesDoctors extends React.Component {
     changeItem = (e) => {
         const obj = {};
         e.preventDefault();
+        // eslint-disable-next-line array-callback-return
         this.props.form.map(el => {
-            if (el.value !== '')
-                obj[el.name] = el.value
+            if (el.value !== '') obj[el.name] = el.value
         });
-        this.props.putItem({data:obj,id:this.props.itemId})
+        this.props.putItem({data: obj, id: this.props.itemId})
 
     };
 
@@ -29,8 +43,8 @@ export default class ChangeServicesDoctors extends React.Component {
 
     changeId = (e) => {
         this.props.changeId({
-            item:e.target.value,
-            data:this.props.data
+            item: e.target.value,
+            data: this.props.data
         })
     };
 
@@ -41,10 +55,13 @@ export default class ChangeServicesDoctors extends React.Component {
             form,
             changeInputValues,
         } = this.props;
+        let doctor = data.find(el => el._id === itemId);
+        if (doctor) doctor = doctor.speciality;
         return (
-            <div className = "change-services-doctors">
+            <div className="change-services-doctors">
+                {this.state.flag && <Reviews doctor={doctor} changeFlag={this.changeFlag}/>}
                 <div className="admin-item">
-                    <form className ="form-doctors" onSubmit={this.postNewItem}>
+                    <form className="form-doctors" onSubmit={this.postNewItem}>
                         {
                             form.map(el => (
                                 <Input
@@ -55,44 +72,45 @@ export default class ChangeServicesDoctors extends React.Component {
                                 />
                             ))
                         }
-                        <input className = "btn link"
+                        <button onClick={this.changeFlag}>Choose Services</button>
+                        <input className="btn link"
                                type='submit'
                                value='Добавить '
                         />
                     </form>
                 </div>
                 <div className="admin-item">
-                    <select  className = "appointment admin-form"  onChange={this.changeId} defaultValue='Выбрать'>
-                        <option disabled >Выбрать</option>
+                    <select className="appointment admin-form" onChange={this.changeId} defaultValue='Выбрать'>
+                        <option disabled>Выбрать</option>
                         {
-                            data.map(el=> (
+                            data.map(el => (
                                 <option key={el._id}>{el.name}</option>
                             ))
                         }
                     </select>
 
-                    <form  onSubmit={this.props.changeItem}>
+                    <form onSubmit={this.props.changeItem}>
                         {itemId &&
-                            form.map(el => {
-                                el.required = false;
-                                return (
-                                    <Input
-                                        key={el.id}
-                                        id={el.id}
-                                        el={el}
-                                        changeInputValues={changeInputValues}
-                                    />
-                                )
-                            })
+                        form.map(el => {
+                            el.required = false;
+                            return (
+                                <Input
+                                    key={el.id}
+                                    id={el.id}
+                                    el={el}
+                                    changeInputValues={changeInputValues}
+                                />
+                            )
+                        })
                         }
                         <input
-                            className = "btn link"
+                            className="btn link"
                             type='submit'
                             value='Изменить выбранный элемент'
                         />
                     </form>
                     {itemId &&
-                    <button className = "btn link" onClick={this.deleteItem} style={{backgroundColor:"#ff9774"}}>Удалить выбранный элемент</button>
+                    <button className="btn link" onClick={this.deleteItem} style={{backgroundColor: "#ff9774"}}>Удалить выбранный элемент</button>
                     }
                 </div>
             </div>

src/components/Reviews.js

@@ -8,55 +8,75 @@ import {
 } from "../actions/actions";
 
 
-
 export class Reviews extends React.Component {
 
 
-    render( ) {
-        const {postNewDoctor,doctors,servicesArray} = this.props.app
-        const servArray =  Object.keys(servicesArray).map(key => {
-            return [key, servicesArray[key]];
-        })
-        let doctor
-        if (doctors[0]) {
-            doctor = doctors[2].speciality
-        }
-        console.log(doctor)
-        console.log(servArray)
+    render() {
+        const {doctor, categories, changeFlag} = this.props
 
+        // let doctor
+        // if (doctors[0]) {
+        //     doctor = doctors[2].speciality
+        // }
+        console.log(this.props)
         return (
-           <div style={{display:'flex',margin:'100px 5px'}}>
-               {doctor &&
-                   servArray.map(el => (
-                       <div key={[el[0]]}>
-                           <p>{el[0]}</p>
-
+            <>
+                <div style={{
+                    position: 'fixed',
+                    right: '0',
+                    left: '0',
+                    display: 'flex',
+                    justifyContent:'center',
+                    backgroundColor: 'black',
+                    margin: '5% auto',
+                    width: '80%',
+                    fontSize: '12px',
+                    zIndex: '2'
+                }}>
+                    {categories.map(el => (
+                        <div key={el._id} style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            wrap: 'nowrap',
+                            textAlign:'start',
+                            width:'20%'
+                        }}>
+                            <p>{el.name}</p>
                             {
-                                el[1].map(item => (
-                                    <div key={item._id} style={{display:'flex',margin:'5px 5px',flexDirection:'column',width:'200px'}}>
-                                        <label >
+                                el.services.map(item => (
+                                    <div key={item._id} >
+                                        <label>
                                             <input
                                                 type="checkbox"
                                                 value={item._id}
-                                                defaultChecked={doctor.find(spec => spec._id === item._id)}
+                                                defaultChecked={doctor ? doctor.find(spec => spec._id === item._id) : false}
                                             />
                                             {item.name}
                                         </label>
                                     </div>
                                 ))
                             }
-
-                       </div>
-                   ))
-               }
-           </div>
-        ) 
+                        </div>
+                    ))
+                    }
+                </div>
+                <div style={{
+                    position: 'fixed',
+                    top: '0',
+                    left: "0",
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'black',
+                    opacity: '0.5'
+                }} onClick={changeFlag}></div>
+            </>
+        )
     }
 }
 
 const mapStateToProps = state => {
     return {
-        app:state.app,
+        categories: state.services.categories
     }
 };
 
@@ -64,7 +84,7 @@ const mapDispatchToProps = {
     changeInputValueDoctorForm,
 };
 
-export default connect (mapStateToProps,mapDispatchToProps)(Reviews)
+export default connect(mapStateToProps, mapDispatchToProps)(Reviews)
 
 // <div className = "main">
 //     <div className="info-wrap">

src/privateRouter.js

@@ -8,7 +8,6 @@ export const PrivateRoute = ({ component: Component, protectedRoute, ...rest })
 		render={props => {
 			if (protectedRoute) {
 				const token = localStorage.getItem("userId");
-				console.log('token', token)
 				if (!token) {
 					return <Redirect to="/auth" />;
 				}