add main page; add folder 'actionTypes'

db.json

@@ -383,64 +383,249 @@
 
 "services": [
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
+    "description": "Первичное эндодонтическое лечение зуба",
+    "duration": 1,
+    "name": "Эндодонтическое лечение с помощью микроскопа",
+    "price": 3560
   },
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
+    "description": "Удаление штифта из корневого канала",
+    "duration": 1,
+    "name":  "Эндодонтическое лечение с помощью микроскопа",
+    "price": 596
   },
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
+    "description": "Удаление чужеродного инструмента из корневого канала",
+    "duration": 2,
+    "name":  "Эндодонтическое лечение с помощью микроскопа",
+    "price": 1490
   },
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
+    "description": "Повторное эндодонтическое лечение зуба",
+    "duration": 2,
+    "name":  "Эндодонтическое лечение с помощью микроскопа",
+    "price": 3960
   },
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
+    "description": "Поиск и прохождение 1 корневого канала",
+    "duration": "1",
+    "name":  "Эндодонтическое лечение с помощью микроскопа",
+    "price": 1600
   },
+
+
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
+    "description": "Комплексная чистка зубов",
+    "duration": 2,
+    "name": "Лечение пародонтита",
+    "price": 945
   },
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
+    "description": "Вектор-терапия (полный курс)",
+    "duration": 3,
+    "name": "Лечение пародонтита",
+    "price": 3300
   },
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
+    "description": "Плазмолифтинг",
+    "duration": 1,
+    "name": "Лечение пародонтита",
+    "price": 1970
   },
   {
-    "description": "",
-    "duration": "",
-    "name": "",
-    "price": ""
-  }
-]
+    "description": "Закрытый кюретаж зубов",
+    "duration": 2,
+    "name": "Лечение пародонтита",
+    "price": 396
+  },
 
 
+  {
+    "description": "Коронка пластмассовая",
+    "duration": 1,
+    "name": "Протезирование",
+    "price": 590
+  },
+  {
+    "description": "Коронка металлокерамическая",
+    "duration": 1,
+    "name": "Протезирование",
+    "price":  4960
+  },
+  {
+    "description": "Коронка керамическая, безметалловая",
+    "duration": 2,
+    "name": "Протезирование",
+    "price": 6650
+  },
+  {
+    "description": "Винир керамический",
+    "duration": 2,
+    "name": "Протезирование",
+    "price": 7400
+  },
+  {
+    "description": "Люминиры",
+    "duration": 2,
+    "name": "Протезирование",
+    "price": 15500
+  },
+  {
+    "description": "Изготовление протеза",
+    "duration": 1,
+    "name": "Протезирование",
+    "price": 6750
+  },
+  {
+    "description": "Бюгельный протез",
+    "duration": 3,
+    "name": "Протезирование",
+    "price": 12600
+  },
 
 
+  {
+    "description": "Брекет-система (1 челюсть)",
+    "duration": 1,
+    "name": "Ортодонтия",
+    "price": 11800
+  },
+  {
+    "description": "Пластинка ортодонтическая на одну челюсть",
+    "duration": 1,
+    "name": "Ортодонтия",
+    "price": 4200
+  },
+  {
+    "description": "Елайнер-капа - 1 челюсть (10 кап)",
+    "duration": 2,
+    "name": "Ортодонтия",
+    "price": 19800
+  },
+
+
+  {
+    "description": "Удаление зуба",
+    "duration": 1,
+    "name": "Хирургия",
+    "price": 490
+  },
+  {
+    "description": "Удаление кисты",
+    "duration": 2,
+    "name": "Хирургия",
+    "price": 2800
+  },
+  {
+    "description": "Закрытие рецессии десны",
+    "duration": 2,
+    "name": "Хирургия",
+    "price": 2350
+  },
+
+
+  {
+    "description": "Пластика десны (в области 1-3 зубов)",
+    "duration": 2,
+    "name": "Хирургическая пародонтология",
+    "price": 970
+  },
+  {
+    "description": "Подрезание уздечки с помощью лазера",
+    "duration": 1,
+    "name": "Хирургическая пародонтология",
+    "price": 1700
+  },
+  {
+    "description": "Открытый кюретаж в области 1 зуба",
+    "duration": 2,
+    "name": "Хирургическая пародонтология",
+    "price": 980
+  },
+
+
+  {
+    "description": "Установка импланта",
+    "duration": 2,
+    "name": "Имплантация",
+    "price": 7656
+  },
+  {
+    "description": "Синус-лифтинг",
+    "duration": 2,
+    "name": "Имплантация",
+    "price": 3500
+  },
+
+
+  {
+    "description": "Консультация (осмотр, рекомендации) с составлением плана лчения",
+    "duration": 2,
+    "name": "Детская стоматология",
+    "price": 396
+  },
+  {
+    "description": "Психологическая адаптация (от 30 мн)",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 190
+  },
+  {
+    "description": "Цифровая рентгенография (в обл. 1-3 зубов)",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 145
+  },
+  {
+    "description": "Оказание помощи при острой боли",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 670
+  },
+  {
+    "description": "Медикаментозная обработка корневого канала",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 322
+  },
+  {
+    "description": "Пломбировка одного корневого канала молочного, постоянного зуба",
+    "duration": 2,
+    "name": "Детская стоматология",
+    "price": 320
+  },
+  {
+    "description": "Временная пломба",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 230
+  },
+  {
+    "description": "Пломба",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 965
+  },
+  {
+    "description": "Гигиеническая чистка ультразвуком (1 челюсть)",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 520
+  },
+  {
+    "description": "Удаление зуба",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 345
+  },
+  {
+    "description": "Общая анестезия – седация (медикаментозный сон ) (1 час)",
+    "duration": 1,
+    "name": "Детская стоматология",
+    "price": 1950
+  }
+]
+
 
 
 }

