refactor: Card component

src/components/Card.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   Card as CardBootstrap,
   CardTitle,
@@ -16,23 +16,16 @@ const styleCardTitle = {
   fontWeight: '600'
 }
 
-class Card extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {};
-  }
-
-  render() {
+const Card = (props) => {
   let bodyAlign;
   let headAlign;
 
-    if (this.props.bodyAlign) {
-      bodyAlign = `text-${this.props.bodyAlign}`;
+  if (props.bodyAlign) {
+    bodyAlign = `text-${props.bodyAlign}`;
   }
 
-    if (this.props.headAlign) {
-      headAlign = `text-${this.props.headAlign}`;
+  if (props.headAlign) {
+    headAlign = `text-${props.headAlign}`;
   }
 
   return (
@@ -43,20 +36,20 @@ class Card extends Component {
       <CardBody>
         <CardTitle className={styleCardTitle}>
           <h5 style={styleCardTitle} className={headAlign}>
-              {this.props.title}
+            {props.title}
           </h5>
         </CardTitle>
         <CardText>
-            {this.props.subtitle}
+          {props.subtitle}
         </CardText>
         <div>
-            {this.props.children}
+          {props.children}
         </div>
         {
-            this.props.footerLink && (
-              <div className={`text-${this.props.footerLink.align || 'center'}`}>
-                <Link to={this.props.footerLink.path}>
-                  {this.props.footerLink.name}
+          props.footerLink && (
+            <div className={`text-${props.footerLink.align || 'center'}`}>
+              <Link to={props.footerLink.path}>
+                {props.footerLink.name}
               </Link>
             </div>)
         }
@@ -64,7 +57,6 @@ class Card extends Component {
       </CardBody>
     </CardBootstrap>
   );
-  }
-}
+};
 
 export default Card;