BCN - WDFT - Marc

src/App.css

@@ -31,3 +31,31 @@
     transform: rotate(360deg);
   }
 }
+
+img {
+  width: 100px;
+  height: 150px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+h1 {
+  text-align: center;
+}
+.titles {
+  display: flex;
+  justify-content: space-around;
+  margin-left:15%;
+  margin-right: 15%;
+}
+
+ul {
+  margin-left:15%;
+  margin-right: 15%;
+  padding: 0;
+  display: flex;
+  justify-content: space-around;
+}

src/App.js

@@ -1,26 +1,76 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json'
+import Contact from './components/Contact'
+import Header from './components/Header'
+
+
 
 class App extends Component {
+
+  state = {
+    contactsArray: contacts.slice(0, 5)
+  }
+
+  addRandom = () => {
+    const randomContact = contacts[Math.floor(Math.random() * contacts.length)];
+    this.setState({
+      contactsArray: [...this.state.contactsArray, randomContact]
+    })
+  }
+
+  sortByName = () => {
+    this.setState({
+      contactsArray: this.state.contactsArray.sort(function (a, b) {
+        if (a.name < b.name) { return -1; }
+        if (a.name > b.name) { return 1; }
+        return 0;
+      })
+    })
+  }
+
+  sortByPopularity = () => {
+    this.setState({
+      contactsArray: this.state.contactsArray.sort(function (a, b) {
+        return b.popularity - a.popularity;
+      })
+    })
+  }
+
+  deleteContact = (contact) => {
+    let { contactsArray } = this.state
+    contactsArray.splice(contact, 1)
+    this.setState({
+      contactsArray
+    })
+  }
+
+  renderList() {
+    return this.state.contactsArray.map((contact, index) => {
+      return <Contact
+        pictureUrl={contact.pictureUrl}
+        name={contact.name}
+        popularity={contact.popularity}
+        key={`id${index}`}
+        index={index}
+        deleteHandler={this.deleteContact}
+      />
+
+    })
+  }
   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>
+      <div>
+        <h1>IronContacts</h1>
+        <button onClick={this.addRandom}>Add Random Contact</button>
+        <button onClick={this.sortByName}>Sort By Name</button>
+        <button onClick={this.sortByPopularity}>Sort By Popularity</button>
+        <Header />
+        <div className="container">
+          {this.renderList()}
+        </div>
       </div>
+
     );
   }
 }

src/components/Contact.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+class Contact extends Component {
+  render() {
+    const { pictureUrl, name, popularity, deleteHandler, index } = this.props;
+    return (
+      <ul>
+        <img src={pictureUrl} alt="img" />
+        <p>{name}</p>
+        <p>{popularity}</p>
+        <button onClick={() => deleteHandler(index)}>Delete</button>
+      </ul>
+    );
+  }
+}
+
+export default Contact;

src/components/Header.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+class Header extends Component {
+  render() {
+    return (
+      <div className="titles">
+        <h3>Picture</h3>
+        <h3>Name</h3>
+        <h3>Popularity</h3>
+        <h3>Action</h3>
+      </div>
+    );
+  }
+}
+
+export default Header;