From e73723f122529b7e6592a472c00ae17b4979a705 Mon Sep 17 00:00:00 2001
From: Allyn Alda <Teddy@Om.local>
Date: Wed, 15 May 2019 09:17:46 +0200
Subject: [PATCH 1/3] some iterations

---
 src/App.js                    | 43 +++++++++++++++++++++++------------
 src/components/ContactList.js | 17 ++++++++++++++
 2 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 src/components/ContactList.js

diff --git a/src/App.js b/src/App.js
index 7e261ca47..73df2d009 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,40 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json';
+import ContactList from './components/ContactList';
+
 
 class App extends Component {
+  state = {
+    arrayofContacts: contacts,
+    contacts: contacts.splice(0, 5)
+    }
+
+  addRandomContact = () => {
+    const numberContact = this.state.arrayofContacts.length;
+    const num = Math.floor(Math.random() * numberContact);
+    const newContact = this.state.arrayofContacts[num];
+    const newCon = [...this.state.contacts, newContact]
+
+    this.setState({contacts: newCon})
+  }
+
   render() {
+
+    const { contacts } = this.state;
+
     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>
+
+        <button onClick={this.addRandomContact}>New Contact</button>
+        {
+          contacts.map( (contacts) => {
+              return <ContactList contacts={contacts} />
+          })
+        }
+        
       </div>
     );
   }
diff --git a/src/components/ContactList.js b/src/components/ContactList.js
new file mode 100644
index 000000000..1dba209f9
--- /dev/null
+++ b/src/components/ContactList.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+export default class ContactList extends Component {
+
+
+    render() {
+    
+        const { name, pictureUrl, popularity } = this.props.contacts;
+    return (
+      <li>
+        <img src={pictureUrl}></img>
+        <h1>{name}</h1>
+        <h2>{popularity}</h2>
+      </li>
+    )
+  }
+}

From e033529ebcea98155758b653f3bf46fe6e5b3378 Mon Sep 17 00:00:00 2001
From: Allyn Alda <Teddy@Om.local>
Date: Wed, 15 May 2019 09:39:19 +0200
Subject: [PATCH 2/3] second commit

---
 src/App.js                    | 18 +++++++++++++++++-
 src/components/ContactList.js |  2 ++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 73df2d009..7e428d718 100755
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,8 @@ import ContactList from './components/ContactList';
 class App extends Component {
   state = {
     arrayofContacts: contacts,
-    contacts: contacts.splice(0, 5)
+    contacts: contacts.splice(0, 5),
+   // name: contacts.name
     }
 
   addRandomContact = () => {
@@ -20,6 +21,20 @@ class App extends Component {
     this.setState({contacts: newCon})
   }
 
+  sortedContacts = () => {
+     const sorted = this.state.contacts.sort( (a, b) => {
+      if (a.name > b.name) {
+        return 1;
+      }
+      if (a.name < b.name) {
+        return -1;
+      }
+      // a must be equal to b
+      return 0;
+     })
+     this.setState({contacts: sorted})
+  }
+
   render() {
 
     const { contacts } = this.state;
@@ -29,6 +44,7 @@ class App extends Component {
       <div className="App">
 
         <button onClick={this.addRandomContact}>New Contact</button>
+        <button onClick={this.sortedContacts}>Sort Contacts</button>
         {
           contacts.map( (contacts) => {
               return <ContactList contacts={contacts} />
diff --git a/src/components/ContactList.js b/src/components/ContactList.js
index 1dba209f9..d4285297f 100644
--- a/src/components/ContactList.js
+++ b/src/components/ContactList.js
@@ -7,11 +7,13 @@ export default class ContactList extends Component {
     
         const { name, pictureUrl, popularity } = this.props.contacts;
     return (
+    <ul>
       <li>
         <img src={pictureUrl}></img>
         <h1>{name}</h1>
         <h2>{popularity}</h2>
       </li>
+    </ul>
     )
   }
 }

From 197a17442699ef25fa15a9e7aef66b22af09ffec Mon Sep 17 00:00:00 2001
From: Allyn Alda <Teddy@Om.local>
Date: Sat, 18 May 2019 14:11:46 +0200
Subject: [PATCH 3/3] done

---
 src/App.css                   |  5 +++++
 src/App.js                    | 18 +++++++++++++++---
 src/components/ContactList.js |  4 ++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index b41d297ca..ceb100cb2 100755
--- a/src/App.css
+++ b/src/App.css
@@ -31,3 +31,8 @@
     transform: rotate(360deg);
   }
 }
+
+img {
+  width: 200px;
+  height: auto;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 7e428d718..313cd8173 100755
--- a/src/App.js
+++ b/src/App.js
@@ -35,6 +35,17 @@ class App extends Component {
      this.setState({contacts: sorted})
   }
 
+sortByPopularity = () => {
+  const sortedbyPop = this.state.contacts.sort( (a, b) => {
+    return b.popularity - a.popularity;
+  })
+  this.setState({contacts: sortedbyPop})
+}
+
+deleteContact = (index) => {
+  this.state.contacts.splice(index, 1)
+  this.setState({contacts: [...this.state.contacts]})
+}
   render() {
 
     const { contacts } = this.state;
@@ -43,11 +54,12 @@ class App extends Component {
 
       <div className="App">
 
-        <button onClick={this.addRandomContact}>New Contact</button>
+        <button onClick={this.addRandomContact}>Add New Contact</button>
         <button onClick={this.sortedContacts}>Sort Contacts</button>
+        <button onClick={this.sortByPopularity}>Sort Popularity</button>
         {
-          contacts.map( (contacts) => {
-              return <ContactList contacts={contacts} />
+          contacts.map( (contacts, index) => {
+              return <ContactList contacts={contacts} key={index} delete={this.deleteContact} />
           })
         }
         
diff --git a/src/components/ContactList.js b/src/components/ContactList.js
index d4285297f..5e3c04264 100644
--- a/src/components/ContactList.js
+++ b/src/components/ContactList.js
@@ -2,6 +2,9 @@ import React, { Component } from 'react'
 
 export default class ContactList extends Component {
 
+handleDelete = (e) => {
+  this.props.delete(this.props.key);
+}
 
     render() {
     
@@ -13,6 +16,7 @@ export default class ContactList extends Component {
         <h1>{name}</h1>
         <h2>{popularity}</h2>
       </li>
+      <button onClick={this.handleDelete}>Delete contact</button>
     </ul>
     )
   }