Show cards and links in service navigator

Will show cards for the first 4 services and links for all.

Author: mmgoodnow

src/components/ServiceNavigator/ServiceCards.js

@@ -12,7 +12,7 @@ const ServiceCards = ({services}) =>
              className="card-img-top cover"/>
         <div className="card-body">
           <p className="card-text">
-            <Link to="/providers">{service.serviceName}</Link>
+            <Link to={`/providers/${service.id}`}>{service.serviceName}</Link>
           </p>
         </div>
       </div>

src/components/ServiceNavigator/ServiceLinks.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import {Link} from "react-router-dom";
+import "./index.css"
+
+const ServiceLinks = ({services}) =>
+  <div className="row">
+    {services.map(service =>
+      <div key={service.id} className="col-4 mb-3">
+        <Link to={`/providers/${service.id}`}>{service.serviceName}</Link>
+      </div>
+    )}
+  </div>;
+
+export default ServiceLinks

src/components/ServiceNavigator/index.css

@@ -3,6 +3,7 @@
 }
 
 .cover {
-    max-height: 15rem;
+    max-height: 13rem;
     object-fit: cover;
+    border-radius: 0.5rem;
 }

src/components/ServiceNavigator/index.js

@@ -5,6 +5,7 @@ import ServiceCategoryService from "../../services/ServiceCategoryService";
 import "./index.css"
 import ServiceCards from "./ServiceCards";
 import ServiceService from "../../services/ServiceService";
+import ServiceLinks from "./ServiceLinks";
 
 export default class ServiceNavigator extends React.Component {
 
@@ -41,7 +42,9 @@ export default class ServiceNavigator extends React.Component {
       // if switching ids then load the services for the new one
       this.loadServices("");
 
-    } else if (currentCatID && prevCatID) {
+    } else if (currentCatID && prevCatID
+      && this.state.serviceCategories.length
+      !== prevState.serviceCategories.length) {
       // if user selects a category then filters it out,
       // deselect that category
       const pred = cat => cat.id === Number(currentCatID);
@@ -93,7 +96,9 @@ export default class ServiceNavigator extends React.Component {
     </div>
     <div className="col-8">
       <h1>{this.currentServiceTitle()}</h1>
-      <ServiceCards services={this.state.services}/>
+      <ServiceCards services={this.state.services.slice(0, 4)}/>
+      <hr/>
+      <ServiceLinks services={this.state.services}/>
     </div>
   </div>;
 }