добавленно: добавление/изменение/удаление сервисов

src/App.js

@@ -54,6 +54,7 @@ export class App extends React.Component {
     }
 
     render() {
+        console.log(this.props.app)
         return (
             <div className="container">
                 <Header/>

src/actions/actions.js

@@ -5,15 +5,29 @@ const URL = "https://api-clinics.herokuapp.com/api/v1/";
 
 // -----------------------------------------------------------------------------------------------------------------
 
-export const changeInputDoctorForm = payload => ({
+export const changeInputValueDoctorForm = payload => ({
     type: types.CHANGE_INPUT_VALUE_DOCTOR_FORM,
     payload
 });
 
 // -----------------------------------------------------------------------------------------------------------------
 
-export const changeSelectedDoctor = payload => ({
-    type: types.CHANGE_SELECTED_DOCTOR,
+export const changeInputValueServiceForm = payload => ({
+    type: types.CHANGE_INPUT_VALUE_SERVICE_FORM,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const changeSelectedDoctorId = payload => ({
+    type: types.CHANGE_SELECTED_DOCTOR_ID,
+    payload
+});
+
+// -----------------------------------------------------------------------------------------------------------------
+
+export const changeSelectedServiceId = payload => ({
+    type: types.CHANGE_SELECTED_SERVICE_ID,
     payload
 });
 
@@ -24,26 +38,36 @@ export const setAppointmentShedule = payload => ({
     payload
 });
 
+// -----------------------------------------------------------------------------------------------------------------
+
 export const setAppointmentDoctor = payload => ({
     type: types.CHANGE_APPOINTMENT_DOCTOR,
     payload
 });
 
+// -----------------------------------------------------------------------------------------------------------------
+
 export const setAppointmentTime = payload => ({
     type: types.CHANGE_APPOINTMENT_TIME,
     payload
 });
 
+// -----------------------------------------------------------------------------------------------------------------
+
 export const setAppointmentSpec = payload => ({
     type: types.CHANGE_APPOINTMENT_SPEC,
     payload
 });
 
+// -----------------------------------------------------------------------------------------------------------------
+
 export const setAppointmentComment = payload => ({
     type: types.CHANGE_APPOINTMENT_COMMENT,
     payload
 });
 
+// -----------------------------------------------------------------------------------------------------------------
+
 export const clearAppointment = payload => ({
     type: types.CLEAR_APPOINTMENT,
     payload
@@ -56,6 +80,7 @@ export const setSheduleDoctor = payload => ({
     payload
 });
 
+// -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
 const getDoctorsRequest = payload => ({
@@ -84,6 +109,7 @@ export const getDoctors = () => dispatch => {
 };
 
 // -----------------------------------------------------------------------------------------------------------------
+
 const getServicesRequest = payload => ({
     type: types.GET_SERVICES_REQUEST,
     payload
@@ -111,6 +137,7 @@ export const getServices = () => dispatch => {
 
 // -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
+
 const postDoctorsRequest = payload => ({
     type: types.POST_DOCTORS_REQUEST,
     payload
@@ -237,6 +264,7 @@ export const postOrders = (payload) => dispatch => {
         .catch(err => dispatch(postOrdersFail(err)));
 };
 
+// -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
 const putDoctorsRequest = payload => ({
@@ -269,4 +297,94 @@ export const putDoctors = (payload) => dispatch => {
         .catch(err => dispatch(putDoctorsRequestFail(err)));
 };
 
+// -----------------------------------------------------------------------------------------------------------------
+
+const putServicesRequest = payload => ({
+    type: types.PUT_SERVICES_REQUEST,
+    payload
+});
+
+const putServicesRequestSuccess = payload => ({
+    type: types.PUT_SERVICES_REQUEST_SUCCESS,
+    payload
+});
+
+const putServicesRequestFail = payload => ({
+    type: types.PUT_SERVICES_REQUEST_FAIL,
+    payload
+});
+
+export const putServices = (payload) => dispatch => {
+    dispatch(putServicesRequest());
+    return fetch(`${URL}services/${payload.id}`, {
+        method: "PUT",
+        credentials: "include",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload.data)
+    })
+        .then(res => res.json())
+        .then(res => dispatch(putServicesRequestSuccess(res)))
+        .catch(err => dispatch(putServicesRequestFail(err)));
+};
+
+// -----------------------------------------------------------------------------------------------------------------
+// -----------------------------------------------------------------------------------------------------------------
+
+const deleteServicesRequest = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST,
+    payload
+});
+
+const deleteServicesRequestSuccess = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_SUCCESS,
+    payload
+});
+
+const deleteServicesRequestFail = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_FAIL,
+    payload
+});
+
+export const deleteServices = (payload) => dispatch => {
+    dispatch(deleteServicesRequest());
+    return fetch(`${URL}services/${payload}`, {
+        method: "DELETE",
+        credentials: "include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(deleteServicesRequestSuccess(res)))
+        .catch(err => dispatch(deleteServicesRequestFail(err)));
+};
+
+// -----------------------------------------------------------------------------------------------------------------
+
+const deleteDoctorsRequest = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST,
+    payload
+});
+
+const deleteDoctorsRequestSuccess = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_SUCCESS,
+    payload
+});
+
+const deleteDoctorsRequestFail = payload => ({
+    type: types.DELETE_DOCTORS_REQUEST_FAIL,
+    payload
+});
+
+export const deleteDoctors = (payload) => dispatch => {
+    dispatch(deleteDoctorsRequest());
+    return fetch(`${URL}doctors/${payload}`, {
+        method: "DELETE",
+        credentials: "include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(deleteDoctorsRequestSuccess(res)))
+        .catch(err => dispatch(deleteDoctorsRequestFail(err)));
+};
+
+// -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------

src/actionsTypes/actionsTypes.js

@@ -41,11 +41,25 @@ export const PUT_DOCTORS_REQUEST = "PUT_DOCTORS_REQUEST";
 export const PUT_DOCTORS_REQUEST_SUCCESS = "PUT_DOCTORS_REQUEST_SUCCESS";
 export const PUT_DOCTORS_REQUEST_FAIL = "PUT_DOCTORS_REQUEST_FAIL";
 
+export const PUT_SERVICES_REQUEST = "PUT_DOCTORS_REQUEST";
+export const PUT_SERVICES_REQUEST_SUCCESS = "PUT_DOCTORS_REQUEST_SUCCESS";
+export const PUT_SERVICES_REQUEST_FAIL = "PUT_DOCTORS_REQUEST_FAIL";
+
+export const DELETE_DOCTORS_REQUEST = "DELETE_DOCTORS_REQUEST";
+export const DELETE_DOCTORS_REQUEST_SUCCESS = "DELETE_DOCTORS_REQUEST_SUCCESS";
+export const DELETE_DOCTORS_REQUEST_FAIL = "DELETE_DOCTORS_REQUEST_FAIL";
+
+export const DELETE_SERVICES_REQUEST = "DELETE_DOCTORS_REQUEST";
+export const DELETE_SERVICES_REQUEST_SUCCESS = "DELETE_DOCTORS_REQUEST_SUCCESS";
+export const DELETE_SERVICES_REQUEST_FAIL = "DELETE_DOCTORS_REQUEST_FAIL";
+
 export const 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= "CHANGE_SELECTED_DOCTOR";
+export const CHANGE_SELECTED_DOCTOR_ID= "CHANGE_SELECTED_DOCTOR_ID";
+export const CHANGE_SELECTED_SERVICE_ID= "CHANGE_SELECTED_SERVICE_ID";
 
 
 

src/components/Admin/Admin.js

@@ -5,14 +5,20 @@ import {Switch, Route} from "react-router-dom";
 import {
     setSheduleDoctor,
     postShedule,
-    changeInputDoctorForm,
+    changeInputValueDoctorForm,
+    changeInputValueServiceForm,
     postDoctors,
-    changeSelectedDoctor,
-    putDoctors
+    changeSelectedDoctorId,
+    changeSelectedServiceId,
+    putDoctors,
+    deleteDoctors,
+    postServices,
+    putServices,
+    deleteServices
 } from "../../actions/actions";
 
 import Shedule from './Shedule'
-import ChangeDoctor from './ChangeDoctor'
+import ChangeServicesDoctors from './ChangeServices-Doctors'
 
 
 
@@ -20,8 +26,30 @@ export class Admin extends React.Component {
 
 
     render() {
-        const {doctors,postNewShedule,sheduleMonthArray,postNewDoctor,changeDoctor} = this.props.app;
-        const {setSheduleDoctor,postShedule,changeInputDoctorForm,postDoctors,changeSelectedDoctor,putDoctors} = this.props;
+        const {
+            doctors,
+            services,
+            postNewShedule,
+            sheduleMonthArray,
+            postNewDoctor,
+            postNewService,
+            changeDoctorId,
+            changeServiceId
+        } = this.props.app;
+        const {
+            setSheduleDoctor,
+            postShedule,
+            changeInputValueDoctorForm,
+            changeInputValueServiceForm,
+            postDoctors,
+            changeSelectedDoctorId,
+            changeSelectedServiceId,
+            putDoctors,
+            deleteDoctors,
+            putServices,
+            deleteServices,
+            postServices
+        } = this.props;
         return (
             <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
                 <div>
@@ -37,16 +65,26 @@ export class Admin extends React.Component {
                         setSheduleDoctor={setSheduleDoctor}
                         postShedule={postShedule}
                     />} />
-                    <Route path='/admin/change-doctors' render={() => <ChangeDoctor
-                        putDoctors={putDoctors}
-                        changeDoctor={changeDoctor}
-                        doctors={doctors}
-                        changeSelectedDoctor={changeSelectedDoctor}
-                        changeInputValues={changeInputDoctorForm}
-                        postDoctors={postDoctors}
-                        postNewDoctor={postNewDoctor}
+                    <Route path='/admin/change-doctors' render={() => <ChangeServicesDoctors
+                        data={doctors}
+                        itemId={changeDoctorId}
+                        changeId={changeSelectedDoctorId}
+                        form={postNewDoctor}
+                        postItem={postDoctors}
+                        putItem={putDoctors}
+                        deleteItem={deleteDoctors}
+                        changeInputValues={changeInputValueDoctorForm}
+                    />} />
+                    <Route path='/admin/change-services' render={() => <ChangeServicesDoctors
+                        data={services}
+                        itemId={changeServiceId}
+                        changeId={changeSelectedServiceId}
+                        form={postNewService}
+                        postItem={postServices}
+                        putItem={putServices}
+                        deleteItem={deleteServices}
+                        changeInputValues={changeInputValueServiceForm}
                     />} />
-                    <Route path='/admin/change-services' render={() => <div>Services</div>} />
                 </Switch>
             </div>
         );
@@ -62,10 +100,16 @@ const mapStateToProps = state => {
 const mapDispatchToProps = {
     setSheduleDoctor,
     postShedule,
-    changeInputDoctorForm,
+    changeInputValueDoctorForm,
+    changeInputValueServiceForm,
     postDoctors,
-    changeSelectedDoctor,
-    putDoctors
+    changeSelectedDoctorId,
+    changeSelectedServiceId,
+    putDoctors,
+    deleteDoctors,
+    postServices,
+    putServices,
+    deleteServices
 
 
 };

src/components/Admin/ChangeDoctor.js

@@ -1,61 +1,72 @@
 import React from 'react';
 import Input from './Input'
 
-export default class ChangeDoctor extends React.Component {
+export default class ChangeServicesDoctors extends React.Component {
 
 
     render() {
-        const doc = {};
-        const {changeInputValues,postDoctors,postNewDoctor,changeSelectedDoctor,doctors,changeDoctor,putDoctors} = this.props;
+        const obj = {};
+        const {
+            data,
+            itemId,
+            form,
+            postItem,
+            putItem,
+            deleteItem,
+            changeId,
+            changeInputValues,
+        } = this.props;
         return (
             <div style={{display:'flex',flexDirection:'column', width:'400px', margin:'10px 20px'}}>
                 <form style={{display:"flex",flexDirection:"column"}} onSubmit={(e)=>{
                     e.preventDefault();
                     // eslint-disable-next-line array-callback-return
-                    postNewDoctor.map(el => {
-                        doc[el.name] = el.value
+                    form.map(el => {
+                        obj[el.name] = el.value
                     });
-                    postDoctors(doc)
+                    postItem(obj)
                 }}
                 >
-                {
-                    postNewDoctor.map(el => (
-                        <Input
-                            key={el.id}
-                            id={el.id}
-                            el={el}
-                            changeInputValues={changeInputValues}
-                        />
-                    ))
-                }
-                <input
-                    type='submit'
-                    value='Post new doctor'
-                />
+                    {
+                        form.map(el => (
+                            <Input
+                                key={el.id}
+                                id={el.id}
+                                el={el}
+                                changeInputValues={changeInputValues}
+                            />
+                        ))
+                    }
+                    <input
+                        type='submit'
+                        value='Post New Item'
+                    />
                 </form>
 
-                <select  onChange={(e)=>changeSelectedDoctor(e.target.value)} defaultValue='choose doctor'>
-                    <option disabled >choose doctor</option>
+                <select  onChange={(e)=>changeId(e.target.value)} defaultValue='choose item'>
+                    <option disabled >choose item</option>
                     {
-                        doctors.map(el=> (
+                        data.map(el=> (
                             <option key={el._id}>{el.name}</option>
                         ))
                     }
                 </select>
-
+                {itemId &&
+                <button onClick={()=>deleteItem(itemId)} style={{backgroundColor:"red"}}>DELETE Item</button>
+                }
                 {
                     <form style={{display:"flex",flexDirection:"column",margin:"20px 0"}} onSubmit={(e)=>{
                         e.preventDefault();
                         // eslint-disable-next-line array-callback-return
-                        postNewDoctor.map(el => {
+                        form.map(el => {
                             if (el.value !== '')
-                                doc[el.name] = el.value
+                                obj[el.name] = el.value
                         });
-                        putDoctors({data:doc,id:changeDoctor})
+                        putItem({data:obj,id:itemId})
 
                     }}>
-                        {changeDoctor &&
-                        postNewDoctor.map(el => {
+                        {itemId &&
+                        form.map(el => {
                             el.required = false;
                             return (
                                 <Input
@@ -64,12 +75,12 @@ export default class ChangeDoctor extends React.Component {
                                     el={el}
                                     changeInputValues={changeInputValues}
                                 />
-                                )
+                            )
                         })
                         }
                         <input
                             type='submit'
-                            value='Change Selected Doctor'
+                            value='Change Selected Item'
                         />
                     </form>
                 }

src/reducers/reducers.js

@@ -51,32 +51,61 @@ const postNewDoctorForm =[
     }
 ];
 
-
-const defaultState = {
-    currentUser:{
-        email:"dead1990bb@gmail.com",
+const postNewServiceForm =[
+    {
         id:1,
-        name:"Borys",
-        lastName:"Kozhyn",
-        age:29,
-        phone:"380938807183",
-        avatar:"some avatar",
-        password:"123456",
-        root:false,
-        doctor:false,
+        type:'text',
+        value:"",
+        name:'name',
+        placeholder:'Enter service Name',
+        required:true
+    },
+    {
+        id:2,
+        type:'text',
+        value:"",
+        name:'description',
+        placeholder:'Enter service description',
+        required:true
+    },
+    {
+        id:3,
+        type:'number',
+        value:"",
+        name:'duration',
+        placeholder:'Enter duration',
+        required:true
     },
+    {
+        id:4,
+        type:'number',
+        value:"",
+        name:'price',
+        placeholder:'Enter price',
+        required:true
+    }
+];
+
+
+const defaultState = {
     doctors:[],
+    services:[],
+    orders:[],
+    users:[],
+    reviews: [],
+
     postNewShedule:{
         data:null,
         doctor:null
     },
-    postNewDoctor:postNewDoctorForm,
-    changeDoctor:null,
     sheduleMonthArray:null,
-    services:[],
-    orders:[],
-    users:[],
-    reviews: [],
+
+    postNewDoctor:postNewDoctorForm,
+    postNewService:postNewServiceForm,
+
+    changeDoctorId:null,
+    changeServiceId:null,
+
     appointment:{
         shedule:null,
         time:null,
@@ -84,6 +113,7 @@ const defaultState = {
         spec:null,
         comment:''
     },
+
     timeArray:[],
     wrongDate:true,
     isFetching:false,
@@ -111,11 +141,47 @@ export const appReducer = (state = defaultState,action) => {
 
 // -----------------------------------------------------------------------------------------------------------------
 
-        case types.CHANGE_SELECTED_DOCTOR : {
+        case types.CHANGE_INPUT_VALUE_SERVICE_FORM : {
+            return {
+                ...state,
+                postNewService: state.postNewService.map(el => el.id === +action.payload.target.id ? {
+                    ...el,
+                    value:action.payload.target.value
+                } : el)
+            };
+        }
+
+// -----------------------------------------------------------------------------------------------------------------
+
+        case types.CHANGE_SELECTED_DOCTOR_ID : {
+            let doctor = state.doctors.find(el => el.name === action.payload)
+            let result = Object.keys(doctor).map(key => {
+                return [key, doctor[key]];
+            });
             return {
                 ...state,
-                changeDoctor: state.doctors.find(el => el.name === action.payload)._id,
-                postNewDoctor:postNewDoctorForm
+                changeDoctorId: state.doctors.find(el => el.name === action.payload)._id,
+                postNewDoctor:state.postNewDoctor.map(el => result.find(item => item[0] === el.name) ? {
+                    ...el,
+                    value:result.find(item => item[0] === el.name)[1]
+                } : el)
+            };
+        }
+
+// -----------------------------------------------------------------------------------------------------------------
+
+        case types.CHANGE_SELECTED_SERVICE_ID : {
+            let service = state.services.find(el => el.name === action.payload)
+            let 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) ? {
+                    ...el,
+                    value:result.find(item => item[0] === el.name)[1]
+                } : el)
             };
         }
 
@@ -214,6 +280,7 @@ export const appReducer = (state = defaultState,action) => {
             };
         }
 
+// -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.GET_DOCTORS_REQUEST : {
@@ -249,6 +316,11 @@ export const appReducer = (state = defaultState,action) => {
         }
 
         case types.GET_SERVICES_REQUEST_SUCCESS : {
+            action.payload.services.sort((a,b) => {
+                if (a.name.slice(0,1) < b.name.slice(0,1)) {return -1;}
+                if(a.name.slice(0,1) > b.name.slice(0,1)) {return 1;}
+                return 0
+            });
             return {
                 ...state,
                 services:action.payload.services,
@@ -264,6 +336,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
+// -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.POST_DOCTORS_REQUEST : {
@@ -276,6 +349,7 @@ export const appReducer = (state = defaultState,action) => {
         case types.POST_DOCTORS_REQUEST_SUCCESS : {
             return {
                 ...state,
+                postNewDoctor:postNewDoctorForm,
                 isFetching: false
             }
         }
@@ -288,6 +362,34 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
+// -----------------------------------------------------------------------------------------------------------------
+
+        case types.POST_SHEDULE_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.POST_SHEDULE_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                postNewShedule:{
+                    data:null,
+                    doctor:null
+                },
+                isFetching: false
+            }
+        }
+
+        case types.POST_SHEDULE_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.POST_SERVICES_REQUEST : {
@@ -338,6 +440,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
+// -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.PUT_DOCTORS_REQUEST : {
@@ -350,6 +453,8 @@ export const appReducer = (state = defaultState,action) => {
         case types.PUT_DOCTORS_REQUEST_SUCCESS : {
             return {
                 ...state,
+                postNewDoctor:postNewDoctorForm,
+                changeId:null,
                 isFetching: false
             }
         }
@@ -362,6 +467,84 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
+// -----------------------------------------------------------------------------------------------------------------
+
+        case types.PUT_SERVICES_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.PUT_SERVICES_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                postNewService:postNewServiceForm,
+                changeId:null,
+                isFetching: false
+            }
+        }
+
+        case types.PUT_SERVICES_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
+// -----------------------------------------------------------------------------------------------------------------
+// -----------------------------------------------------------------------------------------------------------------
+
+        case types.DELETE_DOCTORS_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.DELETE_DOCTORS_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                changeId:null,
+                isFetching: false
+            }
+        }
+
+        case types.DELETE_DOCTORS_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
+// -----------------------------------------------------------------------------------------------------------------
+
+        case types.DELETE_SERVICES_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.DELETE_SERVICES_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                changeId:null,
+                isFetching: false
+            }
+        }
+
+        case types.DELETE_SERVICES_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
+// -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------
 
         default: