BCN-FT-JuliaCanas

src/App.css

@@ -31,3 +31,48 @@
     transform: rotate(360deg);
   }
 }
+
+
+.table {
+  margin: 20px auto;
+  border-spacing: 0;
+}
+
+.btn {
+  border: 0;
+  margin: 20px 10px;
+  padding: 10px 50px;
+  background-color: rgb(216, 181, 24);
+  border-radius: 50px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.btn:hover {
+  color: white;
+}
+
+th {
+  padding: 10px 0;
+  border-bottom: 2px solid rgb(216, 181, 24);
+}
+
+td {
+  padding: 10px 50px;
+  border-bottom: 1px solid rgb(197, 163, 14);
+}
+
+.btn-delete {
+  border: 0;
+  border: 2px solid rgb(197, 163, 14);
+  background-color: white;
+  border-radius: 50px;
+  padding: 10px 20px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.btn-delete:hover{
+  background-color: rgb(197, 163, 14);
+  color: white;
+}

src/App.js

@@ -1,28 +1,88 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json'
 
 class App extends Component {
-  render() {
+  state = {
+  constactsList: contacts.slice(0, 5)
+  }
+
+
+
+  randomContact = () => {
+    const copy = [...this.state.constactsList];
+    let newContact = contacts[Math.floor(Math.random() * (contacts.length))];
+    copy.unshift(newContact);
+    this.setState({
+      constactsList: copy
+    })
+  };
+
+  sortByName = () => {
+    const sortCopy = [...this.state.constactsList];
+    const newArr = sortCopy.sort((a, b) => {
+      return a.name<b.name ? -1: a.name>b.name? 1:0;
+    })
+
+    this.setState({
+      constactsList: newArr
+    })
+  }
+
+  sortByPopularity = () => {
+    const sortPop = [...this.state.constactsList];
+    const orderPop = sortPop.sort((a, b) => {
+      return a.popularity < b.popularity ? -1 : a.popularity > b.popularity ? 1 : 0;
+    })
+
+    this.setState({
+      constactsList: orderPop
+    })
+  }
+
+  deleteContact = (index) => {
+    const copyContact = [...this.state.constactsList];
+    copyContact.splice(index, 1);
+    this.setState({
+      constactsList: copyContact
+    })
+  }
+
+    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>
+        <button className='btn' onClick={this.randomContact}>Add random Contact</button>
+        <button className='btn'onClick={this.sortByName}>Sort by Name</button>
+        <button className='btn'onClick={this.sortByPopularity}>Sort by Popularity</button>
+        <table className='table'>
+          <thead>
+          <tr className='headers'>
+            <th>Picture</th>
+            <th>Name</th>
+            <th>Popularity</th>
+            <th>Action</th>
+          </tr>
+          </thead>
+          <tbody>
+          {
+            this.state.constactsList.map((oneContact, index) => {
+              return <tr className='row-table' key={index}> 
+              <td> <img width='80px' src={oneContact.pictureUrl} alt='' /> </td> 
+              <td> <p>{oneContact.name}</p> </td>
+              <td> <p>{oneContact.popularity}</p> </td>
+              <td> <button className='btn-delete' onClick={this.deleteContact}>Delete</button></td>
+              </tr>
+            })
+          }
+          </tbody>
+        </table>
       </div>
     );
   }
 }
 
 export default App;
+
+
+