Changed to show error and create button

Author: marcodearaujo

app/components/Area/List/Area.js

@@ -13,6 +13,8 @@ class Area extends React.Component
             areas : null,
             error : ''
         };
+        this.showError = this.showError.bind(this);
+        this.listAreas = this.listAreas.bind(this);
         this.getAreas();
     }
 
@@ -27,15 +29,11 @@ class Area extends React.Component
         });
     }
 
-    render() {
+    listAreas() {
         if (this.state.error) {
-            return (<Error error={this.state.error} />);
-        }
-        if (!this.state.areas) {
-            return <div>Loading...</div>;
+            return '';
         }
-        const areaList = this.state.areas.map((area, key) => {
-            let line = ((key % 2) ? 'is-success' : 'is-info');
+        return this.state.areas.map((area, key) => {
             return (
                 <tr key={key}>
                     <td>
@@ -44,12 +42,26 @@ class Area extends React.Component
                 </tr>
             );
         });
+    }
+
+    showError() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        return '';
+    }
+
+    render() {
+        if (!this.state.areas && !this.state.error) {
+            return <div>Loading...</div>;
+        }
 
         return (
             <section className="">
                 <div className="container hello">
                     <div className="level header">
                         <div className="level-left">
+                            { this.showError() }
                             <h2 className="title is-2">Areas</h2>
                         </div>
                         <div className="level-right">
@@ -63,7 +75,7 @@ class Area extends React.Component
                     </div>
                     <table className="table">
                         <tbody>
-                            { areaList }
+                            { this.listAreas() }
                         </tbody>
                     </table>
                 </div>

tests/List.Area.test.js

@@ -35,7 +35,7 @@ describe('Test Area', () => {
         setTimeout(() => {
             try {
                 component.update();
-                expect(component.render().text()).toEqual('Area Not Found');
+                expect(component.render().find('.is-danger').text()).toEqual('Area Not Found');
                 done();
             } catch (e) {
                 console.log(e);
@@ -62,7 +62,7 @@ describe('Test Area', () => {
         setTimeout(() => {
             try {
                 component.update();
-                expect(component.render().text()).toEqual('Error Found: Trying get area');
+                expect(component.render().find('.is-danger').text()).toEqual('Error Found: Trying get area');
                 done();
             } catch (e) {
                 console.log(e);