BCN 04/19 - Gus

src/App.css

@@ -1,33 +1,34 @@
-.App {
-  text-align: center;
+.main {
+  display: flex;
+  flex-direction: column;
+  margin-left: 300px;
 }
 
-.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;
+.RandomButton {
+  padding: 20px 35px;
+  background-color: white;
+  font-size: 20px;
+  margin: 30px 0px;
+}
+
+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;
 }

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>
     );
   }

src/components/ContactList.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import RandomButton from './RandomButton';
+
+class ContactList extends Component {
+
+  constructor(props){
+    super();
+    this.state = {
+      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>
+            <th>Name</th> 
+            <th>Popularity</th>
+          </tr>
+          {
+          this.state.contactsShowed.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;

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;