reworked Admin-ChangeDoctor, now working properly with checkbox window

src/actions/actions.js

@@ -33,6 +33,13 @@ export const changeSelectedServiceId = payload => ({
 
 // -----------------------------------------------------------------------------------------------------------------
 
+export const changeSpecialityArray = payload => ({
+    type: types.CHANGE_SPECIALITY_ARRAY,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
 export const setSheduleDoctor = payload => ({
     type: types.CHANGE_SHEDULE_DOCTOR,
     payload

src/actionsTypes/actionsTypes.js

@@ -67,9 +67,9 @@ export const CHANGE_SHEDULE_DOCTOR= "CHANGE_SHEDULE_DOCTOR";
 
 export const CHANGE_INPUT_VALUE_DOCTOR_FORM= "CHANGE_INPUT_VALUE_DOCTOR_FORM";
 export const CHANGE_INPUT_VALUE_SERVICE_FORM= "CHANGE_INPUT_VALUE_SERVICE_FORM";
-
 export const CHANGE_SELECTED_DOCTOR_ID= "CHANGE_SELECTED_DOCTOR_ID";
 export const CHANGE_SELECTED_SERVICE_ID= "CHANGE_SELECTED_SERVICE_ID";
+export const CHANGE_SPECIALITY_ARRAY= "CHANGE_SPECIALITY_ARRAY";
 
 export const CREATE_CALENDAR_MONTH_ARRAY= "CREATE_CALENDAR_MONTH_ARRAY";
 export const CHANGE_CALENDAR_MONTH= "CHANGE_CALENDAR_MONTH";

src/components/Admin/Admin.js

@@ -14,7 +14,8 @@ import {
     deleteDoctors,
     postServices,
     putServices,
-    deleteServices
+    deleteServices,
+    changeSpecialityArray
 } from "../../actions/actions";
 
 import Shedule from './Shedule'
@@ -31,10 +32,9 @@ export class Admin extends React.Component {
             postNewDoctor,
             postNewService,
             changeDoctorId,
-            changeServiceId
-        } = this.props.app;
-        const {
+            changeServiceId,
             services,
+            categories,
             setSheduleDoctor,
             postShedule,
             changeInputValueDoctorForm,
@@ -46,7 +46,9 @@ export class Admin extends React.Component {
             deleteDoctors,
             putServices,
             deleteServices,
-            postServices
+            postServices,
+            changeSpecialityArray,
+            specialityArray
         } = this.props;
 
         return (
@@ -65,7 +67,9 @@ export class Admin extends React.Component {
                             postShedule={postShedule}
                         />} />
                         <Route path='/admin/change-doctors' render={() => <ChangeServicesDoctors
+                            categories={categories}
                             data={doctors}
+                            specialityArray={specialityArray}
                             itemId={changeDoctorId}
                             changeId={changeSelectedDoctorId}
                             form={postNewDoctor}
@@ -73,6 +77,7 @@ export class Admin extends React.Component {
                             putItem={putDoctors}
                             deleteItem={deleteDoctors}
                             changeInputValues={changeInputValueDoctorForm}
+                            changeSpecialityArray={changeSpecialityArray}
                         />} />
                         <Route path='/admin/change-services' render={() => <ChangeServicesDoctors
                             data={services}
@@ -93,8 +98,15 @@ export class Admin extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        app:state.app,
-        services: state.services.services
+        doctors:state.app.doctors,
+        postNewShedule:state.app.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
     }
 };
 
@@ -110,7 +122,8 @@ const mapDispatchToProps = {
     deleteDoctors,
     postServices,
     putServices,
-    deleteServices
+    deleteServices,
+    changeSpecialityArray
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(Admin)

src/components/Admin/ChangeServices-Doctors.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Input from './Input'
-import Reviews from "../Reviews";
+import CheckBoxWindow from "./CheckBoxWindow";
 
 export default class ChangeServicesDoctors extends React.Component {
     state = {
@@ -23,7 +23,10 @@ export default class ChangeServicesDoctors extends React.Component {
         this.props.form.map(el => {
             obj[el.name] = el.value
         });
-        this.props.postItem(obj)
+        this.props.postItem(this.props.categories? {
+            ...obj,
+            speciality:this.props.specialityArray
+        } : obj)
     };
 
     changeItem = (e) => {
@@ -33,7 +36,13 @@ export default class ChangeServicesDoctors extends React.Component {
         this.props.form.map(el => {
             if (el.value !== '') obj[el.name] = el.value
         });
-        this.props.putItem({data: obj, id: this.props.itemId})
+        this.props.putItem({
+            data: this.props.categories? {
+                ...obj,
+                speciality:this.props.specialityArray
+            } : obj,
+            id: this.props.itemId
+        })
 
     };
 
@@ -50,38 +59,46 @@ export default class ChangeServicesDoctors extends React.Component {
 
     render() {
         const {
+            categories,
             data,
             itemId,
             form,
             changeInputValues,
+            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 && <Reviews doctor={doctor} changeFlag={this.changeFlag}/>}
+                {this.state.flag &&
+                <CheckBoxWindow categories={categories} specialityArray={specialityArray} changeFlag={this.changeFlag} changeSpecialityArray={changeSpecialityArray}/>}
                 <div className="admin-item">
-                    <form className="form-doctors" onSubmit={this.postNewItem}>
+                    <form className="form-doctors" onSubmit={itemId ? this.changeItem : this.postNewItem}>
                         {
-                            form.map(el => (
-                                <Input
-                                    key={el.id}
-                                    id={el.id}
-                                    el={el}
-                                    changeInputValues={changeInputValues}
-                                />
-                            ))
+                            form.map(el => {
+                                el.required = !itemId;
+                                    return (
+                                        <Input
+                                            key={el.id}
+                                            id={el.id}
+                                            el={el}
+                                            changeInputValues={changeInputValues}
+                                        />
+                                    )
+                            })
                         }
-                        <button onClick={this.changeFlag}>Choose Services</button>
+                        {categories && <button onClick={this.changeFlag}>Choose Services</button>}
                         <input className="btn link"
                                type='submit'
-                               value='Добавить '
+                               value={itemId ? 'Изменить'  : 'Добавить'}
                         />
                     </form>
                 </div>
                 <div className="admin-item">
                     <select className="appointment admin-form" onChange={this.changeId} defaultValue='Выбрать'>
-                        <option disabled>Выбрать</option>
+                        <option >Выбрать</option>
                         {
                             data.map(el => (
                                 <option key={el._id}>{el.name}</option>
@@ -89,31 +106,13 @@ export default class ChangeServicesDoctors extends React.Component {
                         }
                     </select>
 
-                    <form onSubmit={this.props.changeItem}>
-                        {itemId &&
-                        form.map(el => {
-                            el.required = false;
-                            return (
-                                <Input
-                                    key={el.id}
-                                    id={el.id}
-                                    el={el}
-                                    changeInputValues={changeInputValues}
-                                />
-                            )
-                        })
-                        }
-                        <input
-                            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/Admin/CheckBoxWindow.js

@@ -0,0 +1,67 @@
+import React from 'react';
+
+
+class CheckBoxWindow extends React.Component {
+    changeSpecialityArray = (e) => {
+        this.props.changeSpecialityArray(e.target)
+    };
+
+    render() {
+        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'
+                }}>
+                    {categories.map(el => (
+                        <div key={el._id} style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            wrap: 'nowrap',
+                            textAlign:'start',
+                            width:'20%'
+                        }}>
+                            <p>{el.name}</p>
+                            {
+                                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>
+                                ))
+                            }
+                        </div>
+                    ))
+                    }
+                </div>
+                <div style={{
+                    position: 'fixed',
+                    top: '0',
+                    left: "0",
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: 'black',
+                    opacity: '0.5'
+                }} onClick={changeFlag}></div>
+            </>
+        )
+    }
+}
+
+export default CheckBoxWindow;

src/components/Reviews.js

@@ -1,97 +1,24 @@
 import React from 'react';
 // import {Link} from 'react-router-dom';
 // import Button from "../buttons/button";
-// import { postServices} from "../../store/app/actions";
-import {connect} from 'react-redux'
-import {
-    changeInputValueDoctorForm,
-} from "../actions/actions";
-
 
 export class Reviews extends React.Component {
 
-
     render() {
-        const {doctor, categories, changeFlag} = this.props
-
-        // let doctor
-        // if (doctors[0]) {
-        //     doctor = doctors[2].speciality
-        // }
-        console.log(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'
-                }}>
-                    {categories.map(el => (
-                        <div key={el._id} style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            wrap: 'nowrap',
-                            textAlign:'start',
-                            width:'20%'
-                        }}>
-                            <p>{el.name}</p>
-                            {
-                                el.services.map(item => (
-                                    <div key={item._id} >
-                                        <label>
-                                            <input
-                                                type="checkbox"
-                                                value={item._id}
-                                                defaultChecked={doctor ? doctor.find(spec => spec._id === item._id) : false}
-                                            />
-                                            {item.name}
-                                        </label>
-                                    </div>
-                                ))
-                            }
-                        </div>
-                    ))
-                    }
+            <div className = "main">
+                <div className="info-wrap">
+                    <h2>Отзывы</h2>
+                    <div classdescription = "reviews-container">
+                        ЗДЕСЬ БУДУТ ОТЗЫВЫ ПОСЕТИТЕЛЕЙ
+                    </div>
                 </div>
-                <div style={{
-                    position: 'fixed',
-                    top: '0',
-                    left: "0",
-                    width: '100%',
-                    height: '100%',
-                    backgroundColor: 'black',
-                    opacity: '0.5'
-                }} onClick={changeFlag}></div>
-            </>
+
+            </div>
         )
     }
 }
 
-const mapStateToProps = state => {
-    return {
-        categories: state.services.categories
-    }
-};
-
-const mapDispatchToProps = {
-    changeInputValueDoctorForm,
-};
 
-export default connect(mapStateToProps, mapDispatchToProps)(Reviews)
+export default Reviews
 
-// <div className = "main">
-//     <div className="info-wrap">
-//     <h2>Отзывы</h2>
-// <div classdescription = "reviews-container">
-//     ЗДЕСЬ БУДУТ ОТЗЫВЫ ПОСЕТИТЕЛЕЙ
-// </div>
-// </div>
-//
-// </div>

src/reducers/reducers.js

@@ -16,9 +16,9 @@ const defaultState = {
 
     postNewDoctor:postNewDoctorForm,
     postNewService:postNewServiceForm,
-
     changeDoctorId:null,
     changeServiceId:null,
+    specialityArray:[],
 
     isFetching:false,
     error: null,
@@ -33,6 +33,18 @@ export const appReducer = (state = defaultState,action) => {
 
 // -----------------------------------------------------------------------------------------------------------------
 
+        case types.CHANGE_SPECIALITY_ARRAY : {
+            const arr = state.specialityArray.slice();
+            action.payload.checked ? arr.push(action.payload.value) : arr.splice(arr.indexOf(action.payload.value),1);
+            return {
+                ...state,
+                specialityArray: arr
+            };
+        }
+
+// -----------------------------------------------------------------------------------------------------------------
+
+
         case types.CHANGE_INPUT_VALUE_DOCTOR_FORM : {
             return {
                 ...state,
@@ -58,34 +70,43 @@ 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 = Object.keys(doctor).map(key => {
-                return [key, doctor[key]];
-            });
+            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,
-                changeDoctorId: action.payload.data.find(el => el.name === action.payload.item)._id,
-                postNewDoctor:state.postNewDoctor.map(el => result.find(item => item[0] === el.name) ? {
+                specialityArray:specArray,
+                changeDoctorId: doctor ? doctor._id : null,
+                postNewDoctor:doctor ? state.postNewDoctor.map(el => result.find(item => item[0] === el.name) ? {
                     ...el,
                     value:result.find(item => item[0] === el.name)[1]
-                } : el)
+                } : el) : postNewDoctorForm
             };
         }
 
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.CHANGE_SELECTED_SERVICE_ID : {
-            let service = action.payload.data.find(el => el.name === action.payload.item)
-            let result = Object.keys(service).map(key => {
-                return [key, service[key]];
-            });
+            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._id,
-                postNewService: state.postNewService.map(el => result.find(item => item[0] === el.name) ? {
+                changeServiceId: service ? service._id : null,
+                postNewService: service ? state.postNewService.map(el => result.find(item => item[0] === el.name) ? {
                     ...el,
                     value:result.find(item => item[0] === el.name)[1]
-                } : el)
+                } : el) : postNewServiceForm
             };
         }
 

src/reducers/services.js

@@ -2,7 +2,9 @@ import * as types from '../actionsTypes/actionsTypes'
 
 const defaultState = {
     services:[],
-    categories:[]
+    categories:[],
+    isFetching: false,
+    error:null
 };
 
 export const servicesReducer = (state = defaultState, action) => {

src/utils/formFields.js

@@ -193,14 +193,6 @@ export const postNewDoctorForm =[
 		name:'skillsDescription',
 		placeholder:'Введите описание навыков здесь',
 		required:true
-	},
-	{
-		id:6,
-		type:'text',
-		value:"",
-		name:'speciality',
-		placeholder:'Введите массив представляемых услуг',
-		required:true
 	}
 ];