From 0467db0eccee62e1ebebe38ca7bbbf66d8419ab5 Mon Sep 17 00:00:00 2001
From: noemi alonso <noemialonso@MacBook-Pro-de-noemi.local>
Date: Tue, 5 Nov 2019 17:41:33 +0100
Subject: [PATCH] done

---
 src/App.js    | 99 +++++++++++++++++++++++++++++++++++++++++++--------
 src/index.css | 40 +++++++++++++++++++++
 2 files changed, 124 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7e261ca47..12332af15 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,94 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json'
+
 
 class App extends Component {
+  constructor(){
+    super();
+    this.state = {
+        fiveContacts:contacts.slice(0,5)
+    }
+}
+
+  addRandomContact=()=>{
+    let randomContact=contacts[Math.floor(Math.random()*(contacts.length))]
+    const contactsCopy = [randomContact,...this.state.fiveContacts]
+    //contactsCopy.unshift(randomContact);
+    this.setState({
+        fiveContacts:contactsCopy
+    })
+    
+  }
+  sortAlphabetically=()=>{
+    const sortCopy = [...this.state.fiveContacts]
+    const newArr = sortCopy.sort((a,b)=> {
+      return a.name<b.name ? -1: a.name>b.name? 1: 0;
+    })
+    console.log(newArr)
+    this.setState({
+      fiveContacts:newArr
+  })
+  }
+
+  sortNumber=()=>{
+    const popularityCopy=[...this.state.fiveContacts]
+    const popularitySort = popularityCopy.sort((a,b)=> {
+      return a.popularity<b.popularity ? -1: a.popularity>b.popularity? 1: 0;
+    })
+    this.setState({
+      fiveContacts:popularitySort
+    })
+  }
+
+  deleteContact=(index)=>{
+    const deleteCopy=[...this.state.fiveContacts]
+    deleteCopy.splice(index,1)
+    this.setState({
+      fiveContacts:deleteCopy
+    })
+  }
+
   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.addRandomContact}>ADD RANDOM CONTACT</button>
+        <button className="btn"onClick={this.sortAlphabetically}>Sort Alphabetically</button>
+        <button className="btn"onClick={this.sortNumber}>Sort by popularity</button>
+        <table className="table">
+        <thead className="titols">
+           <tr >
+            <th>Picture</th>
+            <th>Name</th>
+            <th>Popularity</th>
+            <th> Action</th>
+          </tr>
+
+        </thead>
+        
+
+        <tbody>
+        {
+                this.state.fiveContacts.map((oneContact,index)=>{
+                return <tr key={index} className="item-contact">
+               <td> <img  width='100px'  src={oneContact.pictureUrl} alt=""/> </td>
+               <td> <p> {oneContact.name}</p></td>
+               <td> <p> {oneContact.popularity}</p></td>
+               <td> <button className="delete-btn" onClick={this.deleteContact}>Delete</button> </td>
+               </tr>
+                }
+               )
+            }
+        </tbody>
+            
+           
+            
+          
+
+
+        </table>
+        
       </div>
     );
   }
diff --git a/src/index.css b/src/index.css
index cee5f348f..962fcca1b 100755
--- a/src/index.css
+++ b/src/index.css
@@ -12,3 +12,43 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+
+.table{
+  width: 80%;
+  margin: 20px auto;
+  border: 5px solid salmon;
+  padding: 40px;
+}
+
+.titols{
+margin:20px auto;
+}
+
+.btn{
+  display: inline-block;
+  margin:0 40px;
+  width: auto;
+  background-color: coral;
+  padding:10px;
+  border-radius:2em;
+  box-sizing: border-box;
+  text-decoration:none;
+  color:rgb(5, 5, 5);
+  text-align:center;
+  }
+
+
+.delete-btn{
+  display: inline-block;
+  margin:0 40px;
+  width: 60%;
+  background-color: crimson;
+  padding:10px;
+  border-radius:2em;
+  box-sizing: border-box;
+  text-decoration:none;
+  color:rgb(5, 5, 5);
+  text-align:center;
+    
+}
\ No newline at end of file