add cards-servises

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {connect} from 'react-redux'
+import {connect} from 'react-redux';
 import {Switch, Route} from "react-router-dom";
 // import { BrowserHistory } from 'react-history'
 
@@ -8,16 +8,17 @@ import {
     getServices,
 } from "./actions/actions";
 
-import Loader from "./components/loader"
-import Header from "./components/header/index"
+import Loader from "./components/loader";
+import Header from "./components/header/index";
 import Main from "./components/main/Main";
 import Doctors from "./components/specialists/Doctors";
-import Services from "./components/Services"
-import MoreInfo from "./components/specialists/MoreInfo"
+import Services from "./components/servises/Services";
+import Categories from "./components/servises/categories"
+import MoreInfo from "./components/specialists/MoreInfo";
 import Appointment from "./components/appointment/Appointment";
-import Reviews from "./components/Reviews"
-import Admin from './components/Admin/Admin'
-import Auth from './containers/auth'
+import Reviews from "./components/Reviews";
+import Admin from './components/Admin/Admin';
+import Auth from './containers/auth';
 import Footer from "./components/Footer";
 // import Calendar from "./components/Calendar"
 
@@ -27,7 +28,7 @@ export class App extends React.Component {
         this.props.getDoctors();
         this.props.getServices();
         
-        console.log (this.props.app)
+        // console.log (this.props.app)
         
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
@@ -53,7 +54,7 @@ export class App extends React.Component {
                         <Route exact path="/doctors" component={Doctors} />
                         <Route exact path="/services" component={Services} />
                         <Route exact path="/doctors/:doctor" component={MoreInfo} />
-                        <Route exact path="/services/:service" component={MoreInfo} />
+                        <Route exact path="/services/:service" component={Categories} />
                         <Route exact path="/reviews" component={Reviews}/>
                         <Route path="/admin/" component={Admin} />
                         <Route exact path="/appointment/:doctorId" component={Appointment}/>

src/components/Admin/ChangeServices-Doctors.js

@@ -47,7 +47,7 @@ export default class ChangeServicesDoctors extends React.Component {
                 </div>
 
                 <div className="admin-item">
-                    <select  className = "appointment admin-form"  onChange={(e)=>changeId(e.target.value)} defaultValue='choose item'>
+                    <select  className = "appointment admin-form"  onChange={(e)=>changeId(e.target.value)} defaultValue='Выбрать'>
                         <option disabled >Выбрать</option>
                         {
                             data.map(el=> (
@@ -87,7 +87,7 @@ export default class ChangeServicesDoctors extends React.Component {
                             <input
                                 className = "btn link"
                                 type='submit'
-                                value='Change Selected Item'
+                                value='Изменить выбранный элемент'
                             />
                         </form>
                     }

src/components/Admin/Shedule.js

@@ -26,7 +26,7 @@ export default class Shedule extends React.Component {
 
     render() {
         console.log ( this.props )
-        const { doctors, postNewShedule, sheduleMonthArray, setSheduleDoctor } = this.props;
+        const { doctors, postNewShedule,  setSheduleDoctor } = this.props;
         return (
             <div  className = "shedule-container" >
               
@@ -60,3 +60,4 @@ export default class Shedule extends React.Component {
         );
     }
 }
+// sheduleMonthArray,

src/components/Services.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import {Link} from 'react-router-dom'
-import {connect} from 'react-redux'
-
-export class Services extends React.Component {
-    render() {
-        const {data, categories} = this.props;
-
-        console.log ("data:", data);
-        console.log ("categories:", Object.values (categories))
-        // console.log ("this.props:", this.props.app)
-
-        return (
-            <div className="main">
-                <div className="wrapper">
-                    <div className = "doctors-wrap">
-                        { categories[0] &&
-                           categories.map ( el => 
-                                // el.map ( item => (
-                                //     <div key={item._id} className = "item">
-                                //         <p>{item.name}</p>
-                                //         <p>Длительность: {item.duration} ч.</p> 
-                                //         <p>{item.description}</p>
-                                //         <p>Цена: {item.price} грн.</p>
-                                //         <div>
-                                //         <Link to= {`/services/${item._id}`} className = "btn more "> Подробнее ... </Link>
-                                //         <button className = "btn link"> Записаться на приём </button>
-                                //     </div>
-                                // </div>
-                                // ))
-                                <p>{el}</p>
-                            )  
-                        }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = state => {
-    return {
-        app:state.app,
-        data:state.app.services,
-        categories:Object.keys (state.app.servicesArray)
-    }
-};
-
-const mapDispatchToProps = {
-
-};
-
-export default connect (mapStateToProps,mapDispatchToProps)(Services)
-
-
-

src/components/main/Main.js

@@ -36,8 +36,8 @@ export class Main extends React.Component {
                     </div>
                 </div>
 
-                    <div className="wrapper" id = "team">
-                        <Team doctorsArr = {this.props.app.doctors}/>
+                    <div className="wrapper"  id = "team">
+                        <Team doctorsArr = {this.props.app.doctors} />
                     </div>
 
                 <div className=" case" id = "banner">
@@ -47,7 +47,7 @@ export class Main extends React.Component {
                         </div>     
                  </div>
 
-                 <div className="wrapper" id = "about">
+                 <div className="wrapper"  id = "about">
                     <About/>
                  </div>
 

src/components/main/team.js

@@ -1,5 +1,5 @@
 import React from 'react';
-// import {Link} from 'react-router-dom';
+import {Link} from 'react-router-dom';
 // import Button from "../buttons/button";
 
 
@@ -7,7 +7,7 @@ import React from 'react';
 export default class Team extends React.Component {
     render( ) {
         const {doctorsArr } = this.props
-        console.log (doctorsArr)
+        // console.log (doctorsArr)
         return (
             <>
                 <h2>Наши врачи</h2>
@@ -15,12 +15,14 @@ export default class Team extends React.Component {
                     {doctorsArr.map  ( el => 
                          <div className="item"  key = {el._id} >
                              <div className="photo">
-                                 <img src= {el.photo} alt= {el.name}/>
-                                <div className="desc">
-                                    <h3>{el.name}</h3>
-                                    <p className="experience">Опыт работы {new Date().toISOString().split('T')[0].split('-')[0] - el.experience.split('T')[0].split('-')[0]} лет</p>
-                                    <p className="rank">{el.profession}</p>
-                                </div>
+                                <img src= {el.photo} alt= {el.name}/>
+                                <Link to = {`/doctors/${el._id}`}>
+                                    <div className="desc">
+                                        <h3>{el.name}</h3>
+                                        <p className="experience">Опыт работы {new Date().toISOString().split('T')[0].split('-')[0] - el.experience.split('T')[0].split('-')[0]} лет</p>
+                                        <p className="rank">{el.profession}</p>
+                                    </div>
+                                </Link>
                              </div>
                            
                              {/* <div className="link-box">

src/components/servises/Services.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {Link} from 'react-router-dom';
+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" >
+      
+                            { servArray.map ( (el, index )=> (
+                                <div className="service-type" key = {index}>                           
+                                        <Link to = {`/services/${el[0]}`} className = "categories-link" key = {index}>
+                                            <p>{el[0]}</p>
+                                        </Link>
+                                </div>
+                            ) ) 
+                            }
+                      
+                        </div> 
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        app:state.app,
+        // data:state.app.services,
+        categories:state.app.servicesArray
+    }
+};
+
+const mapDispatchToProps = {
+
+};
+
+export default connect (mapStateToProps,mapDispatchToProps)(Services)
+
+

src/components/servises/categories.js

@@ -0,0 +1,65 @@
+import React from 'react';
+
+// import {Link} from 'react-router-dom';
+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]];
+        })
+        const category = servArray.slice( 0, 1 )
+
+        // console.log ("data:", data);
+        // console.log ("categories:", Object.values (categories))
+        console.log ("servArray:", servArray)
+        console.log ("category:", category)
+        // console.log ("this.props:", this.props.app)
+
+        return (
+            <div className="main">
+                <div className="wrapper">
+                    <div className = "doctors-wrap">
+                        {  category.map (( el, index )=> (
+                            <div className = "serv-wrap" key = {index}>
+
+                                {   el[1].map ((item, index) => (
+
+                                    <div className = "servise-name" key = {index} >
+                                        <p>{item.name}</p>
+                                        <p>Длительность: {item.duration} ч.</p> 
+                                        <p>Цена: {item.price} грн.</p>
+                                        <div>
+                                            
+                                            <button className = "btn link "> Записаться на приём </button>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        ))
+                        }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        app:state.app,
+        // data:state.app.services,
+        categories:state.app.servicesArray
+    }
+};
+
+const mapDispatchToProps = {
+
+};
+
+export default connect (mapStateToProps,mapDispatchToProps)(Services)
+
+

src/style/all.scss

@@ -122,7 +122,7 @@ body {
 	}
 	img {
 		margin: 150px auto 30px;
-		max-width: 350px;
+		max-width: 300px;
 		@media (max-width: 768px) {
 			max-width: 200px;	
 		}
@@ -135,7 +135,7 @@ body {
 		padding: 35px;
 		line-height: 50px;
 		font-weight: bold;
-		margin: 70px auto 0;
+		margin: 30px auto 0;
 		text-align: center;
 		@media (max-width: 768px) {
 			font-size: 25px;
@@ -334,6 +334,10 @@ h2 {
 				align-items: center;
 				justify-content: center;
 			}
+			a {
+				color: $header-color;	
+				text-decoration: none;	
+			}
 	}
 	}
 }
@@ -567,10 +571,53 @@ aside {
 	}
 	.admin-form {
 		margin: 2px 0;
-
 	}
 	.admin-item {
 		width: 35%;
 		margin: 0 50px;
 	}
-}
+}
+
+// ______categories _________
+.services {
+	width: 100%;
+	min-height: 97vh;
+	.categories {
+		padding-top: 50px;
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;	
+		flex-wrap: wrap;
+		.service-type {
+			width: 35%;
+			.categories-link {
+				display: block;
+				border: 1px solid $hover-color;
+				border-radius: 3px;
+				margin: 15px;
+				padding: 10px;
+				text-decoration: none;
+				text-transform: uppercase;
+				font-weight: 700;
+				letter-spacing: 0.1em;
+				text-align: center;
+				color: $header-color;
+			}
+		}
+	}
+	
+}
+
+// ______services________
+	.serv-wrap {
+		width: 100%;
+
+		display: flex;
+		.servise-name {
+			border: 1px solid$hover-color;
+			margin: 10px;
+			min-width: 30%;
+			text-align: center;
+		}
+	}