[BCN-PT1118] Jorge de Juana

src/App.js

@@ -2,24 +2,63 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+import allContacts from './data/contacts.json';
+import ContactList from './components/contactList';
+import AddContact from './components/addContact';
+
 class App extends Component {
+
+  state = {
+    contacts: allContacts.slice(0,5),
+  }
+
+  handleClick = (e) => {
+    const random = allContacts[Math.floor(Math.random()*allContacts.length)];
+    this.setState({
+      contacts: [...this.state.contacts, random],
+    });
+  }
+
+  handleSort = (e) => {
+    const sorted = this.state.contacts.sort(function (a, b) {
+      if (a[e.target.id] > b[e.target.id]) {
+        return 1;
+      }
+      if (a[e.target.id] < b[e.target.id]) {
+        return -1;
+      }
+      // a must be equal to b
+      return 0;
+    });
+    this.setState({
+      contacts: sorted,
+    });
+  }
+
+  remove = (index) => {
+    this.state.contacts.splice(index, 1);
+    this.setState({
+      contacts: [...this.state.contacts],
+    });
+  }
+
+  add = (contact) => {
+    this.setState({
+      contacts: [...this.state.contacts, contact],
+    });
+  }
+
   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>
+        <AddContact new={this.add}/>
+        <p></p>
+        <button onClick={this.handleClick}>Add Random Contact</button>
+        <button id="name" onClick={this.handleSort}>Sort by name</button>
+        <button id="popularity" onClick={this.handleSort}>Sort by popularity</button>
+        <p></p>
+        <ContactList contacts={this.state.contacts} remove={this.remove}/>
       </div>
     );
   }

src/components/addContact.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+
+export default class addContact extends Component {
+
+  state = {
+    name: '',
+    pictureUrl: '',
+    popularity: '',
+  };
+
+  handleAdd = () => {
+    this.props.new(this.state);
+    this.setState({
+      name: '',
+      pictureUrl: '',
+      popularity: '',
+    })
+  }
+
+  handleInput = (e) => {
+    this.setState({
+      [e.target.name]: e.target.value,
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>New contact</h2>
+        <label>Name: </label>
+        <input name="name" onChange={this.handleInput}></input>
+        <label>PictureUrl: </label>
+        <input name="pictureUrl" onChange={this.handleInput}></input>
+        <label>Popularity: </label>
+        <input name="popularity" onChange={this.handleInput}></input>
+        <button onClick={this.handleAdd}>Add</button>
+      </div>
+    )
+  }
+}

src/components/contactList.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+
+const NewTr = ({contact, remove, index}) => {
+  return (
+    <tbody>
+      <tr>
+        <td><img src={contact.pictureUrl} height="42" width="42" alt={contact.name}></img></td>
+        <td>{contact.name}</td>
+        <td>{contact.popularity}</td>
+        <td><button onClick={()=>{ remove(index) }}>Delete</button></td>
+      </tr>
+    </tbody>
+  )
+}
+
+
+export default class contactList extends Component {
+  render() {
+    return (
+      <div>
+        <table>
+          <tbody>
+            <tr>
+              <th>Picture</th>
+              <th>Name</th>
+              <th>Popularity</th>
+              <th>Action</th>
+            </tr>
+          </tbody>
+          {this.props.contacts.map((element, index) => {
+            return <NewTr key={index} index={index} contact={element} remove={this.props.remove}/>
+          })}
+      </table>
+      </div>
+    )
+  }
+}