finished changeOrder functionality / admin-orders-changeOrders

src/actions/appointment.js

@@ -1,6 +1,7 @@
 import * as types from "../actionsTypes/actionsTypes";
 
 import axios from 'axios'
+import {getOrders} from "./orders";
 
 const URL = "https://api-clinics.herokuapp.com/api/v1/";
 
@@ -95,14 +96,10 @@ export const postOrders = payload => {
                 url:`${URL}orders`,
                 data: payload  
             });
-            dispatch(postOrdersSuccess(data))
+            dispatch(postOrdersSuccess(data));
             dispatch(clearAppointment());
-            console.log('post',data)
-
-           
-            
         } catch (error){
             dispatch(postOrdersFail(error));
         }
     }
-}
+};

src/actions/orders.js

@@ -1,6 +1,7 @@
 import * as types from "../actionsTypes/actionsTypes";
+import {postOrders} from "./appointment";
 
-const URL = "https://api-clinics.herokuapp.com/api/v1/orders";
+const URL = "https://api-clinics.herokuapp.com/api/v1/";
 
 
 export const changeInputFindOrder = payload => ({
@@ -13,6 +14,11 @@ export const findOrdersArray = payload => ({
     payload
 });
 
+export const getUserOrders = payload => ({
+    type: types.USER_ORDERS,
+    payload
+});
+
 export const changeInputValueOrderForm = payload => ({
     type:types.CHANGE_INPUT_VALUE_ORDER_FORM,
     payload
@@ -34,14 +40,9 @@ const getOrdersFail = payload => ({
     payload
 });
 
-export const getUserOrders = payload => ({
-    type: types.USER_ORDERS,
-    payload
-})
-
 export const getOrders = (payload) => dispatch => {
     dispatch(getOrdersRequest());
-    return fetch(`${URL}`,{
+    return fetch(`${URL}orders`,{
         credentials:"include"
     })
         .then(res => res.json())
@@ -51,5 +52,32 @@ export const getOrders = (payload) => dispatch => {
         .catch(err => dispatch(getOrdersFail(err)));
 };
 
+const deleteOrderRequest = payload => ({
+    type: types.DELETE_ORDER_REQUEST,
+    payload
+});
+
+const deleteOrderRequestSuccess = payload => ({
+    type: types.DELETE_ORDER_REQUEST_SUCCESS,
+    payload
+});
+
+const deleteOrderRequestFail = payload => ({
+    type: types.DELETE_ORDER_REQUEST_FAIL,
+    payload
+});
+
+export const deleteOrder = (payload) => dispatch => {
+    dispatch(deleteOrderRequest());
+    return fetch(`${URL}orders/${payload.id}`, {
+        method: "DELETE",
+        credentials: "include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(deleteOrderRequestSuccess(res)))
+        .then(dispatch(postOrders(payload.newOrder)))
+        .catch(err => dispatch(deleteOrderRequestFail(err)));
+};
+
 
 

src/actionsTypes/actionsTypes.js

@@ -87,6 +87,10 @@ export const DELETE_USER_REQUEST = "DELETE_USER_REQUEST";
 export const DELETE_USER_REQUEST_SUCCESS = "DELETE_USER_REQUEST_SUCCESS";
 export const DELETE_USER_REQUEST_FAIL = "DELETE_USER_REQUEST_FAIL";
 
+export const DELETE_ORDER_REQUEST = "DELETE_ORDER_REQUEST";
+export const DELETE_ORDER_REQUEST_SUCCESS = "DELETE_ORDER_REQUEST_SUCCESS";
+export const DELETE_ORDER_REQUEST_FAIL = "DELETE_ORDER_REQUEST_FAIL";
+
 export const CHANGE_SHEDULE_DOCTOR= "CHANGE_SHEDULE_DOCTOR";
 
 export const CHANGE_INPUT_VALUE_DOCTOR_FORM= "CHANGE_INPUT_VALUE_DOCTOR_FORM";

src/components/Admin/Admin.js

@@ -37,9 +37,19 @@ import {
 import  {
     getOrders,
     changeInputFindOrder,
-    findOrdersArray
+    findOrdersArray,
+    deleteOrder
 } from "../../actions/orders"
 
+import  {
+    setAppointmentSpec,
+    setAppointmentShedule,
+    setAppointmentDoctor,
+    clearAppointment,
+    setAppointmentTime,
+    setAppointmentComment
+} from "../../actions/appointment"
+
 import Shedule from './Shedule'
 import ChangeUser from './ChangeUser'
 import ChangeServicesDoctors from './ChangeServices-Doctors'
@@ -90,7 +100,16 @@ export class Admin extends React.Component {
             findOrderInput,
             findOrdersArray,
             ordersArray,
-            searching
+            searching,
+            appointment,
+            timeArray,
+            setAppointmentSpec,
+            setAppointmentShedule,
+            setAppointmentDoctor,
+            clearAppointment,
+            setAppointmentTime,
+            setAppointmentComment,
+            deleteOrder
         } = this.props;
 
         return (
@@ -158,6 +177,15 @@ export class Admin extends React.Component {
                             changeInputFindOrder={changeInputFindOrder}
                             findOrdersArray={findOrdersArray}
                             getUsers={getUsers}
+                            appointment={appointment}
+                            timeArray={timeArray}
+                            setAppointmentSpec={setAppointmentSpec}
+                            setAppointmentShedule={setAppointmentShedule}
+                            setAppointmentDoctor={setAppointmentDoctor}
+                            clearAppointment={clearAppointment}
+                            setAppointmentTime={setAppointmentTime}
+                            setAppointmentComment={setAppointmentComment}
+                            deleteOrder={deleteOrder}
                         />} />
                     </Switch>
                 </div>
@@ -186,7 +214,9 @@ const mapStateToProps = state => {
         findOrdersArray:state.orders.findOrdersArray,
         findOrderInput:state.orders.findOrderInput,
         ordersArray:state.orders.ordersArray,
-        searching:state.orders.searching
+        searching:state.orders.searching,
+        appointment:state.appointment.appointment,
+        timeArray:state.appointment.timeArray
     }
 };
 
@@ -212,7 +242,14 @@ const mapDispatchToProps = {
     getUsers,
     getOrders,
     changeInputFindOrder,
-    findOrdersArray
+    findOrdersArray,
+    setAppointmentSpec,
+    setAppointmentShedule,
+    setAppointmentDoctor,
+    clearAppointment,
+    setAppointmentTime,
+    setAppointmentComment,
+    deleteOrder
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(Admin)

src/components/Admin/ChangeOrder.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import {CustomSelect} from "../hooks/select";
+import Calendar from "../Calendar";
+
+class ChangeOrder extends React.Component {
+    state = {
+        order: {
+            spec: '',
+            doctor: '',
+            time: '',
+            comment: '',
+            orderNumber: null,
+            user: '',
+        },
+        flag: false,
+    };
+
+    componentDidMount() {
+        this.setState({
+            order: {
+                spec: this.props.order.spec,
+                doctor: this.props.order.doctor,
+                time: this.props.order.time,
+                comment: this.props.order.comment,
+                orderNumber: this.props.order.orderNumber,
+                date: this.props.order.date.split('T')[0],
+                user: this.props.order.user,
+            }
+        });
+    }
+
+    changeOrder = () => {
+        this.setState({flag: !this.state.flag})
+    };
+
+    setDoctor = (e) => {
+        this.props.setAppointmentDoctor(this.props.doctors.find(el => el.name === e)._id)
+    };
+
+    setSpec = (e) => {
+        this.props.setAppointmentSpec({services: this.props.services, data: e})
+    };
+
+    setShedule = (e) => {
+        this.props.setAppointmentShedule({
+            data: e.target.id,
+            services: this.props.services,
+            doctors: this.props.doctors
+        })
+    };
+
+    setTime = (e) => {
+        this.props.setAppointmentTime(e.target.value)
+    };
+
+    setComment = (e) => {
+        this.props.setAppointmentComment(e.target.value)
+    };
+
+    deleteAndPostNewOrder = () => {
+        this.props.deleteOrder({
+            id: this.props.order._id,
+            newOrder: {
+                spec: this.props.appointment.specId,
+                doctor: this.props.appointment.doctorId,
+                shedule: this.props.appointment.sheduleId,
+                time: this.props.appointment.time,
+                comment: this.props.appointment.comment,
+                orderNumber: this.state.order.orderNumber,
+                user:this.state.order.user._id
+            }
+        })
+    };
+
+    render() {
+        const {
+            doctors,
+            appointment,
+            timeArray
+        } = this.props;
+        console.log(this.props, this.state, appointment);
+        return (
+            <>
+                <div style={{
+                    position: 'absolute',
+                    right: '0',
+                    left: '0',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    backgroundColor: 'black',
+                    margin: '5% auto',
+                    width: '80%',
+                    fontSize: '12px',
+                    zIndex: '2'
+                }}>
+
+                    <input readOnly={true} id={this.state.order.orderNumber}
+                           defaultValue={this.state.order.orderNumber}
+                    />
+                    <input readOnly={true} id={this.state.order.spec._id}
+                           defaultValue={this.state.order.spec.name}
+                    />
+                    <input readOnly={true} id={this.state.order.doctor._id}
+                           defaultValue={this.state.order.doctor.name}
+                    />
+                    <input readOnly={true} id={this.state.order.user._id}
+                           defaultValue={this.state.order.user.email}
+                    />
+                    <input readOnly={true} id={this.state.order.date}
+                           defaultValue={this.state.order.date}
+                    />
+                    <input readOnly={true} id={this.state.order.time}
+                           defaultValue={this.state.order.time}
+                    />
+                    <input readOnly={true} id={this.state.order.comment}
+                           defaultValue={this.state.order.comment}
+                    />
+                    <button onClick={this.changeOrder}>Change Order</button>
+                    {this.state.flag &&
+                    <div>
+                        <input readOnly={true} id={this.state.order.orderNumber}
+                               defaultValue={this.state.order.orderNumber}
+                        />
+                        <CustomSelect
+                            label="Выбор врача"
+                            emptyLine={false}
+                            options={doctors}
+                            clickOptionEvent={this.setDoctor}
+                        />
+                        {appointment.doctorId &&
+                            <CustomSelect
+                                label="Выбор услуги"
+                                emptyLine={false}
+                                options={appointment.doctorId ? doctors.find(el => el._id === appointment.doctorId).speciality : []}
+                                clickOptionEvent={this.setSpec}
+                            />
+                        }
+                        {appointment.specId &&
+                        <Calendar
+                            doctor={doctors.find(el => el._id === appointment.doctorId)}
+                            action={this.setShedule}
+                        />
+                        }
+                        {appointment.sheduleId && (
+                            <div className="appointment-time">
+                                <div className="btn-box">
+                                    {timeArray.map((el, index) => (
+                                        <div className="radio-btn" key={Object.keys(el)}>
+                                            <input
+                                                type="radio"
+                                                className="radio"
+                                                name="choise-time"
+                                                id={index}
+                                                onChange={this.setTime}
+                                                value={Object.keys(el)}
+                                            />
+                                            <label htmlFor={index}>{Object.keys(el)}</label>
+                                        </div>
+                                    ))}
+                                </div>
+                                {appointment.time && (
+                                    <textarea
+                                        className="appointment comment"
+                                        rows="2"
+                                        placeholder="Добавить комментарий "
+                                        onChange={this.setComment}
+                                    />
+                                )}
+                            </div>
+                        )}
+                        {appointment.time &&
+                        <button className="btn link" onClick={this.deleteAndPostNewOrder}>Подтвердите запись
+                        </button>
+                        }
+                    </div>
+                    }
+                </div>
+
+                <div className="wrap-check-off" onClick={this.props.clearOrder}></div>
+            </>
+        )
+    }
+}
+
+export default ChangeOrder;

src/components/Admin/Orders.js

@@ -1,11 +1,19 @@
 import React, {Component} from 'react';
 import {Link} from 'react-router-dom'
-
+import ChangeOrder from "./ChangeOrder";
 class Orders extends Component {
+    state={
+        order:null,
+    };
 
     componentDidMount() {
         this.props.getUsers();
-        this.props.getOrders({doctors:this.props.doctors,services:this.props.services,users:this.props.users});
+
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if(this.props.users.length > 0 && this.props.orders.length === 0)
+            this.props.getOrders({doctors:this.props.doctors,services:this.props.services,users:this.props.users});
     }
 
     changeInputFindOrder = (e) => {
@@ -22,10 +30,46 @@ class Orders extends Component {
         }
     };
 
+    emailPressed = (e) => {
+        this.props.changeInputFindOrder(e.target.innerText);
+        this.findOrders()
+    };
+
+    changeOrder = (e) => {
+        this.setState({
+            order:!this.state.order ? this.props.orders.find(el => el._id === e.target.id) : null
+        })
+    };
+
     render() {
-        const{findOrderInput,ordersArray,searching,orders} = this.props;
-        console.log(this.props);
+        const{findOrderInput,ordersArray,searching,orders,doctors,services,
+            appointment,
+            timeArray,
+            setAppointmentSpec,
+            setAppointmentShedule,
+            setAppointmentDoctor,
+            clearAppointment,
+            setAppointmentTime,
+            setAppointmentComment,
+            deleteOrder
+        } = this.props;
         return (
+            <>
+                {this.state.order && <ChangeOrder
+                    doctors={doctors}
+                    services={services}
+                    order={this.state.order}
+                    clearOrder={this.changeOrder}
+                    appointment={appointment}
+                    timeArray={timeArray}
+                    setAppointmentSpec={setAppointmentSpec}
+                    setAppointmentShedule={setAppointmentShedule}
+                    setAppointmentDoctor={setAppointmentDoctor}
+                    clearAppointment={clearAppointment}
+                    setAppointmentTime={setAppointmentTime}
+                    setAppointmentComment={setAppointmentComment}
+                    deleteOrder={deleteOrder}
+                />}
             <div className = "orders-container">
                 <div className = "orders-item find-order">
                     <input className = " appointment admin-form" type="text" onKeyDown={this.enterPressed} onChange={this.changeInputFindOrder}/>
@@ -36,15 +80,15 @@ class Orders extends Component {
                     {ordersArray.map(el => (
                         <div className = "order"  key={el._id}>
                             <div className = "order-date">
-                                <Link to={`/order/${el._id}`} className = "order-info">{el.orderNumber}</Link>
+                                <Link onClick={this.changeOrder} id={el._id} className = "order-info">{el.orderNumber}</Link>
                                 <p>{el.date.split('T')[0]}</p>
                                 <p>{el.time}</p>
                             </div>
                             <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>
+                                    <Link to={`/user/${el.user._id}`} className = "order-info">{`${el.user.email}`}</Link>
+                                    <Link to={`/doctors/${el.doctor._id}/false`} className = "order-info">{el.doctor.name}</Link>
+                                    <Link to={`/services/${el.spec._id}/false`} className = "order-info">{el.spec.name}</Link>
                                 </div>                                
                             </div>
                         </div>
@@ -57,21 +101,22 @@ class Orders extends Component {
                     {orders.map(el => (
                         <div  className = "order"  key={el._id} >
                             <div className = "order-date">
-                                <Link to={`/order/${el._id}`} className = "order-info">{el.orderNumber}</Link>
+                                <Link onClick={this.changeOrder} id={el._id} className = "order-info">{el.orderNumber}</Link>
                                 <p>{el.date.split('T')[0]}</p>
                                 <p>{el.time}</p>
                             </div>
                             <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>
+                                    <Link onClick={this.emailPressed} className = "order-info">{`${el.user.email}`}</Link>
+                                    <Link to={`/doctors/${el.doctor._id}/false`} className = "order-info">{el.doctor.name}</Link>
+                                    <Link to={`/services/${el.spec._id}/false`} className = "order-info">{el.spec.name}</Link>
                                 </div>
                             </div>
                         </div>
                     ))}
                 </div>
             </div>
+                </>
         );
     }
 }

src/components/services/Services.js

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

src/components/specialists/Doctors.js

@@ -13,7 +13,7 @@ export class Doctors extends React.Component {
                             data.map(el => (
                                 <div className="item"  key = {el._id} >
                                     <div className="photo">
-                                        <Link to = {`/doctors/${el._id}`} >
+                                        <Link to = {`/doctors/${el._id}/true`} >
                                             <img src= {el.photo} alt= {el.name}/>
                                             <div className="hover-block">
                                                 <div className = "btn link more">Подробнее ... </div>

src/components/specialists/MoreInfo.js

@@ -15,14 +15,14 @@ export class MoreInfo extends React.Component {
                     <div className = "info-wrap">
                         <div className="info">
                             <div className="info-item">
-                                <img src={`.${doctor.photo}`} alt={doctor.name}/>
+                                <img src={`../.${doctor.photo}`} alt={doctor.name}/>
                             </div>
                              <div className="info-item info-desc">
                                  <h3> {doctor.name} </h3>
                                 <p className = "highlights">{doctor.profession}</p>
                                 <p className = "highlights">Опыт работы более {new Date().toISOString().split('T')[0].split('-')[0] - doctor.experience.split('T')[0].split('-')[0]}  лет</p>
                                 {doctor.skillsDescription.split ("<br>").map ( (el, index) => (  <p key= {index}> { el } </p>)  ) }
-                                <Link to={`/appointment/${doctor._id}`} className = "btn link">Записаться на приём</Link>
+                                 {match.params.flag === 'true' && <Link to={`/appointment/${doctor._id}`} className = "btn link">Записаться на приём</Link>}
                              </div>
                         </div>
                     </div>}
@@ -30,11 +30,10 @@ export class MoreInfo extends React.Component {
                     {service  &&
                     <div  className = "info-wrap">
                         {service.name}
-
                         <p>Duration: {service.duration} h</p>
                         <p>{service.description}</p>
                         <p>Price: {service.price} грн.</p>
-                        <Link to={`/appointment/${service}`} className = "btn link admin">Записаться на приём</Link>
+                        {match.params.flag === 'true' && <Link to={`/appointment/${service._id}`} className = "btn link admin">Записаться на приём</Link>}
 
                     </div>}
                </div>

src/reducers/appointment.js

@@ -44,7 +44,11 @@ export const appointmentReducer = (state = defaultState, action) => {
                 ...state,
                 appointment:{
                     ...state.appointment,
-                    doctorId:action.payload
+                    doctorId:action.payload,
+                    specId:null,
+                    time:null,
+                    comment:null,
+                    sheduleId:null,
                 }
             };
         }

src/reducers/orders.js

@@ -1,4 +1,5 @@
 import * as types from '../actionsTypes/actionsTypes'
+import {sortFunc} from '../utils/sort'
 
 const defaultState = {
     orders:[],
@@ -24,14 +25,14 @@ export const ordersReducer = (state = defaultState, action) => {
             if(!isNaN(+state.findOrderInput)){
                 return {
                     ...state,
-                    ordersArray:state.orders.filter(el => el.orderNumber === +state.findOrderInput),
+                    ordersArray:state.orders.filter(el => el.orderNumber === +state.findOrderInput).sort(sortFunc('orderNumber')),
                     searching:true,
                 }
             }
             if(state.findOrderInput.includes('@')){
                 return {
                     ...state,
-                    ordersArray:state.orders.filter(el => el.user.email === state.findOrderInput),
+                    ordersArray:state.orders.filter(el => el.user.email === state.findOrderInput).sort(sortFunc('orderNumber')),
                     searching:true,
                 }
             }
@@ -68,7 +69,7 @@ export const ordersReducer = (state = defaultState, action) => {
             });
             return {
                 ...state,
-                orders: res
+                orders: res.sort(sortFunc('orderNumber'))
             };
         }
 
@@ -81,15 +82,35 @@ export const ordersReducer = (state = defaultState, action) => {
         }
 
         case types.USER_ORDERS: {
-            //  console.log(action.payload)
-            // console.log(state.orders)
-             const userOrderArray = state.orders.filter(userOrder => userOrder.user === action.payload._id)
-            //  console.log('userOrders',userOrderArray)
+             const userOrderArray = state.orders.filter(userOrder => userOrder.user === action.payload._id);
              return  {
                  ...state,
                  userOrdersArray:userOrderArray,
                 isFetching: false,}
         }
+
+        case types.DELETE_ORDER_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.DELETE_ORDER_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                orders:[],
+                isFetching: false
+            };
+        }
+
+        case types.DELETE_ORDER_REQUEST_FAIL : {
+            return {
+                ...state,
+                error:action.payload,
+                isFetching: false
+            }
+        }
                   
 
 

src/utils/formFields.js

@@ -398,15 +398,15 @@ export const route = [
 	},
 	{
 		id: 3,
-		exact: true,
-		path: "/doctors/:doctor",
+		exact: false,
+		path: "/doctors/:doctor/:flag",
 		protected: false,
 		component: MoreInfo
 	},
 	{
 		id: 4,
 		exact: true,
-		path: "/services/:service",
+		path: "/services/:service/:flag",
 		protected: false,
 		component: MoreInfo
 	},

src/utils/sort.js

@@ -0,0 +1,11 @@
+export const sortFunc = function (property) {
+    var sortOrder = 1;
+    if(property[0] === "-") {
+        sortOrder = -1;
+        property = property.substr(1);
+    }
+    return function (a,b) {
+        var result = (a[property] > b[property]) ? -1 : (a[property] < b[property]) ? 1 : 0;
+        return result * sortOrder;
+    }
+}