Merge pull request #3 from marcoaraujojunior/develop

Using card instead table

Author: marcodearaujo

app/components/Client/Client.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CardStack, Card } from 'react-cardstack';
 
 import ClientService from 'services/Client';
 import Error from 'components/Error/Error'
@@ -8,7 +9,7 @@ class Client extends React.Component
     constructor(props) {
         super(props);
         this.state = {
-            clients : [],
+            clients : null,
             error : ''
         };
         this.getClients();
@@ -29,34 +30,36 @@ class Client extends React.Component
         if (this.state.error) {
             return (<Error error={this.state.error} />);
         }
+        if (!this.state.clients) {
+            return <div>Loading...</div>;
+        }
         const clientList = this.state.clients.map((client, key) => {
             return (
-                <tr key={key} >
-                    <td>{ client.name }</td>
-                    <td>{ client.address }</td>
-                    <td>{ client.city }</td>
-                    <td className="is-icon"> <a href="#"> <i className="fa fa-calendar"></i> </a> </td>
-                    <td className="is-icon"> <a href="#"> <i className="fa fa-search"></i>   </a> </td>
-                </tr>
+                <Card key={key}>
+                    <article className={`message ${((key % 2) ? 'is-success' : 'is-info')}`}>
+                        <div className="message-header">
+                            <strong>{ client.name }</strong>
+                        </div>
+                        <div className="message-body">
+                            <address>{ client.address }</address>
+                            <city><small>{ client.city }</small></city>
+                        </div>
+                    </article>
+                </Card>
             );
         });
 
         return (
             <div className="container hello">
-                <table className="table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Address</th>
-                            <th>City</th>
-                            <th></th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        { clientList }
-                    </tbody>
-                </table>
+                <CardStack
+                    height={100}
+                    width={1200}
+                    background='#00d1b2'
+                    hoverOffset={0}>
+
+                    { clientList }
+
+                </CardStack>
             </div>
         );
     }

package.json

@@ -29,6 +29,7 @@
     "npm-run-all": "^3.1.0",
     "path": "^0.12.7",
     "react-addons-test-utils": "^15.3.2",
+    "react-cardstack": "^0.1.1",
     "react-test-renderer": "^15.3.2",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",

tests/Client.test.js

@@ -97,7 +97,8 @@ describe('Test Client', () => {
         let response = {
             data: {
                 clients: [
-                    {name: 'Jon Snow', address: '7 Street', city: 'Winterfell'}
+                    {name: 'Jon Snow', address: '7 Street', city: 'Winterfell'},
+                    {name: 'Cotter Pyke', address: '0 Street', city: 'Castle Black'},
                 ]
             }
         };
@@ -131,9 +132,9 @@ describe('Test Client', () => {
 
         Promise.all(promises).then(() => {
             component.update();
-            expect(component.find('td').at(0).text()).toEqual('Jon Snow');
-            expect(component.find('td').at(1).text()).toEqual('7 Street');
-            expect(component.find('td').at(2).text()).toEqual('Winterfell');
+            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');
             done();
         }).catch((error) => {
             console.log(error);