improvement: add link in the Card component

src/components/Card.js

@@ -6,6 +6,8 @@ import {
   CardBody
 } from 'reactstrap';
 
+import { Link } from 'react-router-dom';
+
 const style = {
   borderRadius: 10
 };
@@ -23,31 +25,40 @@ class Card extends Component {
 
     if (this.props.bodyAlign) {
       bodyAlign = `text-${this.props.bodyAlign}`;
-    } 
+    }
 
     if (this.props.headAlign) {
       headAlign = `text-${this.props.headAlign}`;
     }
 
     return (
-        <CardBootstrap 
-          className={`${bodyAlign} shadow-sm p-3 mb-5 bg-white`} 
-          style={style}
-        >
-          <CardBody>
-            <CardTitle>
-              <h5 className={headAlign}>
-                {this.props.title}
-              </h5>
-            </CardTitle>
-            <CardText>
-              {this.props.subtitle}
-            </CardText>
-            <div>
-              {this.props.children}
-            </div>
-          </CardBody>
-        </CardBootstrap>
+      <CardBootstrap
+        className={`${bodyAlign} shadow-sm p-3 mb-5 bg-white`}
+        style={style}
+      >
+        <CardBody>
+          <CardTitle>
+            <h5 className={headAlign}>
+              {this.props.title}
+            </h5>
+          </CardTitle>
+          <CardText>
+            {this.props.subtitle}
+          </CardText>
+          <div>
+            {this.props.children}
+          </div>
+          {
+            this.props.footerLink && (
+              <div className={`text-${this.props.footerLink.align || 'center'}`}>
+                <Link to={this.props.footerLink.path}>
+                  {this.props.footerLink.name}
+                </Link>
+              </div>)
+          }
+
+        </CardBody>
+      </CardBootstrap>
     );
   }
 }

src/containers/CreateTicket/CreateTicket.js

@@ -110,7 +110,10 @@ class CreateTicket extends Component {
   render() {
     if (this.state.ticketId) {
       return (
-        <Card title="Ticket Created">
+        <Card 
+          title="Ticket Created"
+          footerLink={{path:"/", name:"Back to home"}}
+        >
           <p>
             {`Ticket ID: ${this.state.ticketId}`}
           </p>
@@ -118,7 +121,10 @@ class CreateTicket extends Component {
       );
     } else if (this.state.error) {
       return (
-        <Card title="Error">
+        <Card 
+          title="Error"
+          footerLink={{path:"/", name:"Back to home"}}
+        >
           <p>{this.state.error}</p>
         </Card>
       );
@@ -127,6 +133,7 @@ class CreateTicket extends Component {
     return (
       <Card
         title="Create Ticket"
+        footerLink={{path:"/", name:"Back to home"}}
       >
         <Form onSubmit={this.handleSubmit}>
           <Row form>
@@ -252,9 +259,6 @@ class CreateTicket extends Component {
               <FormGroup>
                 <Button>Open Ticket</Button>
               </FormGroup>
-              <Link to="/">
-                Back to home
-              </Link>
             </Col>
           </Row>
         </Form>

src/containers/PageNotFound.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
 import Card from '../components/Card';
 
 class PageNotFound extends Component {
@@ -14,9 +13,9 @@ class PageNotFound extends Component {
       <div>
         <Card 
           title="404 - Page not found"
+          footerLink={{path:"/", name:"Back to home"}}
         >
           <p>The page is not found</p>
-          <Link to="/">Back to home</Link>
         </Card>
       </div>
     );