reworked services/categories to seperate action/reducer, some minor changes in components due to knew actions/reducers || cleared database of services, posted knew one with categories

db.json

@@ -380,7 +380,7 @@
                 "id": 6
             }
   ],
-  
+
   "services": [
     {
       "name": "Первичное эндодонтическое лечение зуба",
@@ -503,7 +503,7 @@
       "price": 19800
     },
   
-  
+
     {
       "name": "Удаление зуба",
       "duration": 1,
@@ -522,8 +522,8 @@
       "description": "Хирургия",
       "price": 2350
     },
-  
-  
+
+
     {
       "name": "Пластика десны (в области 1-3 зубов)",
       "duration": 2,

src/App.js

@@ -2,7 +2,8 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {Switch} from "react-router-dom";
 
-import {getDoctors, getServices} from "./actions/actions";
+import {getDoctors} from "./actions/actions";
+import {getServices, getCategories} from "./actions/services";
 import {getUser} from "./actions/auth"
 
 import Loader from "./components/loader";
@@ -18,6 +19,7 @@ export class App extends React.Component {
     componentDidMount() {
         this.props.getDoctors();
         this.props.getServices();
+        this.props.getCategories();
 
        if(localStorage.getItem('userId')) this.props.getUser()
 
@@ -66,6 +68,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = {
     getDoctors,
     getServices,
+    getCategories,
     getUser
 };
 

src/actions/actions.js

@@ -69,30 +69,30 @@ export const getDoctors = () => dispatch => {
 
 // -----------------------------------------------------------------------------------------------------------------
 
-const getServicesRequest = payload => ({
-    type: types.GET_SERVICES_REQUEST,
-    payload
-});
-
-const getServicesRequestSuccess = payload => ({
-    type: types.GET_SERVICES_REQUEST_SUCCESS,
-    payload
-});
-
-const getServicesRequestFail = payload => ({
-    type: types.GET_SERVICES_REQUEST_FAIL,
-    payload
-});
-
-export const getServices = () => dispatch => {
-    dispatch(getServicesRequest());
-    return fetch(`${URL}services`,{
-        credentials:"include"
-    })
-        .then(res => res.json())
-        .then(res => dispatch(getServicesRequestSuccess(res)))
-        .catch(err => dispatch(getServicesRequestFail(err)));
-};
+// const getServicesRequest = payload => ({
+//     type: types.GET_SERVICES_REQUEST,
+//     payload
+// });
+//
+// const getServicesRequestSuccess = payload => ({
+//     type: types.GET_SERVICES_REQUEST_SUCCESS,
+//     payload
+// });
+//
+// const getServicesRequestFail = payload => ({
+//     type: types.GET_SERVICES_REQUEST_FAIL,
+//     payload
+// });
+//
+// export const getServices = () => dispatch => {
+//     dispatch(getServicesRequest());
+//     return fetch(`${URL}services`,{
+//         credentials:"include"
+//     })
+//         .then(res => res.json())
+//         .then(res => dispatch(getServicesRequestSuccess(res)))
+//         .catch(err => dispatch(getServicesRequestFail(err)));
+// };
 
 // -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------

src/actions/services.js

@@ -0,0 +1,55 @@
+import * as types from "../actionsTypes/actionsTypes";
+
+const URL = "https://api-clinics.herokuapp.com/api/v1/";
+
+const getServicesRequest = payload => ({
+    type: types.GET_SERVICES_REQUEST,
+    payload
+});
+
+const getServicesRequestSuccess = payload => ({
+    type: types.GET_SERVICES_REQUEST_SUCCESS,
+    payload
+});
+
+const getServicesRequestFail = payload => ({
+    type: types.GET_SERVICES_REQUEST_FAIL,
+    payload
+});
+
+export const getServices = () => dispatch => {
+    dispatch(getServicesRequest());
+    return fetch(`${URL}services`,{
+        credentials:"include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(getServicesRequestSuccess(res)))
+        .catch(err => dispatch(getServicesRequestFail(err)));
+};
+
+
+
+const getCategoriesRequest = payload => ({
+    type: types.GET_CATEGORIES_REQUEST,
+    payload
+});
+
+const getCategoriesRequestSuccess = payload => ({
+    type: types.GET_CATEGORIES_REQUEST_SUCCESS,
+    payload
+});
+
+const getCategoriesRequestFail = payload => ({
+    type: types.GET_CATEGORIES_REQUEST_FAIL,
+    payload
+});
+
+export const getCategories = () => dispatch => {
+    dispatch(getCategoriesRequest());
+    return fetch(`${URL}category`,{
+        credentials:"include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(getCategoriesRequestSuccess(res)))
+        .catch(err => dispatch(getCategoriesRequestFail(err)));
+};

src/actionsTypes/actionsTypes.js

@@ -6,6 +6,10 @@ export const GET_SERVICES_REQUEST = "GET_SERVICES_REQUEST";
 export const GET_SERVICES_REQUEST_SUCCESS = "GET_SERVICES_REQUEST_SUCCESS";
 export const GET_SERVICES_REQUEST_FAIL = "GET_SERVICES_REQUEST_FAIL";
 
+export const GET_CATEGORIES_REQUEST = "GET_CATEGORIES_REQUEST";
+export const GET_CATEGORIES_REQUEST_SUCCESS = "GET_CATEGORIES_REQUEST_SUCCESS";
+export const GET_CATEGORIES_REQUEST_FAIL = "GET_CATEGORIES_REQUEST_FAIL";
+
 export const CHANGE_APPOINTMENT_SHEDULE= "CHANGE_APPOINTMENT_SHEDULE";
 export const CHANGE_APPOINTMENT_DOCTOR= "CHANGE_APPOINTMENT_DOCTOR";
 export const CHANGE_APPOINTMENT_TIME= "CHANGE_APPOINTMENT_TIME";

src/components/Admin/Admin.js

@@ -27,7 +27,6 @@ export class Admin extends React.Component {
     render() {
         const {
             doctors,
-            services,
             postNewShedule,
             postNewDoctor,
             postNewService,
@@ -35,6 +34,7 @@ export class Admin extends React.Component {
             changeServiceId
         } = this.props.app;
         const {
+            services,
             setSheduleDoctor,
             postShedule,
             changeInputValueDoctorForm,
@@ -94,6 +94,7 @@ export class Admin extends React.Component {
 const mapStateToProps = state => {
     return {
         app:state.app,
+        services: state.services.services
     }
 };
 

src/components/Admin/ChangeServices-Doctors.js

@@ -28,7 +28,10 @@ export default class ChangeServicesDoctors extends React.Component {
     };
 
     changeId = (e) => {
-        this.props.changeId(e.target.value)
+        this.props.changeId({
+            item:e.target.value,
+            data:this.props.data
+        })
     };
 
     render() {

src/components/Reviews.js

@@ -10,6 +10,8 @@ import {
 
 
 export class Reviews extends React.Component {
+
+
     render( ) {
         const {postNewDoctor,doctors,servicesArray} = this.props.app
         const servArray =  Object.keys(servicesArray).map(key => {

src/components/appointment/Appointment.js

@@ -29,7 +29,10 @@ export class Appoint extends React.Component {
     }
 
     setSpec = (e) => {
-        this.props.setAppointmentSpec({data: e, services: this.props.services})
+        this.props.setAppointmentSpec({
+            data: e,
+            services: this.props.services
+        })
     };
 
     setShedule = (e) => {
@@ -61,7 +64,6 @@ export class Appoint extends React.Component {
         if (appointment.specId) {
             spec = services.find(el => el._id === appointment.specId)
         }
-        console.log(appointment)
         return (
             <>
                 <div className="main">
@@ -150,7 +152,7 @@ const mapStateToProps = state => {
         appointment: state.appointment.appointment,
         timeArray: state.appointment.timeArray,
         doctors: state.app.doctors,
-        services: state.app.services
+        services: state.services.services
     };
 };
 

src/components/services/Services.js

@@ -1,61 +1,48 @@
 import React from "react";
 
 import {Link} from 'react-router-dom';
-import { connect } from "react-redux";
+import {connect} from "react-redux";
 
 export class Services extends React.Component {
-  render() {
-    const { categories } = this.props;
-    const servArray = Object.keys(categories).map(key => {
-      return [key, categories[key]];
-    });
-
-    // console.log ("data:", data);
-    // console.log ("categories:", Object.values (categories))
-    // console.log ("servArray:", servArray)
-    // console.log ("this.props:", this.props.app)
-
-    return (
-      <div className="main">
-        <div className="wrapper">
-          <div className="doctors-wrap  services">
-            <div className="categories" id="accordion">
-              {servArray.map((el, index) => (
-                <div className="service-type" key={index} id={`item${index}`}>
-                  <a   href={`#item${index}`} className="categories-link icon-angle-down"   key={index}>
-                    {el[0]}
-                  </a>
-                  {el[1].map((item, index) => (
-                    <div className="servise-name" key={index}>
-                      <p>{item.name}</p>
-                      {/* <p>Длительность: {item.duration} ч.</p>  */}
-                      <p>Стоимость: {item.price} грн.</p>
-                      <div>
-                        <Link to = {`/appointment/${el._id}`}  className="btn service-btn">  Записаться  </Link>
-                      </div>
+    render() {
+        const {categories} = this.props;
+        return (
+            <div className="main">
+                <div className="wrapper">
+                    <div className="doctors-wrap  services">
+                        <div className="categories" id="accordion">
+                            {categories.map(el => (
+                                <div className="service-type" key={el._id} id={`item${el._id}`}>
+                                    <a href={`#item${el._id}`} className="categories-link icon-angle-down" key={el._id}>
+                                        {el.name}
+                                    </a>
+                                    {el.services.map(item => (
+                                        <div className="servise-name" key={item._id}>
+                                            <p>{item.name}</p>
+                                            {/* <p>Длительность: {item.duration} ч.</p>  */}
+                                            <p>Стоимость: {item.price} грн.</p>
+                                            <div>
+                                                <Link to={`/appointment/${item._id}`}
+                                                      className="btn service-btn"> Записаться </Link>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            ))}
+                        </div>
                     </div>
-                  ))}
                 </div>
-              ))}
             </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
+        );
+    }
 }
 
 const mapStateToProps = state => {
-  return {
-    app: state.app,
-    // data:state.app.services,
-    categories: state.app.servicesArray
-  };
+    return {
+        categories: state.services.categories
+    };
 };
 
 const mapDispatchToProps = {};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Services);
+export default connect(mapStateToProps, mapDispatchToProps)(Services);

src/components/specialists/MoreInfo.js

@@ -47,7 +47,7 @@ export class MoreInfo extends React.Component {
 const mapStateToProps = state => {
     return {
         doctors:state.app.doctors,
-        services:state.app.services
+        services:state.services.services
     }
 };
 

src/reducers/index.js

@@ -4,6 +4,7 @@ import {appReducer} from "./reducers";
 import {calendarReducer} from "./calendar"
 import auth from './auth';
 import {appointmentReducer} from "./appointment";
+import {servicesReducer} from "./services";
 
 
 
@@ -11,5 +12,6 @@ export default combineReducers({
     app:appReducer,
     auth,
     calendar:calendarReducer,
-    appointment:appointmentReducer
+    appointment:appointmentReducer,
+    services:servicesReducer
 })

src/reducers/reducers.js

@@ -3,17 +3,7 @@ import * as types from '../actionsTypes/actionsTypes'
 import {postNewDoctorForm,postNewServiceForm} from '../utils/formFields'
 
 const defaultState = {
-    user:localStorage.getItem('id') ? localStorage.getItem('id') : null,
     doctors:[],
-    services:[],
-    servicesArray:{
-        'Хирургия':[],
-        'Детская стоматология':[],
-        'Ортодонтия':[],
-        'Терапия':[],
-        'Имплантология': [],
-        'Эндодонтия':[]
-    },
 
     orders:[],
     users:[],
@@ -68,13 +58,13 @@ export const appReducer = (state = defaultState,action) => {
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.CHANGE_SELECTED_DOCTOR_ID : {
-            let doctor = state.doctors.find(el => el.name === action.payload)
+            let doctor = action.payload.data.find(el => el.name === action.payload.item)
             let result = Object.keys(doctor).map(key => {
                 return [key, doctor[key]];
             });
             return {
                 ...state,
-                changeDoctorId: state.doctors.find(el => el.name === action.payload)._id,
+                changeDoctorId: action.payload.data.find(el => el.name === action.payload.item)._id,
                 postNewDoctor:state.postNewDoctor.map(el => result.find(item => item[0] === el.name) ? {
                     ...el,
                     value:result.find(item => item[0] === el.name)[1]
@@ -85,7 +75,7 @@ export const appReducer = (state = defaultState,action) => {
 // -----------------------------------------------------------------------------------------------------------------
 
         case types.CHANGE_SELECTED_SERVICE_ID : {
-            let service = state.services.find(el => el.name === action.payload)
+            let service = action.payload.data.find(el => el.name === action.payload.item)
             let result = Object.keys(service).map(key => {
                 return [key, service[key]];
             });
@@ -144,104 +134,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-// -----------------------------------------------------------------------------------------------------------------
-
-        case types.GET_SERVICES_REQUEST : {
-            return {
-                ...state,
-                isFetching: true
-            };
-        }
 
-        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
-            });
-                action.payload.services.map(el => {
-                    switch (el.description){
-                        case "Ортодонтия" : {
-                            return {
-                                ...state,
-                                servicesArray:{
-                                    ...state.servicesArray,
-                                    'Ортодонтия':state.servicesArray['Ортодонтия'].push(el)
-                                }
-                            }
-                        }
-                        case "Детская стоматология" : {
-                            return {
-                                ...state,
-                                servicesArray:{
-                                    ...state.servicesArray,
-                                    'Детская стоматология':state.servicesArray['Детская стоматология'].push(el)
-                                }
-                            }
-                        }
-                        case "Протезирование" : {
-                            return {
-                                ...state,
-                                servicesArray:{
-                                    ...state.servicesArray,
-                                    'Имплантология':state.servicesArray['Имплантология'].push(el)
-                                }
-                            }
-                        }
-                        case "Имплантация" : {
-                            return {
-                                ...state,
-                                servicesArray:{
-                                    ...state.servicesArray,
-                                    'Имплантология':state.servicesArray['Имплантология'].push(el)
-                                }
-                            }
-                        }
-                        case "Хирургия" : {
-                            return {
-                                ...state,
-                                servicesArray:{
-                                    ...state.servicesArray,
-                                    'Хирургия':state.servicesArray['Хирургия'].push(el)
-                                }
-                            }
-                        }
-                        case "Эндодонтическое лечение с помощью микроскопа" : {
-                            return {
-                                ...state,
-                                servicesArray:{
-                                    ...state.servicesArray,
-                                    'Эндодонтия':state.servicesArray['Эндодонтия'].push(el)
-                                }
-                            }
-                        }
-                        case "Лечение пародонтита" : {
-                            return {
-                                ...state,
-                                servicesArray:{
-                                    ...state.servicesArray,
-                                    'Терапия':state.servicesArray['Терапия'].push(el)
-                                }
-                            }
-                        }
-                        default: return el
-                    }
-                });
-
-            return {
-                ...state,
-                services:action.payload.services,
-                isFetching: false
-            }
-        }
-
-        case types.GET_SERVICES_REQUEST_FAIL : {
-            return {
-                ...state,
-                error:action.payload,
-                isFetching: false
-            }
-        }
 
 // -----------------------------------------------------------------------------------------------------------------
 // -----------------------------------------------------------------------------------------------------------------

src/reducers/services.js

@@ -0,0 +1,60 @@
+import * as types from '../actionsTypes/actionsTypes'
+
+const defaultState = {
+    services:[],
+    categories:[]
+};
+
+export const servicesReducer = (state = defaultState, action) => {
+    switch(action.type){
+
+        case types.GET_SERVICES_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.GET_SERVICES_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                services:action.payload.services,
+                isFetching: false
+            };
+        }
+
+        case types.GET_SERVICES_REQUEST_FAIL : {
+            return {
+                ...state,
+                error:action.payload,
+                isFetching: false
+            }
+        }
+
+        case types.GET_CATEGORIES_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.GET_CATEGORIES_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                categories:action.payload.categories,
+                isFetching: false
+            };
+        }
+
+        case types.GET_CATEGORIES_REQUEST_FAIL : {
+            return {
+                ...state,
+                error:action.payload,
+                isFetching: false
+            }
+        }
+
+        default:
+            return state
+    }
+};