From b90d3a121f36d149e504a7586dcee2fdfad80ead Mon Sep 17 00:00:00 2001
From: gusbe <gusbertolo@gmail.com>
Date: Tue, 14 May 2019 23:53:46 +0200
Subject: [PATCH 1/2] Iteration 1

---
 src/App.css                   | 42 +++++++++++++++--------------------
 src/App.js                    | 18 +++------------
 src/components/ContactList.js | 41 ++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 39 deletions(-)
 create mode 100644 src/components/ContactList.js

diff --git a/src/App.css b/src/App.css
index b41d297ca..456d3f762 100755
--- a/src/App.css
+++ b/src/App.css
@@ -1,33 +1,27 @@
-.App {
-  text-align: center;
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+
+h1 {
+  font-size: 60px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+table {
+  width: 700px;
+}
+
+th {
+  font-size: 30px;
+  font-weight: 800;
 }
 
-.App-link {
-  color: #61dafb;
+td{
+  font-size: 30px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+td img{
+  width: 100px;
 }
diff --git a/src/App.js b/src/App.js
index 7e261ca47..e75d0a567 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import contacts from './data/contacts.json'
+import ContactList from './components/ContactList'
 import './App.css';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <ContactList contacts={contacts} />
       </div>
     );
   }
diff --git a/src/components/ContactList.js b/src/components/ContactList.js
new file mode 100644
index 000000000..7d854cf44
--- /dev/null
+++ b/src/components/ContactList.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+
+class ContactList extends Component {
+
+  constructor(props){
+    super();
+    this.state = {
+      contacts: props.contacts.slice(0,5)
+    }
+  }
+
+  render() {
+
+    return(
+      
+      <div className="main">
+        <h1>IronContacts</h1>
+        <table>
+          <tr>
+            <th>Picture</th>
+            <th>Name</th> 
+            <th>Popularity</th>
+          </tr>
+          {
+          this.state.contacts.map( (oneContact) => {
+              return (
+                <tr>
+                  <td><img src={oneContact.pictureUrl} alt={oneContact.name}/></td>
+                  <td>{oneContact.name}</td>
+                  <td>{oneContact.popularity}</td>
+                </tr>
+              ); 
+            })
+          }
+        </table>
+      </div>
+    );
+  }
+}
+
+export default ContactList;
\ No newline at end of file

From 518091e84ebeb8b4c5d6a1c4512603ae71d33126 Mon Sep 17 00:00:00 2001
From: gusbe <gusbertolo@gmail.com>
Date: Wed, 15 May 2019 00:24:49 +0200
Subject: [PATCH 2/2] Iteration 2

---
 src/App.css                    |  9 ++++++++-
 src/components/ContactList.js  | 15 +++++++++++++--
 src/components/RandomButton.js | 13 +++++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 src/components/RandomButton.js

diff --git a/src/App.css b/src/App.css
index 456d3f762..75f85ca3c 100755
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,7 @@
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  margin-left: 300px;
 }
 
 
@@ -9,6 +9,13 @@ h1 {
   font-size: 60px;
 }
 
+.RandomButton {
+  padding: 20px 35px;
+  background-color: white;
+  font-size: 20px;
+  margin: 30px 0px;
+}
+
 table {
   width: 700px;
 }
diff --git a/src/components/ContactList.js b/src/components/ContactList.js
index 7d854cf44..4b20fe371 100644
--- a/src/components/ContactList.js
+++ b/src/components/ContactList.js
@@ -1,20 +1,31 @@
 import React, { Component } from 'react';
+import RandomButton from './RandomButton';
 
 class ContactList extends Component {
 
   constructor(props){
     super();
     this.state = {
-      contacts: props.contacts.slice(0,5)
+      Contacts: props.contacts,
+      contactsShowed: props.contacts.slice(0,5)
     }
   }
 
+  addRandomActor = () => {
+    let contactsShowedCopy = this.state.contactsShowed;
+    let index = Math.floor(Math.random() * (this.state.Contacts.length - 4) + 4);
+    contactsShowedCopy.push(this.state.Contacts[index]);
+    this.state.Contacts.splice(index,1);
+    this.setState( { contactsShowed: contactsShowedCopy } );
+  }
+
   render() {
 
     return(
       
       <div className="main">
         <h1>IronContacts</h1>
+        <RandomButton clickToAddRandom={ () => this.addRandomActor()} />
         <table>
           <tr>
             <th>Picture</th>
@@ -22,7 +33,7 @@ class ContactList extends Component {
             <th>Popularity</th>
           </tr>
           {
-          this.state.contacts.map( (oneContact) => {
+          this.state.contactsShowed.map( (oneContact) => {
               return (
                 <tr>
                   <td><img src={oneContact.pictureUrl} alt={oneContact.name}/></td>
diff --git a/src/components/RandomButton.js b/src/components/RandomButton.js
new file mode 100644
index 000000000..3e0e2342e
--- /dev/null
+++ b/src/components/RandomButton.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+ const RandomButton = (props) => {
+
+    return(
+      <div>
+        <button className="RandomButton" onClick={props.clickToAddRandom}>Random actor!</button>
+      </div>
+      
+    );
+  }
+
+export default RandomButton;
\ No newline at end of file