Using table

Author: marcodearaujo

app/components/Client/Client.js

@@ -5,8 +5,6 @@ import { Link } from 'react-router'
 import ClientService from 'services/Client'
 import Error from 'components/Error/Error'
 
-import btn from 'components/Client/styles.css'
-
 class Client extends React.Component
 {
     constructor(props) {
@@ -39,67 +37,46 @@ class Client extends React.Component
         const clientList = this.state.clients.map((client, key) => {
             let line = ((key % 2) ? 'is-success' : 'is-info');
             return (
-                <div className={`columns notification ${line}`} key={key}>
-                        <div className="column">
+                <tr key={key}>
+                        <td>
                             { client.name }
-                        </div>
-                        <div className="column">
-                            { client.address }
-                        </div>
-                        <div className="column">
-                            { client.city }
-                        </div>
-                        <div className="column">
-                            <Link to={ `#` }
-                                className="button is-info is-button-block"
-                            >
-                                <span className="icon">
-                                    <i className="fa fa-check"></i>
-                                </span>
-                                <span>Visited</span>
+                        </td>
+                        <td>
+                            { client.address } - { client.city }
+                        </td>
+                        <td className="is-icon">
+                            <Link to={ `#` } >
+                                <i className="fa fa-address-card"></i>
                             </Link>
-                        </div>
+                        </td>
 
-                        <div className="column">
-                            <Link to={ `#` }
-                                className="button is-info is-button-block"
-                            >
-                                <span className="icon">
-                                    <i className="fa fa-calendar"></i>
-                                </span>
-                                <span>Schedule</span>
+                        <td className="is-icon">
+                            <Link to={ `#` } >
+                                <i className="fa fa-check"></i>
                             </Link>
-                        </div>
+                        </td>
 
-                        <div className="column">
-                            <Link to={ `#` }
-                                className="button is-info is-button-block"
-                            >
-                                <span className="icon">
-                                    <i className="fa fa-pencil"></i>
-                                </span>
-                                <span>Update</span>
+                        <td className="is-icon">
+                            <Link to={ `#` } >
+                                <i className="fa fa-calendar"></i>
                             </Link>
-                        </div>
+                        </td>
 
-                        <div className="column">
-                            <Link to={ `#` }
-                                className="button is-danger is-button-block"
-                            >
-                                <span className="icon">
-                                    <i className="fa fa-close"></i>
-                                </span>
-                                <span>Delete</span>
+                        <td className="is-icon">
+                            <Link to={ `#` } >
+                                <i className="fa fa-close"></i>
                             </Link>
-                        </div>
-                </div>
+                        </td>
+                </tr>
             );
         });
 
         return (
-                <div>
-                    { clientList }
-                </div>
+                <table className="table">
+                    <tbody>
+                        { clientList }
+                    </tbody>
+                </table>
         );
     }
 }

app/components/Client/styles.css

@@ -6,7 +6,7 @@
   "dependencies": {
     "axios": "^0.14.0",
     "bulma": "^0.2.1",
-    "font-awesome": "^4.6.3",
+    "font-awesome": "^4.7.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-router": "^2.8.1"

package.json

@@ -132,9 +132,8 @@ describe('Test Client', () => {
 
         Promise.all(promises).then(() => {
             component.update();
-            expect(component.find('.message-header').at(0).text()).toEqual('Jon Snow');
-            expect(component.find('.message-body > address').at(0).text()).toEqual('7 Street');
-            expect(component.find('.message-body > city').at(0).text()).toEqual('Winterfell');
+            expect(component.find('tbody td').at(0).text()).toEqual('Jon Snow');
+            expect(component.find('tbody td').at(1).text()).toEqual('7 Street - Winterfell');
             done();
         }).catch((error) => {
             console.log(error);