Convert class-based components to function-based

.gitattributes

@@ -0,0 +1,3 @@
+*.js    eol=lf
+*.jsx   eol=lf
+*.json  eol=lf

src/.eslintrc

@@ -1,5 +1,5 @@
-{
-  "env": {
-    "jest": true
-  }
-}
+{
+  "env": {
+    "jest": true
+  }
+}

src/components/alert.js

@@ -1,40 +1,36 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment } from 'react'
 
-export default class Alert extends Component {
-  constructor(props) {
-    super(props);
-    const reservedKey = ['closable', 'children', 'collpasible'];
-    let classes = [];
-    Object.keys(props).forEach(key => {
-      if (!reservedKey.includes(key)) {
-        classes.push(key);
-      }
-    });
+export default function Alert(props) {
 
-    this.state = { props, classNames: classes.join(' '), shown: true, collapsed: false };
-    this.closeAlert = this.closeAlert.bind(this);
-    this.collapseAlert = this.collapseAlert.bind(this);
-  }
+  const reservedKey = ['closable', 'children', 'collapsible'];
+  let classes = []
+  Object.keys(props).forEach(key => {
+    if(!reservedKey.includes(key)) {
+      classes.push(key);
+    }
+  });
+  const [collapsed, setCollapsed] = React.useState(false);
+  const [shown, setShown] = React.useState(true);
+  const [classNames, setClassNames] = React.useState(classes.join(' '));
 
-  closeAlert() {
-    this.setState({shown:false})
+  function closeAlert() {
+    setShown(false);
   }
-  collapseAlert() {
-    this.setState({collapsed:!this.state.collapsed})
+
+  function collapseAlert() {
+    setCollapsed(prev => !prev);
   }
-  render() {
-    return (
-      <Fragment>
-        <div>
-        {this.state.shown ?
-          <div className={`alert ${this.state.classNames} ${ this.state.collapsed ? 'collapsed':''}`}>
-            {this.props.closable ? <span onClick={this.closeAlert} className="action closable">x</span> : null}
-            {this.props.collapsible ? <span onClick={this.collapseAlert} className="action collapsible"></span> : null}
+
+	return (
+		<Fragment>
+			<div>
+        {shown ? 
+          <div className={`alert ${classNames} ${ collapsed ? 'collapsed' : '' } `}>
+            {props.closable ? <span onClick={closeAlert} className="action closable">x</span> : null}
+            {props.collapsible ? <span onClick={collapseAlert} className="action collapsible"></span> : null}
 
-            <span className="content"> {this.props.children}</span>
-            </div>
-
-          : null}
+            <span className="content"> {props.children}</span>
+          </div> : null }
           <style jsx="true">{`
         .alert > .action {
           font-size: 12px;
@@ -106,8 +102,7 @@ export default class Alert extends Component {
           }
 
         `}</style>
-       </div>
-      </Fragment>
-    );
-  }
+      </div>
+		</Fragment>
+	)
 }

src/components/breadcrumb.js

@@ -1,21 +1,17 @@
-import React, { Component } from 'react';
-export default class Breadcrumb extends Component {
-  constructor(props) {
-    super(props);
-  }
+import React from 'react';
+export default function Breadcrumb(props) {
 
-  render() {
-    return this.props.path ? (
-      <div>
-        <small>
-          Voce está em <b>{this.props.path}</b>
-        </small>
-        <style jsx="true">{`
-          small {
-            color: #0b0b0b;
-          }
-        `}</style>
-      </div>
-    ) : null;
-  }
+  return props.path ? (
+    <div>
+      <small>
+        Voce está em <b>{props.path}</b>
+      </small>
+      <style jsx="true">{`
+        small {
+          color: #0b0b0b;
+        }
+      `}</style>
+    </div>
+  ) : null;
+
 }

src/components/button.js

@@ -1,64 +1,61 @@
-import React, { Component } from 'react'
-export default class Button extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { disabled: false };
-    this.callOnClick = this.callOnClick.bind(this);
-  }
-  componentWillReceiveProps(updatedProps) {
-    if (updatedProps.disabled != this.state.disabled) {
-      this.setState({ disabled: updatedProps.disabled });
+import React from 'react'
+export default function Button(props) {
+  const [disabled, setDisabled] = React.useState(false);
+
+  React.useEffect(() => {
+    setDisabled(props.disabled);
+  }, [props.disabled]);
+
+  function callOnClick() {
+    if (props.onClick) {
+      props.onClick(props.data);
     }
   }
-  callOnClick() {
-    if (this.props.onClick) this.props.onClick(this.props.data);
-  }
 
-  render() {
-    return (
-      <button
-        type={this.props.type}
-        className={this.props.danger ? "danger" : "botao-primario"}
-        onClick={this.callOnClick}
-        disabled={this.state.disabled}
-        style={this.props.style}
-        data={this.props.data}
-      >
-        {this.props.title}
+  return (
+    <button
+      type={props.type}
+      className={props.danger ? "danger" : "botao-primario"}
+      onClick={callOnClick}
+      disabled={disabled}
+      style={props.style}
+      data={props.data}
+    >
+      {props.title}
 
-        <style jsx="true">{`
-          button {
-            color: black;
-            background: var(--guildatech-color-primary);
-            border-radius: 80px;
-            padding: 10px 20px;
-            border: none;
-            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
-            border: 2px solid var(--guildatech-color-primary);
-            cursor: pointer;
-            transition: all 300ms ease;
-          }
-          button.danger {
-            background: var(--guildatech-color-red);
-            border: 2px solid var(--guildatech-color-red);
-            font-weight: 900;
-            color: white;
+      <style jsx="true">{`
+        button {
+          color: black;
+          background: var(--guildatech-color-primary);
+          border-radius: 80px;
+          padding: 10px 20px;
+          border: none;
+          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
+          border: 2px solid var(--guildatech-color-primary);
+          cursor: pointer;
+          transition: all 300ms ease;
+        }
+        button.danger {
+          background: var(--guildatech-color-red);
+          border: 2px solid var(--guildatech-color-red);
+          font-weight: 900;
+          color: white;
+
+        }
+        button[disabled] {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        button:hover {
+          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
+          border: 2px solid #d1a423;
+        }
 
-          }
-          button[disabled] {
-            opacity: 0.6;
-            cursor: not-allowed;
-          }
-          button:hover {
-            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
-            border: 2px solid #d1a423;
-          }
-
-          button.danger:hover {
-            border-color: white !important
-          }
-        `}</style>
-      </button>
-    );
-  }
+        button.danger:hover {
+          border-color: white !important
+        }
+      `}</style>
+    </button>
+  );
+
 }