finished link from services / finished link from main page/

.idea/workspace.xml

@@ -3,7 +3,11 @@
   <component name="ChangeListManager">
     <list default="true" id="a8a32a88-c432-4104-a927-0d3d1c1c21be" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/reducers/auth.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/reducers/auth.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/appointment/Appointment.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/appointment/Appointment.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/main/Main.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/main/Main.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/services/Services.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/services/Services.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/specialists/Doctors.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/specialists/Doctors.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/utils/formFields.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/formFields.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -14,6 +18,7 @@
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
+  <component name="ProjectId" id="1PgjVcXUo8lkLGSSwuuT3NSaMDi" />
   <component name="PropertiesComponent">
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
@@ -71,10 +76,22 @@
       <option name="presentableId" value="Default" />
       <updated>1562445740358</updated>
       <workItem from="1562445741612" duration="45849000" />
+      <workItem from="1566302661790" duration="666000" />
     </task>
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="1" />
   </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
 </project>

src/components/appointment/Appointment.js

@@ -21,7 +21,11 @@ export class Appoint extends React.Component {
     };
 
     componentDidMount() {
-        this.props.setAppointmentDoctor(this.props.match.params.doctorId)
+        this.props.setAppointmentDoctor(this.props.match.params.doctorId);
+        this.props.setAppointmentSpec({
+            data:this.props.match.params.serviceId,
+            services:this.props.services
+        })
     }
 
     componentWillUnmount() {

src/components/main/Main.js

@@ -21,7 +21,7 @@ export class Main extends React.Component {
                     <ul className="sidebar-ul">
                         <li className="sidebar-item"><Scrollchor to="#" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>
                         <li className="sidebar-item"><Scrollchor to="#team" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>
-                        <li className="sidebar-item"><Scrollchor to="#banner" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>
+                        {/*<li className="sidebar-item"><Scrollchor to="#banner" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>*/}
                         <li className="sidebar-item"><Scrollchor to="#about" className="nav-link"><span className="icon-lens"></span></Scrollchor></li>
                     </ul>
                 </aside>
@@ -31,7 +31,7 @@ export class Main extends React.Component {
                                 <div className="title-box">
                                     <img className = "logotype" src="./images/logo.png" alt=""/>
                                     <h1>Стоматология для всей семьи</h1>
-                                    <Link to={ `/appointment` } className = "btn ">Записаться на приём</Link>
+                                    <Link to={ `/doctors` } className = "btn ">Записаться на приём</Link>
                                 </div>
                     </div>
                 </div>
@@ -40,12 +40,12 @@ export class Main extends React.Component {
                         <Team doctorsArr = {this.props.app.doctors} />
                     </div>
 
-                <div className=" case" id = "banner">
-                        <img className = "banner" src="./images/medical.jpeg" alt="medical"/>
-                        <div className="button-box">
-                        <Link to={`/appointment`} className = "btn">Записаться на приём</Link>
-                        </div>     
-                 </div>
+                {/*<div className=" case" id = "banner">*/}
+                {/*        <img className = "banner" src="./images/medical.jpeg" alt="medical"/>*/}
+                {/*        <div className="button-box">*/}
+                {/*        <Link to={`/appointment`} className = "btn">Записаться на приём</Link>*/}
+                {/*        </div>     */}
+                {/* </div>*/}
 
                  <div className="wrapper"  id = "about">
                     <About/>

src/components/services/Services.js

@@ -5,7 +5,7 @@ import {connect} from "react-redux";
 
 export class Services extends React.Component {
     render() {
-        const {categories} = this.props;
+        const {categories,doctors} = this.props;
         return (
             <div className="main">
                 <div className="wrapper">
@@ -23,7 +23,7 @@ export class Services extends React.Component {
                                             <p>{item.name}</p>
                                             <p>Стоимость: {item.price} грн.</p>
                                             <div>
-                                                <Link to={`/appointment/${item._id}`}
+                                                <Link to={`/appointment/${doctors.find(el => el.speciality.find(serv => serv._id === item._id))._id}/${item.name}`}
                                                       className="btn service-btn"> Записаться </Link>
                                             </div>
                                         </div>
@@ -41,7 +41,8 @@ export class Services extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        categories: state.services.categories
+        categories: state.services.categories,
+        doctors:state.app.doctors
     };
 };
 

src/components/specialists/Doctors.js

@@ -25,7 +25,7 @@ export class Doctors extends React.Component {
                                         <h3>{el.name}</h3>
                                         <p className="rank">{el.profession}</p>
                                         <div className="link-box">
-                                            <Link to={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
+                                            <Link to={`/appointment/${el._id}/false`} className = "btn link ">Записаться на приём</Link>
                                         </div>     
                                     </div>
 

src/utils/formFields.js

@@ -418,8 +418,8 @@ export const route = [
   },
   {
     id: 7,
-    exact: true,
-    path: "/appointment/:doctorId",
+    exact: false,
+    path: "/appointment/:doctorId/:serviceId",
     protected: true,
     component: Appointment
   },