public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Royal Dental</title>
+    <title>Art Dental studio</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux'
 import {Switch, Route} from "react-router-dom";
 // import axios from "axios";
 
-import {getDoctors,getServices,getDoctorsRequest} from "./store/app/actions";
+import {getDoctors,getServices, getDoctorsRequest, postServices} from "./store/app/actions";
 
 import Header from "./components/header/index"
 import Footer from "./components/Footer";
@@ -17,14 +17,22 @@ export class App extends React.Component {
 
     componentDidMount() {
         this.props.getDoctors();
-        this.props.getServices( )
+        this.props.getServices( );
+        this.props.postServices()
      
-        fetch("https://api-clinics.herokuapp.com/api/v1/doctors", {
-            method: "GET",
-            credentials: "include"
-        })
-            .then(res => res.json())
-            .then(res => console.log (res))
+        // fetch("https://api-clinics.herokuapp.com/api/v1/doctors", {
+        //     method: "GET",
+        //     credentials: "include"
+        // })
+        //     .then(res => res.json())
+        //     .then(res => console.log (res))
+
+        // fetch("https://api-clinics.herokuapp.com/api/v1/doctors", {
+        //     method: "GET",
+        //     credentials: "include"
+        // })
+        //     .then(res => res.json())
+        //     .then(res => console.log (res))
 }
 
 
@@ -55,8 +63,9 @@ const mapStateToProps = state => {
 const mapDispatchToProps = {
     getDoctors,
     getServices,
-    getDoctorsRequest
-
+    getDoctorsRequest,
+    // postServicesRequest,
+    postServices
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(App)

src/components/main/Main.js

@@ -1,6 +1,6 @@
 import React from 'react';
 // import {Link} from 'react-router-dom';
-import {postDoctors} from "../../store/app/actions"
+import {postDoctors, postServices} from "../../store/app/actions"
 
 import Button from "../buttons/button";
 import About from "./aboutUs";
@@ -8,17 +8,265 @@ import Team from "./team"
 
 import {connect} from 'react-redux'
 
-    const doctor = {
-        name: "Грегори Хаус",
-        photo: "./images/doctors/gregoryhaus.jpg",
-        experience: "1990-02-13",
-        profession: "Стоматолог-хирург",
-        speciality: [   ],
-        skillsDescription: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, magnam. Maxime nisi dolorum consectetur dolor impedit veniam placeat nobis repudiandae quibusdam aperiam!",
+    
+// const doctor = {
+//     name: "Грегори Хаус",
+//     photo: "./images/doctors/gregoryhaus.jpg",
+//     experience: "1990-02-13",
+//     profession: "Стоматолог-хирург",
+//     speciality: [   ],
+//     skillsDescription: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, magnam. Maxime nisi dolorum consectetur dolor impedit veniam placeat nobis repudiandae quibusdam aperiam!",
+// }
+
+const services  = [
+    {
+      "description": "Первичное эндодонтическое лечение зуба",
+      "duration": 1,
+      "name": "Эндодонтическое лечение с помощью микроскопа",
+      "price": 3560
+    },
+    {
+      "description": "Удаление штифта из корневого канала",
+      "duration": 1,
+      "name":  "Эндодонтическое лечение с помощью микроскопа",
+      "price": 596
+    },
+    {
+      "description": "Удаление чужеродного инструмента из корневого канала",
+      "duration": 2,
+      "name":  "Эндодонтическое лечение с помощью микроскопа",
+      "price": 1490
+    },
+    {
+      "description": "Повторное эндодонтическое лечение зуба",
+      "duration": 2,
+      "name":  "Эндодонтическое лечение с помощью микроскопа",
+      "price": 3960
+    },
+    {
+      "description": "Поиск и прохождение 1 корневого канала",
+      "duration": "1",
+      "name":  "Эндодонтическое лечение с помощью микроскопа",
+      "price": 1600
+    },
+  
+  
+    {
+      "description": "Комплексная чистка зубов",
+      "duration": 2,
+      "name": "Лечение пародонтита",
+      "price": 945
+    },
+    {
+      "description": "Вектор-терапия (полный курс)",
+      "duration": 3,
+      "name": "Лечение пародонтита",
+      "price": 3300
+    },
+    {
+      "description": "Плазмолифтинг",
+      "duration": 1,
+      "name": "Лечение пародонтита",
+      "price": 1970
+    },
+    {
+      "description": "Закрытый кюретаж зубов",
+      "duration": 2,
+      "name": "Лечение пародонтита",
+      "price": 396
+    },
+  
+  
+    {
+      "description": "Коронка пластмассовая",
+      "duration": 1,
+      "name": "Протезирование",
+      "price": 590
+    },
+    {
+      "description": "Коронка металлокерамическая",
+      "duration": 1,
+      "name": "Протезирование",
+      "price":  4960
+    },
+    {
+      "description": "Коронка керамическая, безметалловая",
+      "duration": 2,
+      "name": "Протезирование",
+      "price": 6650
+    },
+    {
+      "description": "Винир керамический",
+      "duration": 2,
+      "name": "Протезирование",
+      "price": 7400
+    },
+    {
+      "description": "Люминиры",
+      "duration": 2,
+      "name": "Протезирование",
+      "price": 15500
+    },
+    {
+      "description": "Изготовление протеза",
+      "duration": 1,
+      "name": "Протезирование",
+      "price": 6750
+    },
+    {
+      "description": "Бюгельный протез",
+      "duration": 3,
+      "name": "Протезирование",
+      "price": 12600
+    },
+  
+  
+    {
+      "description": "Брекет-система (1 челюсть)",
+      "duration": 1,
+      "name": "Ортодонтия",
+      "price": 11800
+    },
+    {
+      "description": "Пластинка ортодонтическая на одну челюсть",
+      "duration": 1,
+      "name": "Ортодонтия",
+      "price": 4200
+    },
+    {
+      "description": "Елайнер-капа - 1 челюсть (10 кап)",
+      "duration": 2,
+      "name": "Ортодонтия",
+      "price": 19800
+    },
+  
+  
+    {
+      "description": "Удаление зуба",
+      "duration": 1,
+      "name": "Хирургия",
+      "price": 490
+    },
+    {
+      "description": "Удаление кисты",
+      "duration": 2,
+      "name": "Хирургия",
+      "price": 2800
+    },
+    {
+      "description": "Закрытие рецессии десны",
+      "duration": 2,
+      "name": "Хирургия",
+      "price": 2350
+    },
+  
+  
+    {
+      "description": "Пластика десны (в области 1-3 зубов)",
+      "duration": 2,
+      "name": "Хирургическая пародонтология",
+      "price": 970
+    },
+    {
+      "description": "Подрезание уздечки с помощью лазера",
+      "duration": 1,
+      "name": "Хирургическая пародонтология",
+      "price": 1700
+    },
+    {
+      "description": "Открытый кюретаж в области 1 зуба",
+      "duration": 2,
+      "name": "Хирургическая пародонтология",
+      "price": 980
+    },
+  
+  
+    {
+      "description": "Установка импланта",
+      "duration": 2,
+      "name": "Имплантация",
+      "price": 7656
+    },
+    {
+      "description": "Синус-лифтинг",
+      "duration": 2,
+      "name": "Имплантация",
+      "price": 3500
+    },
+  
+  
+    {
+      "description": "Консультация (осмотр, рекомендации) с составлением плана лчения",
+      "duration": 2,
+      "name": "Детская стоматология",
+      "price": 396
+    },
+    {
+      "description": "Психологическая адаптация (от 30 мн)",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 190
+    },
+    {
+      "description": "Цифровая рентгенография (в обл. 1-3 зубов)",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 145
+    },
+    {
+      "description": "Оказание помощи при острой боли",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 670
+    },
+    {
+      "description": "Медикаментозная обработка корневого канала",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 322
+    },
+    {
+      "description": "Пломбировка одного корневого канала молочного, постоянного зуба",
+      "duration": 2,
+      "name": "Детская стоматология",
+      "price": 320
+    },
+    {
+      "description": "Временная пломба",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 230
+    },
+    {
+      "description": "Пломба",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 965
+    },
+    {
+      "description": "Гигиеническая чистка ультразвуком (1 челюсть)",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 520
+    },
+    {
+      "description": "Удаление зуба",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 345
+    },
+    {
+      "description": "Общая анестезия – седация (медикаментозный сон ) (1 час)",
+      "duration": 1,
+      "name": "Детская стоматология",
+      "price": 1950
     }
 
+]
+
+
 export class Main extends React.Component {
-   render() {
+ render() {
 
         return (
             <main className = "main">
@@ -28,7 +276,8 @@ export class Main extends React.Component {
                                     <img className = "logotype" src="./images/logo.png" alt=""/>
                                     <h1>Стоматология для всей семьи</h1>
                                     <Button className = "btn" text = "Записаться на приём" 
-                                        onClick = { ( ) => { this.props.postDoctors (doctor) } } />
+                                        onClick = { ( ) => { services.forEach ( el => this.props.postServices  ( el )  ) } } 
+                                        />
                                 </div>
                         </div>
                 </div>
@@ -42,7 +291,7 @@ export class Main extends React.Component {
                         </div>     
                  </div>
                  <div className="wrapper">
-                    <Team doctorsArr = {this.props.app}/>
+                    <Team doctorsArr = {this.props.app.doctors}/>
                  </div>
 
             </main>
@@ -52,13 +301,14 @@ export class Main extends React.Component {
 
     const mapStateToProps = state => {
         return {
-            app:state.app.doctors,
-            
+            app:state.app
+            // app:state.app.services
         }
     };
     
     const mapDispatchToProps = {
-        postDoctors
+        postDoctors,
+        postServices
     };
     
     export default connect (mapStateToProps,mapDispatchToProps)(Main)

src/components/main/team.js

@@ -9,17 +9,17 @@ export default class Team extends React.Component {
         const {doctorsArr } = this.props
         return (
             <>
-            <h2>Наши врачи</h2>
-                <div className="team-container">
+                <h2>Наши врачи</h2>
+                <div className = "team-container">
                     {doctorsArr.map  ( el => 
-                        <div className="item"  key = {el.id} >
-                            <div className="photo"><img src= {el.photo} alt= {el.name}/></div>
+                         <div className="item"  key = {el.id} >
+                             <div className="photo"><img src= {el.photo} alt= {el.name}/></div>
                             <h3>{el.name}</h3>
                             <div className="desc">
                                 <p className="experience">Опыт работы {el.experience} лет</p>
                                 <p className="rank">{el.rank}</p>
                             </div>
-                            <div className="link-box">
+                             <div className="link-box">
                                 <Link to = "/doctors" className = "btn link more">Подробнее ...</Link>
                                 <Link to = "/doctors" className = "btn link ">Записаться на приём</Link>
                             </div>

src/store/app/actionTypes.js

@@ -0,0 +1,15 @@
+export const GET_DOCTORS_REQUEST = "GET_DOCTORS_REQUEST";
+export const GET_DOCTORS_REQUEST_SUCCESS = "GET_DOCTORS_REQUEST_SUCCESS";
+export const GET_DOCTORS_REQUEST_FAIL = "GET_DOCTORS_REQUEST_FAIL";
+
+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 POST_DOCTORS_REQUEST = "POST_DOCTORS_REQUEST";
+export const POST_DOCTORS_REQUEST_SUCCESS = "POST_DOCTORS_REQUEST_SUCCESS";
+export const POST_DOCTORS_REQUEST_FAIL = "POST_DOCTORS_REQUEST_FAIL";
+
+export const POST_SERVICES_REQUEST = "POST_SERVICES_REQUEST";
+export const POST_SERVICES_REQUEST_SUCCESS = "POST_SERVICES_REQUEST_SUCCESS";
+export const POST_SERVICES_REQUEST_FAIL = "POST_SERVICES_REQUEST_FAIL";

src/store/app/actions.js

@@ -1,14 +1,7 @@
-export const GET_DOCTORS_REQUEST = "GET_DOCTORS_REQUEST";
-export const GET_DOCTORS_REQUEST_SUCCESS = "GET_DOCTORS_REQUEST_SUCCESS";
-export const GET_DOCTORS_REQUEST_FAIL = "GET_DOCTORS_REQUEST_FAIL";
+// import axios from "axios";
+import * as types from "./actionTypes";
 
-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 POST_DOCTORS_REQUEST = "POST_DOCTORS_REQUEST";
-export const POST_DOCTORS_REQUEST_SUCCESS = "POST_DOCTORS_REQUEST_SUCCESS";
-export const POST_DOCTORS_REQUEST_FAIL = "POST_DOCTORS_REQUEST_FAIL";
 
 const URL = "https://team-app-28f4a.firebaseio.com/";
 // https://api-clinics.herokuapp.com/api/v1/services"
@@ -16,17 +9,17 @@ const URL = "https://team-app-28f4a.firebaseio.com/";
 // -----------------------------------------------------------------------------------------------------------------
 
 export const getDoctorsRequest = payload => ({
-    type: GET_DOCTORS_REQUEST,
+    type: types.GET_DOCTORS_REQUEST,
     payload
 });
 
 const getDoctorsRequestSuccess = payload => ({
-    type: GET_DOCTORS_REQUEST_SUCCESS,
+    type: types.GET_DOCTORS_REQUEST_SUCCESS,
     payload
 });
 
 const getDoctorsRequestFail = payload => ({
-    type: GET_DOCTORS_REQUEST_FAIL,
+    type: types.GET_DOCTORS_REQUEST_FAIL,
     payload
 });
 
@@ -42,18 +35,46 @@ 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.json`, {
+        method: "GET",
+        // credentials: "include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(getServicesRequestSuccess(res)))
+        .catch(err => dispatch(getServicesRequestFail(err)));
+};
+
+
+// _____________________________________________________________________________________
 export const postDoctorsRequest = payload => ({
-    type: POST_DOCTORS_REQUEST,
+    type: types.POST_DOCTORS_REQUEST,
     payload
 });
 
 const postDoctorsRequestSuccess = payload => ({
-    type: POST_DOCTORS_REQUEST_SUCCESS,
+    type: types.POST_DOCTORS_REQUEST_SUCCESS,
     payload
 });
 
 const postDoctorsRequestFail = payload => ({
-    type: POST_DOCTORS_REQUEST_FAIL,
+    type: types.POST_DOCTORS_REQUEST_FAIL,
     payload
 });
 
@@ -69,35 +90,42 @@ export const postDoctors = (payload) => dispatch => {
         body: JSON.stringify(payload)
     })
         .then(res => res.json())
-        .then(res =>console.log(res))
+        .then(res => dispatch(postDoctorsRequestSuccess(res)))
         .catch(err => dispatch(postDoctorsRequestFail(err)));
 };
 
 // -----------------------------------------------------------------------------------------------------------------
-const getServicesRequest = payload => ({
-    type: GET_SERVICES_REQUEST,
+
+export const postServicesRequest = payload => ({
+    type: types.POST_SERVICES_REQUEST,
     payload
 });
 
-const getServicesRequestSuccess = payload => ({
-    type: GET_SERVICES_REQUEST_SUCCESS,
+const postServicesRequestSuccess = payload => ({
+    type: types.POST_SERVICES_REQUEST_SUCCESS,
     payload
 });
 
-const getServicesRequestFail = payload => ({
-    type: GET_SERVICES_REQUEST_FAIL,
+const postServicesRequestFail = payload => ({
+    type: types.POST_SERVICES_REQUEST_FAIL,
     payload
 });
 
-export const getServices = () => dispatch => {
-    dispatch(getServicesRequest());
-    return fetch(`${URL}services.json`, {
-        method: "GET",
-        // credentials: "include"
+export const postServices = (payload) => dispatch => {
+    // console.log(payload)
+    dispatch(postServicesRequest());
+    return fetch("https://api-clinics.herokuapp.com/api/v1/services/:id ", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
     })
         .then(res => res.json())
-        .then(res => dispatch(getServicesRequestSuccess(res)))
-        .catch(err => dispatch(getServicesRequestFail(err)));
+        .then(res =>  dispatch(postServicesRequestSuccess(res)))
+        .catch(err => dispatch(postServicesRequestFail(err)))
 };
 
+// _____________________________________________________________
 

src/store/app/reducers.js

@@ -1,21 +1,4 @@
-import {
-    GET_DOCTORS_REQUEST,
-    GET_DOCTORS_REQUEST_SUCCESS,
-    GET_DOCTORS_REQUEST_FAIL,
-
-    GET_SERVICES_REQUEST,
-    GET_SERVICES_REQUEST_SUCCESS,
-    GET_SERVICES_REQUEST_FAIL,
-
-    POST_DOCTORS_REQUEST,
-    POST_DOCTORS_REQUEST_SUCCESS,
-    POST_DOCTORS_REQUEST_FAIL
-
-
-} from './actions'
-
-
-
+import * as types from './actionTypes'
 
 const defaultState = {
     doctors:[  ],
@@ -42,14 +25,14 @@ export const appReducer = (state = defaultState,action) => {
     switch (action.type) {
 // -----------------------------------------------------------------------------------------------------------------
 
-        case GET_DOCTORS_REQUEST : {
+        case types.GET_DOCTORS_REQUEST : {
             return {
                 ...state,
                 isFetching: true
             };
         }
 
-        case GET_DOCTORS_REQUEST_SUCCESS : {
+        case types.GET_DOCTORS_REQUEST_SUCCESS : {
             return {
                 ...state,
                 doctors:action.payload,
@@ -57,7 +40,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-        case GET_DOCTORS_REQUEST_FAIL : {
+        case types.GET_DOCTORS_REQUEST_FAIL : {
             return {
                 ...state,
                 error:action.payload,
@@ -67,14 +50,14 @@ export const appReducer = (state = defaultState,action) => {
 
 // -----------------------------------------------------------------------------------------------------------------
 
-        case GET_SERVICES_REQUEST : {
+        case types.GET_SERVICES_REQUEST : {
             return {
                 ...state,
                 isFetching: true
             };
         }
 
-        case GET_SERVICES_REQUEST_SUCCESS : {
+        case types.GET_SERVICES_REQUEST_SUCCESS : {
             return {
                 ...state,
                 services:action.payload,
@@ -82,7 +65,7 @@ export const appReducer = (state = defaultState,action) => {
             }
         }
 
-        case GET_SERVICES_REQUEST_FAIL : {
+        case types.GET_SERVICES_REQUEST_FAIL : {
             return {
                 ...state,
                 error:action.payload,
@@ -91,27 +74,51 @@ export const appReducer = (state = defaultState,action) => {
         }
 
 // -----------------------------------------------------------------------------------------------------------------
-case POST_DOCTORS_REQUEST : {
-    return {
-        ...state,
-        isFetching: true
-    };
-}
-
-case POST_DOCTORS_REQUEST_SUCCESS : {
-    return {
-        ...state,
-        isFetching: false
-    }
-}
+        case types.POST_DOCTORS_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
 
-case POST_DOCTORS_REQUEST_FAIL : {
-    return {
-        ...state,
-        error: action.payload,
-        isFetching: false
-    }
-}
+        case types.POST_DOCTORS_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                isFetching: false
+            }
+        }
+
+        case types.POST_DOCTORS_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
+
+// _______________________________________________________________________________
+
+        case types.POST_SERVICES_REQUEST : {
+            return {
+                ...state,
+                isFetching: true
+            };
+        }
+
+        case types.POST_SERVICES_REQUEST_SUCCESS : {
+            return {
+                ...state,
+                isFetching: false
+            }
+        }
+
+        case types.POST_SERVICES_REQUEST_FAIL : {
+            return {
+                ...state,
+                error: action.payload,
+                isFetching: false
+            }
+        }
 
 // _______________________________________________________________________________
 

src/style/all.scss

@@ -143,7 +143,7 @@ body {
 	font-weight: bold;
 	line-height: 35px;
 	border: none;
-	border-radius: 2px;
+	border-radius: 3px;
 	background-color:  $hover-color;
 	transition-duration: 0.4s;
 	&:hover {
@@ -170,7 +170,7 @@ h2  {
 	color: $main-color;
 	text-align: justify;
 	border-bottom: 1px solid $opacity-color;
-	padding-bottom: 50px;
+	padding: 15px 15px 50px;
 	@media (max-width: 768px) {
 		padding: 3px;
 		margin: 25px 10px;	
@@ -179,7 +179,7 @@ h2  {
 h2 {
 	// border: none;
 	font-size: 36px;
-	padding-bottom: 2px;
+	padding: 2px;
 }
 
 // second banner 
@@ -215,10 +215,10 @@ h2 {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	padding-bottom: 50px;
+	padding: 15px 5px 50px;
 
 	.item {
-		width: 25%;
+		width: 27%;
 		margin: 10px; 
 		text-align: center;
 		display: flex;
@@ -229,6 +229,9 @@ h2 {
 			overflow: hidden;
 			height: 45%;
 			border-radius: 5px;
+			img {
+				border-radius: 5px;
+			}
 		}
 		.link-box {
 			margin-top: 20px;