refactors button to functional

src/client/components/controls/Button/index.js

@@ -1,64 +1,65 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import './index.scss';
 
-class Button extends Component {
-  constructor(props) {
-    super(props);
+const baseClass = 'btn';
 
-    let classes = this.props.className ? `btn ${this.props.className}` : 'btn';
+const Button = (props) => {
+  const {
+    className, type, size, icon, el, to, url, children, onClick,
+  } = props;
 
-    if (this.props.type) {
-      classes += ` btn-${this.props.type}`;
-    }
+  const classes = [
+    baseClass,
+    className && className,
+    type && `btn-${type}`,
+    size && `btn-${size}`,
+    icon && 'btn-icon',
+  ].filter(Boolean).join(' ');
 
-    if (this.props.size) {
-      classes += ` btn-${this.props.size}`;
-    }
-
-    if (this.props.icon) {
-      classes += ' btn-icon';
-    }
-
-    this.buttonProps = {
-      ...this.props,
-      className: classes,
-      onClick: this.props.onClick,
-      disabled: this.props.disabled,
-    };
+  function handleClick(event) {
+    event.preventDefault();
+    onClick();
   }
 
-  render() {
-    switch (this.props.el) {
-      case 'link':
-        return (
-          <Link
-            {...this.buttonProps}
-            to={this.props.to ? this.props.to : this.props.url}
-          >
-            {this.props.children}
-          </Link>
-        );
+  const buttonProps = {
+    ...props,
+    className: classes,
+    onClick: handleClick,
+  };
 
-      case 'anchor':
-        return (
-          <a
-            {...this.buttonProps}
-            href={this.props.url}
-          >
-            {this.props.children}
-          </a>
-        );
+  switch (el) {
+    case 'link':
+      return (
+        <Link
+          {...buttonProps}
+          to={to || url}
+        >
+          {children}
+        </Link>
+      );
 
-      default:
-        return (
-          <button {...this.buttonProps}>
-            {this.props.children}
-          </button>
-        );
-    }
+    case 'anchor':
+      return (
+        <a
+          {...buttonProps}
+          href={url}
+        >
+          {children}
+        </a>
+      );
+
+    default:
+      return (
+        <button
+          {...buttonProps}
+          type="button"
+        >
+          {children}
+        </button>
+      );
   }
-}
+};
 
 export default Button;