Merge pull request #97 from sd19oracle/bugfixes

Fix service cards and register bugs

Author: mmgoodnow

src/App.js

@@ -48,7 +48,10 @@ export default class App extends Component {
             <Route
               path="/register"
               exact
-              component={Register}/>
+              render={({location, history}) =>
+                <Register history={history}
+                       location={location}
+                       setUser={this.setUser}/>}/>
             <Route
               path="/providers"
               exact

src/components/Register.js

@@ -9,9 +9,14 @@ const Register = ({setUser, location, history}) =>
     <Formik
       initialValues={{email: "", password: "", firstName: "", lastName: ""}}
       onSubmit={(values, {resetForm}) => {
-        UserService.getInstance().createUser(values)
+        const service = UserService.getInstance();
+        service.createUser(values)
           .then(() => {
-            history.push("/login");
+            service.login(values.email, values.password)
+              .then((user) => {
+                setUser(user);
+                history.push("/home");
+              })
           })
           .catch(err => {
             if (err instanceof HttpError && err.response.status === 409) {

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>;
 }