BCN-WDFT-Alex

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-scripts": "2.1.5"
+    "react-scripts": "^2.1.8"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,33 +1,7 @@
-.App {
+h1 {
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.buttons {
+  margin: 0 auto;
 }

src/App.js

@@ -1,25 +1,75 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import contacts from './data/contacts.json'
+import Contacts from './components/Contacts'
 import './App.css';
+import './contacts.css'
+
+/* const arrContacts = contacts.splice(0, 5); */
 
 class App extends Component {
+  //estado inicial
+  state = {
+    arrContacts: contacts.splice(0, 5),
+  }
+
+  renderContacts = () => {
+    return this.state.arrContacts.map((item, index) => {
+      return(
+        <Contacts key={`id-${index}`} name={item.name} 
+        image={item.pictureUrl} pop={item.popularity} id={index} onDelete={this.handleDelete}/>
+      )
+    })
+  }
+
+  handleRandomContact = () => {
+    const randomContact = contacts[Math.floor(Math.random()*contacts.length)];
+    /* console.log(randomContact) */
+    this.setState ({
+      arrContacts: [...this.state.arrContacts, randomContact]
+    }) 
+  }
+
+  handleSortName = () => {
+    //utilizar siempre spread operator para generar nuevo array y no mutar el que ya tenemos
+    let sortName = [...this.state.arrContacts].sort((a, b) => {
+      if(a.name < b.name){
+        return -1;
+      } if(a.name > b.name){
+        return 1;
+      } return 0;
+    })
+    this.setState ({
+      arrContacts: sortName
+    })
+  }
+
+  handleSortPop = () => {
+    let sortPop = [...this.state.arrContacts].sort((a, b) => {
+      return b.popularity - a.popularity;
+    })
+    this.setState ({
+      arrContacts: sortPop
+    }) 
+  }
+
+  handleDelete = (id) => {
+    const arrContacts = [...this.state.arrContacts]
+    arrContacts.splice(id, 1)
+    this.setState({
+      arrContacts
+    })
+  }
+
   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>
+        <div className="buttons">
+          <button onClick={this.handleRandomContact}>Add Random Contact</button>
+          <button onClick={this.handleSortName}>Sort by name</button>
+          <button onClick={this.handleSortPop}>Sort by popularity</button>
+        </div>
+        {this.renderContacts()}
       </div>
     );
   }

src/components/Contacts.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import '../contacts.css'
+
+class contact extends Component {
+
+  render() {
+    return (
+      <section className="contacts">
+
+          <article className="image">
+            <img src={process.env.PUBLIC_URL + `${this.props.image}`} alt="images" />
+          </article>
+          <p>{this.props.name}</p>
+          <p>{this.props.pop}</p>
+          <button onClick={() => this.props.onDelete(this.props.id)}>Delete</button>
+
+      </section>
+    )
+  }
+}
+
+export default contact;

src/contacts.css

@@ -0,0 +1,11 @@
+.contacts {
+  margin: 4% 10%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.image img{
+  width: 50px;
+  height: auto;
+}