BCN-FT-DanielDuque

src/App.css

@@ -31,3 +31,9 @@
     transform: rotate(360deg);
   }
 }
+
+img {
+  width: auto;
+  max-height: 300px;
+  border-radius: 5px;
+}

src/App.js

@@ -1,25 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import ContactList from './components/ContactList';
 
 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>
+      <h1>IronContacts</h1>
+        <ContactList />
       </div>
     );
   }

src/components/Contact.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Contact = ({ pictureUrl, name, popularity, deleteContact }) => {
+  return (
+    <tr>
+      <td><img src={pictureUrl} alt={name} /></td>
+      <td>{name}</td>
+      <td>{popularity}</td>
+      <td><button onClick={() => {deleteContact(name)}}>Delete</button></td>
+    </tr>
+  )
+}
+
+export default Contact;

src/components/ContactList.js

@@ -0,0 +1,83 @@
+import React, {
+  Component
+} from 'react';
+import contactsJSON from '../data/contacts.json';
+import Contact from './Contact';
+
+export default class ContactList extends Component {
+
+  constructor() {
+    super();
+    this.state = {
+      // Start with only 5 contacts
+      contacts: contactsJSON.slice(0, 5)
+    }
+  }
+
+  // Get a random contact
+  addRandom = () => {
+    let randomIndex = Math.floor((Math.random() * contactsJSON.length) + 0);
+    this.state.contacts.push(contactsJSON[randomIndex]);
+    this.setState({
+      contacts: this.state.contacts
+    })   
+  }
+
+  // Sort by name
+  sortName = () => {
+    this.setState({
+      contacts: this.state.contacts.sort((a, b) => a.name.localeCompare(b.name))
+    })
+  }
+
+  // Sort by popularity
+  sortPopularity = () => {
+    this.setState({
+      contacts: this.state.contacts.sort((a, b) => b.popularity - a.popularity)
+    })
+  }
+
+  // Delete contact
+  deleteContact = (name) => {
+    let newContacts = [...this.state.contacts];
+    this.setState({
+      contacts: newContacts.filter((contact) => {
+        return contact.name !== name
+      })
+    })
+    console.log('!')
+  }
+
+  render () {
+    return (
+      <div>
+        <button onClick={ () => this.addRandom() }>Add Random Contact</button>
+        <button onClick={ () => this.sortName() }>Sort by name</button>
+        <button onClick={ () => this.sortPopularity() }>Sort by popularity</button>
+        <table>
+          <thead>
+            <tr>
+              <th>Picture</th>
+              <th>Name</th>
+              <th>Popularity</th>
+              <th>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              this.state.contacts.map((contact, index) =>
+                <Contact
+                  key={index}
+                  pictureUrl={contact.pictureUrl}
+                  name={contact.name}
+                  popularity={contact.popularity}
+                  deleteContact={this.deleteContact}
+                />
+              )
+            }
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+}